/* ══════════════════════════════════════════════════════════════════════════ NAMIQ DESIGN LAYER — the vocabulary the new screens are built from. EVERYTHING HERE IS NAMESPACED `nq-` AND `--nq-*`, ON PURPOSE. The app already carries 17 design tokens and 136 classes that 81 working views depend on. A redesign that redefined --ink or .card would change every one of those screens at once, in ways nobody asked for and nobody could test in an afternoon. So this layer sits alongside the old one and touches nothing: a screen is either built from `nq-` components or it is not, and the two can coexist for as long as the conversion takes. The look is frosted glass over a field-coloured backdrop, with one rule that is not negotiable: TEXT NEVER SITS ON A BLUR ALONE. Every surface keeps a solid-enough fill beneath the frost, and small or numeric text gets more. That is the difference between glass that still works at six in the morning on a cheap laptop in a bright office, and glass that only works in a screenshot. Accents are the logo's own — the NAMIQ·FARM mark's cyan, green and orange — DEEPENED for light surfaces. The mark is drawn for black; #29B6F0 and #6FCF3F are beautiful there and fail contrast as text on paper. ══════════════════════════════════════════════════════════════════════════ */ :root{ /* ---- ink ---- */ --nq-ink:#141A21; --nq-ink-2:#4A5763; --nq-ink-faint:#7E8B98; /* ---- glass ---- */ --nq-glass:rgba(255,255,255,.62); --nq-glass-hi:rgba(255,255,255,.82); --nq-glass-line:rgba(255,255,255,.75); --nq-glass-edge:rgba(20,26,33,.09); --nq-sunk:rgba(255,255,255,.44); --nq-chrome:rgba(255,255,255,.55); --nq-blur:saturate(180%) blur(28px); /* ---- the logo, deepened to read on light ---- */ --nq-accent:#0E7FB8; --nq-accent-soft:rgba(14,127,184,.12); --nq-grow:#3E8E3F; --nq-grow-soft:rgba(62,142,63,.13); --nq-copper:#B5551A; --nq-copper-soft:rgba(181,85,26,.13); --nq-stop:#B3352C; --nq-stop-soft:rgba(179,53,44,.12); /* ---- the logo, as drawn, for marks and fills only ---- */ --nq-cyan:#29B6F0; --nq-lime:#6FCF3F; --nq-orange:#F97316; /* ---- crop health: the ordinary ramp a farmer already reads ---- */ --nq-c5:#3E8E3F; --nq-c4:#6FCF3F; --nq-c3:#C9D62F; --nq-c2:#F0A81E; --nq-c1:#E2661B; --nq-c0:#6B5B47; /* ---- shape & shadow ---- */ --nq-r:22px; --nq-r-sm:14px; --nq-r-xs:10px; --nq-shadow:0 1px 1px rgba(20,26,33,.04), 0 10px 30px -14px rgba(20,26,33,.28); --nq-shadow-up:0 2px 6px rgba(20,26,33,.08), 0 24px 60px -22px rgba(20,26,33,.40); /* ---- type ---- */ --nq-disp:'Manrope','Space Grotesk',system-ui,-apple-system,sans-serif; --nq-data:'JetBrains Mono','IBM Plex Mono',ui-monospace,monospace; } /* Dark is a second theme, not an inversion: the glass darkens and the accents brighten back toward the mark, because on black the mark's own colours are the ones that read. */ html[data-nq-theme="dark"]{ --nq-ink:#F3F7FA; --nq-ink-2:#AFBDC9; --nq-ink-faint:#7C8B98; --nq-glass:rgba(28,34,42,.58); --nq-glass-hi:rgba(40,48,58,.72); --nq-glass-line:rgba(255,255,255,.10); --nq-glass-edge:rgba(0,0,0,.5); --nq-sunk:rgba(18,23,29,.5); --nq-chrome:rgba(22,27,34,.6); --nq-accent:#4FB6E8; --nq-accent-soft:rgba(79,182,232,.16); --nq-grow:#6BC46C; --nq-grow-soft:rgba(107,196,108,.16); --nq-copper:#E29257; --nq-copper-soft:rgba(226,146,87,.16); --nq-stop:#E8756A; --nq-stop-soft:rgba(232,117,106,.16); --nq-shadow:0 1px 1px rgba(0,0,0,.3), 0 10px 30px -14px rgba(0,0,0,.7); --nq-shadow-up:0 2px 6px rgba(0,0,0,.5), 0 24px 60px -22px rgba(0,0,0,.8); } /* ══ THE BACKDROP ════════════════════════════════════════════════════════ Glass needs something to frost. IN THE APP this is painted onto itself, by the class below, because the app's body already carries an opaque background — a separate layer at z-index:-1 sits behind that and never appears, which is exactly what happened the first time. Painting the body is also cheaper: no extra element, no stacking context to fight with 81 existing screens. `.nq-ground` remains for standalone pages that have no such background. */ body.nq-live{ background: radial-gradient(38% 34% at 12% 14%, rgba(41,182,240,.34), transparent 62%), radial-gradient(42% 38% at 82% 8%, rgba(111,207,63,.34), transparent 62%), radial-gradient(46% 40% at 68% 78%, rgba(249,115,22,.20), transparent 62%), radial-gradient(40% 36% at 22% 88%, rgba(62,142,63,.30), transparent 62%), linear-gradient(160deg,#F4F7F2,#E6EDE8) !important; background-attachment:fixed !important; } /* Dark: the same light, far dimmer — a glow off the land rather than daylight on it. The gradients stay so the frost has something to pick up. */ html[data-nq-theme="dark"] body.nq-live{ background: radial-gradient(40% 34% at 12% 12%, rgba(41,182,240,.16), transparent 64%), radial-gradient(44% 38% at 84% 6%, rgba(111,207,63,.13), transparent 64%), radial-gradient(48% 42% at 66% 82%, rgba(249,115,22,.10), transparent 64%), linear-gradient(160deg,#0D1318,#070A0C) !important; } /* ══ THE SHELL ═══════════════════════════════════════════════════════════ NOT OVERRIDDEN, AND THAT WAS A MISTAKE WORTH RECORDING. The first attempt repainted the header and the sidebar from here, on the assumption that the app was dark-only and a light screen would sit in a dark frame. The app has had a full light theme all along — body.light redefines all seventeen of the old tokens and there is a toggle in the header that re-renders the view. So the shell needs nothing: it is already light when the reader has chosen light. What this layer must do instead is FOLLOW that choice rather than hold an opinion of its own, which is what workday.js now does. Two theme controls on one page would have been the real absurdity. The one thing kept: on Home the greeting is the heading, so the generic view header underneath it is redundant. */ body.nq-live #view-home .view-head{display:none} .nq-ground{position:fixed;inset:-15%;z-index:-1;pointer-events:none; background: radial-gradient(38% 34% at 12% 14%, rgba(41,182,240,.34), transparent 62%), radial-gradient(42% 38% at 82% 8%, rgba(111,207,63,.34), transparent 62%), radial-gradient(46% 40% at 68% 78%, rgba(249,115,22,.20), transparent 62%), radial-gradient(40% 36% at 22% 88%, rgba(62,142,63,.30), transparent 62%), linear-gradient(160deg,#F4F7F2,#E6EDE8); filter:blur(46px)} html[data-nq-theme="dark"] .nq-ground{ background: radial-gradient(38% 34% at 12% 14%, rgba(41,182,240,.24), transparent 62%), radial-gradient(42% 38% at 82% 8%, rgba(111,207,63,.20), transparent 62%), radial-gradient(46% 40% at 68% 78%, rgba(249,115,22,.14), transparent 62%), linear-gradient(160deg,#0C1116,#080B0E)} /* ══ SURFACES ════════════════════════════════════════════════════════════ */ .nq-card{ background:var(--nq-glass); backdrop-filter:var(--nq-blur); -webkit-backdrop-filter:var(--nq-blur); border:1px solid var(--nq-glass-line); border-radius:var(--nq-r); box-shadow:var(--nq-shadow); overflow:hidden; color:var(--nq-ink); font-family:var(--nq-disp); } .nq-card + .nq-card{margin-top:18px} .nq-card h3.nq-h{font-family:var(--nq-disp);font-size:13px;font-weight:700;letter-spacing:0; padding:16px 18px 0;display:flex;align-items:center;gap:9px;text-transform:none;color:var(--nq-ink)} .nq-card .nq-body{padding:6px 18px 16px} .nq-count{font-family:var(--nq-data);font-size:10.5px;font-weight:500;color:var(--nq-ink-faint); background:var(--nq-sunk);border-radius:99px;padding:2px 8px} .nq-more{margin-left:auto;font-size:12px;font-weight:600;color:var(--nq-accent);cursor:pointer; background:none;border:none;font-family:inherit} .nq-more:hover{text-decoration:underline} /* a section label — quiet, never competing with the content under it */ .nq-lbl{font-family:var(--nq-disp);font-size:12px;font-weight:700;letter-spacing:.08em; text-transform:uppercase;color:var(--nq-ink-faint);margin-bottom:11px;display:block} /* ══ THE BENCH ═══════════════════════════════════════════════════════════ Everything a role creates, in one place. Not a menu — a workbench. */ .nq-deck{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:11px} .nq-do{ background:var(--nq-glass); backdrop-filter:var(--nq-blur); -webkit-backdrop-filter:var(--nq-blur); border:1px solid var(--nq-glass-line); border-radius:var(--nq-r-sm); padding:14px; cursor:pointer; text-align:left; font-family:var(--nq-disp); color:var(--nq-ink); box-shadow:var(--nq-shadow); transition:transform .22s cubic-bezier(.2,.8,.3,1), box-shadow .22s; display:flex; flex-direction:column; gap:9px; } .nq-do:hover{transform:translateY(-3px);box-shadow:var(--nq-shadow-up)} .nq-do:active{transform:translateY(-1px)} .nq-do:focus-visible{outline:2px solid var(--nq-accent);outline-offset:2px} .nq-do .nq-ic{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;font-size:15px} .nq-do .nq-t{font-size:13.5px;font-weight:700;line-height:1.25} .nq-do .nq-s{font-size:11.5px;color:var(--nq-ink-2);line-height:1.35} /* tone: blue for money & documents, green for go, copper for care */ .nq-ic.b{background:var(--nq-accent-soft);color:var(--nq-accent)} .nq-ic.g{background:var(--nq-grow-soft);color:var(--nq-grow)} .nq-ic.c{background:var(--nq-copper-soft);color:var(--nq-copper)} .nq-ic.r{background:var(--nq-stop-soft);color:var(--nq-stop)} /* ══ A TASK ══════════════════════════════════════════════════════════════ What it is, why it matters, and the one thing to do about it. The "why" is not optional: a list of demands with no reasons is a list people learn to scroll past. */ .nq-task{display:grid;grid-template-columns:34px 1fr auto;gap:13px;align-items:start; padding:14px 0;border-bottom:1px solid var(--nq-glass-edge)} .nq-task:last-child{border-bottom:none} .nq-task .nq-ic{width:34px;height:34px;border-radius:11px;display:grid;place-items:center; font-size:15px;flex:none} .nq-task .nq-what{font-size:14px;font-weight:700;line-height:1.4} .nq-task .nq-why{font-size:12.5px;color:var(--nq-ink-2);margin-top:3px;line-height:1.45} .nq-task .nq-meta{font-family:var(--nq-data);font-size:10.5px;color:var(--nq-ink-faint);margin-top:6px} .nq-acts{display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end} /* ══ BUTTONS ═════════════════════════════════════════════════════════════ */ .nq-btn{font-family:var(--nq-disp);font-size:12.5px;font-weight:600;border-radius:10px; padding:8px 13px;cursor:pointer;border:1px solid var(--nq-glass-line); background:var(--nq-glass-hi);color:var(--nq-ink);transition:.16s;white-space:nowrap; box-shadow:var(--nq-shadow)} .nq-btn:hover{color:var(--nq-accent);transform:translateY(-1px)} .nq-btn:focus-visible{outline:2px solid var(--nq-accent);outline-offset:2px} .nq-btn.pri{background:var(--nq-accent);border-color:transparent;color:#fff} .nq-btn.pri:hover{color:#fff;filter:brightness(1.08)} .nq-btn.quiet{background:transparent;border-color:transparent;color:var(--nq-ink-2);box-shadow:none} .nq-btn.quiet:hover{background:var(--nq-glass-hi)} .nq-btn[disabled]{opacity:.5;cursor:not-allowed;transform:none} /* ══ A NOTICE WRITTEN FOR A PERSON ═══════════════════════════════════════ Never "FK constraint violation". Always what happened, to what, and the two or three things that would fix it. */ .nq-note{display:flex;gap:13px;padding:15px 17px;border:1px solid var(--nq-glass-line); border-left:3px solid var(--nq-copper);border-radius:var(--nq-r); background:var(--nq-glass);backdrop-filter:var(--nq-blur);-webkit-backdrop-filter:var(--nq-blur); align-items:flex-start;box-shadow:var(--nq-shadow);color:var(--nq-ink);font-family:var(--nq-disp)} .nq-note.stop{border-left-color:var(--nq-stop)} .nq-note.go{border-left-color:var(--nq-grow)} .nq-note .nq-t{font-size:13.5px;font-weight:700;line-height:1.4} .nq-note .nq-s{font-size:12.5px;color:var(--nq-ink-2);margin-top:3px} .nq-note .nq-row{display:flex;gap:7px;margin-top:11px;flex-wrap:wrap} .nq-note .nq-x{margin-left:auto;color:var(--nq-ink-faint);cursor:pointer;background:none; border:none;font-size:16px;line-height:1} /* ══ PROCESS TIMELINE ════════════════════════════════════════════════════ Where a thing is, who has it, and what is holding it up. */ .nq-flow{display:flex;padding:8px 0 4px;overflow-x:auto} .nq-step{flex:1;min-width:94px;position:relative;text-align:center;padding-top:26px} .nq-step::before{content:'';position:absolute;top:9px;left:50%;right:-50%;height:2px; background:var(--nq-glass-edge)} .nq-step:last-child::before{display:none} .nq-step .nq-pt{position:absolute;top:2px;left:50%;translate:-50% 0;width:16px;height:16px; border-radius:50%;background:var(--nq-glass-hi);border:2px solid var(--nq-glass-edge);z-index:1} .nq-step.done .nq-pt{background:var(--nq-grow);border-color:var(--nq-grow)} .nq-step.done::before{background:var(--nq-grow)} .nq-step.now .nq-pt{border-color:var(--nq-accent);box-shadow:0 0 0 5px var(--nq-accent-soft); animation:nq-pulse 2.4s ease-in-out infinite} @keyframes nq-pulse{50%{box-shadow:0 0 0 9px var(--nq-accent-soft)}} .nq-step .nq-sl{font-size:12px;font-weight:600} .nq-step.todo .nq-sl{color:var(--nq-ink-faint);font-weight:500} .nq-step.now .nq-sl{color:var(--nq-accent)} .nq-step .nq-sd{font-family:var(--nq-data);font-size:9.5px;color:var(--nq-ink-faint);margin-top:2px} /* ══ WHAT CHANGED ════════════════════════════════════════════════════════ */ .nq-chg{display:flex;gap:11px;padding:11px 0;border-bottom:1px solid var(--nq-glass-edge); font-size:13px;font-family:var(--nq-disp);color:var(--nq-ink)} .nq-chg:last-child{border-bottom:none} .nq-chg .nq-d{width:6px;height:6px;border-radius:50%;margin-top:7px;flex:none;background:var(--nq-accent)} .nq-chg .nq-d.up{background:var(--nq-grow)} .nq-chg .nq-d.dn{background:var(--nq-copper)} .nq-chg time{margin-left:auto;font-family:var(--nq-data);font-size:10.5px; color:var(--nq-ink-faint);white-space:nowrap} /* ══ THE ASSISTANT ═══════════════════════════════════════════════════════ */ .nq-orb{width:22px;height:22px;border-radius:50%;flex:none; background:conic-gradient(from 210deg,var(--nq-cyan),var(--nq-lime),var(--nq-orange),var(--nq-cyan))} .nq-caret{display:inline-block;width:6px;height:13px;background:var(--nq-accent); vertical-align:-2px;margin-left:2px;animation:nq-blink 1s steps(2) infinite} @keyframes nq-blink{50%{opacity:0}} /* ══ THE DRAWER ══════════════════════════════════════════════════════════ A form opens BESIDE the work, never instead of it. Losing your place is the tax every ERP charges and the one this is meant not to. */ .nq-scrim{position:fixed;inset:0;background:rgba(10,16,20,.28);backdrop-filter:blur(2px); z-index:1400;opacity:0;pointer-events:none;transition:opacity .3s} .nq-scrim.on{opacity:1;pointer-events:auto} .nq-drawer{position:fixed;top:0;right:0;bottom:0;width:min(480px,94vw);z-index:1401; background:var(--nq-glass-hi);backdrop-filter:var(--nq-blur);-webkit-backdrop-filter:var(--nq-blur); border-left:1px solid var(--nq-glass-line);box-shadow:var(--nq-shadow-up); transform:translateX(102%);transition:transform .38s cubic-bezier(.2,.8,.25,1); display:flex;flex-direction:column;font-family:var(--nq-disp);color:var(--nq-ink)} .nq-drawer.on{transform:none} .nq-drawer .nq-dh{padding:18px 20px;border-bottom:1px solid var(--nq-glass-edge); display:flex;align-items:center;gap:12px} .nq-drawer .nq-dh b{font-size:16px;font-weight:800;letter-spacing:-.02em} .nq-drawer .nq-db{padding:18px 20px;overflow:auto;flex:1} .nq-drawer .nq-df{padding:14px 20px;border-top:1px solid var(--nq-glass-edge);display:flex;gap:8px} /* ══ FORM FIELDS ═════════════════════════════════════════════════════════ */ .nq-fld{margin-bottom:14px} .nq-fld label{display:block;font-size:11.5px;font-weight:600;color:var(--nq-ink-2);margin-bottom:5px} .nq-fld input,.nq-fld select,.nq-fld textarea{ width:100%;background:var(--nq-glass-hi);border:1px solid var(--nq-glass-line); border-radius:11px;padding:10px 12px;font-family:var(--nq-disp);font-size:13.5px; color:var(--nq-ink);outline:none;transition:.16s} .nq-fld input:focus,.nq-fld select:focus,.nq-fld textarea:focus{ box-shadow:0 0 0 4px var(--nq-accent-soft)} .nq-fld .nq-hint{font-size:11.5px;color:var(--nq-ink-faint);margin-top:4px} /* what the system already knows, said before the form is filled in */ .nq-hintline{font-size:12px;color:var(--nq-ink-2);background:var(--nq-accent-soft); border-radius:11px;padding:10px 12px;margin-bottom:14px;line-height:1.45} /* ══ ROLE SWITCH ═════════════════════════════════════════════════════════ */ .nq-roles{display:flex;gap:4px;background:var(--nq-sunk);padding:4px;border-radius:14px; border:1px solid var(--nq-glass-line);backdrop-filter:var(--nq-blur)} .nq-role{border:none;background:transparent;font-family:var(--nq-disp);font-size:12.5px; font-weight:600;color:var(--nq-ink-2);padding:8px 14px;border-radius:10px;cursor:pointer; transition:.16s;white-space:nowrap} .nq-role:hover{color:var(--nq-ink)} .nq-role.on{background:var(--nq-glass-hi);color:var(--nq-ink);box-shadow:var(--nq-shadow)} .nq-role:focus-visible{outline:2px solid var(--nq-accent);outline-offset:2px} /* ══ GREETING ════════════════════════════════════════════════════════════ */ .nq-hello{display:flex;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:20px} .nq-hello h1{font-family:var(--nq-disp);font-size:clamp(26px,3.1vw,34px);font-weight:800; letter-spacing:-.032em;line-height:1.05;color:var(--nq-ink)} .nq-hello .nq-sub{color:var(--nq-ink-2);margin-top:6px;max-width:54ch;font-family:var(--nq-disp); font-size:14.5px} /* ══ LAYOUT ══════════════════════════════════════════════════════════════ */ .nq-cols{display:grid;grid-template-columns:1fr 356px;gap:18px;align-items:start} @media(max-width:1180px){.nq-cols{grid-template-columns:1fr}} /* ══ ACCESSIBILITY & MOTION ══════════════════════════════════════════════ Not a polish item. Somebody works this screen at six in the morning with the sun on it, and somebody else works it with a keyboard. */ @media(prefers-reduced-motion:reduce){ .nq-do,.nq-btn,.nq-drawer,.nq-scrim,.nq-role{transition:none!important} .nq-step.now .nq-pt,.nq-caret{animation:none!important} } @media(prefers-contrast:more){ :root{--nq-glass:rgba(255,255,255,.94);--nq-glass-hi:#fff;--nq-glass-edge:rgba(20,26,33,.28)} html[data-nq-theme="dark"]{--nq-glass:rgba(20,25,31,.96);--nq-glass-hi:#121820} } /* backdrop-filter is not everywhere. Where it is missing the glass would be a flat wash with text floating on it, so the surfaces go solid instead. */ @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ :root{--nq-glass:rgba(255,255,255,.93);--nq-glass-hi:rgba(255,255,255,.98); --nq-chrome:rgba(255,255,255,.95);--nq-sunk:rgba(255,255,255,.85)} html[data-nq-theme="dark"]{--nq-glass:rgba(24,30,37,.96);--nq-glass-hi:rgba(34,41,50,.98); --nq-chrome:rgba(20,25,31,.96);--nq-sunk:rgba(16,21,26,.9)} } /* ══════════════════════════════════════════════════════════════════════════ THE SKIN — the same language, across all eighty-one screens at once. Home is built from nq- components. Every other screen is built from the OLD vocabulary: .card, .btn, .pill, .fin-note and the rest, used 278, 312, 32 and 441 times respectively. Converting them one at a time would take weeks and leave the product looking half-finished throughout. So the old vocabulary is restyled instead. Same markup, same classes, same 17 000 lines of view code untouched — they simply render in the new language. This is the whole reason the look was worth concentrating in a token system in the first place. TWO THINGS KEEP THIS SAFE: Everything is scoped to `body.nq-skin #app`. The print containers — #badgePrintArea, #lpSheet, .fbPage — are appended to OUTSIDE #app, so an ID card is still 85.6 mm of white card and a field board is still a real A4 sheet. They cannot be reached from here. And the whole thing is one class on . If a screen turns out wrong, removing `nq-skin` puts the entire product back exactly as it was. Specificity, not source order: `body.nq-skin #app .card` outranks both `.card` and `body.light .card`, so this wins wherever it is loaded from. ══════════════════════════════════════════════════════════════════════════ */ /* the backdrop, everywhere rather than on one screen */ body.nq-skin{ background: radial-gradient(38% 34% at 12% 14%, rgba(41,182,240,.30), transparent 62%), radial-gradient(42% 38% at 82% 8%, rgba(111,207,63,.28), transparent 62%), radial-gradient(46% 40% at 68% 78%, rgba(249,115,22,.16), transparent 62%), radial-gradient(40% 36% at 22% 88%, rgba(62,142,63,.24), transparent 62%), linear-gradient(160deg,#F4F7F2,#E6EDE8) !important; background-attachment:fixed !important; } html[data-nq-theme="dark"] body.nq-skin{ background: radial-gradient(40% 34% at 12% 12%, rgba(41,182,240,.15), transparent 64%), radial-gradient(44% 38% at 84% 6%, rgba(111,207,63,.12), transparent 64%), radial-gradient(48% 42% at 66% 82%, rgba(249,115,22,.09), transparent 64%), linear-gradient(160deg,#0D1318,#070A0C) !important; } /* #app paints its own background over the body; it has to let the ground through */ body.nq-skin #app{background:transparent !important} body.nq-skin #main{background:transparent !important} /* ---- chrome ---- */ body.nq-skin #app > header{ background:var(--nq-chrome) !important; backdrop-filter:var(--nq-blur); -webkit-backdrop-filter:var(--nq-blur); border-bottom:1px solid var(--nq-glass-line) !important; } body.nq-skin #app > nav{ background:var(--nq-chrome) !important; backdrop-filter:var(--nq-blur); -webkit-backdrop-filter:var(--nq-blur); border-right:1px solid var(--nq-glass-line) !important; } body.nq-skin #app .nav-btn{font-family:var(--nq-disp);font-weight:500;border-radius:10px} body.nq-skin #app .nav-btn:hover{background:var(--nq-glass-hi) !important} body.nq-skin #app .nav-btn.active{ background:var(--nq-glass-hi) !important;border-color:var(--nq-glass-line) !important; font-weight:700;box-shadow:var(--nq-shadow)} body.nq-skin #app .nav-btn.active .ic{color:var(--nq-accent) !important} body.nq-skin #app .nav-group > h4{font-family:var(--nq-data);letter-spacing:.2em} /* ---- the side panel: pins, the filter, and the open section ---- The active item gets a spine down its left edge rather than a heavier fill. On glass a stronger fill reads as a second panel; a 2px line reads as "you are here" and costs no contrast anywhere else. */ body.nq-skin #app .nav-btn.active{position:relative} body.nq-skin #app .nav-btn.active::before{ content:'';position:absolute;left:-1px;top:7px;bottom:7px;width:2.5px;border-radius:2px; background:var(--nq-accent)} /* The headers carry the panel now — sixty of the sixty-four screens are reached by clicking one first — so they stop being a faint caption. At 10px uppercase they need AA (4.5:1), and the old --dim measured 3.87 on the frosted panel. */ body.nq-skin #app .nav-group > h4{color:var(--nq-ink-2) !important;font-weight:600} body.nq-skin #app .nav-group > h4:hover{color:var(--nq-ink) !important} /* The count is 9.5px. --nq-ink-faint at .7 opacity measured 3.28 on the light panel, so it carries its own weight instead of leaning on the header beside it. */ body.nq-skin #app .nav-group > h4 .n{ font-family:var(--nq-data);color:var(--nq-ink-2) !important;opacity:1;font-weight:400} /* The item labels are what a person actually reads, and in dark they measured 3.05 — the old --mut was chosen for a panel that was not translucent. */ body.nq-skin #app .nav-btn{color:var(--nq-ink-2) !important} body.nq-skin #app .nav-btn:hover, body.nq-skin #app .nav-btn.active{color:var(--nq-ink) !important} body.nq-skin #app .nav-btn .pin.on, body.nq-skin #app .nav-btn .pin:hover{color:var(--nq-copper) !important} /* Pinned sits above the sections and reads as chrome, not as another group. */ body.nq-skin #app .nav-group.pins{ border-bottom:1px solid var(--nq-glass-line) !important} body.nq-skin #app .nav-group.pins > h4{color:var(--nq-copper);opacity:.85} body.nq-skin #app .nav-find input{ background:var(--nq-sunk) !important;border:1px solid var(--nq-glass-line) !important; border-radius:var(--nq-r-xs);font-family:var(--nq-disp);color:var(--nq-ink)} body.nq-skin #app .nav-find input::placeholder{color:var(--nq-ink-faint)} body.nq-skin #app .nav-find input:focus{ border-color:var(--nq-accent) !important; box-shadow:0 0 0 3px var(--nq-accent-soft) !important; background:var(--nq-glass-hi) !important} /* ---- the card, which is most of the product ---- */ body.nq-skin #app .card{ background:var(--nq-glass) !important; backdrop-filter:var(--nq-blur); -webkit-backdrop-filter:var(--nq-blur); border:1px solid var(--nq-glass-line) !important; border-radius:var(--nq-r) !important; box-shadow:var(--nq-shadow) !important; } body.nq-skin #app .card h3{font-family:var(--nq-disp);font-weight:700;letter-spacing:0} body.nq-skin #app .view-head h1{font-family:var(--nq-disp);font-weight:800;letter-spacing:-.03em} body.nq-skin #app .view-head .crumb{font-family:var(--nq-data);letter-spacing:.14em} /* ---- controls ---- */ body.nq-skin #app .btn{ font-family:var(--nq-disp);font-weight:600;border-radius:10px; border:1px solid var(--nq-glass-line);box-shadow:var(--nq-shadow); transition:transform .16s, box-shadow .16s, color .16s; } body.nq-skin #app .btn:hover{transform:translateY(-1px);box-shadow:var(--nq-shadow-up)} body.nq-skin #app .pill{border-radius:99px;font-family:var(--nq-data);letter-spacing:.08em} body.nq-skin #app .tag{border-radius:99px;font-family:var(--nq-data)} body.nq-skin #app .fin-note{font-family:var(--nq-disp);line-height:1.55} /* Form controls carry their look in an inline style attribute (the SEL/NUM/LBL constants), so a class cannot reach them. !important is the only thing that outranks an inline declaration, and it is used here and nowhere else. */ body.nq-skin #app input:not([type=checkbox]):not([type=radio]):not([type=range]), body.nq-skin #app select, body.nq-skin #app textarea{ border-radius:11px !important; border:1px solid var(--nq-glass-line) !important; background:var(--nq-glass-hi) !important; font-family:var(--nq-disp) !important; } body.nq-skin #app input:focus,body.nq-skin #app select:focus,body.nq-skin #app textarea:focus{ box-shadow:0 0 0 4px var(--nq-accent-soft) !important; } /* ---- tables: the other half of an ERP ---- */ body.nq-skin #app table{border-collapse:separate;border-spacing:0} body.nq-skin #app th{ font-family:var(--nq-data);font-size:9.5px;letter-spacing:.16em; border-bottom:1px solid var(--nq-glass-edge) !important; } body.nq-skin #app td{border-bottom:1px solid var(--nq-glass-edge) !important} body.nq-skin #app tbody tr:hover td{background:var(--nq-glass-hi) !important} /* ---- CONTRAST, MEASURED RATHER THAN ASSUMED ---------------------------- The old muted inks were chosen against a SOLID panel. On translucent glass over a coloured ground the effective contrast drops, and measuring found .fin-note and table headers at 2.96:1 — under the 4.5:1 small text needs, on the 441 places .fin-note appears. They were legible before and would have become slightly-too-faint everywhere at once, which is exactly the sort of regression a reskin hides. So the secondary inks are restated against the surface they now sit on. */ body.nq-skin #app .fin-note, body.nq-skin #app th, body.nq-skin #app .crumb{color:var(--nq-ink-2) !important} body.nq-skin #app .card h3{color:var(--nq-ink) !important} /* ══════════════════════════════════════════════════════════════════════════ THE COMMAND BAR — one field that finds anything. Lives in the header, so it is on every screen rather than on a search page somebody has to navigate to first. Ctrl-K from anywhere. NOT scoped under .nq-skin: this is new markup that only exists because this layer put it there, so it carries its own look either way. ══════════════════════════════════════════════════════════════════════════ */ .nq-cmd{position:relative;flex:1;max-width:520px;min-width:180px;margin-left:6px} .nq-cmd input{ width:100%;background:var(--nq-glass-hi);border:1px solid var(--nq-glass-line); border-radius:11px;padding:8px 62px 8px 32px;font-family:var(--nq-disp);font-size:13px; color:var(--nq-ink);outline:none;transition:.18s;box-shadow:var(--nq-shadow); } .nq-cmd input::placeholder{color:var(--nq-ink-faint)} .nq-cmd input:focus{box-shadow:0 0 0 4px var(--nq-accent-soft),var(--nq-shadow)} .nq-cmd-mag{position:absolute;left:11px;top:50%;translate:0 -50%;color:var(--nq-ink-faint); font-size:14px;pointer-events:none} .nq-cmd-kbd{position:absolute;right:9px;top:50%;translate:0 -50%;font-family:var(--nq-data); font-size:9.5px;color:var(--nq-ink-faint);border:1px solid var(--nq-glass-edge); border-radius:5px;padding:2px 5px;pointer-events:none} .nq-cmd-drop{ position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:1200;display:none; background:var(--nq-glass-hi);backdrop-filter:var(--nq-blur);-webkit-backdrop-filter:var(--nq-blur); border:1px solid var(--nq-glass-line);border-radius:16px;box-shadow:var(--nq-shadow-up); padding:6px;max-height:min(70vh,540px);overflow:auto; } .nq-cmd.open .nq-cmd-drop{display:block} .nq-cmd-grp{font-family:var(--nq-data);font-size:8.5px;letter-spacing:.2em;text-transform:uppercase; color:var(--nq-ink-faint);padding:9px 11px 4px} .nq-hit{display:flex;align-items:center;gap:11px;padding:8px 11px;border-radius:9px;cursor:pointer; font-family:var(--nq-disp);font-size:13px;color:var(--nq-ink)} .nq-hit:hover,.nq-hit.on{background:var(--nq-accent-soft)} .nq-hit .nq-hit-t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .nq-hit .nq-hit-s{font-size:11.5px;color:var(--nq-ink-2);white-space:nowrap} .nq-hit .nq-hit-k{font-family:var(--nq-data);font-size:8.5px;letter-spacing:.1em; color:var(--nq-ink-faint);border:1px solid var(--nq-glass-edge);border-radius:5px; padding:2px 6px;white-space:nowrap} .nq-cmd-empty{padding:14px 12px;font-size:12.5px;color:var(--nq-ink-faint);font-family:var(--nq-disp)} @media(max-width:1100px){.nq-cmd{max-width:260px}.nq-cmd-kbd{display:none}.nq-cmd input{padding-right:12px}} @media(max-width:820px){.nq-cmd{display:none}} /* ══════════════════════════════════════════════════════════════════════════ THE DOCUMENT — a sheet of paper, not a form. Deliberately NOT glass. An invoice is white paper with black ink in every country that has ever had one, and frosting it would be style getting in the way of a thing whose whole job is to be unambiguous. The glass is the room; this is the document lying on the desk. The same markup prints. There is no second template to drift out of step — the rules at the bottom hide the room and leave the paper. ══════════════════════════════════════════════════════════════════════════ */ .nq-doc-bar{display:flex;align-items:center;gap:10px;max-width:1000px;margin:0 auto 14px;flex-wrap:wrap} .nq-doc-kinds{display:flex;gap:4px;background:var(--nq-sunk);padding:4px;border-radius:14px; border:1px solid var(--nq-glass-line);margin:0 auto} .nq-paper{ max-width:1000px;margin:0 auto;background:#fff;color:#14181C; border-radius:10px;box-shadow:var(--nq-shadow-up);padding:46px 48px 40px; font-family:var(--nq-disp); } html[data-nq-theme="dark"] .nq-paper{box-shadow:0 30px 80px -30px #000} .nq-doc-head{display:flex;gap:24px;align-items:flex-start; border-bottom:2px solid #14181C;padding-bottom:16px;margin-bottom:22px} .nq-doc-org{font-size:21px;font-weight:800;letter-spacing:-.02em} .nq-doc-lines{font-size:11.5px;color:#4A5763;line-height:1.5;margin-top:3px} .nq-doc-title{margin-left:auto;text-align:right} .nq-doc-title h2{font-size:26px;font-weight:800;letter-spacing:-.02em;text-transform:uppercase} .nq-doc-no{font-family:var(--nq-data);font-size:12px;color:#4A5763;margin-top:4px} .nq-doc-meta{display:flex;gap:30px;margin-bottom:20px;flex-wrap:wrap} .nq-doc-meta > div:first-child{flex:1;min-width:220px} .nq-doc-lbl{font-family:var(--nq-data);font-size:8.5px;letter-spacing:.2em;text-transform:uppercase; color:#7E8B98;display:block;margin-bottom:4px} .nq-doc-party{font-size:15px;font-weight:700;border:1px solid #D8DEE4;border-radius:8px; padding:7px 9px;width:100%;max-width:340px;background:#fff;color:#14181C;font-family:inherit} .nq-doc-dates input{border:1px solid #D8DEE4;border-radius:8px;padding:7px 9px;font-family:var(--nq-data); font-size:12.5px;background:#fff;color:#14181C} /* the grid: ruled like a ledger, editable like a spreadsheet */ .nq-doc-grid{width:100%;border-collapse:collapse} .nq-doc-grid th{font-family:var(--nq-data);font-size:8.5px;letter-spacing:.16em;text-transform:uppercase; color:#4A5763;text-align:left;padding:0 6px 7px;border-bottom:1.5px solid #14181C} .nq-doc-grid th.r,.nq-doc-grid td.r{text-align:right} .nq-doc-grid td{padding:0;border-bottom:1px solid #E7EBEF} .nq-doc-grid input,.nq-doc-grid select,.nq-doc-grid textarea{ width:100%;border:none;background:transparent;padding:9px 6px;font-family:inherit;font-size:13px; color:#14181C;outline:none;border-radius:0; } .nq-doc-grid input.r{text-align:right;font-family:var(--nq-data)} .nq-doc-grid .dCode{font-family:var(--nq-data);font-weight:500} .nq-doc-grid input:focus,.nq-doc-grid select:focus,.nq-doc-grid textarea:focus{ background:#EAF4FA;box-shadow:inset 0 0 0 2px #0E7FB8} /* ══ WORDS THAT NEED MORE THAN A LINE ═════════════════════════════════════ A computer, a pump, a pivot span: the description is four or five lines and the buyer needs every one of them. The box is sized to its contents by the editor (autoGrow), so what is here only has to get out of the way — no resize handle, no scrollbar, no fixed height fighting the measurement. */ .nq-doc-grid textarea{ resize:none;overflow:hidden;line-height:1.45;display:block; min-height:34px;font-family:inherit; } /* The first line is the heading and the rest is the specification, so the whole block reads better slightly tighter than the money beside it. */ .nq-doc-grid .dDesc{font-size:12.5px} /* THE NOTE ROW — what is true of THIS one, across the full width. No bottom border: it belongs to the line above it, and a rule between the two would read as a separate item on the invoice. */ .nq-doc-noterow > td{border-bottom:none;padding-top:0} .nq-doc-grid .dNote{ font-size:11.5px;color:#5A6773;font-style:italic;padding:0 6px 8px;min-height:20px; } .nq-doc-grid .dNote::placeholder{color:#C2CAD2;font-style:normal} /* A note box on a line that names nothing has nothing to be about. */ .nq-doc-noterow.unattached{display:none} /* An empty note is a prompt for the person capturing, and nothing at all on paper. */ @media print{ .nq-doc-noterow.empty{display:none} } .nq-doc-amt{font-family:var(--nq-data);font-size:13px;padding:9px 6px;white-space:nowrap} .nq-doc-x{background:none;border:none;color:#B0BAC4;cursor:pointer;font-size:13px;padding:6px} .nq-doc-x:hover{color:#B3352C} .nq-doc-foot{display:flex;gap:30px;margin-top:24px;align-items:flex-start;flex-wrap:wrap} .nq-doc-notes{flex:1;min-width:240px} .nq-doc-notes textarea{width:100%;border:1px solid #D8DEE4;border-radius:8px;padding:8px 10px; font-family:inherit;font-size:12.5px;color:#14181C;background:#fff;resize:vertical} .nq-doc-totals{min-width:250px} .nq-doc-trow{display:flex;justify-content:space-between;gap:20px;padding:7px 0;font-size:13px; border-bottom:1px solid #E7EBEF} .nq-doc-trow b{font-family:var(--nq-data)} .nq-doc-trow.total{border-bottom:none;border-top:2px solid #14181C;margin-top:4px;padding-top:10px; font-size:16px;font-weight:800} .nq-doc-trow.total b{font-size:17px} /* ── PRINT: the same markup, with the room taken away ────────────────────── */ @media print{ body.nq-live #app > header,body.nq-live #app > nav, .nq-noprint,.view-head,#toast,#scanFab{display:none !important} body,body.nq-live,body.nq-skin{background:#fff !important} #app{display:block !important;zoom:1 !important;height:auto !important} #main{overflow:visible !important;padding:0 !important} .nq-paper{box-shadow:none;border-radius:0;max-width:none;margin:0;padding:0} .nq-doc-grid input,.nq-doc-grid select,.nq-doc-notes textarea,.nq-doc-party, .nq-doc-dates input{border:none !important;background:transparent !important; -webkit-appearance:none;appearance:none;padding-left:0 !important} .nq-doc-grid tr{break-inside:avoid} @page{margin:16mm} } /* ---- letterhead: the logo where a logo goes, and the brand as a hairline --- */ .nq-doc-rule{height:4px;border-radius:99px;margin:-8px 0 22px; background:linear-gradient(90deg,#29B6F0,#6FCF3F 55%,#F97316)} .nq-doc-logo{max-height:96px;max-width:340px;display:block;object-fit:contain} /* ---- banking and terms, which is what makes it a document somebody can pay -- */ .nq-doc-pay{display:flex;gap:34px;margin-top:28px;padding-top:16px; border-top:1px solid #E7EBEF;flex-wrap:wrap} .nq-doc-bank{font-size:11.5px;color:#4A5763;line-height:1.6;font-family:var(--nq-data)} .nq-doc-terms{flex:1;min-width:240px;font-size:11px;color:#7E8B98;line-height:1.55} /* ══ THE SAGE SKELETON, MODERNISED ════════════════════════════════════════ The reference invoice is boxed: seller top-left, the document's own facts as a label/value table top-right, bill-to beside deliver-to, a reference strip, the grid, then totals against a signature block. That structure is kept because it is what a Namibian office already reads without being taught. What changes is the execution — hairlines instead of heavy rules, one brand band, real typographic hierarchy, and the logo where Sage had a typed name. */ .nq-doc-top{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px} @media screen and (max-width:760px){.nq-doc-top{grid-template-columns:1fr}} .nq-box{border:1px solid #E2E7EC;border-radius:10px;padding:14px 16px;background:#FCFDFE} .nq-doc-from{background:#fff} .nq-doc-org{font-size:27px;font-weight:800;letter-spacing:-.025em;line-height:1.1} .nq-doc-org.sm{font-size:12.5px;font-weight:600;letter-spacing:0;margin-top:6px} .nq-doc-facts h2{font-size:22px;font-weight:800;letter-spacing:-.02em;text-transform:uppercase; margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid #E2E7EC} .nq-fact{display:flex;justify-content:space-between;align-items:center;gap:12px; padding:6px 0;border-bottom:1px solid #EEF2F5;font-size:12.5px;color:#4A5763} .nq-fact:last-child{border-bottom:none} .nq-fact b{font-family:var(--nq-data);color:#14181C;font-size:12.5px} .nq-fact input{border:1px solid #E2E7EC;border-radius:7px;padding:4px 7px; font-family:var(--nq-data);font-size:12px;background:#fff;color:#14181C} .nq-box textarea{width:100%;border:1px solid #E2E7EC;border-radius:7px;padding:7px 9px; font-family:inherit;font-size:12.5px;color:#14181C;background:#fff;resize:vertical;margin-top:4px} .nq-doc-refs{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:#E2E7EC; border:1px solid #E2E7EC;border-radius:10px;overflow:hidden;margin-bottom:14px} @media screen and (max-width:760px){.nq-doc-refs{grid-template-columns:repeat(2,1fr)}} .nq-doc-refs > div{background:#fff;padding:9px 13px} .nq-doc-refs b{font-family:var(--nq-data);font-size:12.5px;display:block;margin-top:2px} .nq-doc-refs input{border:none;background:transparent;font-family:var(--nq-data);font-size:12.5px; padding:2px 0;width:100%;outline:none;color:#14181C} .nq-doc-refs input:focus{box-shadow:0 0 0 2px #0E7FB8;border-radius:4px} .nq-doc-unit{font-family:var(--nq-data);font-size:11.5px;color:#7E8B98;padding:9px 6px} .nq-doc-vat{font-family:var(--nq-data);font-size:11.5px;color:#7E8B98;padding:9px 6px} .nq-doc-foot{align-items:stretch} .nq-doc-notes{display:flex;flex-direction:column;gap:10px} .nq-doc-sign{margin-top:auto;padding-top:12px;border-top:1px dashed #D8DEE4;font-size:11.5px;color:#4A5763} .nq-doc-sign div{display:flex;align-items:flex-end;gap:8px;margin-top:14px} .nq-doc-sign i{font-style:normal;font-size:10.5px;color:#7E8B98} .nq-doc-sign em{flex:1;border-bottom:1px solid #B0BAC4;height:14px} .nq-doc-sign em.sm{flex:0 0 120px} .nq-doc-totals{background:#fff} /* ══ MAKING IT FIT THE PAGE ═══════════════════════════════════════════════ The first print ran the Amount column off the right edge. The columns were sized in PIXELS, which is fine on a 1000px screen and nonsense on a sheet of A4 at whatever the printer's margins happen to be. Percentages of a fixed-layout table hold their proportions at any width, on any printer, and the description gives up the space rather than the money doing it. */ .nq-doc-grid{table-layout:fixed;width:100%} /* Ellipsis for the one-line cells; the description cell holds a box that grows, so it must be allowed to be as tall as its words. */ .nq-doc-grid th,.nq-doc-grid td{overflow:hidden;text-overflow:ellipsis} .nq-doc-grid td:has(textarea){overflow:visible;text-overflow:clip} /* THE DESCRIPTION GETS THE ROOM, because it is the only column whose content varies. A code is a code, a quantity is three digits, and money never wraps — so every other column was carrying width it did not need while a computer's specification had a quarter of the page to fit in. */ .nq-doc-grid col.c-code{width:8%} .nq-doc-grid col.c-desc{width:35%} .nq-doc-grid col.c-store{width:7%} .nq-doc-grid col.c-qty{width:7%} .nq-doc-grid col.c-unit{width:5%} .nq-doc-grid col.c-price{width:11%} .nq-doc-grid col.c-disc{width:5%} .nq-doc-grid col.c-vat{width:5%} .nq-doc-grid col.c-amt{width:14%} .nq-doc-grid col.c-x{width:3%} /* Browsers drop background colours when printing unless told otherwise, which is why the brand band disappeared. It is the one piece of colour on the page and the thing that says whose invoice this is. */ @media print{ /* The negative top margin pulls it outside the page box once the paper loses its padding, so the printer clips it. On paper it starts at the top edge. */ .nq-doc-rule{margin-top:0;-webkit-print-color-adjust:exact;print-color-adjust:exact} .nq-paper{padding:0 !important} .nq-box{background:#fff !important;-webkit-print-color-adjust:exact;print-color-adjust:exact} .nq-doc-grid{font-size:11px} .nq-doc-grid col.c-x{width:0} /* A document runs to as many pages as it needs, with the head repeated. */ .nq-doc-grid thead{display:table-header-group} .nq-doc-foot{break-inside:avoid} } /* ══ THE PAGE HAS A BOTTOM ════════════════════════════════════════════════ The totals and the signature belong at the FOOT of the sheet, with the line area stretching to meet them — which is what the reference does and what anybody signing one expects. Totals floating halfway down a mostly empty page look like the document was cut short. So the paper is a column with a real page height, and the foot is pushed to the bottom of it. Empty space collects in the middle, where it belongs. */ .nq-paper{display:flex;flex-direction:column;min-height:1050px} .nq-doc-body{flex:1;display:flex;flex-direction:column} .nq-doc-foot{margin-top:auto;padding-top:22px} /* Money must never wrap or clip: a number broken across two lines is a number somebody reads wrong. */ .nq-doc-amt,.nq-doc-trow b,.nq-doc-grid input.r{white-space:nowrap} .nq-doc-grid col.c-desc{width:34%} .nq-doc-grid col.c-amt{width:15%} @media print{ /* A4 less the 16mm margins, so the foot lands on the bottom of the sheet rather than wherever the content happened to end. */ .nq-paper{min-height:calc(297mm - 34mm)} .nq-doc-grid{font-size:10.5px} .nq-doc-grid input,.nq-doc-grid select{font-size:10.5px;padding:6px 4px} .nq-doc-amt,.nq-doc-unit,.nq-doc-vat{font-size:10.5px;padding:6px 4px} } /* ══ THE LETTERHEAD, SIDE BY SIDE ═════════════════════════════════════════ A square mark stacked above the address wastes the whole right half of the box and keeps the logo small to avoid pushing the text down. Beside it, the mark can be as tall as the details are — which on a 945×945 logo means it reads at a proper size instead of a thumbnail. The logo is capped in BOTH directions because a customer may upload a wide lockup or a tall crest, and a letterhead that changes shape depending on who uploaded what is not a letterhead. */ .nq-doc-from{display:flex;align-items:flex-start;gap:18px} .nq-doc-logo{max-height:132px;max-width:180px;flex:none;display:block;object-fit:contain} .nq-doc-ident{min-width:0;flex:1} .nq-doc-ident .nq-doc-org{font-size:19px;font-weight:800;letter-spacing:-.02em; line-height:1.15;margin-bottom:6px} /* Narrow enough and it stacks — but only on a screen. A page is always wide enough, and printing must never take the phone layout. */ @media screen and (max-width:900px){ .nq-doc-from{flex-direction:column;gap:12px} .nq-doc-logo{max-height:100px} } /* ── multi-page: each sheet stands alone ─────────────────────────────────── */ .nq-paper + .nq-paper{margin-top:26px} .nq-doc-party.as-text{font-size:15px;font-weight:700;padding:7px 0} .nq-doc-cont{margin-top:auto;padding-top:18px;border-top:1px dashed #D8DEE4; font-size:11.5px;color:#7E8B98;text-align:right;font-family:var(--nq-data);letter-spacing:.1em} @media print{ /* One sheet per page, and never a page break inside one. */ .nq-page-break{break-after:page;page-break-after:always} .nq-paper{break-inside:avoid;page-break-inside:avoid} .nq-paper + .nq-paper{margin-top:0} } /* A line that is attached to nothing must LOOK wrong, not merely fail on save. */ .nq-doc-grid tr.bad td{background:#FDF1EF} .nq-doc-grid tr.bad .dCode,.nq-doc-grid tr.bad .dDesc{box-shadow:inset 0 0 0 1.5px #B3352C;border-radius:4px} /* A locked line looks inert rather than broken: there is simply nothing to price yet. */ .nq-doc-grid tr.locked input:disabled,.nq-doc-grid tr.locked select:disabled{ background:transparent;color:#C4CBD2;cursor:not-allowed} .nq-doc-grid tr.locked .nq-doc-amt,.nq-doc-grid tr.locked .nq-doc-vat{color:#C4CBD2} /* ── THE BUYER'S NAME MUST PRINT ────────────────────────────────────────── On page one it is a