/* Babu-G Automobile — application styles (extracted from the single-file build) */
:root{
  --bg:#EEF1F4; --panel:#FFFFFF; --panel2:#F6F8F9; --sink:#E6EBEF;
  --ink:#16232E; --ink2:#5C6D7A; --ink3:#8496A3;
  --line:#D8E0E6; --line2:#C3CFD8;
  --oil:#14465F; --oil2:#1B5E7E; --oilsoft:#E2EDF2;
  --amber:#D9880F; --ambersoft:#FBEFD9;
  --red:#B8372C; --redsoft:#FAE6E3;
  --go:#25714F; --gosoft:#E0F0E8;
  --onoil:#FFFFFF;
  --shadow:0 1px 2px rgba(16,35,46,.06), 0 8px 24px -12px rgba(16,35,46,.22);
  --r:10px; --rs:7px;
  --sb:252px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0F171D; --panel:#17222A; --panel2:#1C2932; --sink:#121C23;
    --ink:#E8EEF2; --ink2:#9BABB7; --ink3:#778996;
    --line:#2A3A45; --line2:#364854;
    --oil:#5FB6D6; --oil2:#7FC9E4; --oilsoft:#12313E;
    --amber:#EDA53B; --ambersoft:#33270F;
    --red:#E4756A; --redsoft:#3A1F1B;
    --go:#54C08D; --gosoft:#123126;
    --onoil:#08141A;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 28px -14px rgba(0,0,0,.7);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0F171D; --panel:#17222A; --panel2:#1C2932; --sink:#121C23;
  --ink:#E8EEF2; --ink2:#9BABB7; --ink3:#778996;
  --line:#2A3A45; --line2:#364854;
  --oil:#5FB6D6; --oil2:#7FC9E4; --oilsoft:#12313E;
  --amber:#EDA53B; --ambersoft:#33270F;
  --red:#E4756A; --redsoft:#3A1F1B;
  --go:#54C08D; --gosoft:#123126;
  --onoil:#08141A;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 28px -14px rgba(0,0,0,.7);
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--ink);
  font-family:"Barlow",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:15px; line-height:1.5; -webkit-font-smoothing:antialiased;
  font-variant-numeric:tabular-nums;
}
h1,h2,h3,h4,.cond{font-family:"Barlow Condensed","Barlow",sans-serif; letter-spacing:.01em}
h1{font-size:30px;font-weight:700;margin:0;line-height:1.1}
h2{font-size:22px;font-weight:700;margin:0}
h3{font-size:17px;font-weight:600;margin:0}
a{color:var(--oil)}
img{max-width:100%}
:focus-visible{outline:2px solid var(--amber); outline-offset:2px; border-radius:4px}
::selection{background:var(--amber);color:#fff}

/* ---------- login / instrument cluster ---------- */
#login{
  min-height:100dvh; display:grid; place-items:center; padding:24px;
  background:
    radial-gradient(900px 500px at 50% -10%, var(--oilsoft), transparent 70%),
    var(--bg);
}
.cluster{width:min(940px,100%); display:grid; gap:34px; grid-template-columns:1fr 1fr; align-items:center}
@media (max-width:820px){ .cluster{grid-template-columns:1fr; gap:20px} }
.dialwrap{display:flex;flex-direction:column;align-items:center;gap:14px}
.dial{width:min(330px,74vw)}
.dial .face{fill:var(--panel); stroke:var(--line2); stroke-width:1.5}
.dial .tick{stroke:var(--ink3); stroke-width:2.4; stroke-linecap:round}
.dial .tick.major{stroke:var(--ink2); stroke-width:3.4}
.dial .tick.red{stroke:var(--red)}
.dial .num{fill:var(--ink2); font:600 13px "Barlow Condensed",sans-serif; text-anchor:middle}
.dial .arc{fill:none;stroke:var(--red);stroke-width:5;stroke-linecap:round;opacity:.85}
.needle{transform-origin:110px 110px; transform:rotate(-124deg); animation:sweep 2.1s cubic-bezier(.2,.9,.2,1) .25s both}
.needle line{stroke:var(--amber); stroke-width:4.5; stroke-linecap:round}
.needle circle{fill:var(--oil)}
@keyframes sweep{
  0%{transform:rotate(-124deg)}
  42%{transform:rotate(118deg)}
  62%{transform:rotate(-96deg)}
  78%{transform:rotate(-104deg)}
  100%{transform:rotate(-100deg)}
}
.dial .odo{fill:var(--ink); font:700 19px "Barlow Condensed",sans-serif; text-anchor:middle; letter-spacing:.08em}
.dial .odolabel{fill:var(--ink3); font:500 9.5px "Barlow",sans-serif; text-anchor:middle; letter-spacing:.14em}
.brandline{text-align:center}
.brandline .nm{font-family:"Barlow Condensed";font-weight:700;font-size:27px;line-height:1}
.brandline .sb{color:var(--ink2);font-size:13.5px;margin-top:3px}

