/* Layout: fixed navy sidebar + white workspace with header, tab strip, content and boxed footer — copied from the client's Canva mockups */
:root{
  --navy:#110c3d; --navy-2:#20365f; --band:#1f2147; --acc:#223a68; --ink:#141230; --muted:#7a7a7a;
  --lime:#ccf56f; --yellow:#fff200; --num:#1452b0; --rule:#1a1747;
  --th:#c5dcf0; --view:#2c4e9a; --edit:#00b050; --add:#2e8b3e; --cyan:#00b0f0; --purple:#7030a0;
  --close:#f25c5c; --clear:#0047ab; --save:#144d1f; --gray-btn:#9aa7b4; --upload:#b5520f; --del:#d6151b;
  --bg:#fff; --panel:#f2f5f7; --cell:#fff2cc; --peach:#fbe4d5; --cal:#efefef;
  --f-body:"Noto Sans",system-ui,Arial,sans-serif;
  --f-ta:"Noto Sans Tamil","Noto Sans",sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:15px}
button{font:inherit;cursor:pointer}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--num);outline-offset:2px}
.ta{font-family:var(--f-ta)}

/* ---------- LOGIN ---------- */
#login{min-height:100%;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:24px;
  padding-block:40px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.quote{text-align:center}
.quote p{margin:0;font-family:var(--f-ta);font-weight:700;font-size:16px;color:var(--ink);line-height:1.5}
.quote h2{margin:18px 0 0;font-size:21px;font-weight:700}
.login-art{justify-self:start;width:min(540px,100%);aspect-ratio:540/550;max-width:100%;
  background:
   radial-gradient(ellipse 40% 10% at 30% 20%,rgba(255,255,255,.8),transparent 70%),
   radial-gradient(ellipse 50% 12% at 70% 45%,rgba(255,255,255,.7),transparent 70%),
   radial-gradient(ellipse 45% 10% at 20% 70%,rgba(255,255,255,.6),transparent 70%),
   linear-gradient(160deg,#1c5fb8 0%,#3b8de0 35%,#8cc4f0 60%,#2f78c9 100%);
  padding:10px 18px;display:flex}
.login-card{flex:1;border-radius:10px;background:rgba(225,236,248,.86);display:flex;flex-direction:column;align-items:center;padding:60px 24px 30px}
.login-card h1{margin:0;font:700 21px Arial,sans-serif;color:#0d0b33;letter-spacing:.2px;text-align:center}
.login-card h3{margin:14px 0 40px;font:400 24px Arial,sans-serif;color:#333}
.login-card input{width:min(380px,100%);height:64px;border-radius:32px;border:2px solid #2d3f66;background:#fff;padding:0 26px;font-size:20px;margin-bottom:12px}
.btn-login{width:min(380px,100%);height:66px;border-radius:33px;border:0;background:var(--navy-2);color:#fff;font:400 20px Arial,sans-serif;margin-top:28px;box-shadow:0 3px 8px rgba(0,0,0,.25)}
.forgot{margin-top:14px;color:#666;font:15px Arial,sans-serif;background:none;border:0}
.login-err{color:#c00;font-size:13px;min-height:18px}

/* ---------- APP SHELL ---------- */
#app{display:grid;grid-template-columns:244px 1fr;min-height:100%}
.side{background:var(--navy);color:#fff;padding-bottom:20px}
.logo{margin:6px 6px 8px;height:62px;background:#1a1a33;display:flex;align-items:center;gap:6px;padding:0 10px;border-bottom:3px solid #fff}
.logo-grid{display:grid;grid-template-columns:repeat(2,15px);gap:3px}
.logo-grid i{width:15px;height:15px;background:#fff}
.logo b{font-weight:400;font-size:40px;letter-spacing:.5px;line-height:1}
.nav{list-style:none;margin:0;padding:0 4px}
.nav button{width:100%;display:flex;justify-content:space-between;align-items:center;background:none;border:3px solid transparent;color:#fff;font-size:26px;padding:2px 6px;text-align:left}
.nav button::after{content:">>";font-weight:700;font-size:20px}
.nav button.on{border-color:#8b2b2b}
.main{display:flex;flex-direction:column;min-width:0}
.top{display:flex;align-items:center;gap:14px;padding:0 30px 0 10px;height:80px;border-bottom:1.5px solid var(--rule);position:relative}
.burger{background:none;border:0;padding:4px;display:flex;align-items:center}
.org{font-weight:700;font-size:20px;color:#0d0b33;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.search{margin-left:auto;display:flex;align-items:center;gap:8px;border:1.5px solid #888;border-radius:4px;height:42px;padding:0 10px;width:294px;flex-shrink:1;min-width:120px}
.search input{border:0;outline:0;font-size:16px;width:100%;color:#555}
.icon-btn{background:none;border:3px solid transparent;width:46px;height:46px;display:grid;place-items:center;flex-shrink:0}
.icon-btn.on{border-color:#8b2b2b}
.icon-btn.grid{background:#e9ecef}
.avatar{width:62px;height:56px;background:#e4e6ea;display:grid;place-items:center;flex-shrink:0;border:0}
.avatar span{width:32px;height:32px;border-radius:50%;background:#1a8fe0;color:#fff;font-weight:700;display:grid;place-items:center}
.bell{position:relative}
.bell::after{content:"";position:absolute;top:8px;right:10px;width:8px;height:8px;border-radius:50%;background:#e33}

.page-h{display:flex;align-items:center;gap:20px 60px;flex-wrap:wrap;padding:14px 28px 4px;border-bottom:1.5px solid var(--rule)}
.page-h.nob{border-bottom:0}
.page-h h2{margin:0;font-size:26px;font-weight:700;color:#0d0b33}
.page-h .sp{margin-left:auto;display:flex;gap:10px}
.crumb{font-size:20px;display:flex;gap:12px;align-items:center}
.crumb button{background:none;border:0;font-size:20px;padding:0 2px}
.crumb button.on{background:var(--yellow)}
.tabs{display:flex;flex-wrap:wrap;gap:4px 34px;padding:6px 6px 4px;border-bottom:1.5px solid var(--rule);align-items:center}
.tabs button{background:none;border:0;font-size:20px;padding:2px 30px;border-radius:9px;color:#111}
.tabs.tight{gap:4px 22px}
.tabs.tight button{padding:2px 10px}
.tabs button.on{background:var(--lime)}
.month{margin-left:auto;display:flex;align-items:center;gap:14px;padding-right:20px}
.month select{border:0;border-bottom:1px solid #888;font-size:16px;padding:4px 30px 4px 2px;background:#fff;color:#333}
.chev{background:none;border:0;font-size:24px;font-weight:700;padding:0 4px}
.mnav{font-size:24px;display:flex;align-items:center;gap:6px;white-space:nowrap}
.mnav button{background:none;border:0;font-size:24px;padding:0 2px}
.content{flex:1;padding:12px 6px 20px;min-width:0}
.foot{margin:0 0 0 2px;border:2px solid #000;border-radius:6px;height:44px;display:flex;align-items:center;gap:180px;padding:0 16px;font-weight:700;font-size:16px}

/* ---------- DASHBOARD ---------- */
.dash{display:grid;grid-template-columns:minmax(0,424px) minmax(0,424px) 1fr;gap:12px 44px;align-items:start}
.card{border:2px solid #000;border-radius:14px;padding:6px 22px 14px 20px;min-height:240px}
.card-h{display:flex;justify-content:space-between;align-items:baseline}
.card-h h3{margin:0;font-size:21px;font-weight:700}
.card-h small{font-size:16px;color:#222}
.sub{color:var(--muted);font-size:16px;margin:0 0 0 20px}
.row{display:grid;grid-template-columns:30px 1fr auto;align-items:center;gap:6px;margin-top:12px}
.row .lbl{font-size:21px;line-height:1.1}
.row .lbl small{display:block;color:var(--muted);font-size:16px;padding-left:18px}
.amt{color:var(--num);font-size:24px;font-variant-numeric:tabular-nums}
.row.tight{margin-top:6px}
.row.tight .amt{font-size:22px}
.ico{width:26px;height:26px;border-radius:50%;background:#1a8fe0;display:grid;place-items:center}
.bar{display:block;width:128px;height:10px;margin:4px 0 0 32px;background:linear-gradient(90deg,#ec6f1c 50%,#d3d8db 50%)}
.period{font-size:12px;line-height:1.4;color:#111}
.donut-wrap{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.legend{list-style:none;margin:0;padding:0;font-size:14px;display:grid;gap:12px}
.legend li{display:flex;align-items:center;gap:8px}
.legend i{width:10px;height:10px;border-radius:50%}
.cat{display:grid;grid-template-columns:minmax(0,424px) 1fr;gap:20px;align-items:start;padding-bottom:12px;border-bottom:1.5px solid #888}
.card.small{min-height:230px;border-width:3px}
.sched{display:grid;grid-template-columns:30px 1fr auto;gap:6px;margin-top:22px;align-items:start}
.sched .who{color:#5a5a5a;font-weight:700;font-size:16px;display:block;padding-left:16px}
.sched .god{color:#1e2a8f;font-size:22px}
.sched .time{color:#5a5a5a;font-weight:700;font-size:16px;display:block}
.summary-box{border:1px solid #d6dbe1;min-height:240px;display:flex;flex-direction:column;padding:12px 16px;gap:6px}
.summary-box h4{margin:0 0 6px;font-size:14px;color:#333;font-weight:600}
.hbar{display:grid;grid-template-columns:80px 1fr 40px;align-items:center;gap:8px;font-size:12px}
.hbar span:nth-child(2){height:12px}
.band{display:flex;align-items:center;justify-content:space-between;background:var(--band);color:#fff;margin-top:8px;padding:4px 14px 4px 26px}
.band h3{margin:0;font-size:21px;font-weight:700;letter-spacing:.5px}
.band .month{background:#fff;color:#111;padding:2px 8px;gap:10px;margin:0}
.band select{border:0;font-size:13px;background:#fff}

/* ---------- LIST PAGES ---------- */
.list-h{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:6px 16px 0}
.list-h h3{margin:0;font-size:20px;font-weight:700}
.list-h .r{display:flex;align-items:center;gap:40px;margin-left:auto}
.btn-add{background:var(--add);color:#fff;border:0;border-radius:16px;font-size:18px;padding:6px 32px}
.tools{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:8px 20px}
.tools label{font-size:17px;color:#333;display:flex;align-items:center;gap:6px}
.tools select{border:0;border-left:1px solid #ddd;border-right:1px solid #ddd;font-size:16px;padding:6px 8px;color:#777;background:#fff}
.tsearch{display:flex;align-items:center;border:2px solid #000;border-radius:8px;height:38px;width:454px;max-width:100%;padding:0 10px;margin-left:4px}
.tsearch input{border:0;outline:0;flex:1;font-size:15px;min-width:0;background:transparent}
.tbtns{display:flex;gap:4px;margin-left:4px;flex-wrap:wrap}
.tbtns button{background:var(--gray-btn);color:#fff;border:0;font-size:13px;padding:6px 18px;box-shadow:0 2px 3px rgba(0,0,0,.25)}
.tbtns button:nth-child(2){background:#c4ccd4}
.twrap{overflow-x:auto;padding:4px 28px}
table{border-collapse:collapse;min-width:100%}
.dt{font-size:17px}
.dt.sm{font-size:14px}
.dt th{background:var(--th);font-weight:400;border:1.5px solid #000;padding:2px 8px;white-space:nowrap}
.dt td{border:1.5px solid #000;padding:1px 8px;white-space:nowrap;position:relative}
td.num{text-align:right;font-variant-numeric:tabular-nums}
td.c{text-align:center}
td.flag::before{content:"";position:absolute;left:0;top:0;border-top:7px solid #138a2e;border-right:7px solid transparent}
.chk{width:20px;height:18px;border:3px solid #2d4373;display:inline-block;vertical-align:middle;background:#fff;cursor:pointer;padding:0}
.chk.on{background:#2d4373;box-shadow:inset 0 0 0 2px #fff}
td.act{padding:0;width:92px}
td.act button{width:100%;height:28px;border:0;color:#fff;font-size:inherit}
.b-view{background:var(--view)}.b-edit{background:var(--edit)}.b-print{background:var(--cyan)}.b-pay{background:var(--purple)}.b-pprint{background:#8e2fa8}
.tg{width:44px;height:24px;border-radius:12px;background:#1b2b4d;position:relative;display:inline-block;vertical-align:middle;border:0;padding:0;flex-shrink:0}
.tg::after{content:"";position:absolute;right:3px;top:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:right .15s}
.tg.off{background:#b8c0cc}.tg.off::after{right:23px}
.dt.sm .tg{width:34px;height:18px}.dt.sm .tg::after{width:13px;height:13px;top:2.5px;right:2px}.dt.sm .tg.off::after{right:19px}
.pay{color:#000;font-size:15px}
.paid{background:#2fb84a;text-align:center}.half{background:#f07b16}.not{background:#ff1a1a;text-align:center;font-weight:700}
.mute{color:#9aa}
.inactive{color:#888;font-size:12px}

/* ---------- MODAL / FORMS ---------- */
.scrim{position:fixed;inset:0;background:rgba(255,255,255,.4);display:grid;place-items:start center;padding-top:calc(40px + env(safe-area-inset-top,0px));padding-bottom:30px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));z-index:20;overflow:auto}
.modal{width:min(1262px,100%);background:var(--panel);border:4px solid #000;padding:8px 36px 18px 16px}
.modal.md{width:min(900px,100%)}
.modal h3{margin:0 0 10px;font-size:26px;font-weight:700;border-bottom:2px solid var(--rule);padding-bottom:4px}
.form{display:grid;grid-template-columns:repeat(2,minmax(0,454px));gap:2px 150px}
.f{display:flex;flex-direction:column;gap:4px;margin-bottom:6px;min-width:0}
.f>label,.f>.lb{font-size:22px}
.fi{border:2px solid #000;border-radius:8px;height:42px;font-size:18px;padding:0 10px;background:#fff;width:100%;color:var(--ink)}
textarea.fi{height:98px;padding:8px 10px;resize:vertical}
select.fi{appearance:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='24'%3E%3Cpath d='M2 2h24L14 22z' fill='%23525a78'/%3E%3C/svg%3E") no-repeat right 8px center;padding-right:44px}
.fi.short{width:110px}
.fl{display:grid;grid-template-columns:150px 1fr;align-items:center;gap:10px;margin-bottom:8px}
.fl>label,.fl>.lb{font-size:20px}
.fl .fi{height:38px}
.mfoot{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:12px;margin-top:8px}
.mbtns{display:flex;gap:4px;margin-left:auto}
.mbtns button,.bigbtn{border:0;color:#fff;font-size:22px;min-width:142px;height:46px;border-radius:6px;padding:0 14px}
.b-close{background:var(--close)}.b-clear{background:var(--clear)}.b-save{background:var(--save)}
.b-up{background:var(--upload)}.b-del{background:var(--del)}.b-blue{background:var(--clear)}
.imgbox{display:flex;gap:14px;align-items:flex-start}
.imgbox .ph{width:96px;height:78px;border:2px solid #000;border-radius:8px;background:#fff}
.imgbox .bb{display:flex;flex-direction:column;gap:6px}
.imgbox .bb button{border:0;color:#fff;border-radius:6px;font-size:14px;padding:4px 30px}
.box{border:2px solid #000;border-radius:8px;padding:12px 16px;background:var(--panel)}
.uprow{display:flex;gap:6px;align-items:center;margin-bottom:22px;flex-wrap:wrap}
.uprow .fi{width:190px}
.uprow button{border:0;color:#fff;border-radius:6px;font-size:22px;padding:4px 14px}
.notif{display:grid;grid-template-columns:auto 44px 1fr;gap:6px 10px;align-items:center;border:2px solid #000;border-radius:8px;padding:8px 10px;font-weight:700}
.sq{width:44px;height:34px;border:2px solid #000;border-radius:8px;background:#fff;cursor:pointer;padding:0}
.sq.on{background:#2d4373}
.verified{color:#1f6b2f;font-weight:700;font-size:18px}
.toolbar-row{display:flex;gap:14px;align-items:center;flex-wrap:wrap;padding:6px 0 10px;border-bottom:2px solid var(--rule);margin-bottom:12px}
.toolbar-row label{font-size:22px}

/* grids (calendar config, availability) */
.grid-wrap{overflow-x:auto}
.gt{font-size:13px;border-collapse:collapse;min-width:auto}
.gt th,.gt td{border:1px solid #000;padding:1px 0;text-align:center;min-width:26px}
.gt th{background:var(--th);font-weight:400}
.gt td.l,.gt th.l{text-align:left;padding:1px 4px;min-width:68px;background:#fff}
.gt td.y{background:var(--cell)}
.gt input{width:26px;border:0;background:transparent;text-align:center;font-size:12px;padding:2px 0}
.gt.big{font-size:15px;font-weight:700}
.gt.big th,.gt.big td{min-width:32px}
.gt.big tr.al td:not(.l){background:var(--peach)}
.g0{color:#e00}.gpos{color:#1aa33a}
.slot{display:grid;grid-template-columns:120px 1fr;align-items:center;gap:6px;margin-bottom:6px}
.slot>span{font-size:22px}

/* calendar month */
.calbar{display:flex;align-items:center;justify-content:space-between;padding:14px 30px 6px 20px;gap:10px;flex-wrap:wrap}
.fcb{display:flex}
.fcb button{background:#f4f4f4;border:1px solid #ccc;font-size:12px;padding:3px 9px;color:#555}
.fcb button.on{background:#ddd}
.calbar .ttl{font-size:17px;color:#333}
.cal{margin:0 30px 0 20px;border-collapse:collapse;table-layout:fixed;width:calc(100% - 50px);min-width:640px}
.cal th{font-size:11px;border:1px solid #ddd;padding:2px;color:#333;font-weight:700}
.cal td{background:var(--cal);border:1px solid #ddd;height:140px;vertical-align:top;padding:2px 4px;font-size:11px}
.cal td.other .dn{color:#aaa}
.cal td.today{background:#fdf7e1}
.cal .dn{text-align:right;color:#444}
.ev{display:block;width:100%;text-align:left;border:0;background:none;font-size:18px;color:#1c5e2b;padding:2px 0;line-height:1.2}
.ev.unpaid{color:#a8272b}
.chip{display:block;width:92%;text-align:left;border:1px solid rgba(0,0,0,.35);font-size:14px;padding:2px 8px;margin:4px 0;color:#111}
.chip.o{background:#ed7d31}.chip.b{background:#5b9bd5}.chip.g{background:#70ad47}
.btn-avail{background:var(--save);color:#fff;border:0;border-radius:12px;padding:10px 12px;font-size:14px}
.btn-nb{background:#e9e9ec;border:3px solid var(--navy-2);font-size:16px;padding:6px 16px;color:#333}

/* booking */
.book{display:grid;grid-template-columns:minmax(0,1fr) 440px;gap:30px;padding:12px 4px 0 30px}
.bk{display:grid;grid-template-columns:200px 1fr;gap:10px 10px;align-items:center}
.bk>label,.bk>.lb{font-size:24px}
.req{color:#d31a1a;font-size:32px;line-height:1;vertical-align:middle;background:none;border:0;padding:0 4px;font-weight:700}
.seg{display:flex;gap:4px;flex-wrap:wrap}
.seg button{border:0;background:#1a76ec;color:#fff;border-radius:8px;font-size:18px;padding:12px 18px;min-width:142px}
.seg button.on{background:#0b4cb4}
.osum{border:2px solid #000}
.osum h4{margin:0;padding:6px 14px;font-size:22px;border-bottom:2px solid #000}
.osum .lines{min-height:180px;padding:14px 18px;display:grid;gap:14px;align-content:start}
.osum .ln{display:flex;justify-content:space-between;font-size:22px;align-items:center;gap:8px}
.osum .ln b{font-variant-numeric:tabular-nums}
.osum .tot{display:grid;grid-template-columns:1fr 1fr;border-top:2px solid #000;font-size:22px}
.osum .tot span{padding:4px 14px}.osum .tot b{border-left:2px solid #000;padding:4px 14px;text-align:right;font-variant-numeric:tabular-nums}
.xb{background:none;border:0;color:#d31a1a;font-weight:900;font-size:22px;padding:0 6px 0 0}
.acc{margin-top:10px}
.acc>button{width:100%;display:flex;justify-content:space-between;background:var(--band);color:#fff;border:0;font-size:22px;padding:8px 20px 8px 30px;text-align:left}
.acc-body{max-width:704px;margin:10px auto;border:1px solid var(--acc)}
.acc-body .hd{background:var(--acc);color:#fff;font-weight:700;font-size:14px;display:grid;padding:6px 0;text-align:center}
.acc-body .rw{display:grid;gap:6px;padding:4px;background:#d9e3f0}
.acc-body input,.acc-body select{height:30px;border:1px solid #9fb2cc;border-radius:4px;font-size:13px;background:#fff;padding:0 8px;min-width:0}
.acc-body .sel{display:flex;align-items:center;gap:20px;background:var(--acc);color:#fff;padding:8px 16px;font-size:14px;border-bottom:3px solid #fff}
.acc-body .sel select{flex:1;height:32px}
.formbtns{display:flex;justify-content:flex-end;gap:10px;padding:20px 60px 0}
.btn-cancel{background:var(--clear);color:#fff;border:0;border-radius:8px;font-size:24px;padding:6px 30px}
.btn-smp{background:var(--save);color:#fff;border:0;border-radius:8px;font-size:14px;padding:6px 14px;max-width:150px;line-height:1.3}

/* payment */
.paywrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;align-items:start}
.pcard{border:3px solid #000;border-radius:10px;padding:10px 30px;display:grid;grid-template-columns:110px 1fr auto;gap:2px 10px;font-size:15px}
.pcard b{font-weight:400;color:#1e2a8f}
.paypanel{background:var(--panel);border:2px solid #000}
.paypanel h4{margin:0;background:var(--band);color:#fff;padding:6px 14px;font-size:16px}
.paypanel .in{padding:16px 24px;display:grid;grid-template-columns:180px 1fr;gap:10px;font-size:20px;align-items:center}
.paypanel .in b{font-weight:400;color:#1e2a8f;font-size:22px}
.paypanel .fi{height:34px;width:200px;justify-self:end;text-align:right}

/* POS */
.poswin{border:4px solid #000;background:var(--panel);margin:8px 10px;padding:20px 20px 24px;min-height:600px}
.poslog{max-width:460px;margin:40px auto 0;display:grid;grid-template-columns:170px 1fr;gap:12px 10px;align-items:center;font-size:17px}
.poslog h2{grid-column:1/-1;text-align:center;font-size:30px;color:var(--navy-2);margin:0 0 20px}
.otp{display:flex;gap:6px}
.otp input{width:32px;height:28px;border:1.5px solid #333;border-radius:4px;text-align:center;font-size:16px}
.btn-g{background:var(--save);color:#fff;border:0;border-radius:4px;padding:4px 18px;font-size:16px}
.pos{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:14px}
.ptabs{display:flex;background:#0b2a6e;overflow-x:auto}
.ptabs button{border:0;background:none;color:#fff;font-size:12px;font-weight:700;padding:12px 26px;white-space:nowrap}
.ptabs button.on{background:#fff;color:#0b2a6e}
.pitems{border:1px solid #0b2a6e;border-top:0;padding:8px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px;min-height:420px;align-content:start;background:#fff}
.pitem{border:1.5px solid #ccc;background:#fff;height:80px;text-align:left;padding:10px;display:flex;flex-direction:column;justify-content:space-between;font-size:13px}
.pitem:hover{background:#eef4ff}
.pitem small{align-self:flex-end;font-size:12px}
.bill{border:1px solid #0b2a6e;background:#fff;align-self:start}
.bill table{font-size:13px}
.bill th{background:var(--acc);color:#fff;font-weight:400;padding:8px;text-align:left}
.bill td{padding:6px 8px;border-bottom:1px solid #eee}
.bill .gt2{display:flex;justify-content:flex-end;gap:60px;padding:10px 14px;border-top:1px solid #0b2a6e;font-weight:700;font-size:13px}
.bill .gt2 b{font-size:16px}
.qb{border:1px solid #bbb;background:#f6f6f6;width:22px;height:22px;padding:0;font-size:14px}
.posbtns{display:flex;gap:14px;align-items:flex-end;margin-top:40px}
.posbtns button{border:0;color:#fff;border-radius:10px;font-size:26px;width:178px;height:110px;line-height:1.3}
.posbtns .p{margin-left:auto;font-size:36px}
.sess{max-width:820px;margin:20px auto 0;text-align:center}
.sess h2{font-size:32px;color:var(--navy-2);margin:0 0 16px}
.sess table{font-size:19px;margin-bottom:20px}
.sess th{background:var(--band);color:#fff;border:1px solid #000;padding:2px 10px;font-weight:400}
.sess td{border:1px solid #000;padding:2px 10px}
.otpbox{border:2px solid #000;width:380px;max-width:100%;margin:0 auto;padding:40px 20px 16px;display:grid;justify-items:center;gap:16px;background:#fff}
.cc{display:grid;grid-template-columns:auto 1fr;gap:30px;align-items:start}
.cct{border-collapse:collapse;font-size:20px}
.cct th{background:#fff;border:3px solid #000;font-size:28px;padding:2px 20px}
.cct td{border:2px solid #000;padding:2px 10px;font-weight:700;min-width:84px;text-align:right}
.cct td input{width:70px;border:0;text-align:right;font-size:18px;background:transparent}
.cct td:first-child{min-width:140px}

.scan{max-width:520px;margin:30px auto;background:#f0f1f3;padding:12px;box-shadow:0 1px 4px rgba(0,0,0,.15)}
.scan h4{margin:0;background:var(--band);color:#fff;text-align:center;font-size:20px;padding:16px}
.scan input{display:block;width:calc(100% - 30px);margin:16px auto;height:34px;border:1px solid #ccc;font-size:16px;padding:0 10px}
.scan button{display:block;width:calc(100% - 30px);margin:0 auto 10px;background:var(--band);color:#fff;border:0;font-size:15px;padding:6px}

/* privilege matrix */
.pm{font-size:19px;border-collapse:separate;border-spacing:0;min-width:auto}
.pm td,.pm th{border:1.5px solid #000;padding:0 6px;height:32px}
.pm th{background:var(--th);font-weight:400;min-width:140px}
.pm td.c{text-align:center}
.pm .grp{font-weight:700}
.pm .sub td:first-child{padding-left:28px}
.pm .gap{border:0;width:16px;min-width:16px;padding:0}

.kovil{max-width:760px;padding:4px 0 0 4px}
.kovil .fl{grid-template-columns:150px 254px}
.cash-bal{text-align:center;color:#1f4e8c;font-size:28px;margin:18px 0 26px}

/* settings dropdown */
.menu{position:absolute;right:120px;top:84px;background:#fff;border:3px solid #000;padding:14px 40px 30px 10px;display:grid;grid-template-columns:repeat(3,auto);gap:0 70px;z-index:15;box-shadow:0 4px 14px rgba(0,0,0,.15)}
.menu h4{margin:0 0 10px;font-size:20px}
.menu button{display:block;background:none;border:0;font-size:18px;padding:3px 10px;text-align:left;color:#222}
.menu button:hover{text-decoration:underline}
.menu .raise{color:#a8272b;font-weight:700;margin-top:10px}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(24px + env(safe-area-inset-bottom,0px));background:#144d1f;color:#fff;padding:10px 22px;border-radius:6px;z-index:30;font-size:15px;max-width:calc(100% - 32px)}
.note{padding:16px 28px;color:#555;font-size:16px;max-width:65ch}
.rep{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px;padding:10px 28px}
.rep button{border:2px solid #000;border-radius:10px;background:#fff;text-align:left;padding:14px 16px;font-size:17px}
.rep button small{display:block;color:#666;font-size:13px;margin-top:4px}

@media (max-width:1100px){
  .dash{grid-template-columns:1fr 1fr}.period{display:none}
  .cat,.book,.paywrap,.pos{grid-template-columns:1fr}
  .form{grid-template-columns:1fr;gap:0}
  .foot{gap:20px}
}
@media (max-width:760px){
  #login{grid-template-columns:1fr}.login-art{justify-self:center}
  #app{grid-template-columns:1fr}
  .side{padding-bottom:6px}.nav{display:flex;flex-wrap:wrap}.nav li{flex:1 1 33%}.nav button{font-size:17px}.nav button::after{font-size:13px}
  .logo b{font-size:30px}
  .top{flex-wrap:wrap;height:auto;padding:8px 12px;gap:8px}.org{font-size:16px;flex:1 1 70%}.search{order:5;width:100%;margin-left:0}
  .dash{grid-template-columns:1fr;gap:12px}.card{padding:6px 12px 12px}
  .row .lbl{font-size:17px}.amt{font-size:19px}
  .tabs button{font-size:16px;padding:2px 10px}.month{margin-left:0}
  .foot{font-size:12px;gap:10px;height:auto;padding:8px}.foot span+span{display:none}
  .menu{left:8px;right:8px;grid-template-columns:1fr;gap:10px}
  .mbtns button{min-width:90px;font-size:18px}
  .twrap{padding:4px 10px}
  .bk,.fl,.kovil .fl{grid-template-columns:1fr}.book{padding-left:4px}
  .poslog{grid-template-columns:1fr}.pitems{grid-template-columns:repeat(2,minmax(0,1fr))}
  .posbtns button{width:110px;height:80px;font-size:18px}
  .cc{grid-template-columns:1fr}
  .modal{padding:8px 12px 14px}
  .content{padding-left:max(6px,env(safe-area-inset-left,0px));padding-right:max(6px,env(safe-area-inset-right,0px))}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ===== CodeIgniter build additions ===== */
a{color:inherit}
.nav a{width:100%;display:flex;justify-content:space-between;align-items:center;border:3px solid transparent;color:#fff;font-size:26px;padding:2px 6px;text-decoration:none}
.nav a::after{content:">>";font-weight:700;font-size:20px}
.nav a.on{border-color:#8b2b2b}
a.icon-btn{text-decoration:none}
.tabs a{font-size:20px;padding:2px 30px;border-radius:9px;color:#111;text-decoration:none}
.tabs.tight a{padding:2px 10px}
.tabs a.on{background:var(--lime)}
.crumb a{font-size:20px;padding:0 2px;text-decoration:none}
.crumb a.on{background:var(--yellow)}
.mnav a{text-decoration:none;padding:0 2px}
.tbtns a.tb{background:var(--gray-btn);color:#fff;font-size:13px;padding:6px 18px;box-shadow:0 2px 3px rgba(0,0,0,.25);text-decoration:none}
.fcb a{background:#f4f4f4;border:1px solid #ccc;font-size:12px;padding:3px 9px;color:#555;text-decoration:none}
.fcb a.on{background:#ddd}
.tgf{display:inline-flex;align-items:center}
.flash{margin:10px 28px 0;padding:10px 16px;border-radius:6px;font-size:15px}
.flash.ok{background:#e3f4e6;color:#144d1f;border:1px solid #9fd3a8}
.flash.err{background:#fde7e7;color:#8f1111;border:1px solid #f0a8a8}
.toast.err{background:#a8272b}
.empty{padding:14px;text-align:center;color:#666}
.dt tr.dim td{color:#999}
.dt tr.hidden-row{display:none}
.right{text-align:right}
.muted{color:#777;font-size:13px}
.thumb{width:96px;height:78px;border:2px solid #000;border-radius:8px;background:#fff center/cover no-repeat}
.file-name{font-size:13px;color:#555;max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.filter-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;padding:0 20px 8px}
.filter-row select,.filter-row input{height:32px;border:1.5px solid #888;border-radius:4px;padding:0 8px}
.report-table{font-size:14px}
.report-table td,.report-table th{padding:3px 8px}
.kpi{display:flex;gap:30px;flex-wrap:wrap;padding:8px 28px}
.kpi div{font-size:15px}.kpi b{display:block;font-size:22px;color:var(--num);font-variant-numeric:tabular-nums}
.receipt{max-width:340px;margin:0 auto;font-family:"Courier New",monospace;font-size:13px;background:#fff;padding:14px}
.receipt h3{text-align:center;margin:0 0 4px;font-size:15px}
.receipt table{width:100%;min-width:0}
.receipt td{padding:2px 0}
.receipt .tot{border-top:1px dashed #000;font-weight:700}
.req-star{color:#d31a1a}
@media print{
  .side,.top,.foot,.tools,.tabs,.page-h .sp,.list-h .r,.no-print,.mbtns,.formbtns,#toastHost{display:none!important}
  #app{display:block}
  .twrap{overflow:visible;padding:0}
  td.act,th.act-h{display:none}
  body{font-size:12px}
}
.menu a.mi{display:block;font-size:18px;padding:3px 10px;color:#222;text-decoration:none}
.menu a.mi:hover{text-decoration:underline}
.menu a.raise{color:#a8272b;font-weight:700;margin-top:10px}
.menu{top:80px}
.chev{text-decoration:none;color:#111}
textarea.fi{font-family:inherit}
.pm td.grp{font-weight:700}
.pm .sub td:first-child{color:#222}
.book{grid-template-columns:minmax(0,1fr) 400px;gap:24px}
.bk{grid-template-columns:170px 1fr}
.seg{flex-wrap:nowrap}
.seg button{min-width:0;flex:1 1 0;max-width:150px;padding:12px 10px;white-space:nowrap}
.btn-g{white-space:nowrap}
@media (max-width:1100px){.seg{flex-wrap:wrap}}
.ptabs button{padding:12px 18px;flex:1 1 auto}

/* sidebar toggle (header menu icon) */
.burger{cursor:pointer;border-radius:4px}
.burger:hover{background:#eef0f4}
.burger-arrow{transition:transform .2s;transform-origin:30px 12px}
#app{transition:grid-template-columns .2s}
#app.menu-closed{grid-template-columns:0 1fr}
#app.menu-closed .side{overflow:hidden;padding:0;visibility:hidden}
#app.menu-closed .burger-arrow{transform:scaleX(-1)}
@media (max-width:760px){
  #app .side{display:none}
  #app.menu-open .side{display:block}
  #app .burger-arrow{transform:scaleX(-1)}
  #app.menu-open .burger-arrow{transform:none}
}
@media print{#app.menu-closed{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){#app,.burger-arrow{transition:none}}

/* design switch (Classic / Modern) — classic look */
.nav-ico{display:none}
.theme-sw{display:inline-flex;border:1.5px solid #888;border-radius:4px;overflow:hidden;flex-shrink:0}
.theme-sw button{background:#fff;border:0;font-size:13px;padding:5px 10px;color:#333}
.theme-sw button+button{border-left:1.5px solid #888}
.theme-sw button[aria-pressed="true"]{background:var(--navy-2);color:#fff}
@media (max-width:760px){.theme-sw button{padding:4px 7px;font-size:12px}}
@media print{.theme-sw{display:none}}
/* modern-only helpers (hidden in Classic) */
.m-only{display:none!important}
.acc-chev{display:none}
.hint{display:block}
/* POS: codes shown on screen when no SMS gateway (both designs) */
.stepn{display:none;font-style:normal}
.pl-sub{display:none}
.otp-show{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:8px 12px;align-items:center;border:2px dashed #b5520f;background:#fff8e6;border-radius:8px;padding:10px 14px;margin:4px 0}
.otp-show[hidden]{display:none}
.otp-show .os-h{grid-column:1/-1;font-size:14px;font-weight:700;color:#8a3d0b}
.otp-show .os-c{display:flex;flex-direction:column;align-items:center}
.otp-show .os-c span{font-size:13px;color:#555}
.otp-show .os-c b{font-size:30px;letter-spacing:8px;font-variant-numeric:tabular-nums;color:#111}
.otp-show .os-fill{grid-column:1/-1;justify-self:center;background:#b5520f;color:#fff;border:0;border-radius:6px;padding:6px 18px;font-size:15px}
.otp-show.os-one{grid-template-columns:1fr;width:100%}
/* phone fixes (both designs) — desktop layout unchanged */
@media (max-width:760px){
  .page-h>[style*="margin-left"]{margin-left:0!important}
  .page-h .btn-avail[style]{padding:6px 16px!important;font-size:16px!important}
  .list-h .r{flex-wrap:wrap;gap:10px;margin-left:0}
  .list-h .r input,.list-h .r .fi{max-width:100%}
  .pos>div{min-width:0}
  .bk>div{min-width:0}
  .bk .tsearch{max-width:100%}
}
@media (max-width:1100px){.book{grid-template-columns:1fr}}
.foot .foot-user{margin-left:auto;font-weight:600}
.ri-inv{font-size:12px;font-weight:700}.ri-inv.paid{color:#1f6b2f}.ri-inv.due{color:#a8272b}
.pt-row{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.pt-sub{font-size:20px}
.pt-slot{color:#555;font-size:14px}
/* avatar user menu */
.umenu-wrap{position:relative}
button.avatar{border:0;padding:0;cursor:pointer;font:inherit}
.umenu{position:absolute;right:0;top:calc(100% + 8px);z-index:40;min-width:230px;background:#fff;border:2px solid #000;border-radius:8px;padding:12px 14px;display:grid;gap:6px;font-size:15px;box-shadow:0 6px 18px rgba(0,0,0,.18)}
.umenu[hidden]{display:none}
.umenu small{color:#666;font-size:12px;margin-bottom:4px}
.umenu a{color:#111;text-decoration:none;padding:4px 0}
.umenu a:hover{text-decoration:underline}
.umenu .um-out{color:#a8272b;font-weight:600;border-top:1px solid #ddd;padding-top:8px}
/* generic list Filter ▾ */
.lfilter{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:flex-end;padding:8px 28px 12px}
.lfilter[hidden]{display:none}
.lfilter label{display:flex;flex-direction:column;gap:3px;font-size:13px}
.lfilter .fi{height:30px;min-width:150px;font-size:14px}
.lf-clear{background:none;border:0;color:#a8272b;text-decoration:underline;font-size:13px;padding:6px 0}
[data-filter].on{outline:2px solid #2c6b2f}
@media print{.lfilter{display:none!important}}