*{box-sizing:border-box}
body{margin:0;font-family:-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:#1f2a30;background:var(--bg)}
header{background:var(--navy);color:#fff;padding:14px 22px;display:flex;align-items:center;gap:14px}
header .logo{font-size:22px;font-weight:800;letter-spacing:.5px}
header .tag{color:#cfe0ea;font-size:12.5px}
nav{display:flex;gap:4px;background:#183048;padding:0 12px}
nav button{background:none;border:none;color:#bcd0dd;padding:12px 16px;font-size:14px;cursor:pointer;border-bottom:3px solid transparent}
nav button.active{color:#fff;border-bottom:3px solid var(--accent);font-weight:600}
nav button:hover{color:#fff}
main{max-width:1120px;margin:22px auto;padding:0 18px}
.view{display:none}.view.active{display:block}
h2{color:var(--navy);margin:4px 0 14px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(175px,1fr));gap:14px;margin-bottom:20px}
.card{background:#fff;border:1px solid var(--line);border-radius:10px;padding:16px}
.card .n{font-size:26px;font-weight:800;color:var(--navy)}
.card .l{font-size:12.5px;color:var(--grey);margin-top:3px}
.panel{background:#fff;border:1px solid var(--line);border-radius:10px;padding:18px;margin-bottom:18px}
.panel h3{margin:0 0 10px;color:var(--navy);font-size:16px}
textarea{width:100%;min-height:150px;border:1px solid var(--line);border-radius:8px;padding:12px;font-family:inherit;font-size:13.5px;resize:vertical}
button.act{background:var(--accent);color:#fff;border:none;border-radius:8px;padding:10px 18px;font-size:14px;font-weight:600;cursor:pointer}
button.act:hover{background:#255a75}
button.ghost{background:#fff;border:1px solid var(--accent);color:var(--accent)}
table{width:100%;border-collapse:collapse;font-size:13.5px}
th{background:var(--navy);color:#fff;text-align:left;padding:9px 10px;font-weight:600;position:sticky;top:0}
td{padding:8px 10px;border-bottom:1px solid var(--line)}
tr:nth-child(even) td{background:#fafcfd}
.right{text-align:right}
.badge{display:inline-block;padding:2px 9px;border-radius:20px;font-size:11.5px;font-weight:600}
.b-ok{background:#e3f3ea;color:var(--green)}
.b-src{background:#fdf0dd;color:var(--amber)}
.b-new{background:#e7eef5;color:var(--accent)}
.b-print{background:#efe6f7;color:#6b46a3}
.b-deliv{background:#e0f0f5;color:#1f7a99}
.b-done{background:#e3f3ea;color:var(--green)}
.tot{display:flex;justify-content:space-between;padding:6px 0;font-size:14px}
.tot.grand{border-top:2px solid var(--navy);margin-top:6px;padding-top:10px;font-weight:800;font-size:17px;color:var(--navy)}
input,select{font-family:inherit;font-size:13.5px;padding:8px;border:1px solid var(--line);border-radius:7px}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.muted{color:var(--grey);font-size:12.5px}
.note{background:var(--light);border-left:4px solid var(--accent);padding:10px 12px;border-radius:6px;font-size:12.5px;color:#37515f;margin:10px 0}
.kanban{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.col-k{background:#eef3f6;border-radius:9px;padding:8px;min-height:120px}
.col-k h4{margin:4px 6px 8px;font-size:12.5px;color:var(--navy);text-transform:uppercase;letter-spacing:.4px}
.ocard{background:#fff;border:1px solid var(--line);border-radius:8px;padding:9px;margin-bottom:8px;font-size:12.5px;cursor:pointer}
.ocard b{color:var(--navy)} .ocard .adv{color:var(--accent);font-size:11.5px;margin-top:5px;display:inline-block}
.pill{font-size:11px;background:#eef3f6;border:1px solid var(--line);border-radius:20px;padding:2px 8px;margin-right:5px}
body.nomoney .money-only{display:none!important}
.modeq{border:1px solid var(--line);border-radius:9px;padding:11px 12px;margin:10px 0;background:#fbfdfe}
.modeq-q{font-size:12.5px;color:var(--grey);font-weight:600;margin-bottom:8px}
.modes{display:flex;gap:8px;margin-bottom:4px}
button.mode{flex:1;background:#fff;border:2px solid var(--line);color:var(--grey);border-radius:8px;
  padding:11px 8px;font-size:14px;font-weight:600;cursor:pointer;font-family:inherit}
button.mode:hover{border-color:var(--accent);color:var(--accent)}
button.mode.sel{border-color:var(--accent);background:var(--light);color:var(--navy)}
#conn{margin-left:auto;display:flex;align-items:center;gap:8px;font-size:12.5px}
#conn .dot{width:9px;height:9px;border-radius:50%;background:#7f9aa8}
#conn.live .dot{background:#57d68d}#conn.live{color:#cfe9db}
#conn.demo .dot{background:#e5b45c}#conn.demo{color:#f3dcae}
#conn.down .dot{background:#e57373}#conn.down{color:#f5c2c2}
#conn button{background:#2c4d6b;border:none;color:#dceaf3;border-radius:6px;padding:5px 10px;font-size:12px;cursor:pointer}
#pinwrap{position:fixed;inset:0;background:#16293c;z-index:950;display:flex;align-items:center;justify-content:center}
#pinbox{background:#fff;border-radius:12px;padding:28px 30px;width:330px;box-shadow:0 18px 50px rgba(0,0,0,.4)}
#pinbox h3{margin:0 0 4px;color:var(--navy)}
#pinbox input{width:100%;font-size:22px;letter-spacing:6px;text-align:center;margin-top:14px}
#pinbox button{width:100%;margin-top:12px}
#pinerr{color:#c0392b;font-size:12.5px;min-height:17px;margin-top:8px;text-align:center}
.ocard a.adv{cursor:pointer;text-decoration:none;margin-right:12px}
.ocard a.adv:hover{text-decoration:underline}
a.plink{color:var(--accent);cursor:pointer;text-decoration:none;font-size:12.5px}
a.plink:hover{text-decoration:underline}

/* ============ DOCUMENTS / PRINTING ============ */
#printroot{display:none}
.pmodal{position:fixed;inset:0;background:rgba(20,35,48,.6);z-index:900;overflow:auto;padding:16px}
.pmodal-bar{position:sticky;top:0;z-index:2;display:flex;gap:7px;align-items:center;background:var(--navy);color:#fff;padding:9px 13px;border-radius:9px;margin:0 auto 14px;max-width:210mm;flex-wrap:wrap}
.pmodal-bar .t{font-weight:700;margin-right:auto;font-size:14px}
.pmodal-bar button{border:none;border-radius:7px;padding:7px 13px;font-size:13px;font-weight:600;cursor:pointer;background:#e7eef5;color:var(--navy)}
.pmodal-bar button.sel{background:#fff;box-shadow:inset 0 0 0 2px var(--accent)}
.pmodal-bar button.pr{background:var(--green);color:#fff}
.pmodal-bar button.cl{background:#3d5c78;color:#fff}
.pdoc{background:#fff;width:210mm;max-width:100%;margin:0 auto 16px;padding:13mm;box-shadow:0 6px 26px rgba(0,0,0,.3);color:#1f2a30;font-size:12px;line-height:1.45}
.ph{display:flex;justify-content:space-between;gap:16px;border-bottom:2.5px solid var(--navy);padding-bottom:9px;margin-bottom:14px}
.pbiz{font-size:25px;font-weight:800;color:var(--navy);letter-spacing:.5px;line-height:1.1}
.pbizsub{font-size:10.5px;color:var(--grey)}
.pbizline{font-size:10.5px;color:var(--grey);margin-top:2px}
.phR{text-align:right;white-space:nowrap}
.ptitle{font-size:19px;font-weight:800;color:var(--navy);text-transform:uppercase;letter-spacing:1.2px}
.pmeta{font-size:11px;color:var(--grey);margin-top:3px;line-height:1.55}
.pcols{display:flex;gap:14px;margin-bottom:12px}
.pbox{flex:1;border:1px solid var(--line);border-radius:6px;padding:9px 11px}
.pbox h5{margin:0 0 4px;font-size:9px;letter-spacing:1.1px;text-transform:uppercase;color:var(--grey);font-weight:700}
.pbox .big{font-size:13.5px;font-weight:700;color:var(--navy)}
table.pt{width:100%;border-collapse:collapse;font-size:11.5px;margin-top:4px}
table.pt th{background:var(--navy);color:#fff;padding:7px 8px;text-align:left;font-size:9.5px;letter-spacing:.7px;text-transform:uppercase;position:static}
table.pt td{padding:6px 8px;border-bottom:1px solid var(--line);vertical-align:top}
table.pt tr:nth-child(even) td{background:#fafcfd}
.pt .r{text-align:right}.pt .c{text-align:center}
.psum{width:76mm;margin-left:auto;margin-top:10px;font-size:12px}
.psum div{display:flex;justify-content:space-between;padding:4px 0}
.psum .g{border-top:2px solid var(--navy);margin-top:4px;padding-top:7px;font-weight:800;font-size:15.5px;color:var(--navy)}
.pfoot{margin-top:16px;border-top:1px solid var(--line);padding-top:7px;font-size:9.5px;color:var(--grey)}
.psign{margin-top:22px;display:flex;gap:24px}
.psign div{flex:1;border-top:1px solid #7d8f9a;padding-top:5px;font-size:9.5px;color:var(--grey)}
.chk{display:inline-block;width:13px;height:13px;border:1.5px solid #4b6070;border-radius:2px;vertical-align:-2px}
.pnote{background:var(--light);border-left:3px solid var(--accent);padding:7px 10px;font-size:10.5px;margin-top:11px;border-radius:4px}
.plabels{display:flex;flex-wrap:wrap}
.plabel{width:50%;border:1px dashed #93a3ad;padding:6mm;height:130mm;display:flex;flex-direction:column;font-size:11.5px;overflow:hidden}
.lbTop{display:flex;justify-content:space-between;align-items:flex-start;border-bottom:1.5px solid var(--navy);padding-bottom:5px;margin-bottom:7px}
.lbBiz{font-weight:800;color:var(--navy);font-size:15px}
.lbTo{font-size:8.5px;letter-spacing:1.2px;color:var(--grey);text-transform:uppercase;font-weight:700}
.lbName{font-size:16px;font-weight:800;margin:2px 0 3px;line-height:1.2}
.lbAddr{font-size:13px;line-height:1.45;white-space:pre-wrap}
.lbPh{font-size:14px;font-weight:700;margin-top:5px}
.lbMeth{border:1.5px solid var(--navy);border-radius:5px;padding:3px 7px;font-weight:700;color:var(--navy);font-size:11.5px;display:inline-block}
.lbBar{margin-top:auto;text-align:center;padding-top:6px}
/* ================= PHONES & TABLETS =================
   Wide tables turn into one stacked card per row, each cell labelled from its
   data-l attribute, so nothing needs sideways scrolling on a small screen. */
@media screen and (max-width:820px){
  main{margin:14px auto;padding:0 12px}
  nav{overflow-x:auto;-webkit-overflow-scrolling:touch;padding:0 6px}
  nav button{padding:12px 13px;font-size:13.5px;white-space:nowrap}
  header{padding:11px 14px;flex-wrap:wrap;gap:8px}
  header .tag{display:none}
  #conn{font-size:12px}
  .kanban{grid-template-columns:1fr 1fr}
  .cards{gap:10px}
}
@media screen and (max-width:640px){
  h2{font-size:20px}
  .panel{padding:13px;border-radius:9px}
  .cards{grid-template-columns:1fr 1fr}
  .card{padding:12px}.card .n{font-size:21px}
  .kanban{grid-template-columns:1fr;gap:12px}
  .col-k{padding:10px}
  /* thumb-sized targets */
  button.act{padding:11px 16px;font-size:14px}
  .ocard a.adv,a.plink{display:inline-block;padding:7px 0;margin-right:16px}
  input,select,textarea{font-size:16px}          /* stops iOS zooming on focus */
  .row{gap:8px}
  .row>input,.row>select{flex:1 1 100%;min-width:0;width:auto!important}
  .tot{flex-wrap:wrap}
  #no-cart td:last-child,.psum{width:auto}
  [style*="max-width:460px"],[style*="max-width:420px"],[style*="max-width:560px"]{max-width:100%!important}
  [style*="margin-left:auto"]{margin-left:0!important}

  /* a table sizes to its widest cell even when the rows are block-level, so the
     table and its implicit tbody have to become blocks too or the cards run off
     the side of the screen */
  table.resp,table.resp tbody{display:block;width:100%;max-width:100%}
  table.resp tr.hdr{display:none}
  table.resp tr{display:block;border:1px solid var(--line);border-radius:9px;
    margin-bottom:9px;padding:7px 11px;background:#fff;overflow:hidden}
  table.resp tr:nth-child(even) td{background:none}
  table.resp td{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
    border:0;padding:5px 0;text-align:right;font-size:13.5px;
    overflow-wrap:anywhere;min-width:0}
  table.resp td::before{content:attr(data-l);color:var(--grey);font-size:11px;font-weight:600;
    letter-spacing:.6px;text-transform:uppercase;text-align:left;flex:0 0 auto;white-space:nowrap}
  table.resp td[data-l=""]::before{content:none}
  /* the buttons row: let them sit side by side and never break mid-word */
  table.resp td[data-l=""]{justify-content:flex-start;flex-wrap:wrap;gap:12px;padding-top:9px}
  table.resp td[data-l=""] a,table.resp td[data-l=""] button{white-space:nowrap;flex:0 0 auto}
  table.resp td.wide{display:block;text-align:left}
  table.resp td.wide::before{display:block;margin-bottom:3px}
  table.resp td:empty{display:none}
  table.resp th{position:static}

  /* document preview reflows to the screen; printing is unaffected */
  .pdoc{width:auto;padding:14px;font-size:12.5px}
  .pcols{flex-direction:column;gap:9px}
  .ph{flex-direction:column;gap:8px}
  .phR{text-align:left}
  .plabels{display:block}
  .plabel{width:auto;height:auto;min-height:auto;padding:14px;margin-bottom:10px}
  .psign{flex-direction:column;gap:18px}
  .pmodal{padding:8px}
  .pmodal-bar{gap:6px}
  .pmodal-bar .t{flex:1 1 100%;margin-bottom:4px}
  #pinbox{width:calc(100vw - 40px);max-width:330px}
}
@media print{
  @page{size:A4;margin:10mm}
  html,body{background:#fff!important}
  body>*{display:none!important}
  body>#printroot{display:block!important;position:static!important;inset:auto!important;background:#fff!important;padding:0!important;margin:0!important;overflow:visible!important}
  .pmodal-bar{display:none!important}
  .pdoc{width:auto!important;max-width:none!important;margin:0!important;padding:0!important;box-shadow:none!important}
  .pdoc+.pdoc{break-before:page;page-break-before:always}
  .plabel{height:127mm}
  table.pt tr{break-inside:avoid;page-break-inside:avoid}
}