.card{background:var(--panel); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow)}
.loginbox{padding:26px 24px 22px; animation:rise .6s cubic-bezier(.2,.8,.2,1) .15s both}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.loginbox p.lead{color:var(--ink2);margin:6px 0 20px;font-size:14px}

label{display:block;font-size:12.5px;font-weight:600;color:var(--ink2);margin:0 0 5px}
input,select,textarea{
  width:100%; padding:9px 11px; font:inherit; color:var(--ink);
  background:var(--panel2); border:1px solid var(--line2); border-radius:var(--rs);
  transition:border-color .15s, box-shadow .15s, background .15s;
}
textarea{min-height:66px;resize:vertical}
input:hover,select:hover,textarea:hover{border-color:var(--ink3)}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--oil); background:var(--panel);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--oil) 18%, transparent);
}
input[type=checkbox]{width:auto;padding:0;vertical-align:-2px}
.field{margin-bottom:14px}
.hint{font-size:12px;color:var(--ink3);margin-top:5px}
.err{font-size:13px;color:var(--red);background:var(--redsoft);border:1px solid color-mix(in srgb,var(--red) 35%,transparent);
     padding:8px 10px;border-radius:var(--rs);margin-bottom:14px}
.shake{animation:shake .38s}
@keyframes shake{0%,100%{transform:none}20%{transform:translateX(-7px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(3px)}}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  font:600 14.5px "Barlow",sans-serif; padding:9px 16px; border-radius:var(--rs);
  border:1px solid transparent; background:var(--oil); color:var(--onoil); cursor:pointer;
  transition:transform .12s, filter .15s, background .15s, border-color .15s;
}
.btn:hover{filter:brightness(1.08)}
.btn:active{transform:translateY(1px) scale(.99)}
.btn.block{width:100%}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line2)}
.btn.ghost:hover{background:var(--panel2)}
.btn.amber{background:var(--amber);color:#26180A}
.btn.danger{background:transparent;color:var(--red);border-color:color-mix(in srgb,var(--red) 40%,transparent)}
.btn.danger:hover{background:var(--redsoft)}
.btn.sm{padding:5px 10px;font-size:13px}
.btn.wa{background:#1FA855;color:#fff;border-color:#1FA855}
.btn[disabled]{opacity:.5;cursor:not-allowed}

/* ---------- app shell ---------- */
#app{display:none; min-height:100dvh}
#app.on{display:block}
.sidebar{
  position:fixed; inset:0 auto 0 0; width:var(--sb); background:var(--panel);
  border-right:1px solid var(--line); display:flex; flex-direction:column; z-index:60;
  transform:translateX(0); transition:transform .28s cubic-bezier(.3,.8,.3,1);
}
.sidehead{padding:16px 18px; border-bottom:1px solid var(--line); display:flex; gap:10px; align-items:center}
.mark{width:34px;height:34px;border-radius:9px;background:var(--oil);display:grid;place-items:center;flex:0 0 auto}
.mark svg{width:20px;height:20px;stroke:var(--onoil);fill:none;stroke-width:1.9}
.sidehead .nm{font-family:"Barlow Condensed";font-weight:700;font-size:19px;line-height:1.05}
.sidehead .sb{font-size:11.5px;color:var(--ink3);line-height:1.2}
nav.side{padding:12px 10px; flex:1; overflow-y:auto}
nav.side .grp{font-size:11px;font-weight:600;color:var(--ink3);padding:12px 10px 6px}
nav.side a{
  display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:var(--rs);
  color:var(--ink2);text-decoration:none;font-weight:500;font-size:14.5px;position:relative;
  transition:background .15s,color .15s;
}
nav.side a svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;flex:0 0 auto}
nav.side a:hover{background:var(--panel2);color:var(--ink)}
nav.side a.on{background:var(--oilsoft);color:var(--oil);font-weight:600}
nav.side a.on::before{content:"";position:absolute;left:-10px;top:8px;bottom:8px;width:3px;border-radius:0 3px 3px 0;background:var(--amber)}
nav.side a .pill{margin-left:auto;font-size:11px;font-weight:700;background:var(--redsoft);color:var(--red);padding:1px 6px;border-radius:99px}
.sidefoot{padding:12px;border-top:1px solid var(--line);display:flex;gap:8px;align-items:center}
.avatar{width:30px;height:30px;border-radius:50%;background:var(--ambersoft);color:var(--amber);display:grid;place-items:center;font-weight:700;font-size:13px;flex:0 0 auto}
.sidefoot .who{font-size:12.5px;line-height:1.25;overflow:hidden}
.sidefoot .who b{display:block;font-weight:600;font-size:13px}
.sidefoot .who span{color:var(--ink3);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.iconbtn{background:transparent;border:1px solid transparent;border-radius:var(--rs);padding:6px;cursor:pointer;color:var(--ink2);display:grid;place-items:center}
.iconbtn:hover{background:var(--panel2);color:var(--ink)}
.iconbtn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8}

main{margin-left:var(--sb); padding:0 0 60px}
.topbar{
  position:sticky;top:0;z-index:40; background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--line);
  padding:13px 26px; display:flex;align-items:center;gap:12px;
}
.topbar .burger{display:none}
.topbar h1{font-size:24px}
.topbar .sub{color:var(--ink3);font-size:13px;margin-top:1px}
.spacer{margin-left:auto}
.wrap{padding:22px 26px; max-width:1240px}
@media (max-width:1024px){
  .sidebar{transform:translateX(-100%);box-shadow:var(--shadow); width:min(var(--sb),84vw)}
  .sidebar.open{transform:translateX(0)}
  main{margin-left:0}
  .topbar{padding:11px 15px}
  .topbar .burger{display:grid}
  .wrap{padding:16px 15px}
  h1{font-size:22px}
  /* larger touch targets on touch-sized screens */
  .iconbtn{padding:8px}
  .iconbtn svg{width:19px;height:19px}
  .btn{padding:10px 16px}
  .btn.sm{padding:7px 12px}
  .rowacts{gap:2px}
}
@media (max-width:480px){
  .wrap{padding:12px 10px}
  .panel .body{padding:13px}
  .panel > header{padding:12px 13px}
  h1{font-size:19px}
  .topbar{padding:10px 12px;gap:8px}
  .topbar .sub{font-size:12px}
  #quickBill{padding:9px 12px}
  #quickBill .btntext{display:none}
  .stat .v{font-size:26px}
  .modal .box > .body{padding:14px}
}
.scrim{position:fixed;inset:0;background:rgba(10,20,26,.45);z-index:55;opacity:0;pointer-events:none;transition:opacity .25s}
.scrim.on{opacity:1;pointer-events:auto}

