/* ========================================================================== R&M Files Tracker — one stylesheet for every page. Design tokens first: colour, radius and shadow live here and nowhere else, so the dashboard, the register and the fund request look like one application. Light and dark are the same tokens with different values. ========================================================================== */ :root{ --bg:#eef2f7; --bg2:#e6ecf4; --panel:#fff; --panel2:#f7fafd; --panel3:#eff4fa; --ink:#0d1b2a; --ink2:#3d5068; --mut:#7488a0; --line:#e3eaf2; --line2:#cddae8; --brand:#0b5ea8; --brand2:#0891b2; --brandDk:#083f72; --brandBg:#e9f1fb; /* the pipeline palette — one colour per stage, used by every card, bar and badge */ --st1:#64748b; --st1Bg:#eef2f6; /* entered */ --st2:#7c3aed; --st2Bg:#f1eafe; /* numbered */ --st3:#0b5ea8; --st3Bg:#e9f1fb; /* fund appropriated */ --st4:#0891b2; --st4Bg:#e2f5f9; /* bill measured */ --st5:#b45309; --st5Bg:#fdf3e3; /* bill submitted */ --st6:#0f7b4f; --st6Bg:#e6f5ee; /* paid */ /* the money palette */ --appr:#0f7b4f; --apprBg:#e6f5ee; /* appropriated */ --unap:#b91c1c; --unapBg:#fdecec; /* UNappropriated — the fund request */ --water:#0b5ea8; --waterBg:#e9f1fb; --sewer:#a16207; --sewerBg:#fdf6e3; --other:#7c3aed; --otherBg:#f1eafe; --ok:#0f7b4f; --okBg:#e6f5ee; --warn:#b45309; --warnBg:#fdf3e3; --bad:#b91c1c; --badBg:#fdecec; --info:#0b5ea8; --infoBg:#e9f1fb; --r:14px; --r2:10px; --r3:8px; --sh:0 1px 2px rgba(13,27,42,.05), 0 10px 30px -18px rgba(13,27,42,.35); --shUp:0 2px 8px rgba(13,27,42,.08), 0 20px 44px -20px rgba(13,27,42,.42); --mono:"Cascadia Mono","Consolas",ui-monospace,monospace; } [data-theme="dark"]{ --bg:#0b1220; --bg2:#0e1727; --panel:#131d2f; --panel2:#182437; --panel3:#1d2b41; --ink:#e8eefb; --ink2:#b3c2d8; --mut:#8296b1; --line:#22314a; --line2:#2c3d5a; --brand:#4b9cf0; --brand2:#22c3dd; --brandDk:#0b5ea8; --brandBg:#15263c; --st1:#94a3b8; --st1Bg:#1c2740; --st2:#b18cf6; --st2Bg:#241c3d; --st3:#6fa4fb; --st3Bg:#16233d; --st4:#22c3dd; --st4Bg:#0f2c33; --st5:#e0a952; --st5Bg:#332714; --st6:#43c58c; --st6Bg:#12312a; --appr:#43c58c; --apprBg:#12312a; --unap:#f2777a; --unapBg:#331a1e; --water:#6fa4fb; --waterBg:#16233d; --sewer:#d4a02c; --sewerBg:#2e2510; --other:#b18cf6; --otherBg:#241c3d; --ok:#43c58c; --okBg:#12312a; --warn:#e0a952; --warnBg:#332714; --bad:#f2777a; --badBg:#331a1e; --info:#6fa4fb; --infoBg:#16233d; --sh:0 1px 2px rgba(0,0,0,.3), 0 14px 34px -18px rgba(0,0,0,.8); --shUp:0 2px 10px rgba(0,0,0,.45), 0 26px 50px -22px rgba(0,0,0,.9); } *{box-sizing:border-box} html,body{margin:0;padding:0} body{background:var(--bg);color:var(--ink);font-size:14px; font-family:"Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif; -webkit-font-smoothing:antialiased} h1,h2,h3,h4{margin:0;font-weight:700} a{color:var(--brand);text-decoration:none} button,select,input,textarea{font:inherit;color:inherit} .wrap{max-width:1780px;margin:0 auto;padding:0 18px 48px} .num{font-variant-numeric:tabular-nums} .mono{font-family:var(--mono)} .mut{color:var(--mut)} .right{text-align:right} .center{text-align:center} .nowrap{white-space:nowrap} /* ---------------- app bar ---------------- */ .appbar{position:sticky;top:0;z-index:40;color:#fff; background:linear-gradient(115deg,#083f72 0%,#0b5ea8 46%,#0891b2 100%); box-shadow:0 2px 20px rgba(8,40,80,.3)} .appbar .in{max-width:1780px;margin:0 auto;padding:9px 18px;display:flex;gap:14px;align-items:center;flex-wrap:wrap} .brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.2px} .brand .logo{width:32px;height:32px;border-radius:9px;background:rgba(255,255,255,.16); display:grid;place-items:center;font-size:17px} .brand small{display:block;font-weight:500;font-size:11px;opacity:.82;letter-spacing:.3px} .tabs{display:flex;gap:2px;margin-left:6px;flex-wrap:wrap} .tabs a{color:#e8f2fb;padding:7px 13px;border-radius:9px;font-weight:600;font-size:13px; border:1px solid transparent;white-space:nowrap} .tabs a:hover{background:rgba(255,255,255,.12)} .tabs a.on{background:rgba(255,255,255,.19);border-color:rgba(255,255,255,.3);color:#fff} .abright{margin-left:auto;display:flex;gap:8px;align-items:center} .abright select{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28); color:#fff;border-radius:9px;padding:6px 10px;font-size:13px;font-weight:600} .abright select option{color:#0d1b2a} .iconbtn{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);color:#fff; border-radius:9px;padding:6px 11px;cursor:pointer;font-size:13px;font-weight:600} .iconbtn:hover{background:rgba(255,255,255,.25)} /* ---------------- page header ---------------- */ .phead{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap;padding:20px 2px 14px} .phead h1{font-size:21px;letter-spacing:-.2px} .phead .sub{color:var(--mut);font-size:13px;margin-top:3px} .phead .sp{margin-left:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap} /* ---------------- buttons ---------------- */ .btn{background:var(--panel);border:1px solid var(--line2);color:var(--ink);border-radius:var(--r3); padding:7px 13px;cursor:pointer;font-weight:600;font-size:13px;white-space:nowrap} .btn:hover{border-color:var(--brand);color:var(--brand)} .btn.pri{background:var(--brand);border-color:var(--brand);color:#fff} .btn.pri:hover{background:var(--brandDk);border-color:var(--brandDk);color:#fff} .btn.dgr{color:var(--bad);border-color:var(--line2)} .btn.dgr:hover{background:var(--badBg);border-color:var(--bad)} .btn:disabled{opacity:.5;cursor:not-allowed} .btn.sm{padding:4px 9px;font-size:12px} /* ---------------- cards ---------------- */ .card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh)} .card>.hd{padding:13px 16px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px;flex-wrap:wrap} .card>.hd h3{font-size:14px;letter-spacing:.1px} .card>.hd .r{margin-left:auto;display:flex;gap:8px;align-items:center;color:var(--mut);font-size:12px} .card>.bd{padding:14px 16px} .card>.bd.flush{padding:0} /* ---------------- KPI tiles ---------------- */ .kpis{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(196px,1fr));margin-bottom:14px} .kpi{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:13px 15px; box-shadow:var(--sh);position:relative;overflow:hidden} .kpi::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--k,var(--brand))} .kpi .lab{color:var(--mut);font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.5px} .kpi .val{font-size:25px;font-weight:800;letter-spacing:-.6px;margin-top:5px;color:var(--k,var(--ink)); font-variant-numeric:tabular-nums;line-height:1.1} .kpi .val small{font-size:14px;font-weight:700;opacity:.75;margin-left:2px} .kpi .sub{color:var(--mut);font-size:12px;margin-top:4px} .kpi.big{grid-column:span 2} @media(max-width:860px){.kpi.big{grid-column:span 1}} /* ---------------- layout grids ---------------- */ .grid{display:grid;gap:14px} .g-2{grid-template-columns:1fr 1fr} .g-3{grid-template-columns:2fr 1fr} .g-32{grid-template-columns:1.35fr 1fr} @media(max-width:1180px){.g-2,.g-3,.g-32{grid-template-columns:1fr}} .mt{margin-top:14px} /* ---------------- pipeline ---------------- */ .pipe{display:grid;gap:8px;grid-template-columns:repeat(6,1fr)} @media(max-width:1000px){.pipe{grid-template-columns:repeat(3,1fr)}} @media(max-width:560px){.pipe{grid-template-columns:repeat(2,1fr)}} .pstep{border:1px solid var(--line);border-radius:var(--r2);padding:11px 12px;background:var(--panel2); position:relative;cursor:pointer;transition:transform .12s,box-shadow .12s} .pstep:hover{transform:translateY(-2px);box-shadow:var(--shUp)} .pstep .n{font-size:22px;font-weight:800;letter-spacing:-.5px;font-variant-numeric:tabular-nums;line-height:1.1} .pstep .t{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--mut);margin-bottom:5px} .pstep .v{font-size:12px;color:var(--ink2);margin-top:3px;font-variant-numeric:tabular-nums} .pstep .bar{height:4px;border-radius:3px;margin-top:9px;background:var(--line)} .pstep .bar i{display:block;height:100%;border-radius:3px} /* ---------------- tables ---------------- */ .tbl{width:100%;border-collapse:collapse;font-size:13px} .tbl th{background:var(--panel3);color:var(--ink2);text-align:left;font-weight:700;font-size:11.5px; text-transform:uppercase;letter-spacing:.4px;padding:9px 11px;border-bottom:1px solid var(--line2); position:sticky;top:0;z-index:2;white-space:nowrap} .tbl td{padding:8px 11px;border-bottom:1px solid var(--line);vertical-align:middle} .tbl tbody tr:hover{background:var(--panel2)} .tbl tfoot td{background:var(--panel3);font-weight:800;border-top:2px solid var(--line2);border-bottom:none} .tbl .n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap} .scroll{overflow:auto;max-height:var(--mh,none)} .tbl-sm td,.tbl-sm th{padding:6px 9px} .wtrunc{max-width:420px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* inline bar inside a table cell */ .mini{position:relative;min-width:110px;height:16px;background:var(--line);border-radius:4px;overflow:hidden} .mini i{position:absolute;left:0;top:0;bottom:0;border-radius:4px} .mini b{position:absolute;inset:0;display:grid;place-items:center;font-size:10.5px;font-weight:700;color:var(--ink)} /* split bar: appropriated vs not */ .split{display:flex;height:18px;border-radius:5px;overflow:hidden;background:var(--line);min-width:130px} .split i{display:block;height:100%} /* ---------------- badges ---------------- */ .bdg{display:inline-block;padding:2px 8px;border-radius:99px;font-size:11.5px;font-weight:700; white-space:nowrap;border:1px solid transparent} .bdg.st-entered{background:var(--st1Bg);color:var(--st1)} .bdg.st-numbered{background:var(--st2Bg);color:var(--st2)} .bdg.st-appropriated{background:var(--st3Bg);color:var(--st3)} .bdg.st-billed{background:var(--st5Bg);color:var(--st5)} .bdg.st-paid{background:var(--st6Bg);color:var(--st6)} .bdg.k-water{background:var(--waterBg);color:var(--water)} .bdg.k-sewer{background:var(--sewerBg);color:var(--sewer)} .bdg.k-other{background:var(--otherBg);color:var(--other)} .bdg.ok{background:var(--okBg);color:var(--ok)} .bdg.warn{background:var(--warnBg);color:var(--warn)} .bdg.bad{background:var(--badBg);color:var(--bad)} .bdg.mutd{background:var(--panel3);color:var(--mut)} .dot{display:inline-block;width:8px;height:8px;border-radius:99px;margin-right:6px;vertical-align:1px} /* ---------------- filters ---------------- */ .filters{display:flex;gap:8px;align-items:center;flex-wrap:wrap} .filters select,.filters input{background:var(--panel);border:1px solid var(--line2);border-radius:var(--r3); padding:6px 10px;font-size:13px;color:var(--ink)} .filters input[type=search]{min-width:230px} .filters label{font-size:12px;color:var(--mut);font-weight:600} .chips{display:flex;gap:6px;flex-wrap:wrap} .chip{border:1px solid var(--line2);background:var(--panel);border-radius:99px;padding:4px 11px; font-size:12px;font-weight:600;cursor:pointer;color:var(--ink2)} .chip:hover{border-color:var(--brand);color:var(--brand)} .chip.on{background:var(--brand);border-color:var(--brand);color:#fff} /* ---------------- charts (inline svg) ---------------- */ .chartbox{width:100%;overflow-x:auto} svg.chart{display:block;width:100%;height:auto;overflow:visible} svg.chart text{font-family:inherit;fill:var(--ink2)} svg.chart .ax{stroke:var(--line2);stroke-width:1} svg.chart .gl{stroke:var(--line);stroke-width:1;stroke-dasharray:3 3} svg.chart .lb{font-size:11px;fill:var(--mut)} svg.chart .vl{font-size:11px;font-weight:700;fill:var(--ink2)} .legend{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--ink2);padding:2px 0 0} .legend span{display:flex;align-items:center;gap:6px} .legend i{width:11px;height:11px;border-radius:3px;display:block} /* donut */ .donut{display:flex;gap:16px;align-items:center;flex-wrap:wrap} .donut svg{flex:0 0 auto} .donut .keys{flex:1 1 190px;display:grid;gap:5px;min-width:180px} .donut .keys div{display:flex;align-items:center;gap:8px;font-size:12.5px} .donut .keys i{width:10px;height:10px;border-radius:3px;flex:0 0 auto} .donut .keys b{margin-left:auto;font-variant-numeric:tabular-nums} /* ---------------- empty / misc ---------------- */ .empty{padding:34px 16px;text-align:center;color:var(--mut)} .empty .big{font-size:30px;margin-bottom:8px;opacity:.5} .note{background:var(--warnBg);border:1px solid var(--warn);color:var(--warn);border-radius:var(--r2); padding:10px 13px;font-size:13px;font-weight:600;display:flex;gap:9px;align-items:flex-start} .note.info{background:var(--infoBg);border-color:var(--info);color:var(--info)} .note.ok{background:var(--okBg);border-color:var(--ok);color:var(--ok)} /* ---------------- toasts / busy / modal ---------------- */ #toasts{position:fixed;right:16px;bottom:16px;z-index:80;display:grid;gap:8px} .toast{background:var(--panel);border:1px solid var(--line2);border-left:4px solid var(--brand); border-radius:var(--r2);padding:10px 14px;box-shadow:var(--shUp);font-size:13px;font-weight:600; max-width:380px;animation:tin .18s ease-out} .toast.ok{border-left-color:var(--ok)} .toast.bad{border-left-color:var(--bad)} @keyframes tin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} #busy{position:fixed;inset:0;background:rgba(8,20,36,.35);display:none;place-items:center;z-index:90} #busy.on{display:grid} #busy .b{background:var(--panel);border-radius:var(--r);padding:16px 22px;display:flex;gap:12px; align-items:center;box-shadow:var(--shUp);font-weight:600} .spin{width:18px;height:18px;border:2.5px solid var(--line2);border-top-color:var(--brand); border-radius:99px;animation:sp .7s linear infinite} @keyframes sp{to{transform:rotate(360deg)}} .modal{position:fixed;inset:0;background:rgba(8,20,36,.45);display:grid;place-items:center;z-index:70;padding:18px} .modal .box{background:var(--panel);border-radius:var(--r);box-shadow:var(--shUp);width:min(880px,100%); max-height:90vh;display:flex;flex-direction:column} .modal .box>.hd{padding:14px 18px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px} .modal .box>.bd{padding:16px 18px;overflow:auto} .modal .box>.ft{padding:12px 18px;border-top:1px solid var(--line);display:flex;gap:8px;justify-content:flex-end} /* form grid inside the modal */ .fg{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr))} .fg label{display:grid;gap:4px;font-size:12px;font-weight:700;color:var(--mut); text-transform:uppercase;letter-spacing:.4px} .fg input,.fg select,.fg textarea{background:var(--panel2);border:1px solid var(--line2); border-radius:var(--r3);padding:7px 10px;font-size:13px;font-weight:400;color:var(--ink); text-transform:none;letter-spacing:0} .fg input:focus,.fg select:focus,.fg textarea:focus{outline:2px solid var(--brand);outline-offset:-1px} .fg .wide{grid-column:1/-1} .fset{border:1px solid var(--line);border-radius:var(--r2);padding:12px 14px;margin-top:12px} .fset>legend{font-size:11.5px;font-weight:800;color:var(--brand);text-transform:uppercase; letter-spacing:.6px;padding:0 6px} /* ---------------- print (fund request) ---------------- */ @media print{ .no-print{display:none!important} body{background:#fff;font-size:11px} .wrap{max-width:none;padding:0} .card{box-shadow:none;border-color:#999;break-inside:avoid} .tbl th{background:#eee!important;color:#000} @page{size:A4 landscape;margin:10mm} } /* ---- sortable table headings ------------------------------------------- */ .tbl th.sortable{cursor:pointer;user-select:none;position:relative;padding-right:20px} .tbl th.sortable:hover{color:var(--brand)} .tbl th.sortable::after{content:"⇅";position:absolute;right:7px;opacity:.28;font-size:10px;font-weight:700} .tbl th.sort-asc::after{content:"▲";opacity:.9;color:var(--brand);font-size:8.5px} .tbl th.sort-desc::after{content:"▼";opacity:.9;color:var(--brand);font-size:8.5px} .tbl th.sortable:focus-visible{outline:2px solid var(--brand);outline-offset:-2px} @media print{.tbl th.sortable::after{content:""}} /* five stages, not six */ .pipe.pipe5{grid-template-columns:repeat(5,1fr)} @media (max-width:900px){.pipe,.pipe.pipe5{grid-template-columns:repeat(2,1fr)}} /* ========================================================================== The workflow — five stages, five colours -------------------------------------------------------------------------- entered · verified · numbered · appropriated · bill received. The colours run cool to warm along the pipeline so a glance at any badge, dot or bar says roughly how far along a file is without reading the word. They are remapped here rather than in the variables themselves, because --st1..--st6 are positional and the pipeline changed shape when verification was added. ========================================================================== */ .bdg.st-verified{background:var(--st2Bg);color:var(--st2)} .bdg.st-numbered{background:var(--st3Bg);color:var(--st3)} .bdg.st-appropriated{background:var(--apprBg);color:var(--appr)} .bdg.st-billed{background:var(--st5Bg);color:var(--st5)} /* A badge that is also a link — the "held" count on the numbering page. */ a.bdg{text-decoration:none} a.bdg:hover{filter:brightness(.94);text-decoration:underline} /* ---------------- the count on a nav tab ---------------- */ .tabs a{position:relative} .qn{display:inline-block;margin-left:6px;padding:1px 6px;border-radius:99px; background:var(--brand);color:#fff;font-size:10px;font-weight:800;line-height:1.5; vertical-align:1px;min-width:17px;text-align:center} .tabs a.on .qn{background:#fff;color:var(--brand)} /* ========================================================================== The desk queues — the band the dashboard leads with -------------------------------------------------------------------------- One card per desk, in pipeline order, each a link to that desk. A desk with nothing on it is drawn flat and quiet; a desk with work on it is not. ========================================================================== */ .queues{display:grid;gap:12px;grid-template-columns:repeat(4,1fr);margin-bottom:14px} @media(max-width:940px){.queues{grid-template-columns:repeat(2,1fr)}} @media(max-width:520px){.queues{grid-template-columns:1fr}} .qcard{display:block;text-decoration:none;color:inherit;position:relative; background:var(--panel);border:1px solid var(--line);border-radius:var(--r); padding:13px 15px 14px;overflow:hidden;transition:.15s border-color,.15s transform,.15s box-shadow} .qcard::before{content:"";position:absolute;inset:0 auto 0 0;width:4px;background:var(--k,var(--brand))} .qcard:hover{border-color:var(--k,var(--brand));transform:translateY(-1px); box-shadow:0 5px 18px rgba(11,94,168,.10)} .qcard .qlab{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.5px; color:var(--mut);display:flex;align-items:center;gap:6px} .qcard .qstep{display:inline-grid;place-items:center;width:16px;height:16px;border-radius:99px; background:var(--k,var(--brand));color:#fff;font-size:9.5px;font-weight:800;letter-spacing:0} .qcard .qval{font-size:29px;font-weight:800;line-height:1.15;margin-top:5px; color:var(--k,var(--brand));font-variant-numeric:tabular-nums} .qcard .qsub{font-size:11.5px;color:var(--mut);margin-top:2px;line-height:1.4} .qcard.clear{opacity:.72} .qcard.clear .qval{color:var(--mut)} .qcard .qgo{position:absolute;right:12px;top:12px;font-size:15px;opacity:0;transition:.15s} .qcard:hover .qgo{opacity:.5} /* ---------------- the depot entry page ---------------- */ body.pub .wrap.narrow{max-width:900px} .foot-note{margin:22px 0 34px;font-size:12px;text-align:center} /* the five steps, drawn once on the public page so a depot can see the journey */ .steps{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px} .stp{flex:1 1 130px;display:flex;align-items:center;gap:8px;padding:9px 11px; background:var(--panel);border:1px solid var(--line);border-radius:var(--r); font-size:11.5px;color:var(--mut)} .stp b{display:grid;place-items:center;width:20px;height:20px;border-radius:99px; background:var(--panel3);color:var(--mut);font-size:11px;flex:none} .stp.on{border-color:var(--brand);background:var(--brandBg);color:var(--ink);font-weight:700} .stp.on b{background:var(--brand);color:#fff} /* a small note under a form field */ .hint{display:block;font-size:11px;font-weight:500;color:var(--mut);margin-top:1px; text-transform:none;letter-spacing:0} .fg label textarea{resize:vertical;min-height:44px} /* ---------------- appropriation: what the selection does to a head -------- */ tr.warnrow td{background:var(--warnBg)} tr.badrow td{background:var(--unapBg)} /* ========================================================================== The report picker -------------------------------------------------------------------------- Six reports and three groupings, chosen as cards rather than from a dropdown: the choice IS the page, and each card carries how many files it holds so the size of a sheet is known before it is printed. ========================================================================== */ .picks{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(238px,1fr))} .picks.two{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))} .pick{position:relative;display:block;padding:12px 14px;cursor:pointer; border:1px solid var(--line);border-radius:var(--r);background:var(--panel); transition:.12s border-color,.12s background,.12s box-shadow; text-transform:none;letter-spacing:0;font-weight:500} .pick:hover{border-color:var(--brand);background:var(--panel2)} .pick.on{border-color:var(--brand);background:var(--brandBg); box-shadow:inset 3px 0 0 var(--brand)} /* the radio itself is redundant once the card shows the state */ .pick input{position:absolute;opacity:0;pointer-events:none} .pick .pt{display:block;font-size:13px;font-weight:700;color:var(--ink)} .pick .pn{display:block;font-size:11.5px;font-weight:700;color:var(--brand);margin-top:3px} .pick .pb{display:block;font-size:11.5px;color:var(--mut);margin-top:4px;line-height:1.45} .pick.on .pt{color:var(--brandDk)} @media(max-width:640px){.picks,.picks.two{grid-template-columns:1fr}} /* ========================================================================== Print — the dashboard and every register page -------------------------------------------------------------------------- The rule above already hides .no-print and drops the chrome; what is added here is the paper itself. The dashboard is portrait because its KPI band and panels stack down a page; a wide register table sets .print-wide and gets landscape instead. ========================================================================== */ @media print{ .appbar,.tabs,#toasts,#busy,#modalHost,.filters,.chips{display:none!important} a{text-decoration:none;color:inherit} .kpi,.qcard,.card,.pstep{break-inside:avoid;page-break-inside:avoid} .card>.hd h3{font-size:12.5px} .scroll{max-height:none!important;overflow:visible!important} .queues{grid-template-columns:repeat(4,1fr)} .kpis{grid-template-columns:repeat(4,1fr)} .phead{border-bottom:2px solid #333;padding-bottom:8px;margin-bottom:10px} .phead h1{font-size:17px} /* a printed sheet has to say what it is and when it was taken */ .printfoot{display:block!important;margin-top:10px;padding-top:6px; border-top:1px solid #999;font-size:9.5px;color:#444; display:flex;justify-content:space-between} } .printfoot{display:none} /* ========================================================================== Grid items must be allowed to be narrower than their contents -------------------------------------------------------------------------- A grid item defaults to `min-width:auto`, which means it refuses to shrink below the intrinsic width of what is inside it. A card holding a ten-column table therefore blew its track out to the table's width — 1255px inside a 951px window — and the whole page scrolled sideways, with the .scroll box's own overflow:auto never getting a chance to act. min-width:0 hands that decision back to the .scroll box, which is where it belongs: the card fits the column, and the wide table scrolls inside it. ========================================================================== */ .grid > *, .kpis > *, .queues > * { min-width: 0 } .tbl { max-width: 100% } /* ========================================================================== Narrow screens — two things that push a page sideways -------------------------------------------------------------------------- 1. A