/*
Theme Name: Money CRM
Theme URI: https://zyrodigital.in
Author: Zyro Digital
Description: Animated money handling CRM with custom admin and staff login. White and blue premium design.
Version: 5.7
Text Domain: money-crm
*/
:root{--bg:#f2f6fd;--s1:#ffffff;--s2:#f6f9ff;--bd:#dbe5f7;--tx:#0b1f48;--mu:#62759d;--pri:#1f63e6;--pri2:#4d93ff;--em:#0e9f6e;--gd:#c07f00;--rd:#e0364f;--bl:#1f63e6;--r:16px;--sh:0 10px 30px -12px #1f63e640,0 2px 6px #1f63e610}
*{box-sizing:border-box}html{scroll-padding-top:70px}
body{margin:0;background:radial-gradient(900px 420px at 85% -10%,#dbe8ff,transparent 70%),var(--bg);color:var(--tx);font:15px/1.55 "Plus Jakarta Sans",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit}
.mu{color:var(--mu);font-size:13px}.i{color:var(--em)}.e{color:var(--rd)}.c{color:var(--bl)}.d{color:var(--gd)}
/* login */
.lg{min-height:100vh;display:grid;place-items:center;padding:20px;position:relative;overflow:hidden;background:linear-gradient(160deg,#f7faff,#e6efff)}
.aur{position:absolute;inset:-20%;background:radial-gradient(40% 40% at 20% 30%,#7fb0ff99,transparent 70%),radial-gradient(35% 35% at 80% 20%,#1f63e655,transparent 70%),radial-gradient(40% 40% at 60% 85%,#a9ccff99,transparent 70%);filter:blur(40px);animation:aur 16s ease-in-out infinite alternate}
@keyframes aur{to{transform:translate3d(4%,-3%,0) rotate(8deg) scale(1.15)}}
.coins i{position:absolute;bottom:-60px;left:var(--x);font-style:normal;font-size:26px;color:var(--pri);opacity:0;animation:fl var(--d) linear var(--s) infinite}
@keyframes fl{10%{opacity:.28}100%{transform:translateY(-110vh) rotate(360deg);opacity:0}}
.lc{position:relative;width:100%;max-width:400px;background:#ffffffe8;backdrop-filter:blur(18px);border:1px solid #ffffff;border-radius:24px;padding:34px 28px;box-shadow:0 30px 70px -20px #1f63e655,0 4px 14px #1f63e61a;animation:pop .7s cubic-bezier(.2,.9,.3,1.2) both}
@keyframes pop{from{opacity:0;transform:translateY(30px) scale(.94)}}
.lc h1{margin:14px 0 2px;font-size:26px;letter-spacing:-.3px}.lc p{margin:0 0 20px;color:var(--mu)}
.logo{width:58px;height:58px;border-radius:17px;display:grid;place-items:center;font-size:30px;font-weight:800;color:#fff;background:linear-gradient(135deg,var(--pri),var(--pri2));box-shadow:0 10px 24px -8px #1f63e688;animation:glow 3s ease-in-out infinite}
.logo.s{width:36px;height:36px;font-size:19px;border-radius:11px;animation:none}
@keyframes glow{50%{box-shadow:0 0 30px #4d93ff88}}
.lc label,.fm label{display:flex;flex-direction:column;gap:5px;font-size:12px;font-weight:600;color:var(--mu);margin-bottom:14px}
input,select,textarea{color:var(--tx);background:#fbfdff;border:1px solid var(--bd);border-radius:11px;padding:10px 12px;min-width:0;width:100%;transition:border-color .2s,box-shadow .2s,background .2s}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--pri);background:#fff;box-shadow:0 0 0 4px #1f63e61f}
input[type=checkbox]{width:18px;height:18px;min-height:0!important;padding:0;accent-color:var(--pri);flex:none}
.ck{flex-direction:row!important;align-items:flex-start;gap:10px!important;font-weight:500!important;font-size:13px!important;line-height:1.5;cursor:pointer}
.pw{position:relative;display:block}.pw input{padding-right:44px}.eye{position:absolute;right:4px;top:3px;background:none;border:0;color:var(--mu);font-size:17px;padding:8px;cursor:pointer;width:auto}
.btn,button.g,button.x{cursor:pointer;border-radius:11px;border:1px solid var(--pri);padding:10px 16px;transition:transform .15s,box-shadow .2s,background .2s}
.btn{background:linear-gradient(135deg,var(--pri),#3a85ff);color:#fff;font-weight:700;width:100%;position:relative;overflow:hidden;box-shadow:0 8px 20px -8px #1f63e699}
.btn:hover{transform:translateY(-1px);box-shadow:0 12px 26px -8px #1f63e6aa}.btn:active{transform:scale(.97)}
.btn.ld span{opacity:.4}.btn.ld::after{content:"";position:absolute;inset:0;margin:auto;width:20px;height:20px;border:3px solid #ffffff55;border-top-color:#fff;border-radius:50%;animation:sp .7s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
.btn.fit{width:auto}
button.g{background:#fff;color:var(--pri);font-weight:600}button.g:hover{background:#eef4ff}
button.x{padding:2px 9px;border-color:var(--bd);background:#fff;color:var(--rd);width:auto}
.err{min-height:20px;color:var(--rd);font-size:13px;margin-top:10px;text-align:center}.shake{animation:sh .4s}
@keyframes sh{25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}
button:focus-visible,a:focus-visible{outline:2px solid var(--pri2);outline-offset:2px}
/* app */
.hd{position:sticky;top:0;z-index:30;display:flex;justify-content:space-between;align-items:center;padding:10px 16px;background:#ffffffd9;backdrop-filter:blur(16px);border-bottom:1px solid var(--bd);box-shadow:0 4px 18px -10px #1f63e640;animation:dn .5s both}
@keyframes dn{from{transform:translateY(-100%)}}
.br{display:flex;align-items:center;gap:10px}.br b{letter-spacing:-.2px}.us{display:flex;align-items:center;gap:12px;font-size:13px}.us em{font-style:normal;background:#1f63e61a;color:var(--pri);border-radius:20px;padding:1px 9px;margin-left:4px;font-size:11px;font-weight:700}
.wrap{max-width:1080px;margin:0 auto;padding:14px 14px 40px}
.mn .wrap{max-width:none;padding:6px 28px 48px}
.top{position:sticky;top:10px;z-index:25;display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px;margin:0 0 12px;padding:14px 18px;border-radius:var(--r);background:linear-gradient(120deg,#1647c4,#2c7cf5 70%,#4d93ff);color:#fff;box-shadow:0 18px 36px -16px #1f63e6aa}
.top span{display:block;font-size:11px;opacity:.85}.top b{font-size:19px}.top small{display:block;font-size:11px;opacity:.8}

.card{background:var(--s1);border:1px solid var(--bd);border-radius:var(--r);padding:16px;margin:12px 0;box-shadow:var(--sh);animation:rise .55s cubic-bezier(.2,.8,.2,1) both}
main>.card:nth-child(2){animation-delay:.07s}main>.card:nth-child(3){animation-delay:.14s}main>.card:nth-child(4){animation-delay:.21s}main>.card:nth-child(5){animation-delay:.28s}main>.card:nth-child(n+6){animation-delay:.32s}
@keyframes rise{from{opacity:0;transform:translateY(18px)}}
h2{font-size:15px;margin:16px 0 8px;letter-spacing:-.1px}.card>h2:first-child{margin-top:0}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:end}.row>label{flex:1 1 150px;margin:0}
.fm label{margin-bottom:0}
.kp{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px}
.kp>div{background:var(--s2);border:1px solid var(--bd);border-left:4px solid var(--bd);border-radius:13px;padding:10px 12px;transition:transform .2s,box-shadow .2s}
.kp>div:hover{transform:translateY(-3px);box-shadow:0 12px 22px -14px #1f63e688}.kp b{display:block;font-size:21px}
.kp .i{border-left-color:var(--em)}.kp .e{border-left-color:var(--rd)}.kp .c{border-left-color:var(--bl)}.kp .a{border-left-color:var(--gd)}
.kp .i,.kp .e,.kp .c,.kp .a{color:inherit}
.den{display:grid;grid-template-columns:repeat(auto-fit,minmax(78px,1fr));gap:8px;margin-top:6px}
.sc{overflow-x:auto}table{border-collapse:collapse;width:100%;font-size:14px}
th,td{padding:8px 10px;border-bottom:1px solid var(--bd);text-align:right;white-space:nowrap}
th:first-child,td:first-child{text-align:left}th{color:var(--mu);font-size:12px;font-weight:700}tr:hover td{background:#f1f6ff}
.hb{display:grid;grid-template-columns:minmax(90px,150px) 1fr 84px;gap:10px;align-items:center;margin:6px 0;font-size:13px}
.hb i{height:10px;border-radius:6px;background:linear-gradient(90deg,var(--pri),var(--pri2));transform-origin:left;animation:gx 1s cubic-bezier(.2,.8,.2,1) both}.hb i.e{background:linear-gradient(90deg,var(--rd),#ff8a6b)}
@keyframes gx{from{transform:scaleX(0)}}.hb b{text-align:right}
.ch{display:grid;grid-template-columns:repeat(30,1fr);gap:3px}.bb{height:130px;display:flex;align-items:flex-end;gap:2px}
.bb i{flex:1;min-height:3px;border-radius:4px 4px 0 0;background:var(--pri);transform-origin:bottom;animation:gy .9s cubic-bezier(.2,.8,.2,1) both}.bb i.e{background:var(--rd)}
@keyframes gy{from{transform:scaleY(0)}}.ch small{display:block;text-align:center;color:var(--mu);font-size:9px;margin-top:3px;overflow:hidden}
.big{font-size:38px;font-weight:800;letter-spacing:-1px}.ok{color:var(--em)}.bad{color:var(--rd)}.hide{display:none!important}
#toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,120px);background:var(--pri);color:#fff;font-weight:700;padding:11px 20px;border-radius:30px;box-shadow:0 14px 34px -10px #1f63e6bb;transition:transform .4s cubic-bezier(.2,1.2,.3,1);z-index:80}
#toast.on{transform:translate(-50%,0)}#toast.bad{background:var(--rd);color:#fff}
@media(max-width:600px){.hb{grid-template-columns:90px 1fr 70px}.us span{display:none}.big{font-size:30px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
@media print{.hd,nav,.top,button{display:none!important}body{background:#fff;color:#000}.card{border:1px solid #999;background:#fff;box-shadow:none}}
/* balance given block */
.bgs{margin-top:16px;padding:14px;border:1px dashed #e0a526;border-radius:13px;background:#fff9ea}.bgs h2{margin-top:0;color:var(--gd)}.bgs label{margin-bottom:0}
.kp .d{border-left-color:var(--gd);color:inherit}
/* cards (used on mobile) */
.mob,#bn,#more{display:none}
.ec,.dc{background:var(--s2);border:1px solid var(--bd);border-radius:13px;padding:12px;margin:8px 0}
.ec .t,.dc .t{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.ec .t b{overflow-wrap:anywhere}.ec .amt{font-weight:800;font-size:17px;white-space:nowrap}
.ec .s{margin-top:4px;font-size:13px;overflow-wrap:anywhere}
.ec .x{display:block;margin:8px 0 0 auto;min-width:44px;min-height:36px}
.oc{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:10px 0 8px}.oc small{display:block;color:var(--mu);font-size:11px}.oc b{font-size:19px}.oc>span{color:var(--mu)}
.chips{display:flex;flex-wrap:wrap;gap:6px}.chips span{font-size:12px;padding:3px 9px;border-radius:20px;background:#eef4ff;border:1px solid var(--bd)}
/* mobile layout */
@media(max-width:900px){
body:has(#bn){padding-bottom:calc(84px + env(safe-area-inset-bottom))}
input,select,textarea{font-size:16px;min-height:46px}
.hd{padding:8px 12px}.hd .us span{display:none}
.wrap{padding:10px 12px 20px}
.top{position:static;grid-template-columns:1fr 1fr;gap:10px;padding:12px 14px}.top b{font-size:18px}
.dsk{display:none}.mob{display:block}
.card{padding:14px;margin:10px 0}
.row{gap:10px}.row>label{flex:1 1 100%}
.row>button.g{flex:1 1 40%;min-height:46px}
.kp{grid-template-columns:1fr 1fr;gap:8px}.kp b{font-size:18px}.kp .mu{font-size:12px}
.den{grid-template-columns:repeat(3,1fr)}
.btn{min-height:48px}.btn.fit{width:100%}
button.g{min-height:44px}button.x{min-height:36px}
.hb{grid-template-columns:1fr auto;gap:4px 10px}.hb span{grid-area:1/1}.hb b{grid-area:1/2}.hb i{grid-area:2/1/3/3}
.bb{height:100px}.ch{gap:1px}.ch small{font-size:7px}.bb{gap:1px}
.bgs{padding:12px}
#toast{bottom:calc(92px + env(safe-area-inset-bottom));max-width:92vw;text-align:center}
#fk,#fs{order:0}.fm .row>label:has(#fk){order:1}.fm .row>label:has(#fs){order:2}.fm .row>label#pw{order:3}
.fm .row>label:has(#fa){order:4;flex:1 1 calc(50% - 5px);min-width:0}.fm .row>label:has(#fd){order:5;flex:1 1 calc(50% - 5px);min-width:0}.fm .row>label:has(#fm){order:6}
.fm .row>label:has(#bs){order:1}.fm .row>label:has(#ba){order:2}
#bn{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:0;right:0;bottom:0;z-index:40;background:#fffffff2;backdrop-filter:blur(14px);border-top:1px solid var(--bd);box-shadow:0 -10px 30px -16px #1f63e655;padding:6px 6px calc(6px + env(safe-area-inset-bottom))}
#bn button{background:none;border:0;color:var(--mu);display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 0;border-radius:12px;font-size:11px;min-height:52px;cursor:pointer}
#bn button i{font-style:normal;font-size:20px;line-height:1}
#bn button.on{color:var(--pri);background:#1f63e614;font-weight:700}
#more{display:grid;grid-template-columns:1fr 1fr;gap:8px;position:fixed;left:12px;right:12px;bottom:calc(78px + env(safe-area-inset-bottom));z-index:45;background:#fff;border:1px solid var(--bd);border-radius:16px;padding:10px;box-shadow:0 24px 50px -16px #1f63e66e}
#more.hide{display:none}
#more button{padding:14px;border-radius:12px;border:1px solid var(--bd);background:var(--s2);color:var(--tx);font-size:15px;cursor:pointer}
#more button.on{border-color:var(--pri);color:var(--pri);font-weight:700}
}
@media print{.mob,#bn,#more{display:none!important}.dsk{display:block!important}}
/* TRUE/FALSE badge, entry page split, override */
.top{grid-template-columns:repeat(4,minmax(110px,1fr)) minmax(170px,.9fr);align-items:center}
.tally{display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:14px;padding:8px 14px;border:2px solid;text-align:center}
.top .tally span{font-size:11px;opacity:.95}.tally strong{font-size:32px;letter-spacing:2px;line-height:1.05;font-weight:800}.tally small{font-size:12px;font-weight:700}
.tally.t{background:#ffffff;border-color:#bfe9d6;color:#0a7d56}
.tally.f{background:#e0364f;border-color:#ffd0d6;color:#fff;animation:pls 1.4s ease-in-out infinite}
@keyframes pls{50%{box-shadow:0 0 0 7px #e0364f44}}
.card.warn{border-color:#f2b3bc;background:#fff8f9}.card.warn h2{color:var(--rd)}
.ent{display:grid;grid-template-columns:minmax(290px,340px) 1fr;gap:14px;align-items:start}
.ent>.cp{position:sticky;top:130px;margin:12px 0}.ef>.card:first-child{margin-top:12px}
.cp summary{cursor:pointer;display:flex;justify-content:space-between;align-items:center;font-weight:700;list-style:none}.cp summary::-webkit-details-marker{display:none}
.cp .big{font-size:30px;margin:8px 0}.cp th,.cp td{padding:6px 7px;font-size:13px}
.ovi{margin-top:12px;padding:10px 12px;border:1px solid var(--bd);border-radius:11px;background:var(--s2)}
.hlp{margin-top:8px;font-size:13px;color:var(--mu)}.hlp summary{cursor:pointer;color:var(--pri);font-weight:600}.hlp ol{margin:6px 0 0;padding-left:20px}.hlp li{margin:4px 0}
.sb{margin-top:2px;font-size:12px}
@media(max-width:900px){.ent{grid-template-columns:1fr}.ent>.cp{position:static;margin:10px 0}.top{grid-template-columns:repeat(2,1fr)}.tally{grid-column:1/-1;flex-direction:row;gap:12px;justify-content:space-between}.tally strong{font-size:26px}}
/* settle popup */
.mdl{position:fixed;inset:0;z-index:70;display:grid;place-items:center;padding:16px;background:#0b1f4866;backdrop-filter:blur(6px);animation:fd .25s both}
@keyframes fd{from{opacity:0}}
.mdl .mb{width:100%;max-width:440px;max-height:90vh;overflow:auto;margin:0;box-shadow:0 40px 80px -24px #1f63e6aa}

/* ---------- v1.5 full-screen layout with left sidebar ---------- */
.shell{display:grid;grid-template-columns:268px minmax(0,1fr);min-height:100vh}
.sd{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;padding:22px 16px;color:#fff;background:linear-gradient(175deg,#0b3aa8 0%,#1f63e6 62%,#3d8bff 100%);box-shadow:10px 0 40px -20px #1f63e6aa;overflow:hidden}
.sd::before,.sd::after{content:"";position:absolute;border-radius:50%;background:#ffffff14;pointer-events:none}
.sd::before{width:260px;height:260px;right:-120px;top:-80px}.sd::after{width:300px;height:300px;left:-150px;bottom:-110px}
.sd .br{padding:2px 8px 18px;position:relative}.sd .br b{font-size:17px;color:#fff}
.sd .logo.s{background:#fff;color:var(--pri);box-shadow:0 8px 20px -8px #0008}
.sdl{font-size:11px;letter-spacing:1.6px;opacity:.65;padding:6px 12px;position:relative}
.sd nav{display:flex;flex-direction:column;gap:4px;overflow:auto;padding:0;margin:0;position:relative}
.sd nav button{display:flex;align-items:center;gap:12px;text-align:left;width:100%;white-space:nowrap;background:none;border:0;color:#ffffffcc;padding:11px 14px;border-radius:13px;cursor:pointer;font-weight:600;font-size:14px;transition:background .2s,transform .2s,color .2s;position:relative}
.sd nav button svg{width:20px;height:20px;flex:none}
.sd nav button:hover{background:#ffffff1f;color:#fff;transform:translateX(3px)}
.sd nav button.on{background:#fff;color:var(--pri);box-shadow:0 12px 24px -12px #0a2a7a99}
.sd nav button em{margin-left:auto;font-style:normal;font-size:11px;font-weight:800;background:var(--rd);color:#fff;border-radius:20px;padding:1px 8px}
.sdf{margin-top:auto;position:relative;display:flex;flex-direction:column;gap:10px}
.who{display:flex;align-items:center;gap:10px;padding:10px;border-radius:14px;background:#ffffff1f}
.who i{width:38px;height:38px;border-radius:12px;background:#fff;color:var(--pri);display:grid;place-items:center;font-style:normal;font-weight:800}
.who b{display:block;font-size:14px}.who span{font-size:11px;opacity:.75}
.lo{background:#ffffff1f;border:1px solid #ffffff44;color:#fff;border-radius:12px;padding:10px;cursor:pointer;font-weight:600;transition:background .2s}.lo:hover{background:#ffffff33}
.mn{min-width:0}
.ph{display:flex;align-items:center;gap:14px;padding:22px 28px 10px}
.pt{flex:1}.pt h1{margin:0;font-size:28px;letter-spacing:-.6px}.mbr,.mlo{display:none}
/* dashboard */
.hero{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:20px;align-items:center;margin:12px 0;padding:26px 28px;border-radius:22px;color:#fff;background:linear-gradient(120deg,#0b3aa8,#1f63e6 60%,#4d93ff);box-shadow:0 30px 60px -28px #1f63e6dd;position:relative;overflow:hidden;animation:rise .55s both}
.hero::after{content:"";position:absolute;right:-70px;top:-90px;width:300px;height:300px;border-radius:50%;background:#ffffff1a}
.hl span,.hr span{display:block;font-size:12px;opacity:.85}.hl b{display:block;font-size:46px;letter-spacing:-1.5px;line-height:1.15;margin:4px 0 12px}
.split{height:9px;border-radius:9px;background:#ffffff40;overflow:hidden}.split i{display:block;height:100%;border-radius:9px;background:#fff;transition:width 1s}
.sl{display:flex;justify-content:space-between;gap:10px;margin-top:8px;font-size:13px;font-weight:600;flex-wrap:wrap}
.hr{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;position:relative;z-index:1}.hr>div{background:#ffffff1f;border:1px solid #ffffff33;border-radius:16px;padding:12px 14px;backdrop-filter:blur(6px)}.hr b{font-size:20px}
.kt{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin:14px 0}
.kt-i{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--bd);border-radius:18px;padding:16px;box-shadow:var(--sh);transition:transform .25s,box-shadow .25s;animation:rise .55s both}
.kt-i:hover{transform:translateY(-4px);box-shadow:0 22px 34px -20px #1f63e688}
.kt-i b{display:block;font-size:22px;letter-spacing:-.4px}.kt-i .mu{display:block;font-size:12px}
.kic{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;flex:none;background:#eaf1ff;color:var(--pri)}.kic svg{width:22px;height:22px}
.kt-i.i .kic{background:#e3f7ee;color:var(--em)}.kt-i.e .kic{background:#fde8eb;color:var(--rd)}.kt-i.d .kic{background:#fff3d9;color:var(--gd)}
.g2{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:14px}.g2>.card{margin:0}
.ac{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.at{display:flex;gap:12px;align-items:center;padding:14px;border:1px solid var(--bd);border-radius:16px;background:linear-gradient(160deg,#fff,#f4f8ff);transition:transform .25s,box-shadow .25s}
.at:hover{transform:translateY(-3px);box-shadow:0 18px 28px -20px #1f63e699}.at>div{flex:1;min-width:0}
.at b{display:block;font-size:19px;letter-spacing:-.3px}.at .mu{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ai{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;background:#eaf1ff;color:var(--pri);flex:none}.ai svg{width:20px;height:20px}
.at.cs .ai{background:#e3f7ee;color:var(--em)}
.mt{height:5px;border-radius:5px;background:#e8effc;margin-top:7px;overflow:hidden}.mt i{display:block;height:100%;border-radius:5px;background:linear-gradient(90deg,var(--pri),var(--pri2))}.mt i.ng{background:var(--rd)}
.btn.sm{padding:6px 12px;font-size:13px;min-height:0}
.tallyst{display:flex;align-items:center;gap:14px;margin-top:14px;padding:14px 16px;border-radius:14px}
.tallyst b{font-size:26px;letter-spacing:2px}.tallyst.okk{background:#e6f7ef;color:#0a7d56}.tallyst.bad2{background:#fde8eb;color:#c3243b}
.bmw{margin:0}
/* staff view keeps a centred layout */
.hd .logo.s{background:linear-gradient(135deg,var(--pri),var(--pri2))}
@media(max-width:1100px){.hero{grid-template-columns:1fr}.g2{grid-template-columns:1fr}.g2>.card{margin:0 0 10px}}
@media(max-width:900px){
.shell{display:block}.sd{display:none}
.ph{padding:12px 14px 4px;gap:10px}.mbr,.mlo{display:block}.pt h1{font-size:21px}.pt .mu{font-size:12px}.mlo{min-height:40px}
.mn .wrap{padding:6px 12px 20px}
.hero{padding:18px;border-radius:18px}.hl b{font-size:34px}.hr{grid-template-columns:1fr 1fr 1fr;gap:8px}.hr>div{padding:9px}.hr b{font-size:16px}
.kt{grid-template-columns:1fr 1fr;gap:10px}.kt-i{padding:12px;gap:10px}.kt-i b{font-size:17px}.kic{width:38px;height:38px}
.ac{grid-template-columns:1fr 1fr}.at{padding:10px;gap:8px}.at b{font-size:16px}.ai{display:none}
}
@media print{.sd,.ph{display:none!important}.shell{display:block}.hero{background:#fff;color:#000;box-shadow:none;border:1px solid #999}}

/* v1.8 customer payment inside Balance Override */
.cpay{margin-top:12px;padding:12px;border:1px solid var(--bd);border-radius:11px;background:#fff}.cres{margin-top:10px;font-weight:600}
.cr{display:flex;justify-content:space-between;gap:10px;padding:7px 0;border-bottom:1px dashed var(--bd);font-weight:600}.cr.pf{border-bottom:0;font-size:1.05em}

/* v2.2 refresh button */
.rfw{margin-left:auto;display:flex;align-items:center;gap:8px}.rfb{display:inline-flex;align-items:center;gap:6px;padding:8px 14px}.rfb b{display:inline-block;font-size:17px;line-height:1}
.rfb.sp b{animation:rfs .8s linear infinite}@keyframes rfs{to{transform:rotate(360deg)}}.rft{font-size:12px}
@media(max-width:600px){.rft{display:none}.rfb span{display:none}.rfb{padding:8px 12px}}

/* v2.5 multi delete */
.bar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:8px 0}.bar .ck{margin:0}.dng{border-color:var(--rd)!important;background:#fff!important;color:var(--rd)!important}.dng[disabled]{opacity:.45}
.sel{width:18px;height:18px;accent-color:var(--pri)}.ec .sl{display:flex;gap:6px;margin:0 0 6px;font-size:13px}

/* v3.3 */
.sdf .lo.pw{margin-bottom:8px}

/* v3.4 logo image */
.logo.img{background:#0b1d4a!important;padding:0;overflow:hidden;animation:none}.logo.img img{width:100%;height:100%;object-fit:cover;display:block}
.lc .logo.img{width:84px;height:84px;border-radius:24px;margin:0 auto 6px}

.cp .cpo{margin-top:10px;border-top:1px dashed #dbe5f7;padding-top:8px}.cp .cpo summary{font-size:12px;font-weight:600;color:#1d4ed8;cursor:pointer;display:block}

/* v4.1 */
.mbr{display:block;height:8px;border-radius:6px;background:var(--s2);min-width:70px}.mbr i{display:block;height:100%;border-radius:6px;background:var(--em)}.mbr i.e{background:var(--rd)}
.seg{display:inline-flex;gap:4px;padding:4px;border:1px solid var(--bd);border-radius:12px;background:var(--s2);flex-wrap:wrap;margin-bottom:6px}
.seg button{border:0;background:transparent;padding:8px 14px;border-radius:9px;font:inherit;font-weight:700;color:var(--mu);cursor:pointer}
.seg button.on{background:var(--pri);color:#fff;box-shadow:0 6px 14px -8px #1f63e6aa}

/* Targeted correction: align the customer-payout controls evenly and keep hidden fields out of the layout. */
#cpay > .row:not(.hide){display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;align-items:end}
#cpay > .row:not(.hide) > label{min-width:0;width:auto;margin:0}
#cpay #csbal{display:block;margin-top:6px}
@media(max-width:700px){#cpay > .row:not(.hide){grid-template-columns:1fr}}

/* Final targeted refinement: keep payout fields on one desktop row and expose service-charge note entry on focus. */
#cpay > .row:not(.hide){display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,.85fr);gap:10px;align-items:end}
#cpay > .row:not(.hide) > #cgw{grid-column:1;}
#cpay > .row:not(.hide) > #scl{grid-column:2;}
#cpay > .row:not(.hide) > #csl2{grid-column:3;}
#cpay > .row:not(.hide) > #cgw,
#cpay > .row:not(.hide) > #scl,
#cpay > .row:not(.hide) > #csl2{font-size:11px;line-height:1.25;letter-spacing:-.15px;white-space:nowrap;}
#cpay > .row:not(.hide) > #cgw input,
#cpay > .row:not(.hide) > #scl input,
#cpay > .row:not(.hide) > #csl2 select{font-size:13px;}
#cpay > .row:not(.hide) > #csl2 small{white-space:normal;font-size:11px;}
@media(max-width:700px){#cpay > .row:not(.hide){grid-template-columns:1fr;} #cpay > .row:not(.hide) > #cgw,#cpay > .row:not(.hide) > #scl,#cpay > .row:not(.hide) > #csl2{grid-column:1;}}

/* Keep service-charge denomination entry below the payout row without shifting its fields. */
#scdn{width:100%;}
#scdn .den{margin-top:8px;}

/* Indian currency note colours (Mahatma Gandhi New series) */
.nc{display:inline-block;padding:3px 10px;border-radius:999px;font-weight:800;font-size:12.5px;line-height:1.3;white-space:nowrap;border:1px solid rgba(0,0,0,.12);background:var(--nb,#eee);color:var(--nf,#1b2540)}
.nc.n500{--nb:#9a9c9e;--nf:#fff}      /* stone grey */
.nc.n200{--nb:#f6c026;--nf:#3a2a00}   /* bright yellow */
.nc.n100{--nb:#b9a6e0;--nf:#2a1a55}   /* lavender */
.nc.n50{--nb:#34c0e0;--nf:#00323f}    /* fluorescent blue */
.nc.n20{--nb:#c6d34a;--nf:#2f3600}    /* greenish yellow */
.nc.n10{--nb:#8b5a3c;--nf:#fff}       /* chocolate brown */
.nc.nc1{--nb:#c9ced6;--nf:#1b2540}    /* Re 1 coin: silver */
.den label{border-left:4px solid var(--nb,#ddd);padding-left:8px;border-radius:8px}
.den label:has(.n500){--nb:#9a9c9e}.den label:has(.n200){--nb:#f6c026}.den label:has(.n100){--nb:#b9a6e0}
.den label:has(.n50){--nb:#34c0e0}.den label:has(.n20){--nb:#c6d34a}.den label:has(.n10){--nb:#8b5a3c}.den label:has(.nc1){--nb:#c9ced6}
.den label:has(.n500){background:rgba(154,156,158,.12)}.den label:has(.n200){background:rgba(246,192,38,.14)}.den label:has(.n100){background:rgba(185,166,224,.18)}
.den label:has(.n50){background:rgba(52,192,224,.12)}.den label:has(.n20){background:rgba(198,211,74,.18)}.den label:has(.n10){background:rgba(139,90,60,.12)}.den label:has(.nc1){background:rgba(201,206,214,.25)}

#iowrap>.card:first-child,#ovwrap>.card:first-child{margin-top:12px}

/* v4.8: note / coin count boxes – no up/down arrows (spinner); numbers are typed manually */
.den input[type=number]{-moz-appearance:textfield;appearance:textfield}
.den input[type=number]::-webkit-outer-spin-button,.den input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;appearance:none;margin:0;display:none}

/* v5.0: "=" between Now and Value, and Dashboard Cash in hand card */
.eq{color:var(--mu);font-weight:700}
.cp th:nth-child(3),.cp td:nth-child(3){text-align:center;width:1%;padding-left:2px;padding-right:2px}
.cp .cph{display:flex;justify-content:space-between;align-items:center;font-weight:700;font-size:16px}
.cpdash{max-width:560px}
@media(max-width:900px){.cpdash{max-width:none}}

/* v5.3: Dashboard – Cash in hand + Income Today side by side, full-width 30-day chart */
.cashrow{display:grid;grid-template-columns:minmax(0,560px) minmax(0,1fr);gap:14px;align-items:stretch;margin:0 0 14px}
.cashrow>.card{margin:0}
.cashrow .cpdash{max-width:none}
.cashrow .svcd{display:flex;flex-direction:column}
.cashrow .svcd .hb{margin:7px 0}
.chfull{margin:0 0 14px}
.chfull .bb{height:240px}
.chfull .ch{gap:6px}.chfull .bb{gap:3px}.chfull .ch small{font-size:11px;margin-top:6px}
@media(max-width:1100px){.cashrow{grid-template-columns:1fr}.chfull .bb{height:150px}.chfull .ch{gap:2px}.chfull .ch small{font-size:8px}}

/* v5.3: Customer payment form – tidy, even alignment (replaces the earlier patches) */
#cpay > .row:not(.hide){display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;align-items:end}
#cpay > .row:not(.hide) > label{grid-column:auto!important;min-width:0;margin:0;font-size:12px;line-height:1.3;letter-spacing:0;white-space:normal;justify-content:flex-end}
#cpay > .row:not(.hide) > label input,#cpay > .row:not(.hide) > label select{width:100%;height:42px;box-sizing:border-box;font-size:14px}
#cpay > .row:not(.hide) > #csx{grid-column:3}
#cpay #csbal{display:block;margin-top:4px;font-size:11px;white-space:normal}
#scdn{width:100%;margin-top:14px;padding:14px;border:1px solid var(--bd);border-radius:12px;background:#f5f8ff}
#scdn .sch{font-weight:800;font-size:14px;color:var(--pri);margin:0 0 10px}
#scdn .row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:end}
#scdn .row>label{min-width:0;margin:0;justify-content:flex-end;font-size:12px}
#scdn .row>label input,#scdn .row>label select{width:100%;height:42px;box-sizing:border-box}
#scdn small.mu{display:block;font-weight:500;font-size:11px;margin-top:1px}
#scdn .scs{margin:16px 0 0;font-weight:700;font-size:13px;color:var(--tx,#1b2540);display:flex;flex-direction:column;gap:2px}
#scdn .den{margin-top:8px;grid-template-columns:repeat(auto-fit,minmax(86px,1fr))}
#scdn #sctl{margin-top:12px;padding:9px 12px;border-radius:10px;background:#fff;border:1px dashed var(--bd);font-weight:600;line-height:1.5}
#cpay .cres{margin-top:14px;padding:6px 14px;border:1px solid var(--bd);border-radius:12px;background:#fff}
#cpay .cr{align-items:baseline}
#cpay .cr>span{flex:1 1 auto}
#cpay .cr>b{flex:0 0 auto;text-align:right;white-space:nowrap}
@media(max-width:700px){#cpay > .row:not(.hide){grid-template-columns:1fr}#cpay > .row:not(.hide) > #csx{grid-column:1}#scdn .row{grid-template-columns:1fr}}

/* v5.4 */
.by{color:var(--pri);font-weight:700;white-space:nowrap}
.mxc .mxh{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 12px}
.mxc .mxh b{font-size:16px}
.mxc .mxh .g{min-width:42px;padding:6px 14px;font-size:18px;line-height:1}
.mxc .mxh .g:disabled{opacity:.4;cursor:not-allowed}
.mxb{height:12px;border-radius:8px;background:var(--s2);border:1px solid var(--bd);overflow:hidden;margin:12px 0 6px}
.mxb i{display:block;height:100%;border-radius:8px;background:linear-gradient(90deg,var(--em),#4cd3a3);transition:width .5s}
.mxb i.o{background:linear-gradient(90deg,var(--rd),#ff8a6b)}
.cashrow .ac{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}

/* v5.5: Income by Service Today/Month switch */
.svh{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.svh h2{margin:0}
.svsw{display:inline-flex;background:#eef2fb;border-radius:999px;padding:3px;gap:2px}
.svsw button{border:0;background:transparent;padding:6px 16px;border-radius:999px;font:inherit;font-size:13px;font-weight:600;color:#4a5b85;cursor:pointer}
.svsw button.on{background:linear-gradient(90deg,var(--pri),var(--pri2));color:#fff;box-shadow:0 2px 8px rgba(37,99,235,.25)}
.svt{display:flex;justify-content:space-between;margin-top:10px;padding-top:10px;border-top:1px solid #e3e9f6;font-size:14px}

/* v5.6: compact entry tables - text wraps, one word per line, time under date */
.tx table{table-layout:auto;font-size:13px}
.tx th,.tx td{white-space:normal;text-align:left;vertical-align:middle;padding:7px 8px;line-height:1.3}
.tx td small{display:block}
.tx .x{margin:0}