/* ---------- views ---------- */
.view{display:none}
.view.on{display:block; animation:viewin .3s cubic-bezier(.2,.8,.2,1) both}
@keyframes viewin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.grid{display:grid;gap:14px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.g5{grid-template-columns:repeat(5,1fr)}
@media (max-width:980px){.g4{grid-template-columns:repeat(2,1fr)} .g5{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:1fr}}
@media (max-width:620px){.g2,.g4{grid-template-columns:1fr}}

.stat{padding:15px 16px;border-radius:var(--r);background:var(--panel);border:1px solid var(--line)}
.stat .k{font-size:12.5px;color:var(--ink2);font-weight:600}
.stat .v{font-family:"Barlow Condensed";font-weight:700;font-size:31px;line-height:1.1;margin-top:3px}
.stat .d{font-size:12.5px;color:var(--ink3);margin-top:2px}
.stat.warn{border-color:color-mix(in srgb,var(--red) 40%,transparent);background:var(--redsoft)}
.stat.warn .v{color:var(--red)}

.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.panel > header{padding:13px 16px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.panel > header h3{flex:0 0 auto}
.panel > header .cnt{font-size:12.5px;color:var(--ink3)}
.panel .body{padding:16px}
.toolbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-left:auto}
.toolbar input,.toolbar select{width:auto;min-width:150px;padding:7px 10px;font-size:14px}
@media (max-width:620px){.toolbar{width:100%;margin-left:0}.toolbar input,.toolbar select{flex:1 1 130px;min-width:0}}

.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;font-size:14px;min-width:620px}
th{text-align:left;font-family:"Barlow Condensed";font-weight:600;font-size:14px;color:var(--ink2);
   padding:9px 14px;border-bottom:1px solid var(--line);background:var(--panel2);white-space:nowrap}
