:root{--bg:#f3f5fa;--pn:#fff;--tx:#1e293b;--mu:#64748b;--ln:#e2e8f0;--navy:#14213d;--cy:#4fc3f7;--cd:#0b7fb5;--soft:#eaf6fd;--ok:#16a34a;--bad:#dc2626}
html{font-size:17.5px}*{box-sizing:border-box}html,body{margin:0;background:var(--bg);color:var(--tx);font:1rem/1.45 "Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif}
.top{background:var(--navy);color:#fff;display:flex;gap:1.429rem;align-items:center;justify-content:space-between;padding:0.7143rem 1.714rem;flex-wrap:wrap;border-bottom:0.2143rem solid var(--cy)}
.brand{display:flex;gap:0.8571rem;align-items:center}.brand img{width:2.857rem;height:3.143rem;object-fit:contain}.brand b{font-size:1.214rem;display:block}.brand small{color:#9fb3d1}
nav{display:flex;gap:0.4286rem;flex-wrap:wrap}nav button{background:transparent;border:0;color:#c7d4ea;padding:0.6429rem 1rem;border-radius:0.7143rem;font:inherit;font-weight:600;cursor:pointer}
nav button:hover{background:#22345e}nav button.on{background:var(--cy);color:var(--navy)}
main{padding:1.429rem 1.714rem;max-width:100rem;margin:0 auto}.tab{display:none}.tab.on{display:block}
.grid2{display:grid;grid-template-columns:minmax(27.14rem,37.14rem) 1fr;gap:1.286rem;align-items:start}
@media(max-width:1250px){.grid2{grid-template-columns:1fr}}
.card{background:var(--pn);border:0.07143rem solid var(--ln);border-radius:1.143rem;padding:1.429rem;box-shadow:0 0.1429rem 0.8571rem rgba(20,33,61,.05)}
h2{margin:0 0 0.8571rem;font-size:1.214rem;color:var(--navy)}
label{display:block;font-size:0.7857rem;font-weight:700;color:var(--mu);text-transform:uppercase;letter-spacing:0.02857rem;margin:0.8571rem 0 0.2857rem}label small{text-transform:none;font-weight:400;letter-spacing:0}
input,select,textarea{width:100%;font:inherit;padding:0.6429rem 0.7143rem;border:0.07143rem solid var(--ln);border-radius:0.7143rem;background:#fff;color:var(--tx)}
input:focus,select:focus,textarea:focus{outline:0.1429rem solid var(--cy);border-color:var(--cy)}
.row3{display:grid;grid-template-columns:repeat(3,1fr);gap:0.7143rem}
.actions{display:flex;gap:0.7143rem;flex-wrap:wrap;align-items:center;margin-top:1.286rem}
button{font:inherit;font-weight:600;padding:0.6429rem 1.143rem;border-radius:0.7143rem;border:0.07143rem solid var(--ln);background:#fff;color:var(--tx);cursor:pointer}
button:hover{border-color:var(--cd)}button.pri{background:var(--navy);border-color:var(--navy);color:#fff}button.pri:hover{background:#22345e}
button.alt{background:var(--cd);border-color:var(--cd)}button.sm{padding:0.2857rem 0.6429rem;font-size:0.8571rem;border-radius:0.5714rem}button.dg{color:var(--bad)}
.err{color:var(--bad);font-weight:600;margin-top:0.7143rem;min-height:1.286rem}.ok{color:var(--ok);font-weight:600}
.prev .to{background:var(--soft);padding:0.7143rem 1rem;border-radius:0.7143rem;margin-bottom:0.8571rem;line-height:1.6}
table.pt{width:100%;border-collapse:collapse;font-size:0.8571rem}.pt th{background:var(--navy);color:#fff;padding:0.5rem 0.3571rem;font-size:0.7143rem;text-transform:uppercase}
.pt td{padding:0.5714rem 0.3571rem;border-bottom:0.07143rem solid var(--ln);vertical-align:top;text-align:center}.pt td.d{text-align:left;width:34%;color:#334155}.pt td.n{text-align:right}.pt td.b{font-weight:700}
.tot{margin-left:auto;max-width:21.43rem;margin-top:0.8571rem}.tot div{display:flex;justify-content:space-between;padding:0.3571rem 0.5714rem;border-bottom:0.07143rem solid var(--ln);color:var(--mu)}
.tot .g{background:var(--navy);color:#fff;border-radius:0.7143rem;font-weight:700;margin-top:0.4286rem;padding:0.7143rem 0.8571rem}.tot .g b{color:var(--cy);font-size:1.143rem}
.words{background:var(--soft);padding:0.6429rem 0.8571rem;border-radius:0.7143rem;font-weight:600;color:var(--navy)}
.filters{display:grid;grid-template-columns:repeat(auto-fit,minmax(10.71rem,1fr));gap:0.7143rem;align-items:end}.filters label{margin-top:0}.filters .end{align-self:end}
.bulk{display:flex;justify-content:space-between;align-items:center;gap:0.8571rem;flex-wrap:wrap;margin:1.143rem 0 0.7143rem;padding:0.8571rem 1rem;background:var(--soft);border-radius:0.8571rem}
.sum{font-weight:600;color:var(--navy)}.bbtns{display:flex;gap:0.5714rem;align-items:center;flex-wrap:wrap}
.tw{overflow:auto;border:0.07143rem solid var(--ln);border-radius:0.8571rem}table.bt{width:100%;border-collapse:collapse;font-size:0.9286rem}
.bt th{position:sticky;top:0;background:#f8fafc;text-align:left;padding:0.6429rem 0.7143rem;font-size:0.7857rem;text-transform:uppercase;color:var(--mu);border-bottom:0.07143rem solid var(--ln)}
.bt td{padding:0.5714rem 0.7143rem;border-bottom:0.07143rem solid var(--ln);white-space:nowrap}.bt tr:hover td{background:#fafcff}.r{text-align:right}.bt td.r{font-weight:700}
.bt td:last-child{display:flex;gap:0.4286rem}.badge{font-size:0.7857rem;font-weight:700;padding:0.1429rem 0.6429rem;border-radius:7.071rem}.badge.Paid{background:#dcfce7;color:#166534}.badge.Unpaid{background:#fee2e2;color:#991b1b}
.hint{color:var(--mu);font-size:0.8571rem}.setgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(18.57rem,1fr));gap:0.2857rem 1.143rem}.setgrid h3{grid-column:1/-1;margin:1.143rem 0 0;color:var(--cd);font-size:0.9286rem;border-bottom:0.07143rem solid var(--ln);padding-bottom:0.2857rem}
.setgrid .wide{grid-column:1/-1}textarea{min-height:5rem;resize:vertical}
#toast{position:fixed;left:50%;bottom:1.857rem;transform:translateX(-50%) translateY(1.429rem);background:var(--navy);color:#fff;padding:0.7857rem 1.429rem;border-radius:0.8571rem;font-weight:600;opacity:0;pointer-events:none;transition:.25s;z-index:9;max-width:90vw}
#toast.on{opacity:1;transform:translateX(-50%)}

.tools{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.tools select{width:auto;padding:5px 8px;border-radius:8px;background:#22345e;color:#fff;border:1px solid #3a4f80;font-size:.85rem}
.zm{display:flex;align-items:center;gap:4px;color:#c7d4ea;font-weight:600}.zm button{padding:3px 9px;background:#22345e;color:#fff;border:1px solid #3a4f80;border-radius:8px}.zm span{min-width:2.6rem;text-align:center;font-size:.8rem}
.rlogo{border-radius:50%;object-fit:contain;background:#fff;aspect-ratio:1/1}
.brand .rlogo{width:2.9rem;height:2.9rem;padding:0}
.imgs{display:grid;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));gap:1.2rem}.ibox{border:1px solid var(--ln);border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:6px}
.ibox small{color:var(--mu)}.ph{width:7.5rem;height:7.5rem;border:2px dashed var(--ln);display:flex;align-items:center;justify-content:center;background:repeating-conic-gradient(#f1f5f9 0 25%,#fff 0 50%) 0 0/16px 16px;border-radius:12px;overflow:hidden;color:var(--mu);font-size:.8rem;text-align:center}
.ph.round{border-radius:50%}.ph img{width:100%;height:100%;object-fit:contain}.ph img[hidden]{display:none}.ph.noimg span{display:block}.ph:not(.noimg) span{display:none}
.chk{display:flex;align-items:center;gap:8px;margin-top:10px;font-weight:600}.chk input{width:auto}

.csvres{margin-top:14px}.csvres .sum{margin-bottom:8px}.csvres .tw{max-height:50vh}.csvres td.msg{white-space:normal;color:var(--bad);min-width:16rem}
.badge.New{background:#dbeafe;color:#1e40af}.badge.Update{background:#fef9c3;color:#854d0e}.badge.Error{background:#fee2e2;color:#991b1b}

.dist{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:.6rem 1.2rem}.dist b{display:block;color:var(--cd);font-size:.8rem;text-transform:uppercase;margin-bottom:2px}.dist label{display:flex;align-items:center;gap:7px;margin:2px 0;text-transform:none;font-size:.9rem;font-weight:500;letter-spacing:0;color:var(--tx)}.dist input{width:auto}

.bv .bt select,.bv .bt input{width:auto;padding:4px 6px;font-size:.8rem;border-radius:8px;border:1px solid var(--ln);background:#fff;color:var(--tx)}.bv .bt input.rm{width:15rem}
.bv .bt select.sPaid{background:#dcfce7;color:#166534;font-weight:700}.bv .bt select.sUnpaid{background:#fee2e2;color:#991b1b;font-weight:700}.bv .bt td{vertical-align:middle}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}.chips code{background:var(--soft);color:var(--cd);padding:3px 9px;border-radius:99px;font-size:.8rem;font-weight:600}

.stg{display:inline-block;font-size:.72rem;font-weight:700;padding:2px 10px;border-radius:99px;white-space:nowrap}
.stg-info{background:#dbeafe;color:#1e40af}.stg-good{background:#dcfce7;color:#166534}.stg-warn{background:#fef9c3;color:#854d0e}.stg-bad{background:#fee2e2;color:#991b1b}
.fuhead{display:flex;justify-content:space-between;align-items:center;gap:.8rem;flex-wrap:wrap}.seg{display:inline-flex;border:1px solid var(--ln);border-radius:10px;overflow:hidden}.seg button{border:0;border-radius:0}.seg button.on{background:var(--navy);color:#fff}
.fchips{display:flex;flex-wrap:wrap;gap:.5rem;margin:.8rem 0}.fchips button{border-radius:99px;padding:.3rem .8rem;font-size:.8rem}.fchips button.on{background:var(--navy);color:#fff;border-color:var(--navy)}.fchips b{margin-left:6px}
.board{display:grid;gap:1.3rem;margin-top:.5rem}.board[hidden]{display:none}.bgroup h3{margin:0 0 .6rem;display:flex;gap:.6rem;align-items:center;font-size:1rem}
.bcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,17rem),1fr));gap:.8rem}
.fcard{border:1px solid var(--ln);border-radius:12px;padding:.8rem;background:#fff;display:flex;flex-direction:column;gap:.35rem}.fcard small{color:var(--mu)}.fcard .fr{font-size:.85rem}.fcard .fm{font-size:.75rem;color:var(--mu)}.fcard .fa{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:.3rem}
.bt td.rmk{white-space:normal;min-width:14rem;max-width:26rem}.lbadge{font-size:.65rem;background:var(--navy);color:#fff;border-radius:99px;padding:1px 7px;margin-left:6px;vertical-align:middle}

/* ================= mobile / small screens ================= */
.tw{-webkit-overflow-scrolling:touch}
@media (max-width:900px){
 .top{padding:.6rem .9rem;gap:.55rem}
 main{padding:.9rem .75rem}
 .card{padding:1rem;border-radius:14px}
 nav{order:3;width:100%;flex-wrap:nowrap;overflow-x:auto;padding-bottom:.25rem;scrollbar-width:none}nav::-webkit-scrollbar{display:none}
 nav button{white-space:nowrap;flex:0 0 auto;padding:.55rem .85rem}
 .tools{margin-left:auto}
 .row3{grid-template-columns:1fr 1fr}
 .tot{max-width:none}
}
@media (max-width:700px){
 /* tables turn into cards */
 .tw{border:0;overflow:visible;max-height:none!important}
 table.bt,.bt thead,.bt tbody,.bt tr,.bt td{display:block}
 .bt thead{display:none}
 .bt tr{border:1px solid var(--ln);border-radius:12px;margin-bottom:.7rem;padding:.35rem .8rem;background:#fff}
 .bt tr:hover td{background:transparent}
 .bt td{display:flex;gap:.8rem;justify-content:space-between;align-items:center;padding:.4rem 0;border-bottom:1px dashed var(--ln);white-space:normal;text-align:right;min-height:1.9rem}
 .bt td::before{content:attr(data-label);flex:0 0 36%;font-weight:700;color:var(--mu);font-size:.68rem;text-transform:uppercase;letter-spacing:.3px;text-align:left}
 .bt td[data-label=""]::before{display:none}
 .bt td:last-child{border-bottom:0;flex-wrap:wrap;justify-content:flex-end}
 .bt td.rmk{min-width:0;max-width:none}
 .bt td[colspan]{display:block;text-align:center}.bt td[colspan]::before{display:none}
 .bv .bt td select,.bv .bt td input{max-width:62%;min-width:0}.bv .bt input.rm{width:62%}
 .csvres td.msg{min-width:0}
}
@media (max-width:600px){
 .row3{grid-template-columns:1fr}
 .filters{grid-template-columns:1fr 1fr}
 .setgrid,.imgs,.dist{grid-template-columns:1fr}
 .actions{flex-direction:column;align-items:stretch}.actions button{width:100%}.actions span{text-align:center}
 .bulk{flex-direction:column;align-items:stretch}.bbtns{width:100%}.bbtns button{flex:1 1 100%}
 input,select,textarea{font-size:16px}
 .brand small{display:none}.brand b{font-size:1rem}
 .prev table.pt{display:block;overflow-x:auto}
 .fuhead .seg{width:100%}.fuhead .seg button{flex:1}
 .tools select{max-width:10.5rem}
 h2{font-size:1.05rem}
}
@media (max-width:1250px){.grid2{grid-template-columns:minmax(0,1fr)}}
.grid2>*,main,.card{min-width:0}
@media (max-width:600px){.prev table.pt{display:block;overflow-x:auto;max-width:100%}.pt td.d{min-width:11rem}}
.filters>*,.row3>*,.setgrid>*{min-width:0}

/* bill view: dashboard tiles, sortable headings, pager */
.tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.9rem;margin:.2rem 0 1rem}
@media (max-width:1000px){.tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (max-width:420px){.tiles{grid-template-columns:1fr}}
.tile{border-radius:14px;padding:.9rem 1.1rem;background:var(--soft);border-left:5px solid var(--cd);display:flex;flex-direction:column;gap:.15rem;min-width:0}
.tile small{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.3px;color:var(--mu)}.tile b{font-size:1.45rem;color:var(--navy);overflow-wrap:anywhere}.tile span{font-size:.78rem;color:var(--mu)}
.tile.t-n{background:#eef2ff;border-color:#4f46e5}.tile.t-t{background:var(--soft);border-color:var(--cd)}.tile.t-p{background:#f0fdf4;border-color:var(--ok)}.tile.t-p b{color:#166534}.tile.t-u{background:#fef2f2;border-color:var(--bad)}.tile.t-u b{color:#991b1b}
.bt th[data-sort]{cursor:pointer;user-select:none;white-space:nowrap}.bt th[data-sort]:hover{color:var(--navy)}
.bt th[data-sort]::after{content:" ↕";opacity:.35}.bt th[data-dir=asc]::after{content:" ▲";opacity:1;color:var(--cd)}.bt th[data-dir=desc]::after{content:" ▼";opacity:1;color:var(--cd)}
.pager{display:flex;justify-content:space-between;align-items:center;gap:.6rem;flex-wrap:wrap;margin-top:.8rem;color:var(--mu);font-size:.85rem;font-weight:600}
.pager div{display:flex;gap:.3rem;flex-wrap:wrap;align-items:center}.pager button.on{background:var(--navy);color:#fff;border-color:var(--navy)}.pager button:disabled{opacity:.4;cursor:default}
#bvSel .sm{margin-left:.5rem}

/* login screen + logout */
.lgbody{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:16px;background:var(--navy)}
.login{width:100%;max-width:24rem;text-align:center}.login .rlogo{width:5rem;height:5rem;border:2px solid var(--cy)}.login h2{margin:.6rem 0 0}.login label,.login input{text-align:left}
.login button{width:100%;margin-top:.4rem}
.tools .who{color:#c7d4ea;font-size:.8rem;font-weight:600}.tools .lo{padding:4px 10px;background:#22345e;color:#fff;border:1px solid #3a4f80;border-radius:8px;font-size:.85rem}
.acct{display:grid;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));gap:0 1.143rem}.acct>*{min-width:0}
.filters select,.filters input,.row3 select,.row3 input{min-width:0;max-width:100%}
@media (max-width:600px){.filters{grid-template-columns:repeat(2,minmax(0,1fr))}.filters label{font-size:.68rem}}