:root{ --ink:#1a2332; --ink-soft:#4a5568; --paper:#f6f5f2; --panel:#ffffff; --line:#dcdad2; --accent:#c2540f; --accent-soft:#f2e3d5; --ok:#2f6b4f; --ok-soft:#e2efe8; --bad:#a5311f; --bad-soft:#f7e4e0; --steel:#3a5a78; --fira:#f7ce46; /* colour-picked from FIRA's own logo */ /* Shopify's own green, picked by Sales. It sat in `static/sales.css` while only Sales drew it; it is here from 6 October 2026 because Finance draws account tags on Transactions and Balance in each account's colours and `sales.css` loads only on `/sales/` pages — so `var(--shopify-dark)` was undefined on a Finance screen and the badge came out unpainted. Finance restated the hex rather than leave it broken, which is two copies of one colour and the drift rule 4 of `claude/two-chats-one-tree.md` exists to prevent. Two modules drawing it is the test for moving it, and `--fira` above is the precedent: a brand colour belongs here the moment more than one screen uses it. `-dark` rather than the `-soft` the rest of this block uses, because that is what both callers already say and renaming would break them both. */ --shopify:#98b756; --shopify-dark:#658845; --steel-soft:#e4ecf3; --purple:#5b4b8a; --purple-soft:#eae6f4; --teal:#0f766e; --teal-soft:#dcf3f0; --magenta:#a3266b; --magenta-soft:#f6e0ec; --brown:#8a5a34; --brown-soft:#f0e3d4; --olive:#6b7a2e; --olive-soft:#eaf0d8; --indigo:#4338a8; --indigo-soft:#e6e3f8; --coral:#c1543f; --coral-soft:#f7e2dd; --cyan:#1c7a9c; --cyan-soft:#dcf0f7; --slate:#51606e; --slate-soft:#e6eaee; --gold:#8a6a00; --gold-soft:#f7edcf; --warn:#f2990f; --warn-soft:#faf0d9; --radius:3px; --module-bar:38px; font-size:15px; } *{box-sizing:border-box;} html,body{margin:0;padding:0;} body{ background:var(--paper); color:var(--ink); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; -webkit-font-smoothing:antialiased; } .mono{font-family:ui-monospace,SFMono-Regular,"SF Mono",Consolas,"Liberation Mono",Menlo,monospace;} /* --module-bar tall less than the viewport: the bar above #app is outside it, and 100vh here would push every page into a scrollbar it does not need. */ #app{display:flex; min-height:calc(100vh - var(--module-bar));} nav#side{width:190px; flex:none; background:var(--ink); color:#dfe4ea; display:flex; flex-direction:column; position:relative; z-index:30; transition:width .16s ease;} /* The z-index is load-bearing, not decoration. The arrow hangs 11px past the sidebar's right edge, over whatever the page has put there, and a screen whose own toolbar sat at `z-index:20` painted over it — the arrow could not be clicked at all. Found by trying to click it. (That screen was the Assembly Instructions Builder, removed 14 September 2026; the rule stays, because the next screen with a toolbar will do the same thing.) */ /* ---- the sidebar folded away ------------------------------------------- Bruno: "Can we have the left side vertical menu tucked away? This would be useful for the Assembly Instructions Builder in particular, but also in some other busy work spaces." (The Builder is gone as of 14 September 2026. The busy work spaces are not.) Folded it is a rail: the company mark stays, everything else goes. Not `display:none` on the nav — the mark is how you know which app you are in, and a rail that keeps it reads as folded rather than as broken. Which is what his reference picture shows. `html.side-folded` rather than a class on the nav itself, because the class is set by an inline script before the first paint. Anything set later paints the open sidebar and then folds it, which is a flinch on every single page load. */ html.side-folded nav#side{width:46px;} html.side-folded nav#side .brand{padding:18px 0 14px; justify-content:center;} html.side-folded nav#side .brand div{display:none;} /* Everything but the mark and the arrow, whatever a module has put in its sidebar. Named by hand at first — .tabs, .footer, .whoami, #undoBtn — which is Shopfloor's list, and Sales' sidebar has blocks of its own that went on showing, overflowing a 46px rail with "Recent changes" and "Document settings". A rule that says what stays cannot be out of date; a rule that lists what goes is out of date the moment a module adds anything. */ html.side-folded nav#side > *:not(.brand):not(#sideFold){display:none;} /* The arrow, and it is not a button any more. Bruno: "let's make the button itself a little bit more subtle … I would like it to look like a simple triangle of the menu background colour extending into the right and vice versa." And then, having lived with it: "it should not be shown only on mouse over, rather it has to be visible all the time. Also let's make grey as the background of the work space so it looks like it's part of it when it's extended, but colour of the background of the vertical menu when collapsed." Which is the better rule, and it is an inversion: the triangle belongs to whichever side it is poking into. extended — `--paper`, the workspace's own grey. It reads as a notch the workspace has cut into the menu, and it points left, which is where the menu is about to go. collapsed — `--ink`, the menu's own colour. Now it is the menu reaching out into the workspace, pointing right, which is where the menu will come back from. Full opacity in both states. It was .9 rising to 1 on hover, and against a dark panel a dark triangle at .9 was invisible until the mouse found it — which is exactly what he was describing. (The dark panel belonged to the Assembly Builder, since removed; a triangle you have to hunt for is a fault on any background.) And it does not react to the mouse AT ALL: "please remove the mouse over colour change of that triangular button." So there is no :hover rule here and nothing to transition. The pointer cursor is the whole of the affordance, which is what the rest of the app does too. */ #sideFold{position:absolute; top:16px; right:-9px; width:18px; height:34px; padding:0; border:0; background:none; cursor:pointer; z-index:5; display:flex; align-items:center; justify-content:flex-start;} #sideFold::after{content:""; display:block; width:0; height:0; border-top:9px solid transparent; border-bottom:9px solid transparent; /* Coloured on the RIGHT, so the apex is on the left. */ border-right:9px solid var(--paper);} /* Folded: the same triangle the other way round, in the menu's colour. */ html.side-folded #sideFold::after{border-right:0; border-left:9px solid var(--ink);} html.side-folded #sideFold{justify-content:flex-end;} /* Folded, the whole rail is the way back. "Let's make it possible to click anywhere on the menu to expand." A 9px triangle is a small target and the rail beside it is 46px of nothing else — so the rail is the button, and the triangle is what says so. */ html.side-folded nav#side{cursor:pointer;} /* Not a control. Bruno: "the logo is clickable but it leads nowhere so let's just make the logo passive piece of graphic, not a button." It was a link to the module's own home, which from most screens is somewhere you already are — and once the folded rail became clickable, a link inside it was one thing that did something else. */ nav#side .brand{padding:18px 16px 14px; border-bottom:1px solid #2c3849; display:flex; align-items:center; gap:10px;} nav#side .brand .logo{display:block; width:32px; height:32px; flex:none;} nav#side .brand b{font-size:15px; letter-spacing:.02em;} nav#side .brand div.tag{font-size:11px; color:#8a95a5; margin-top:2px; letter-spacing:.04em;} nav#side .tabs{padding:10px 0; flex:1;} nav#side button.tabbtn{display:block; width:100%; text-align:left; background:none; border:none; color:#b7c0cd; padding:10px 16px; font-size:13.5px; cursor:pointer; border-left:3px solid transparent; font-family:inherit;} nav#side button.tabbtn:hover{background:#222d3d; color:#fff;} nav#side button.tabbtn.active{background:#222d3d; color:#fff; border-left-color:var(--accent); font-weight:600;} nav#side .footer{padding:12px 16px; font-size:11px; color:#65707f; border-top:1px solid #2c3849;} nav#side #undoBtn{display:block; width:calc(100% - 32px); margin:0 16px 10px; background:#222d3d; color:#b7c0cd; border:1px solid #33415a; border-radius:6px; padding:8px 10px; font-size:12.5px; cursor:pointer; font-family:inherit; text-align:left;} nav#side #undoBtn:not(:disabled):hover{background:#2b3850; color:#fff;} nav#side #undoBtn:disabled{opacity:.4; cursor:default;} main{flex:1; padding:26px 34px; max-width:1180px;} /* …except on the screens that are a wide table rather than something to read. Bruno: "since collapse left hand vertical menu now leaves a lot more space, let's make use of it, especially in the busy work spaces such as Inventory and B2B Sales." It did not, and the menu was never the reason — the 1180px cap above ate the whole gain. Measured at 1440px: folding took the unused strip on the right from 70px to 214px and left the table at 1078px, exactly where it was. At 1920px, 694px of window was doing nothing. Per screen, not everywhere: 1180px is a reading measure and it is right for a form and for prose. Which screens is decided in core/ui.py WIDE_PAGES, and it arrives as `data-wide` on the module bar rather than as a class on `main` — because `main` is written in both shells and one of the two is not ours to keep a line in. See templates/_modules.html. */ body:has(#modules[data-wide]) main{max-width:none;} /* The line under a live search box: how much of the list you are looking at. Bruno's model for this was the component picker, which shows a short list and no count because it caps at fifteen. A list of 142 shop orders needs to say how many of them are still on screen, or a filter that matched two rows looks like a list with two rows in it. See static/livesearch.js. */ .ls-count{font-size:11.5px; color:var(--ink-soft); margin:-8px 0 12px;} h1{font-size:20px; margin:0 0 4px; letter-spacing:-0.01em;} .subtitle{color:var(--ink-soft); font-size:13px; margin-bottom:22px;} .panel{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:20px; margin-bottom:18px;} .panel h2{font-size:14px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-soft); margin:0 0 14px; font-weight:700;} /* Running low, at the top of Inventory. 19 September 2026. `--warn` rather than `--bad`: being low on screws is something to do this week, not something that has gone wrong. Red here would sit on the screen most days and teach people that red means nothing, which is what a real failure then has to shout over. Only the left edge is tinted, so the panel still reads as one of the page's panels rather than as an alert box dropped on top of it. Only drawn when there is something in it — see the note in the template. */ .lowstock{border-left:3px solid var(--warn); background:var(--warn-soft);} .lowstock h2{color:var(--ink);} /* The three sections on Vendors, 20 September 2026. Nothing but spacing — each is a `.panel`, and they are told apart by their headings and by the tint on the middle one. */ .vendors-section{margin-bottom:18px;} /* One supplier's order. The block is the unit here: heading, the parts, and the same list as text — so it gets a rule above it rather than a border all round, which at four or five blocks would be a stack of boxes inside a box. */ .order-block{margin-top:16px; padding-top:12px; border-top:1px solid #e4d9bd;} .order-block:first-of-type{border-top:0; padding-top:0;} .order-block h4{margin:0 0 6px; font-size:13.5px;} .order-block h4 .per{font-weight:400; margin-left:6px;} /* The same quiet count beside the thresholds heading inside a vendor's fold. `.per` is otherwise scoped to `.tree-name`, so without this the count came out as bold as the heading and read as part of it. */ .tree-children h4 .per{font-weight:400; margin-left:6px; color:var(--ink-soft); font-size:11.5px;} /* The text to paste lives behind a TXT button now, in the shared `.copybox` dialog the run list already uses — so there are no rules for it here. The button sits in the block's heading; `.order-block h4` keeps it on the baseline of the words beside it. */ .order-block h4 button{margin-left:8px; vertical-align:baseline;} /* Wrapping rows rather than a table: this is usually two or three parts and occasionally twenty, and a table of three rows with headings is heavier than the thing it is describing. */ .lowstock-rows{display:flex; flex-direction:column; gap:2px; margin-top:12px;} .lowstock-row{display:flex; align-items:center; gap:8px; padding:5px 8px; border-radius:var(--radius); color:var(--ink); text-decoration:none; background:rgba(255,255,255,.55);} .lowstock-row:hover{background:#fff;} .lowstock-row .nm{font-weight:600; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} /* The figure that matters, and then what it is measured against — the count bold and the level quiet, so the eye lands on "3" rather than on "of 50". */ .lowstock-have{font-weight:700; font-variant-numeric:tabular-nums;} .lowstock-of{color:var(--ink-soft); font-size:12px; white-space:nowrap;} @media (max-width:640px){ .lowstock-row{flex-wrap:wrap;} .lowstock-row .nm{flex:1 1 100%; order:3; white-space:normal;} } .row{display:flex; gap:10px; flex-wrap:wrap; align-items:center;} .grid{display:grid; gap:12px;} .grid.cols-2{grid-template-columns:1fr 1fr;} .grid.cols-3{grid-template-columns:1fr 1fr 1fr;} label{display:block; font-size:11.5px; color:var(--ink-soft); margin-bottom:4px; letter-spacing:.02em;} input,select,textarea{width:100%; padding:7px 9px; border:1px solid #c9c6bc; border-radius:var(--radius); font-size:13.5px; background:#fff; color:var(--ink); font-family:inherit;} /* A tick box is not a field to fill in, so it does not take a field's width. The rule above says `width:100%` for every input, which is right for text, a number or a date and wrong for the two inputs that are a fixed little square: the box gets stretched to the width of the form and the tick ends up floating in the middle of it. Bruno, 20 September 2026: *"Let's have these check boxes aligned to left."* `.checkfield input` below has said `width:auto` since the part editor was built, which is why most of the app looks right — but that only helps markup that remembered to use `.checkfield`, and the Invoicing board's column headers did not. Asked for by the Invoicing chat as a one-line fix in a file of mine rather than a workaround in one of theirs, which was the right call: a shared wrong default should be fixed where it is written, not routed around once per module. Radio buttons for the same reason, though the app has none today — the rule above catches them identically, and finding that out screen by screen is exactly what this is meant to prevent. */ input[type=checkbox],input[type=radio]{width:auto;} input:focus,select:focus,textarea:focus{outline:2px solid var(--steel); outline-offset:0; border-color:var(--steel);} .field{margin-bottom:10px;} .checkfield{display:flex; align-items:center; gap:8px; margin-bottom:10px;} .checkfield input{width:auto;} .checkfield label{margin:0;} /* The three "what this part is" ticks in the part editor, 19 September 2026. Bruno asked for them bunched together with small icons on the left, "similar fashion as the Zn and bending icons". A box of their own rather than three loose rows: they answer one question between them and they are what decides the part's number, and a tinted block says that without a heading having to. Tighter row spacing inside it than the 10px `.checkfield` gives on its own, because at that spacing three rows read as three unrelated settings. */ /* The grey box that gathers a handful of controls into one thing. Two of them in the part editor since 29 September 2026 — what the part is, and its recipe — so the look lives here once rather than being described twice. Bruno, asking for the second: *"in Edit part menu, let's gently highlight the Recipe section. Same grey box as with part type with three icons would work I think."* */ .boxed{background:var(--paper); border:1px solid #e4e0d6; border-radius:var(--radius); padding:10px 12px 4px; margin-bottom:12px;} .whatis{background:var(--paper); border:1px solid #e4e0d6; border-radius:var(--radius); padding:10px 12px 4px; margin-bottom:12px;} .whatis .checkfield{margin-bottom:6px;} /* The mark takes the muted text colour, not the ink: it is a label for the row, not a control in it, and at full strength three of them down the left edge pull harder than the words they belong to. It lifts on hover with the row so the pair still reads as one thing. */ .whatis-mark{color:var(--ink-soft); flex:none;} .whatis .checkfield:hover .whatis-mark{color:var(--ink);} /* The explanation after the label, on the same line where there is room and wrapping under it where there is not. `display:inline` rather than a block, so it does not push the tick out of line with its own words. */ .whatis-note{display:inline; margin-left:6px; color:var(--ink-soft);} /* The threshold, indented under the ticks it belongs to and lined up with their labels rather than with their icons. */ .whatis-level{margin:2px 0 8px 28px; display:flex; align-items:center; gap:8px; flex-wrap:wrap;} .whatis-level label{margin:0; white-space:nowrap;} .whatis-level .hint{margin:0;} /* The recipe, in the same box. Its own rule only for the padding at the foot: the list inside ends with a button rather than a field, and 4px under a button reads as the box being too small for it. */ .recipebox{padding-bottom:10px;} .recipebox > .field{margin-bottom:0;} /* --- low stock alert thresholds, on the Vendors screen ---------------- One line per watched part: what it is, a bar showing where the threshold sits against what is on the shelf, and the number itself as a field. Deliberately not a table — Bruno asked for something that is *"not another inventory list"*, and a row that reads left to right in one line is the difference between a setting and a spreadsheet. */ .thresholds{display:flex; flex-direction:column; gap:2px;} .threshold-row{display:flex; align-items:center; gap:8px; padding:4px 8px; border-radius:var(--radius); font-size:13px;} .threshold-row:nth-child(odd){background:#fbfaf7;} .threshold-row .nm{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} .threshold-have{color:var(--ink-soft); font-size:12px; white-space:nowrap; min-width:90px; text-align:right;} /* The bar. Grey when there is room, gold when the alert is on — the same gold the "to order" badge uses, so one colour means one thing across the screen. Fixed width so the numbers after it line up down the column. */ .threshold-bar{flex:none; width:64px; height:6px; border-radius:3px; background:#e8e4d9; overflow:hidden;} .threshold-bar > span{display:block; height:100%; background:#b9b2a0;} .threshold-row.is-low .threshold-bar > span{background:var(--gold, #c2820f);} .threshold-set{display:flex; align-items:center; gap:6px; margin:0;} .threshold-set label{margin:0; font-size:11px; color:var(--ink-soft); white-space:nowrap;} .threshold-set input{width:78px; text-align:right; padding:3px 6px; font-size:12.5px;} /* The standard, shown as placeholder text. Chromium's own placeholder grey is dark enough that 27 untouched rows read as 27 numbers somebody typed, which is the opposite of what the empty box is saying — so it is lightened here until it reads as "nothing set". */ .threshold-set input::placeholder{color:#a8a396; opacity:1;} /* What the part costs — a fact about the supplier, which is what a vendor's list is about. Quiet, because the row's loud figure is the stock. */ .part-cost{color:var(--ink-soft); font-size:12px; white-space:nowrap; font-variant-numeric:tabular-nums;} /* Where the bar, the stock and the box would be on a part nothing watches. Empty on purpose: a threshold box there would be an empty field waiting to be filled in. It holds the column so the Order buttons line up. */ .threshold-slot{flex:none; width:246px;} /* Order. The only thing in one of these rows that reacts to the mouse — Bruno asked for a list that is "not clickable or editable" apart from this one link. Sized to the row rather than to a form, so it does not stretch it. */ .threshold-row > a.buy{flex:none; padding:2px 8px; font-size:11.5px; margin-left:2px;} button{cursor:pointer; border:1px solid var(--ink); background:var(--ink); color:#fff; padding:7px 14px; border-radius:var(--radius); font-size:13px; font-family:inherit; font-weight:600;} button:hover{opacity:.88;} button.ghost{background:#fff; color:var(--ink); border-color:#c9c6bc; font-weight:500;} button.danger{background:var(--bad); border-color:var(--bad);} button.accent{background:var(--accent); border-color:var(--accent);} button.sm{padding:4px 9px; font-size:12px;} /* A link that opens a dialog is still a link — that is what keeps the screen working with the script off — but it has to look like the button it stands in for. `a.sm.ghost` was the only one styled, so `a.sm.accent` came out as a plain underlined link; the shared geometry is now in one place and only the colours differ, which is how `button` and `button.accent` already relate to each other a few lines above. */ a.sm.ghost, a.sm.accent{display:inline-block; cursor:pointer; border:1px solid #c9c6bc; background:#fff; color:var(--ink); padding:4px 9px; border-radius:var(--radius); font-size:12px; font-weight:500; text-decoration:none; font-family:inherit;} a.sm.accent{background:var(--accent); border-color:var(--accent); color:#fff; font-weight:600;} a.sm.ghost:hover, a.sm.accent:hover{opacity:.88;} button:disabled{opacity:.4; cursor:not-allowed;} table{width:100%; border-collapse:collapse; font-size:13px;} th{text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-soft); border-bottom:2px solid var(--ink); padding:8px 8px; font-weight:700;} td{padding:8px; border-bottom:1px solid var(--line); vertical-align:middle;} tr:hover td{background:#faf9f6;} .num{text-align:right; font-variant-numeric:tabular-nums;} .badge{display:inline-block; padding:2px 6px; border-radius:20px; font-size:10px; font-weight:700; letter-spacing:.01em; white-space:nowrap;} .badge.ok{background:var(--ok-soft); color:var(--ok);} .badge.bad{background:var(--bad-soft); color:var(--bad);} .badge.steel{background:var(--steel-soft); color:var(--steel);} .badge.accent{background:var(--accent-soft); color:var(--accent);} .badge.purple{background:var(--purple-soft); color:var(--purple);} .badge.teal{background:var(--teal-soft); color:var(--teal);} .badge.magenta{background:var(--magenta-soft); color:var(--magenta);} .badge.brown{background:var(--brown-soft); color:var(--brown);} .badge.olive{background:var(--olive-soft); color:var(--olive);} .badge.indigo{background:var(--indigo-soft); color:var(--indigo);} .badge.coral{background:var(--coral-soft); color:var(--coral);} .badge.cyan{background:var(--cyan-soft); color:var(--cyan);} .badge.slate{background:var(--slate-soft); color:var(--slate);} .badge.gold{background:var(--gold-soft); color:var(--gold);} .badge.muted{background:#ececea; color:#6b6b66;} .dot{display:inline-block; width:9px; height:9px; border-radius:50%; flex:none;} .empty{color:#8f8b80; font-size:13px; padding:18px 4px; text-align:center;} .hint{font-size:12px; color:var(--ink-soft); margin-top:6px;} .modal-bg{position:fixed; inset:0; background:rgba(20,24,32,.45); display:flex; align-items:flex-start; justify-content:center; padding:40px 20px; overflow:auto; z-index:50;} /* On a short screen the 40 px above and below a dialog is the difference between reaching the Save button and having to scroll for it. Every dialog benefits; the bending one, which is the tallest in the app, benefits most. */ @media (max-height:760px){ .modal-bg{padding:16px 20px;} } .modal{background:#fff; border-radius:var(--radius); padding:22px; width:100%; max-width:560px; border:1px solid var(--line);} .modal.wide{max-width:720px;} .modal h3{margin:0 0 14px; font-size:15px;} .modal-actions{display:flex; justify-content:flex-end; gap:8px; margin-top:16px;} .x{cursor:pointer; float:right; color:var(--ink-soft); font-size:18px; line-height:1;} .toast{position:fixed; bottom:20px; right:20px; background:var(--ink); color:#fff; padding:10px 16px; border-radius:var(--radius); font-size:13px; z-index:100; box-shadow:0 4px 14px rgba(0,0,0,.2);} .comp-line{display:grid; grid-template-columns:1fr 90px 30px; gap:8px; margin-bottom:8px; align-items:center;} /* ---- inventory tree ---- */ .tree-row{display:flex; align-items:center; gap:8px; padding:7px 4px; border-bottom:1px solid #eeece5;} .tree-row:hover{background:#faf9f6;} .tree-row.drop-hover{background:var(--ok-soft); outline:2px dashed var(--ok); outline-offset:-2px;} .tree-toggle{width:20px; flex:none; text-align:center; cursor:pointer; color:var(--ink-soft); user-select:none; display:inline-flex; align-items:center; justify-content:center;} .tree-toggle.leaf{visibility:hidden;} .tri{display:inline-block; font-size:13px; line-height:1; transition:transform .15s ease; transform-origin:47% 50%;} .tri.open{transform:rotate(90deg);} .tree-name{flex:1; min-width:0; display:flex; align-items:baseline; gap:8px;} .tree-name .nm{font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} .id{color:#767b85; font-size:13.5px; font-weight:700;} .tree-name .id{flex:none;} .tree-name .id.shrinkable{flex:1 1 0; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} .tree-name .per{color:var(--ink-soft); font-size:11.5px; font-family:ui-monospace,monospace; flex:none;} .tree-badges{display:flex; gap:6px; flex:none;} .tree-badges .slot{width:70px; flex:none; overflow:hidden;} /* Wide enough for the longest process name there actually is — "Laser cutting (FIBER)" — because a tag chopped off mid-word is worse than a narrower name column beside it. The tags themselves are set smaller and tighter than elsewhere in the app to pay for it: three of them in a row that also has to hold a count, a quantity box, Apply and Edit. */ .tree-badges .slot.proc{width:108px;} .tree-badges .slot.shared{width:46px;} .tree-badges .badge{font-size:9px; padding:1px 5px; letter-spacing:0; max-width:100%; overflow:hidden; text-overflow:ellipsis;} /* 8 characters ("2000 kom") is the widest stock reading in the database, and this holds it. It was 90px, which parked the bending icon a clear 40px away from the number it belongs beside. */ .tree-stock{font-family:ui-monospace,monospace; font-size:13.5px; min-width:72px; text-align:right; flex:none;} .tree-price{display:flex; flex-direction:column; align-items:flex-end; gap:1px; min-width:150px; flex:none;} .tree-price .unit{color:var(--ink-soft); font-size:11.5px; font-family:ui-monospace,monospace;} .tree-price .line{font-family:ui-monospace,monospace; font-size:13.5px; font-weight:700;} .tree-price-group{display:flex; gap:16px; flex:none;} .tree-price-group .tree-price{min-width:118px;} .tree-price-group .tree-price.col-inhouse .line{color:var(--accent);} .tree-price-group .tree-price.col-outsource .line{color:var(--steel);} .tree-price-group .tree-price.col-purchased .line{color:var(--purple);} /* The Outsourced column as a control. Bruno, 11 September 2026, on having the "If outsourced instead" section taken out of the part editor: *"let's have a possibility to add outsourced prices right there in the Production Cost Report for each individual part"*. The link is the cell, so the figure keeps its place and its alignment and nothing is added to the row — a report that grew a column of buttons would be trading one kind of clutter for another. It looks like the text it replaced until the pointer is on it. */ .tree-price .quote-cell{display:flex; flex-direction:column; align-items:flex-end; gap:1px; color:inherit; text-decoration:none; border-radius:var(--radius); padding:1px 3px; margin:-1px -3px;} .tree-price .quote-cell:hover{background:var(--steel-soft);} .tree-price .quote-cell:hover .line{text-decoration:underline;} /* Where no quote has been given. The shape Bruno asked for in place of every empty field in the app: "let's just have a + Add or + New button and make that everywhere." Quiet until hovered, because most rows have no quote and a column of blue links would read as a column of something to do. */ .tree-price .quote-add{font-size:11.5px; color:var(--ink-soft); opacity:.55;} .tree-row:hover .quote-add{opacity:1; color:var(--steel);} /* The verdict inside the quote dialog: what making it here costs, and what the number just typed means against that. The only reason the number is ever entered. */ .quote-compare{background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:9px 11px; margin:4px 0 2px; font-size:12.5px;} .quote-compare .quote-inhouse{color:var(--ink-soft);} .quote-compare .quote-inhouse b{color:var(--accent); font-family:ui-monospace,monospace;} .quote-verdict{margin-top:3px; font-weight:600; min-height:16px;} /* Dearer is the ordinary answer and reads calm; cheaper is the one worth looking twice at, because it is the case that might change what the shop actually does. */ .quote-verdict.dearer{color:var(--steel);} .quote-verdict.cheaper{color:var(--gold);} .quote-verdict.level{color:var(--ink-soft);} .tree-price-header{display:flex; gap:16px; flex:none;} .tree-price-header .col{min-width:118px; text-align:right; font-size:11px; font-weight:600; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.03em;} .tree-price-header .col.col-inhouse{color:var(--accent);} .tree-price-header .col.col-outsource{color:var(--steel);} .tree-price-header .col.col-purchased{color:var(--purple);} /* `align-items:center`, and it matters: without it the row's children stretch to the tallest of them — the 31px quantity box — so the Edit link, being a direct child, was drawn 31px tall next to a 24px Apply button and sat 3.5px higher than it. Bruno: "What happened with this Edit button? It's crooked." The arrows keep stretching, because that is inside their own form. */ .tree-actions{display:flex; gap:6px; flex:none; align-items:center;} .tree-children{margin-left:22px; border-left:1px dashed #c9c6bc; padding-left:4px;} .pick-list{max-height:220px; overflow-y:auto; border:1px solid #c9c6bc; border-radius:var(--radius); margin-top:4px;} .pick-row{padding:7px 9px; font-size:13.5px; cursor:pointer; border-bottom:1px solid #eeece5;} .pick-row:last-child{border-bottom:none;} .pick-row:hover{background:#faf9f6;} .clip{color:var(--ink-soft); flex:none; cursor:pointer; font-size:13px;} .procsection{border:1px solid var(--line); border-radius:var(--radius); padding:14px 14px 4px; margin-bottom:16px; background:#fbfaf7;} .procsection h4{margin:0 0 4px; font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--accent); font-weight:700;} .procsection .sechint{font-size:12px; color:var(--ink-soft); margin-bottom:12px;} /* ---- toggle switch ---- */ .toggle-switch{display:inline-flex; border:1px solid #c9c6bc; border-radius:20px; overflow:hidden;} .toggle-switch button{border:none; background:#fff; color:var(--ink-soft); padding:7px 16px; font-size:13px; font-weight:600; border-radius:0;} .toggle-switch button.active{background:var(--ink); color:#fff;} .toggle-switch button:hover{opacity:1;} /* ---- simple on/off switch (e.g. "In production") ---- */ .onoff{display:inline-flex; align-items:center; gap:7px; cursor:pointer; user-select:none; flex:none;} .onoff .track{position:relative; width:36px; height:20px; background:#c9c6bc; border-radius:20px; flex:none; transition:background .15s;} .onoff .track .knob{position:absolute; top:2px; left:2px; width:16px; height:16px; background:#fff; border-radius:50%; transition:left .15s; box-shadow:0 1px 2px rgba(0,0,0,.25);} .onoff.on .track{background:var(--accent);} .onoff.on .track .knob{left:18px;} .onoff .lbl{font-size:12px; color:var(--ink-soft); font-weight:600;} .onoff.on .lbl{color:var(--accent);} .procgroup{margin-bottom:20px;} .procgroup h3{font-size:13px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-soft); margin:0 0 8px; display:flex; align-items:center; gap:8px;} .procgroup .featuregroup{margin:10px 0 0 18px; padding-left:10px; border-left:2px solid var(--line);} .procgroup .featuregroup h4{font-size:12.5px; font-weight:700; color:var(--ink-soft); margin:0 0 6px; display:flex; align-items:center; gap:8px;} .task-row{display:flex; align-items:center; gap:10px; padding:9px 6px; border-bottom:1px solid var(--line); transition:background .2s;} .task-row.done{background:var(--ok-soft);} .task-row .tname{flex:1;} .task-row .tname .spec{color:var(--ink-soft); font-size:11.5px;} .task-progress{font-family:ui-monospace,monospace; font-size:12.5px; color:var(--ink-soft); min-width:110px; text-align:right;} .bar{height:5px; background:#e9e7e0; border-radius:3px; overflow:hidden; margin-top:3px;} .bar > div{height:100%; background:var(--ok);} .quick-complete{display:flex; gap:6px; align-items:center; flex:none;} /* Room for the number spinner, which Chrome draws inside the field on the right — over the top of a right-aligned placeholder. At 64px wide with 9px of padding there were 44px for "±qty" and the spinner both, so the y was cut in half. Bruno: "y in Qty is cut off." */ .quick-complete input{width:86px; text-align:right; padding-right:22px;} .subproc-row{display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; width:100%;} .subproc-chip{display:inline-flex; align-items:center; gap:5px; font-size:11.5px; padding:3px 9px; border-radius:12px; background:#ececea; color:var(--ink-soft); cursor:pointer; border:1px solid #ddd9cd; font-weight:600;} .subproc-chip input{width:auto; margin:0; cursor:pointer;} .subproc-chip.done{background:var(--ok-soft); color:var(--ok); border-color:transparent;} .subproc-chip.vendor{cursor:default; flex-wrap:wrap; border-radius:8px;} .subproc-chip.vendor input[type=number]{cursor:text;} textarea.copybox{font-family:ui-monospace,monospace; font-size:12.5px; min-height:140px; white-space:pre;} .run-date{font-size:12px; color:var(--ink-soft); min-width:110px; text-align:right;} /* ------------------------------------------------------------------ Additions for the Django version. Everything above this line is the Shopfloor.html stylesheet verbatim, so the two apps look identical. ------------------------------------------------------------------ */ /* The sidebar tabs are links here rather than buttons, so the same rules are repeated for . */ /* font-weight:600 because the original's tabs are