td{padding:10px 14px;border-bottom:1px solid var(--line);vertical-align:middle}
tbody tr{transition:background .15s}
tbody tr:hover{background:var(--panel2)}
td.num,th.num{text-align:right}
td .sub{font-size:12.5px;color:var(--ink3)}
tr.flash{animation:flash 1.5s ease-out}
@keyframes flash{0%{background:var(--ambersoft)}100%{background:transparent}}
.rowacts{display:flex;gap:5px;justify-content:flex-end}

.icon-action{
  width:38px;height:38px;padding:0;border:1px solid var(--line2);border-radius:8px;
  background:var(--panel);color:var(--ink2);display:inline-grid;place-items:center;cursor:pointer;
  transition:background .15s,border-color .15s,color .15s,transform .12s;
}
.icon-action:hover{background:var(--panel2);border-color:var(--ink3);color:var(--ink)}
.icon-action:active{transform:translateY(1px) scale(.98)}
.icon-action svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.icon-action.copy{color:var(--oil)}
.icon-action.copy:hover{background:var(--oilsoft);border-color:var(--oil);}
.icon-action.edit{color:var(--oil)}
.icon-action.edit:hover{background:var(--oilsoft);border-color:var(--oil);}
.icon-action.delete{color:var(--red)}
.icon-action.delete:hover{background:var(--redsoft);border-color:var(--red);}
.icon-action.view{color:var(--oil)}
.icon-action.share{color:var(--go)}
.icon-action.pdf{color:var(--amber)}
.icon-action.email{color:var(--oil)}
.icon-action.email:hover{background:var(--oilsoft);border-color:var(--oil)}

.tag{display:inline-block;font-size:11.5px;font-weight:600;padding:2px 8px;border-radius:99px;background:var(--sink);color:var(--ink2);white-space:nowrap}
.tag.oil{background:var(--oilsoft);color:var(--oil)}
.tag.amb{background:var(--ambersoft);color:var(--amber)}
.tag.red{background:var(--redsoft);color:var(--red)}
.tag.go{background:var(--gosoft);color:var(--go)}
.tag.linklike{border:none;cursor:pointer;font:inherit;font-size:11.5px;font-weight:600}
.tag.linklike:hover{filter:brightness(0.94)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{border:1px solid var(--line2);border-radius:99px;padding:4px 11px;font-size:13px;cursor:pointer;background:var(--panel2);color:var(--ink2);
      transition:all .15s;user-select:none}
.chip:hover{border-color:var(--ink3)}
.chip.on{background:var(--oil);border-color:var(--oil);color:var(--onoil);font-weight:600}
button.chip{font:inherit;cursor:pointer}
.gstmode-note{font-size:12px;color:var(--ink3);margin-top:5px}

.empty{padding:40px 20px;text-align:center;color:var(--ink2)}
.empty h3{margin-bottom:5px}
.empty p{margin:0 0 14px;font-size:14px;color:var(--ink3)}

/* ---------- billing ---------- */
.billdraft-panel .billdraft-tabs{display:flex;gap:7px;flex-wrap:wrap;padding:10px 14px}
.billdraft-tab{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line2);background:var(--panel2);color:var(--ink2);border-radius:var(--rs);padding:7px 10px;cursor:pointer;font:600 13px "Barlow",sans-serif}
.billdraft-tab:hover{border-color:var(--ink3);color:var(--ink)}
.billdraft-tab.on{background:var(--oilsoft);border-color:var(--oil);color:var(--oil)}
.billdraft-tab .x{border:0;background:transparent;color:inherit;padding:0;cursor:pointer;font-size:16px;line-height:1}

