/* MCL Financial Monitor. Sizes are in rem so the whole interface scales with the screen:
   the root size runs from 14px on a laptop up to 17px on a large monitor. */
:root{
  --bg:#F2F5F4; --surface:#FFFFFF; --ink:#12292C; --muted:#586C6F; --line:#D9E2E1;
  --accent:#0E6B70; --accent-ink:#FFFFFF; --accent-soft:#DCEEEE;
  --warm:#C98A00; --warm-soft:#FBF0D0;
  --good:#1E7A4C; --good-soft:#DDF0E5; --bad:#B3402F; --bad-soft:#F8E1DC;
  --side:#0C3D40; --side-ink:#DDEBEA; --side-mute:#8FB3B3; --side-active:#14595D;
  /* pie chart slices, in fixed order (checked for colour-blind separation) */
  --p1:#2a78d6; --p2:#eb6834; --p3:#1baf7a; --p4:#eda100; --p5:#e87ba4;
  --f-display:"Bricolage Grotesque","Trebuchet MS",system-ui,sans-serif;
  --f-body:"Public Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
}
@media (prefers-color-scheme: dark){:root{
  --bg:#0D1819; --surface:#142427; --ink:#E6F0EF; --muted:#8FA6A8; --line:#243C3F;
  --accent:#4FB6BB; --accent-ink:#06262A; --accent-soft:#17383B;
  --warm:#E3AE2F; --warm-soft:#3A2F10;
  --good:#5CC48C; --good-soft:#12301F; --bad:#F07F6C; --bad-soft:#3B1E19;
  --side:#0A1314; --side-ink:#C6DAD9; --side-mute:#6F8E8F; --side-active:#173538;
  --p1:#3987e5; --p2:#d95926; --p3:#199e70; --p4:#c98500; --p5:#d55181; color-scheme:dark}}

*{box-sizing:border-box}
html{font-size:clamp(14px,calc(9.3px + .35vw),17px)}
body{margin:0;background:var(--bg);color:var(--ink);font:1rem/1.5 var(--f-body);font-variant-numeric:tabular-nums}
h1,h2,h3{font-family:var(--f-display);margin:0;text-wrap:balance;letter-spacing:-.01em}
a{color:var(--accent)}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ---------- shell ---------- */
.app{display:grid;grid-template-columns:16.5rem minmax(0,1fr);min-height:100vh}
.side{background:var(--side);color:var(--side-ink);padding:1.4rem 1.1rem;display:flex;flex-direction:column;gap:1.3rem;position:sticky;top:0;height:100vh;overflow-y:auto}
.brand{display:flex;gap:.75rem;align-items:center}
.mark{width:2.6rem;height:2.6rem;border-radius:.65rem;background:var(--warm);color:#2a1d00;display:grid;place-items:center;font:700 1.05rem var(--f-display);flex:none}
.brand b{font:700 1.05rem/1.15 var(--f-display);display:block;color:#fff}
.brand span{font-size:.86rem;color:var(--side-mute)}
.nav{display:flex;flex-direction:column;gap:.15rem}
.nav small{font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--side-mute);margin:.9rem .7rem .3rem}
.nav a{display:flex;align-items:center;gap:.75rem;padding:.65rem .75rem;border-radius:.6rem;color:var(--side-ink);font-weight:500;text-decoration:none}
.nav a:hover{background:rgba(255,255,255,.06)}
.nav a[aria-current="page"]{background:var(--side-active);color:#fff}
.nav svg{width:1.3rem;height:1.3rem;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
.who{margin-top:auto;border-top:1px solid rgba(255,255,255,.12);padding-top:1rem;font-size:.93rem;display:grid;gap:.25rem}
.who b{color:#fff}
.who a{color:var(--side-ink)}

.main{padding:1.9rem 2.2rem 3.5rem;min-width:0;width:100%}
.head{display:flex;flex-wrap:wrap;gap:.8rem 1.4rem;align-items:flex-end;justify-content:space-between;margin-bottom:1.4rem}
.head h1{font-size:2.1rem;line-height:1.1}
.head p{margin:.35rem 0 0;color:var(--muted);max-width:70ch}
.row{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center}
.banner{border-radius:.6rem;padding:.7rem .9rem;margin-bottom:1.1rem;font-size:.93rem;border:1px solid}
.banner.ok{background:var(--good-soft);border-color:var(--good);color:var(--ink)}
.banner.err{background:var(--bad-soft);border-color:var(--bad);color:var(--ink)}
.banner.info{background:var(--accent-soft);border-color:var(--accent)}

.btn{display:inline-block;border:1px solid var(--line);background:var(--surface);border-radius:.6rem;padding:.55rem 1rem;cursor:pointer;font-weight:500;text-decoration:none;color:var(--ink)}
.btn:hover{border-color:var(--accent)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.danger{color:var(--bad);border-color:var(--bad)}
.btn.sm{padding:.2rem .65rem;font-size:.86rem}

/* ---------- dashboard ---------- */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:1rem;margin-bottom:1rem}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:.8rem;padding:1.1rem 1.3rem;min-width:0}
.kpi span{font-size:.8rem;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.kpi b{display:block;font:700 1.9rem/1.2 var(--f-display);margin-top:.3rem;overflow-wrap:anywhere}
.kpi small{color:var(--muted);font-size:.9rem}
.kpi.hero{background:var(--side);border-color:var(--side);color:#fff}
.kpi.hero span,.kpi.hero small{color:var(--side-mute)}
.dash{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:1rem;margin-bottom:1rem}
.dash>*{margin:0!important;min-width:0}
.s3{grid-column:span 3}.s4{grid-column:span 4}.s5{grid-column:span 5}.s6{grid-column:span 6}.s7{grid-column:span 7}.s8{grid-column:span 8}.s12{grid-column:span 12}
.grid2{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:1rem;margin-bottom:1rem}
.card{background:var(--surface);border:1px solid var(--line);border-radius:.8rem;padding:1.2rem 1.4rem;min-width:0;margin-bottom:1rem}
.grid2 .card{margin-bottom:0}
.card h2{font-size:1.15rem;margin-bottom:.9rem;display:flex;gap:.6rem;align-items:center;flex-wrap:wrap}
.legend{display:flex;gap:1rem;font-size:.86rem;color:var(--muted);margin-bottom:.4rem}
.legend i{display:inline-block;width:.75rem;height:.75rem;border-radius:.2rem;margin-right:.35rem}
.chart{width:100%;height:auto;display:block}
.chart text{fill:var(--muted);font:11px var(--f-body)}
.bars{display:grid;gap:.8rem}
.bar div:first-child{display:flex;justify-content:space-between;gap:.6rem;font-size:.95rem}
.bar .t{height:.6rem;border-radius:.3rem;background:var(--line);overflow:hidden;margin-top:.25rem}
.bar .t i{display:block;height:100%;background:var(--warm);border-radius:.3rem}

/* quick actions: large tiles */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(11.5rem,1fr));gap:1rem}
@media (min-width:861px){
  .tiles:has(.tile:nth-child(7)){grid-template-columns:repeat(4,minmax(0,1fr))}
  .tiles:has(.tile:nth-child(6)):not(:has(.tile:nth-child(7))){grid-template-columns:repeat(3,minmax(0,1fr))}
}
.tile{display:flex;flex-direction:column;justify-content:space-between;gap:1rem;min-height:8rem;padding:1.15rem 1.25rem;border-radius:.9rem;background:var(--surface);border:1px solid var(--line);color:var(--ink);text-decoration:none;font:600 1.2rem/1.2 var(--f-display)}
.tile:hover{border-color:var(--accent);box-shadow:0 .3rem 1rem rgba(14,107,112,.12)}
.tile .ico{width:3rem;height:3rem;border-radius:.8rem;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center}
.tile .ico svg{width:1.6rem;height:1.6rem;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.tile small{display:block;font:400 .86rem var(--f-body);color:var(--muted);margin-top:.2rem}
.tile.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.tile.primary .ico{background:rgba(255,255,255,.2);color:var(--accent-ink)}
.tile.primary small{color:var(--accent-ink);opacity:.8}
@media (prefers-reduced-motion:no-preference){.tile{transition:box-shadow .15s,border-color .15s,transform .15s}.tile:hover{transform:translateY(-2px)}}

/* pie chart */
.pie{display:grid;grid-template-columns:minmax(10rem,15rem) minmax(0,1fr);gap:1.6rem;align-items:center}
.pie svg{width:100%;height:auto;display:block}
.pie svg path{transition:opacity .15s}
.pie svg:hover path{opacity:.5}
.pie svg path:hover{opacity:1}
.pie-c1{fill:var(--ink);font-family:var(--f-display);font-weight:700}
.pie-c2{fill:var(--muted);font-family:var(--f-body)}
.pie-legend{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.pie-legend li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;column-gap:.7rem;row-gap:.1rem;align-items:center}
.pie-legend li i{grid-row:1 / span 2;align-self:start;margin-top:.3rem}
.pie-legend li>span:not(.pct){grid-column:2}
.pie-legend li>b{grid-column:2;grid-row:2}
.pie-legend li>.pct{grid-column:3;grid-row:1 / span 2}
.pie-legend i{width:.85rem;height:.85rem;border-radius:.2rem}
.pie-legend .pct{color:var(--muted);text-align:right}
.pie-note{margin:.9rem 0 0;color:var(--muted);font-size:.9rem}

/* ---------- tables, lists ---------- */
.tools{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:1rem;align-items:center}
.tools input,.tools select,.fld input,.fld select,.fld textarea{border:1px solid var(--line);background:var(--bg);border-radius:.6rem;padding:.6rem .75rem;width:100%;min-width:0}
.tools input[type=search]{flex:1 1 14rem;max-width:28rem;background:var(--surface)}
.tools select{width:auto;background:var(--surface)}
.tw{overflow-x:auto;background:var(--surface);border:1px solid var(--line);border-radius:.8rem}
table{border-collapse:collapse;width:100%;min-width:34rem}
th,td{text-align:left;padding:.75rem .95rem;border-bottom:1px solid var(--line);vertical-align:top}
th{font-size:.78rem;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);font-weight:600;white-space:nowrap;background:var(--bg)}
tr:last-child td{border-bottom:0}
td.n,th.n{text-align:right;white-space:nowrap}
td small{display:block;color:var(--muted)}
tfoot td{font-weight:600;background:var(--bg)}
.pill{display:inline-block;padding:.05rem .65rem;border-radius:99px;font-size:.86rem;font-weight:500;background:var(--accent-soft);color:var(--accent)}
.pill.out{background:var(--warm-soft);color:var(--warm)}
.pill.ok{background:var(--good-soft);color:var(--good)}
.pill.off{background:var(--line);color:var(--muted)}
.pill.bad{background:var(--bad-soft);color:var(--bad)}
.empty{padding:2.4rem 1rem;text-align:center;color:var(--muted)}
.empty b{display:block;color:var(--ink);font:600 1.15rem var(--f-display);margin-bottom:.3rem}
.acts{white-space:nowrap;text-align:right}
.acts form{display:inline}

/* ---------- forms ---------- */
.form{display:grid;grid-template-columns:repeat(auto-fill,minmax(18rem,1fr));gap:1rem}
.fld{display:grid;gap:.3rem;min-width:0;align-content:start}
.fld.wide{grid-column:1/-1}
.fld label{font-size:.86rem;font-weight:600;color:var(--muted)}
.fld[hidden]{display:none}
.form-actions{grid-column:1/-1;display:flex;gap:.6rem;flex-wrap:wrap}
.form h2{grid-column:1/-1}

.rep-sum{display:grid;grid-template-columns:repeat(auto-fit,minmax(12rem,1fr));gap:.7rem;margin:0 0 1rem}
.rep-sum div{border:1px solid var(--line);border-radius:.6rem;padding:.6rem .85rem;background:var(--bg)}
.rep-sum span{display:block;font-size:.86rem;color:var(--muted)}
.rep-sum b{font-size:1.1rem}
.filters{display:flex;flex-wrap:wrap;gap:.8rem;align-items:flex-end;margin-bottom:1rem}
.filters .fld{min-width:11rem}
.stat{display:grid;grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));gap:.6rem;margin:.8rem 0 1rem}
.stat div{border:1px solid var(--line);border-radius:.6rem;padding:.6rem .8rem}
.stat b{display:block;font:700 1.4rem var(--f-display)}
.stat span{font-size:.86rem;color:var(--muted)}
.pager{display:flex;gap:.6rem;align-items:center;margin-top:.9rem;color:var(--muted)}
.print-only{display:none}

/* requisition view: the slip beside the progress and actions */
.split{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:1.2rem;align-items:start}
.stack{display:grid;gap:1rem;min-width:0}
.stack>.card{margin:0}

/* login */
.login-wrap{min-height:100vh;display:grid;place-items:center;padding:1rem;background:var(--side)}
.login{background:var(--surface);border-radius:1rem;padding:2rem;width:100%;max-width:26rem;display:grid;gap:1rem}
.login .brand b{color:var(--ink)}.login .brand span{color:var(--muted)}

.nav .badge{margin-left:auto;background:var(--warm);color:#2a1d00;border-radius:99px;font-size:.78rem;font-weight:600;padding:0 .5rem;min-width:1.4rem;text-align:center}
.qr-row{display:flex;flex-wrap:wrap;gap:1.2rem;align-items:flex-start}
.qr-box{background:#fff;border:1px solid var(--line);border-radius:.8rem;padding:.4rem;flex:none;line-height:0}
.qr-row>div:last-child{flex:1 1 15rem;min-width:0}
.scan-bg{position:fixed;inset:0;background:rgba(8,20,22,.7);display:grid;place-items:center;padding:1rem;z-index:60}
.scan-bg[hidden]{display:none}
.scan-box{background:var(--surface);border-radius:.9rem;padding:1.1rem;width:100%;max-width:30rem;display:grid;gap:.7rem}
.scan-box video{width:100%;border-radius:.6rem;background:#000;aspect-ratio:4/3;object-fit:cover}
#liq-items input,#liq-items select{border:1px solid var(--line);background:var(--bg);border-radius:.4rem;padding:.4rem .55rem;width:100%;min-width:0}
#liq-items td{padding:.4rem .55rem;vertical-align:middle}
.rm{border:0;background:transparent;color:var(--bad);font-size:1.4rem;line-height:1;cursor:pointer;padding:0 .4rem}
.info-panel{border:1px solid var(--line);background:var(--bg);border-radius:.6rem;padding:.6rem .85rem;font-size:.93rem;color:var(--muted)}

/* ---------- Requisition Slip, laid out like the paper form ---------- */
.slip{background:#fff;color:#111;border:1px solid #333;padding:2rem 2.5rem 2.2rem;max-width:64rem;margin:0 auto 1.5rem;font:1rem/1.45 Georgia,"Times New Roman",serif}
.slip-head{display:grid;grid-template-columns:7.5rem minmax(0,1fr);gap:1rem;align-items:center;text-align:center}
.slip-head img{width:100%;height:auto;display:block}
.slip-org{font:700 1.5rem/1.12 "Bookman Old Style","Century Schoolbook",Georgia,serif}
.slip-sub{font:.88rem/1.4 Arial,Helvetica,sans-serif}
.slip-office{font:1.5rem Arial,Helvetica,sans-serif;text-align:center;margin:.3rem 0 0}
.slip-title{display:block;width:max-content;max-width:100%;margin:.9rem auto 1.5rem;border:1.5px solid #111;border-radius:1rem;padding:.4rem 2.6rem;font:700 1.3rem Georgia,serif;letter-spacing:.02em}
.slip-top{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:1rem 2.4rem;margin-bottom:1.1rem}
.slip-lab{font-style:italic;flex:none}
.slip-line{display:flex;gap:.6rem;align-items:flex-end}
.slip-line .fill,.slip-sign .fill{flex:1;min-width:0;border-bottom:1.5px solid #111;min-height:1.9rem;padding:0 .3rem .1rem;overflow-wrap:anywhere}
.slip-to{display:flex;gap:.6rem}
.slip-to .fill{flex:1;min-width:0;line-height:34px;min-height:102px;background:repeating-linear-gradient(transparent 0,transparent 32px,#111 32px,#111 34px);padding:0 .3rem;white-space:pre-wrap;overflow-wrap:anywhere}
.slip-req{display:grid;grid-template-columns:7rem minmax(0,1fr);gap:0;margin-bottom:1.2rem}
.slip-req>.slip-lab{padding-top:1.9rem}
.slip-items{width:100%;min-width:0;border-collapse:collapse}
.slip-items th,.slip-items td{border:0;background:transparent;color:#111;padding:0;text-transform:none;letter-spacing:0}
.slip-items th{font:italic 400 1rem Georgia,serif;text-align:right;padding:0 .3rem .1rem;height:1.9rem;vertical-align:bottom;border-bottom:1.5px solid #111}
.slip-items th:first-child{border-bottom:1.5px solid #111}
.slip-items td{height:2.1rem;border-bottom:1.5px solid #111;padding:0 .35rem;vertical-align:bottom;overflow-wrap:anywhere}
.slip-items td.amt,.slip-items th.amt{width:32%;border-left:1.5px solid #111;text-align:right;white-space:nowrap}
.slip-items tfoot td{font-weight:400;background:transparent;border-top:0}
.slip-items tfoot td.lab{text-align:right;font-style:italic}
.slip-ar{display:flex;gap:.6rem;align-items:flex-end;margin-bottom:1rem}
.slip-ar .fill{width:min(20rem,60%);border-bottom:1.5px solid #111;min-height:1.9rem;padding:0 .3rem}
.slip-rem{display:flex;gap:.6rem;margin-bottom:1.4rem}
.slip-rem .fill{flex:1;min-width:0;line-height:34px;min-height:102px;background:repeating-linear-gradient(transparent 0,transparent 32px,#111 32px,#111 34px);padding:0 .3rem;white-space:pre-wrap;overflow-wrap:anywhere}
.slip-sign{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.6rem}
.slip-sign>div{display:grid;gap:.2rem}
.slip-sign .slip-lab{display:block}
.slip-sign .fill{display:block;border-bottom:1.5px solid #111;min-height:3.6rem;padding:0 .2rem;text-align:center;line-height:1.3;display:flex;align-items:flex-end;justify-content:center}

/* the same slip as a fill-in form */
.slip-fill input,.slip-fill textarea{font:inherit;color:#111;background:transparent;border:0;border-radius:0;padding:0 .3rem;width:100%;min-width:0;outline-offset:2px}
.slip-fill input:focus,.slip-fill textarea:focus{background:#eef6f6}
.slip-fill .fill input{height:1.9rem}
.slip-fill textarea{display:block;resize:vertical;line-height:34px;min-height:102px;background:repeating-linear-gradient(transparent 0,transparent 32px,#111 32px,#111 34px)}
.slip-fill .slip-items td input{height:2.05rem;text-align:left}
.slip-fill .slip-items td.amt input{text-align:right}
.slip-fill .slip-to .fill,.slip-fill .slip-rem .fill{background:none;padding:0}
.slip-fill .slip-ar .fill{display:flex;align-items:flex-end}
.slip-fill .slip-ar .fill b{font-weight:400}
.slip-meta{max-width:64rem;margin:0 auto 1rem;display:grid;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));gap:1rem}
.slip-actions{max-width:64rem;margin:0 auto 1.5rem;display:flex;gap:.6rem;flex-wrap:wrap;justify-content:flex-end}

/* ---------- Cash Liquidation Report, laid out like the paper form (fixed size, it is printed) ---------- */
.paper{background:#fff;color:#111;border:1px solid #333;padding:28px 32px;max-width:820px;margin:0 auto 24px;font:13px/1.4 Arial,Helvetica,sans-serif}
.paper-head{text-align:center;margin-bottom:18px}
.paper-org{font-weight:700;font-size:18px;letter-spacing:.2px}
.paper-head h2{font:700 18px Arial,Helvetica,sans-serif;margin:12px 0 0;letter-spacing:0}
.paper-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px 24px;margin:14px 0}
.paper-grid>div>span,.paper-label{font-weight:700;display:block;margin-bottom:2px}
.paper-box{border:1px solid #777;min-height:30px;padding:5px 8px}
.paper-table{width:100%;min-width:0;border-collapse:collapse;border:1px solid #111;margin-bottom:14px}
.paper-table th,.paper-table td{border:1px solid #111;padding:5px 8px;text-align:left;color:#111;background:#fff;font-size:13px}
.paper-table th{text-align:center;text-transform:none;letter-spacing:0;font-weight:700}
.paper-table td.n{text-align:right}
.paper-table tbody td{height:30px}
.paper-table tfoot td{font-weight:700;border-top:2px solid #111}
.paper-lines>div{display:flex;gap:12px;border-bottom:1px solid #777;padding:6px 0;min-height:30px}
.paper-lines span{flex:0 0 220px}
.paper-sign{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin:36px 0 18px;text-align:center}
.paper-name{border-bottom:1px solid #111;min-height:26px;padding-bottom:2px;font-weight:600}
.paper-cap{font-size:12px;margin-top:3px}
.paper-foot{margin-bottom:0}
.paper-fill input{font:13px Arial,Helvetica,sans-serif;color:#111;background:#fff;border:1px solid #777;border-radius:0;padding:5px 8px;width:100%;min-width:0}
.paper-fill label{font-weight:700;display:block;margin-bottom:2px}
.paper-fill .paper-table td{padding:0}
.paper-fill .paper-table td input{border:0;height:30px;background:transparent}
.paper-fill .paper-table td.n{padding:5px 8px}
.paper-fill .paper-lines input{border:0;background:transparent;padding:0}
.paper-fill .paper-lines b{font-weight:700}
.paper-fill .paper-name{border:0;border-bottom:1px solid #111;text-align:center;font-weight:600}
.paper-fill .paper-grid>div{display:block}

/* ---------- narrower screens ---------- */
@media (max-width:1180px){
  .dash>*{grid-column:1/-1}
  .split{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:860px){
  .app{grid-template-columns:minmax(0,1fr)}
  .side{position:static;height:auto;gap:.7rem;padding:.8rem 1rem}
  .nav{flex-direction:row;overflow-x:auto;gap:.3rem;padding-bottom:.3rem}
  .nav small{display:none}
  .nav a{white-space:nowrap;padding:.55rem .8rem}
  .who{margin-top:0;display:flex;flex-wrap:wrap;gap:.4rem .8rem;padding-top:.6rem}
  .main{padding:1.3rem 1rem 2.5rem}
  .grid2,.pie{grid-template-columns:minmax(0,1fr)}
  .head h1{font-size:1.7rem}
  .slip{padding:1.2rem}
  .slip-head{grid-template-columns:4.5rem minmax(0,1fr)}
  .slip-org{font-size:1.15rem}
  .slip-top{grid-template-columns:minmax(0,1fr)}
  .slip-req{grid-template-columns:minmax(0,1fr)}
  .slip-req>.slip-lab{padding-top:0}
  .slip-sign{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){.paper{padding:16px}.paper-grid{grid-template-columns:1fr}.paper-lines span{flex-basis:140px}}

@media print{
  body{background:#fff;color:#000}
  .noprint,.side{display:none!important}
  .app{display:block}.main{padding:0;max-width:none}
  .card,.tw{border:0;padding:0}
  .print-only{display:block}
  th{background:#fff;color:#000;border-bottom:2px solid #000}
  td,th{border-bottom:1px solid #999}
  tfoot td{background:#fff;border-top:2px solid #000}
  .rep-sum div{background:#fff;border-color:#999}
  .badge{display:none}
  @page{size:A4;margin:16mm}
  .paper{border:1px solid #000;box-shadow:none;max-width:none;margin:0;padding:12mm}
  .paper-fill input{border-color:transparent;background:transparent}
  .paper-fill .paper-grid input{border-color:#777}
  .paper-fill .paper-name{border-bottom-color:#111}
  .paper-fill input::placeholder{color:transparent}
  .split{display:block}
  .slip{border:0;max-width:none;margin:0;padding:0;font-size:12pt}
  .slip-items th,.slip-items td{border-bottom:1.5px solid #111}
  .slip-items td.amt,.slip-items th.amt{border-left:1.5px solid #111}
  .slip-fill input,.slip-fill textarea{background:transparent}
  .slip-fill textarea{background:repeating-linear-gradient(transparent 0,transparent 32px,#111 32px,#111 34px)}
}