/* ========================================================================== HASSAM PAPER ERP — THE BRIDGE (UI-2, 2026-09-17) erp/assets/css/hpi-bridge.css — loaded AFTER theme.css and erp-theme.css. Owner: "hassampaper ERP should be the same preview as our multanstationers ERP — dashboard, modules, settings all the same." erp-theme.css is that ERP's stylesheet, copied verbatim, and draws the chrome (rail, top bar, strip, tiles). Every SCREEN BODY here is still built from theme.css's own classes — .card .card-h .kpi .tag .btn .field table .verdict .page-h — and this file dresses those in the theme's tokens: the same two faces, the same dark-green headings with white writing, the same state colours, the one 3px radius, no shadows. It is what §15 of erp-theme.css does for the other ERP's Bootstrap screens. No screen's markup, id, name or script hook changes. Order of business: 1 tokens · 2 page frame · 3 page header · 4 buttons · 5 cards · 6 tables · 7 tags · 8 KPIs · 9 forms · 10 notices · 11 the rest · 12 rail extras · 13 tiles · 14 print ========================================================================== */ /* 1. TOKENS — theme.css's names, pointed at erp-theme.css's values. theme.css only ever reads these, so re-pointing them re-inks every component at once. in layout.php keeps theme.css's dark block off. */ :root, :root[data-theme="light"]{ --ground:var(--paper); --surface-3:#e6ecf3; --line:var(--rule); --line-soft:var(--rule-2); --accent:var(--bar); --accent-2:var(--bar-2); --accent-soft:var(--navy-bg); --fuel:var(--amber); --fuel-soft:var(--amber-bg); --alert:var(--red); --alert-soft:var(--red-bg); --warn:var(--amber); --warn-soft:var(--amber-bg); --on-accent:#ffffff; --ok:var(--green); --shadow:none; --display:var(--serif); --body:var(--serif); --disp:var(--serif); } /* 2. PAGE FRAME */ body.hpi-legacy{background:var(--paper)} .erp-page--legacy{padding:22px 24px 44px} .erp-page--legacy .stack{gap:16px} .erp-page--legacy .grid{gap:16px} .erp-page--legacy a{color:var(--navy)} /* 3. PAGE HEADER → the masthead: crumb as the eyebrow, the title in the serif, a 2px ink rule */ .page-h{align-items:flex-end;border-bottom:2px solid var(--ink);padding-bottom:14px;margin-bottom:22px} .page-h h2{font-family:var(--serif);font-size:28px;font-weight:700;letter-spacing:-.005em;line-height:1.15} .page-h .crumb{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2);margin-bottom:6px} .page-h .acts{gap:8px;align-items:center} @media (max-width:900px){.page-h h2{font-size:24px}} /* 4. BUTTONS — mono, uppercase, one radius; primary on the bar's green; danger on red */ .btn,button.btn,a.btn{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-weight:500; padding:8px 13px;border:1px solid var(--rule);border-radius:var(--r);background:var(--surface);color:var(--ink); text-decoration:none;white-space:nowrap;line-height:1.3} .btn:hover{border-color:var(--ink-2);color:var(--ink)} .btn.pri{background:var(--bar);border-color:var(--bar);color:#fff} .btn.pri:hover{background:var(--bar-2);border-color:var(--bar-2);color:#fff} .btn.danger{background:var(--red-bg);border-color:var(--red);color:var(--red)} .btn.danger:hover{background:var(--red);color:#fff} .btn[disabled]{opacity:.45;border-style:solid;pointer-events:none} .btn:focus-visible{outline:2px solid var(--navy);outline-offset:1px} @media (max-width:900px){.btn{padding:10px 14px;min-height:44px}} /* the page-header buttons read bold (owner 2026-09-21: "these icons should also bold fonts") */ .page-h .acts .btn,.page-h .acts .dtool{font-weight:700;font-size:11.5px} /* the big "Add new" — a primary button at heading weight with a ringed plus, first in the row */ .btn.big{font-size:13px;font-weight:700;padding:11px 20px 11px 14px;display:inline-flex;align-items:center;gap:10px; box-shadow:0 6px 16px -8px rgba(0,0,0,.45)} .btn.big .plus{font-style:normal;display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%; background:#fff;color:var(--bar);font-size:20px;font-weight:800;line-height:1;flex:none} .btn.big:hover .plus{color:var(--bar-2)} /* 4c. WINDOW TILES (.gtiles on the GRN / invoice / challan windows) — the Multan Stationers chips (owner 2026-09-21: "colourful and small, fit in one row"): one strip that never wraps (scrolls on a phone like the quick-launch bar), each tile a pastel pill with an icon square, bold label, small note under it. --gt = the tile's ink, --gtbg = its fill, both set per tile in the markup. */ .gtiles{display:flex;gap:8px;flex-wrap:nowrap;overflow-x:auto;margin-bottom:14px;padding:2px 2px 6px;align-items:stretch; scrollbar-width:thin} .gtiles a,.gtiles button,.gtiles span.no{flex:0 0 auto;display:inline-grid;grid-template-columns:26px auto;column-gap:8px;align-items:center; padding:4px 12px 4px 5px;border-radius:10px;background:var(--gtbg,#f1f5f9);color:var(--gt,#334155); border:1px solid rgba(0,0,0,.18);box-shadow:0 1px 0 rgba(0,0,0,.25);text-decoration:none;font:inherit;line-height:1.15; white-space:nowrap;cursor:pointer;text-align:left;transition:transform .12s,box-shadow .12s} .gtiles a::before,.gtiles button::before,.gtiles span.no::before{content:attr(data-ic);grid-row:1/3;width:26px;height:26px;border-radius:7px; background:rgba(255,255,255,.9);display:grid;place-items:center;font-size:15px;line-height:1} .gtiles b{font-weight:700;font-size:.84rem;grid-column:2} .gtiles small{font-size:.66rem;font-weight:500;opacity:.85;grid-column:2;max-width:170px;overflow:hidden;text-overflow:ellipsis} .gtiles a:hover,.gtiles button:hover{transform:translateY(-1px);box-shadow:0 3px 8px rgba(0,0,0,.25);background:var(--gtbg,#f1f5f9);color:var(--gt,#334155)} .gtiles .go{background:var(--gt);color:#fff} .gtiles .go::before{background:rgba(255,255,255,.28)} .gtiles .go:hover{background:var(--gt);color:#fff;filter:brightness(1.08)} .gtiles .no{opacity:.5;cursor:not-allowed;background:#f1f5f9;box-shadow:none} .gtiles form{display:contents} /* the three tools on every screen (print · sheet · WhatsApp): the same quiet outline, in the mono */ .dtool{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:500; border-color:var(--rule);border-radius:var(--r);color:var(--ink);background:var(--surface)} .dtool:hover{border-color:var(--ink-2);color:var(--ink)} .dtool.done{border-color:var(--green);color:var(--green)} /* THE ICONS ON A ROW (owner 2026-09-21: "very small") — 32px coloured squares, each tool in its own tint like the window tiles, so a register row reads at a glance. Colour keys off the role class where there is one (.del .ok) and off the tool's title otherwise, so both partials get it. */ .rowacts{gap:5px} .rowacts a,.rowacts button,.rowacts span.no{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0; border:1px solid var(--rowc,var(--rule));border-radius:8px;background:var(--rowbg,var(--surface));color:var(--rowc,var(--ink-2));cursor:pointer;text-decoration:none} .rowacts svg{width:17px;height:17px;stroke-width:1.7} .rowacts a:hover,.rowacts button:hover{filter:brightness(.94);transform:translateY(-1px);border-color:var(--rowc,var(--bar));color:var(--rowc,var(--bar))} .rowacts [title^="Open"]{--rowc:#1e3a8a;--rowbg:#dbeafe} .rowacts [title^="Edit"]{--rowc:#b45309;--rowbg:#fef3c7} .rowacts .del,.rowacts [title^="Reject"],.rowacts [title^="Delete"]{--rowc:#b91c1c;--rowbg:#fee2e2} .rowacts .ok,.rowacts [title^="Approve"]{--rowc:#15803d;--rowbg:#bbf7d0} .rowacts [title^="Unapprove"]{--rowc:#0e7490;--rowbg:#cffafe} .rowacts [title^="Print"]{--rowc:#1e3a8a;--rowbg:#e0e7ff} .rowacts [title$="spreadsheet"]{--rowc:#15803d;--rowbg:#dcfce7} .rowacts [title^="Send"]{--rowc:#128c7e;--rowbg:#d1fae5} .rowacts .no{opacity:.38;cursor:not-allowed;filter:grayscale(1)} .rowacts .del:hover{border-color:var(--red);color:var(--red)} /* 5. CARDS → panels: hairline border, the one radius, and a DARK heading with white writing (owner of the other ERP, 13 Sep: "backside theme should be dark and writing should be white") */ .card{border:1px solid var(--rule);border-radius:var(--r);background:var(--surface);box-shadow:none} .card-h{background:var(--bar);color:#fff;border-bottom:1px solid var(--bar);padding:9px 15px; border-radius:var(--r) var(--r) 0 0} .card-h h3{font-family:var(--mono);font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#fff} .card-h .sub{color:rgba(255,255,255,.84);font-weight:400} .card-h .note,.card-h small,.card-h .mono{color:rgba(255,255,255,.84)} .card-h a:not(.btn){color:#fff;text-decoration:underline;text-underline-offset:2px} /* a button on a dark heading is a white chip with the bar's own green as its ink */ .card-h .btn{background:#fff;border-color:#fff;color:var(--bar)} .card-h .btn:hover{background:#e9f3ec;color:var(--bar)} .card-h .btn.pri{background:#fff;border-color:#fff;color:var(--bar)} .card-h .btn.danger{background:#fff;border-color:#fff;color:var(--red)} /* a tag on a dark heading: light chip, dark writing — never a chip that melts into the bar */ .card-h .tag{background:rgba(255,255,255,.92);color:var(--bar);border-color:transparent} .card-h .tag.bad{color:var(--red)} .card-h .tag.warn,.card-h .tag.fuel{color:var(--amber)} .card-b{padding:15px 17px} .card-b p{color:var(--ink-2)} /* 6. TABLES — dark heading, white writing; hairline rows; figures mono, tabular, right */ .erp-page table{font-size:14px;background:var(--surface)} .erp-page th{background:var(--bar);color:#fff;border-bottom:1px solid var(--bar); font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:7px 10px} .erp-page th a{color:#fff} .erp-page th .note,.erp-page th small,.erp-page th .mono{color:rgba(255,255,255,.84)!important;font-weight:400} .erp-page td{padding:8px 10px;border-bottom:1px solid var(--rule-2);color:var(--ink)} .erp-page tbody tr:hover td{background:var(--surface-2)} .erp-page tbody tr:last-child td{border-bottom:1px solid var(--rule-2)} .erp-page tfoot td{background:var(--surface-2);border-top:1px solid var(--ink);font-weight:700} .erp-page th.num,.erp-page td.num,.erp-page .tnum{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:13px} .erp-page td .tag{white-space:nowrap} .erp-page .tw{border:1px solid var(--rule);border-radius:var(--r)} .card .tw,.card-b .tw{border:0;border-radius:0} /* 7. TAGS → status pills */ .tag{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;font-weight:500; padding:3px 9px;border-radius:999px;border:1px solid var(--rule);background:var(--surface-2);color:var(--muted)} .tag.ok{background:var(--green-bg);border-color:var(--green-line);color:var(--green)} .tag.bad{background:var(--red-bg);border-color:var(--red);color:var(--red)} .tag.warn{background:var(--amber-bg);border-color:var(--amber);color:var(--amber)} .tag.fuel{background:var(--amber-bg);border-color:var(--amber);color:var(--amber)} /* 8. KPIs — the label in the mono, the figure in the mono, big and tabular */ .kpis{gap:1px;background:var(--rule);border:1px solid var(--rule)} .kpi{border:0;border-radius:0;padding:13px 15px;background:var(--surface)} .kpi u{font-size:10.5px;letter-spacing:.16em;color:var(--ink-2)} .kpi strong{font-family:var(--mono);font-size:24px;font-weight:600;letter-spacing:0;margin-top:5px;line-height:1.2} .kpi em{font-family:var(--mono);font-size:11px;letter-spacing:.03em;color:var(--ink-2)} .kpi.ok{border-left:3px solid var(--green)} .kpi.ok em{color:var(--green)} .kpi.bad{border-left:3px solid var(--red)} .kpi.bad em{color:var(--red)} .kpi.warn{border-left:3px solid var(--amber)} .kpi.warn em{color:var(--amber)} /* 9. FORMS — mono labels, mono controls, focus in the bar's green, no glow */ .field label{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2)} .field input,.field select,.field textarea, .erp-page input:not([type=checkbox]):not([type=radio]):not([type=file]):not(.erp-input), .erp-page select:not(.erp-select),.erp-page textarea{ font-family:var(--mono);font-size:13px;padding:8px 10px;border:1px solid var(--rule);border-radius:var(--r); background:var(--surface);color:var(--ink)} .erp-page td input:not([type=checkbox]):not([type=radio]),.erp-page td select{padding:4px 7px;font-size:12.5px} .field input:focus,.field select:focus,.field textarea:focus, .erp-page input:focus,.erp-page select:focus,.erp-page textarea:focus{outline:0;border-color:var(--navy);box-shadow:none} .field.ro input,.erp-page input[readonly]{background:var(--surface-2);color:var(--muted)} .erp-page input[type=checkbox],.erp-page input[type=radio]{accent-color:var(--bar);width:16px;height:16px} .fgrid{gap:14px} .note{font-family:var(--mono);font-size:10.5px;letter-spacing:.03em;color:var(--ink-2)} .perm{font-family:var(--mono)} /* 10. NOTICES — the verdict banner is the theme's note: hairline box, a 3px state edge on the left */ .verdict{border:1px solid var(--rule);border-left:3px solid var(--navy);background:var(--surface);border-radius:var(--r);padding:13px 16px} .verdict.pass{background:var(--surface);border-color:var(--rule);border-left:3px solid var(--green)} .verdict.blocked{background:var(--surface);border-color:var(--rule);border-left:3px solid var(--red)} .verdict h3{font-family:var(--serif);font-size:17px;font-weight:700} .verdict.pass h3{color:var(--green)} .verdict.blocked h3{color:var(--red)} .verdict p{font-size:14px;color:var(--ink-2)} .erp-page .erp-note{margin-bottom:16px} /* 11. THE REST — calc rows, exceptions, bars, report cards, headings on a white ground */ .calcrow{border-bottom:1px dashed var(--rule)} .calcrow .lbl{font-size:14px} .calcrow .lbl small{font-family:var(--mono);font-size:10.5px;color:var(--ink-2)} .calcrow .val{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:14px} .calcrow.hi{background:var(--surface-2);margin:0 -17px;padding:10px 17px} .calcrow.hi .val{font-size:16px;font-weight:700} .exc{border-bottom:1px solid var(--rule-2)} .exc .txt b{font-size:14px} .exc .txt span{font-size:13px;color:var(--ink-2)} .exc .meta{font-family:var(--mono);font-size:11px;color:var(--ink-2)} .exc.hi .sev{background:var(--red)} .exc.md .sev{background:var(--amber)} .exc.lo .sev{background:var(--green)} .barrow{font-size:13px} .barrow .track{background:var(--surface-3);border-radius:1px} .barrow .fill{background:var(--bar)} .barrow .fill.f{background:var(--amber)} .barrow .fill.a{background:var(--red)} .rep{border:1px solid var(--rule);border-radius:var(--r);padding:13px 15px} .rep b{font-family:var(--serif);font-size:16px;font-weight:700} .rep span{font-size:13px;color:var(--ink-2)} .rep i{font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--green)} .rep:hover{border-color:var(--ink-2);background:var(--surface-2)} .erp-page h1,.erp-page h2,.erp-page h3,.erp-page h4{font-family:var(--serif)} .erp-page .mono{font-family:var(--mono)} .deckle{border-radius:var(--r)} .deckle div{background:var(--bar)} .deckle div.trim{background:var(--red)} .tb-sel{border:1px solid var(--rule);border-radius:var(--r);font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--ink-2)} /* the dashboard's phase banner and other inline colours that name theme.css tokens keep reading them */ /* 12. RAIL EXTRAS — a screen that arrives later is listed dimmed inside its flyout, never a 404 */ .erp-rail-fly>span.soon{display:block;margin:3px 0;border-radius:8px;padding:7px 12px 7px 10px;color:#111;font-weight:700; font-family:var(--mono);font-size:11.5px;border:1px dashed rgba(0,0,0,.3);opacity:.5;cursor:default} .erp-rail-fly>span.soon.erp-tone--1{background:#dbeafe}.erp-rail-fly>span.soon.erp-tone--2{background:#fde68a} .erp-rail-fly>span.soon.erp-tone--3{background:#bbf7d0}.erp-rail-fly>span.soon.erp-tone--4{background:#e9d5ff} .erp-rail-fly>span.soon.erp-tone--5{background:#fecdd3}.erp-rail-fly>span.soon.erp-tone--6{background:#bae6fd} .erp-rail-fly>span.soon.erp-tone--7{background:#fef08a}.erp-rail-fly>span.soon.erp-tone--8{background:#99f6e4} /* the rail's brand: the mill's letterhead logo, on the dark green, in a white plate */ .erp-rail-logo img{background:#fff;border-radius:var(--r);padding:2px 4px} .erp-rail-logo .logo{width:34px;height:34px;font-size:.8rem;background:var(--rail-on);color:#111} /* the company and date chips in the top bar are plain spans here, not a