.billgrid{display:grid;grid-template-columns:1fr 340px;gap:14px;align-items:start}
@media (max-width:1080px){.billgrid{grid-template-columns:1fr} .sticky{position:static}}
.catgrid{grid-template-columns:340px 1fr;align-items:start}
@media (max-width:860px){.catgrid{grid-template-columns:1fr} .catgrid .sticky{position:static}}
.linetable th,.linetable td{padding:7px 9px}
.linetable input,.linetable select{padding:6px 8px;font-size:13.5px}
.linetable{min-width:760px}
.pur-sno{text-align:left !important;padding-left:10px !important;}
#billItemsPanel{overflow:visible}
.picker{position:relative;max-width:420px}
.suggest{position:absolute;z-index:30;left:0;right:0;top:calc(100% + 4px);background:var(--panel);border:1px solid var(--line2);
         border-radius:var(--rs);box-shadow:var(--shadow);max-height:260px;overflow:auto;display:none}
.suggest.on{display:block;animation:pop .16s ease-out both}
@keyframes pop{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}
.suggest button{display:block;width:100%;text-align:left;background:transparent;border:0;border-bottom:1px solid var(--line);
                padding:9px 12px;cursor:pointer;color:var(--ink);font:inherit}
.suggest button:hover,.suggest button.cur{background:var(--oilsoft)}
.suggest .s2{font-size:12.5px;color:var(--ink3)}
.totrow{display:flex;justify-content:space-between;padding:6px 0;font-size:14.5px}
.totrow.big{border-top:1px solid var(--line2);margin-top:8px;padding-top:11px;
            font-family:"Barlow Condensed";font-size:27px;font-weight:700}
.totrow span:first-child{color:var(--ink2)}
.words{font-size:12.5px;color:var(--ink3);border-top:1px dashed var(--line2);margin-top:10px;padding-top:9px}
.sticky{position:sticky;top:76px}

/* ---------- modal / toast ---------- */
.modal{position:fixed;inset:0;z-index:90;display:none;align-items:center;justify-content:center;padding:18px}
.modal.on{display:flex}
.modal .veil{position:absolute;inset:0;background:rgba(10,20,26,.5);animation:fade .2s both}
@keyframes fade{from{opacity:0}to{opacity:1}}
.modal .box{position:relative;width:min(560px,100%);max-height:88dvh;overflow:auto;background:var(--panel);
            border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);
            animation:zoom .24s cubic-bezier(.2,.9,.3,1) both}
@keyframes zoom{from{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:none}}
.modal .box > header{padding:14px 18px;border-bottom:1px solid var(--line);display:flex;align-items:center}
.modal .box > .body{padding:18px}
.modal .box > footer{padding:13px 18px;border-top:1px solid var(--line);display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap;
                     position:sticky;bottom:0;background:var(--panel)}
#toasts{position:fixed;z-index:120;right:16px;bottom:16px;display:flex;flex-direction:column;gap:8px;align-items:flex-end}
@media (max-width:620px){#toasts{left:12px;right:12px;align-items:stretch}}
.toast{background:var(--ink);color:var(--bg);padding:11px 15px;border-radius:var(--rs);font-size:14px;font-weight:500;
       box-shadow:var(--shadow);animation:tin .28s cubic-bezier(.2,.9,.3,1) both;max-width:360px}
.toast.bad{background:var(--red);color:#fff}
.toast.good{background:var(--go);color:#fff}
@keyframes tin{from{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:none}}
.toast.out{animation:tout .22s ease-in forwards}
@keyframes tout{to{opacity:0;transform:translateX(20px)}}

.skel{background:linear-gradient(90deg,var(--sink),var(--panel2),var(--sink));background-size:200% 100%;animation:sk 1.2s infinite}
@keyframes sk{to{background-position:-200% 0}}
.spin{animation:sp .9s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
.divider{height:1px;background:var(--line);margin:18px 0}
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:560px){.two{grid-template-columns:1fr}}
.mono{font-variant-numeric:tabular-nums}
.muted{color:var(--ink2)}
.right{text-align:right}
.nowrap{white-space:nowrap}
@media print{ .sidebar,.topbar,#toasts{display:none} main{margin:0} }
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
  .needle{transform:rotate(-100deg)}
}

/* ---------- mobile/tablet form & table polish ---------- */
@media (max-width:640px){
  /* keep inputs at 16px so iOS Safari doesn't zoom in on focus */
  input,select,textarea,.linetable input,.linetable select,.toolbar input,.toolbar select{font-size:16px}
  .field{margin-bottom:12px}
}
@media (max-width:1080px){
  .linetable th,.linetable td{padding:8px}
}
@media (max-width:620px){
  .tablewrap{scroll-snap-type:x proximity; -ms-overflow-style:none}
  table{min-width:560px}
  .linetable{min-width:700px}
}

/* ---------- dashboard tables: never create a desktop horizontal scrollbar ---------- */
#lowTable,#recentTable{
  width:100%;
  min-width:0;
  table-layout:fixed;
}
#lowTable td,#recentTable td{
  white-space:normal;
  overflow-wrap:anywhere;
}
#lowTable td:first-child,#recentTable td:first-child{
  width:auto;
}
#lowTable td:last-child,#recentTable td:last-child{
  width:120px;
}
@media (max-width:620px){
  #lowTable td:last-child,#recentTable td:last-child{width:105px}
  #lowTable td,#recentTable td{padding:9px 10px}
}

/* ---------- responsive forms ---------- */
.form-grid{min-width:0}
.field{min-width:0}
.field input,.field select,.field textarea{max-width:100%;}

@media (max-width:760px){
  .wrap{width:100%;max-width:100%;overflow-x:hidden}
  .grid.g2,.grid.g3,.grid.g4,.grid.g5{grid-template-columns:1fr}
  .catgrid,.billgrid{grid-template-columns:1fr}
  .panel{min-width:0}
  .panel .body{padding:14px}
  .panel > header{padding:12px 14px}
  .toolbar{width:100%;margin-left:0}
  .toolbar input,.toolbar select{width:100%;min-width:0;flex:1 1 100%;}
  .field{width:100%;}
  input,select,textarea{width:100%;max-width:100%;}
  .btn{min-height:42px;}
  .view form .btn{flex:1 1 auto;}
  .catgrid .sticky,.sticky{position:static;}
}

@media (max-width:480px){
  .wrap{padding:10px 8px}
  .panel .body{padding:12px}
  .panel > header{padding:11px 12px}
  .toolbar{gap:7px}
  .toolbar input,.toolbar select{font-size:16px}
  .two{grid-template-columns:1fr}
  .btn{width:100%;}
  .view form > div[style*="display:flex"]{flex-direction:column;align-items:stretch;}
  .view form > div[style*="display:flex"] .btn{width:100%;}
  .modal .box{max-height:94dvh}
  .modal .box > .body{padding:14px}
}

/* start-up error box (shown by js/loader.js) */
.boot-error{position:fixed;left:16px;right:16px;bottom:16px;z-index:9999;padding:14px 16px;border-radius:12px;background:#7a1f1f;color:#fff;font:500 14px/1.4 system-ui,sans-serif;box-shadow:0 8px 30px rgba(0,0,0,.3)}