/* ============================================================================ msv-brand-shape.css · MyShopView Brand v2.0 — SHAPE LAYER (NO COLOR) ---------------------------------------------------------------------------- This file applies the brand's NON-COLOR rules only: corner radii, typography, component shape, spacing/sizing, and shadow/focus GEOMETRY. It deliberately sets NO color, background, border-color, fill, stroke, accent-color, or caret-color. The app's color THEME stays fully in control. How color is handled when a property structurally needs it (shadows, focus ring): we REUSE the theme's own tokens — never a literal value: --msv-shadow-card, --msv-shadow-modal, --msv-shadow-cta-hover, --msv-shadow-focus-ring These are defined by whichever theme/body-class is active (e.g. .msv-brand, and any other theme class), so this file inherits the active theme's color automatically. Because nothing here references a COLOR token directly, it is correct under every theme, no matter how many themes exist. >>> LOAD LAST <<< After Bootstrap, FA, custom.css, modals.css, jquery-ui.css, jquery.dataTables.css, AND every theme stylesheet — so shape wins, while the theme keeps owning color: … jquery.dataTables.css → [theme css] → msv-brand-shape.css The only NEW tokens defined below are radii — non-color, theme-independent. ============================================================================ */ @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=DM+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;600&display=swap'); /* ---- radii (non-color, non-negotiable per brand) ---- */ :root{ --msv-r-btn:16px; /* buttons + cards */ --msv-r-input:12px; /* inputs */ --msv-r-pill:999px; /* badges + chips */ --msv-r-chrome:6px; /* tiny chrome */ } /* --------------------------------------------------------------------------- TYPOGRAPHY (font + scale + tracked label + mono — no color) --------------------------------------------------------------------------- */ body{font-family:'DM Sans',system-ui,sans-serif;} h1,h2,h3,h4,h5,.h1,.h2,.h3,.modal-title,.ui-dialog-title{ font-family:'Space Grotesk',sans-serif;letter-spacing:-.01em; } /* signature tracked label (color comes from theme via .msv-label's own rule, or from inherited/currentColor — we only set shape/typography here) */ .msv-label{ font-family:'Space Grotesk',sans-serif;font-size:.6rem;letter-spacing:.12em; font-weight:700;text-transform:uppercase; } .msv-mono{font-family:'JetBrains Mono',monospace;} /* Map type roles to the theme's existing size tokens (sizes are not color) */ h1,.page-title{font-size:var(--msv-text-3xl);} .card-title,.modal-title{font-size:var(--msv-text-xl);} small,.text-meta{font-size:var(--msv-text-xs);} /* --------------------------------------------------------------------------- BUTTONS (16px radius · weight 600 · 10×18 padding · 1px press · themed ring) No background/border-color — those stay theme-driven. --------------------------------------------------------------------------- */ .btn{ border-radius:var(--msv-r-btn); font-family:'DM Sans';font-weight:600; padding:10px 18px; transition:transform .04s ease,box-shadow .15s,background-color .15s,border-color .15s; } .btn-sm{border-radius:var(--msv-r-btn);padding:7px 14px;} .btn:active{transform:translateY(1px);} .btn:focus,.btn:focus-visible{box-shadow:var(--msv-shadow-focus-ring);outline:0;} .btn-primary:hover{box-shadow:var(--msv-shadow-cta-hover);} #columnsDropdown{border-radius:var(--msv-r-btn);} /* --------------------------------------------------------------------------- SIDEBAR (shape only — rounded nav items + rhythm; color stays themed) --------------------------------------------------------------------------- */ .sidebar-scrollable .nav-link{ border-radius:12px;font-weight:500; transition:background-color .15s,color .15s; } /* --------------------------------------------------------------------------- CARDS (radius + depth via theme shadow token; no border-color set) --------------------------------------------------------------------------- */ .card{ border-radius:var(--msv-r-btn); box-shadow:var(--msv-shadow-card); } /* --------------------------------------------------------------------------- FORMS / INPUTS (12px radius · themed focus ring) — covers Bootstrap, DataTables search/length, and jQuery-UI inputs. No color/border-color. --------------------------------------------------------------------------- */ .form-control,.form-select, .dataTables_wrapper .dataTables_length select, input.ui-autocomplete-input,.ui-widget input,.ui-widget select, #workordersTable thead input,#workordersTable tfoot input{ border-radius:var(--msv-r-input);font-family:'DM Sans'; } .form-control:focus,.form-select:focus, .dataTables_wrapper .dataTables_length select:focus, #workordersTable thead input:focus{ box-shadow:var(--msv-shadow-focus-ring);outline:0; } /* Brand search-input radius — every search field across the app reads as the same pill chrome regardless of which page it sits on. Promoted from /shopview's DataTables filter to a site-wide contract: any semantic `type="search"` input picks it up, and the [placeholder*="search" i] attribute selector catches the many legacy `type="text"` inputs whose placeholder already identifies them as searches (e.g. "Search PO#, Vendor, ..."), so we don't have to flip 100+ markup sites. The focus ring matches the brand button focus geometry so search inputs participate in the same focus language as other controls. `.dataTables_wrapper .dataTables_filter input` is included explicitly so we MATCH DataTables 1.11.3's own selector specificity ((0,2,1) — `.dataTables_wrapper .dataTables_filter input { border-radius: 3px; padding: 5px; ... }`). At equal specificity the brand layer wins on source order because msv-brand-shape.css is the LAST stylesheet loaded per the Brand Guide v2.0 load contract. Without this ancestor in the selector, DataTables' (0,2,1) rule beats our (0,1,1) rule and pages that DON'T relocate the filter out of .dataTables_wrapper (every page except /shopview, /jobs) keep the stock DataTables 3px radius. */ input[type="search"], input[placeholder*="search" i], .dataTables_filter input, .dataTables_wrapper .dataTables_filter input{ border-radius:var(--msv-r-btn); } input[type="search"]:focus, input[placeholder*="search" i]:focus, .dataTables_filter input:focus, .dataTables_wrapper .dataTables_filter input:focus{ box-shadow:var(--msv-shadow-focus-ring);outline:0; } /* DataTables filter input additionally gets button-matching geometry (btn-sm padding + font + DM Sans) so the search bar sits cleanly inline with adjacent .btn-sm controls when a page relocates it into a .page-actions row. Non-DataTables search inputs keep their page-author's own sizing intentionally — only the radius and focus ring are universal. Both the wrapper-scoped and the unscoped selector are included so the geometry applies pre- AND post-relocation (see specificity note above). */ .dataTables_filter input, .dataTables_wrapper .dataTables_filter input{ font-family:'DM Sans'; padding:6px 12px;line-height:1.4;font-size:.875rem; } /* When a page relocates the DataTables filter into its .page-actions row (so [Search] [Action button] [Action button] [Columns] read as one chrome strip), the default DataTables margins/text-align make the search drift right and the label collapse to the wrong baseline. Neutralize those defaults and give the label flex alignment so it sits flush with neighbouring .btn-sm controls. Originated in /shopview's page-actions layout, promoted brand-wide so every page that adopts the same .page-actions DOM pattern picks up the layout for free. min-width keeps the search bar from collapsing inside a right-aligned flex row. */ .page-actions .dataTables_filter{ margin:0;padding:0;text-align:left; } .page-actions .dataTables_filter label{ margin:0;display:flex;align-items:center;gap:6px; font-size:var(--msv-text-sm); } .page-actions .dataTables_filter input{ margin-left:0;min-width:220px; } /* --------------------------------------------------------------------------- BADGES / STATUS CHIPS (pill + tracked label typography; color stays themed) --------------------------------------------------------------------------- */ .badge{ border-radius:var(--msv-r-pill); font-family:'Space Grotesk';font-weight:700;letter-spacing:.04em; text-transform:uppercase;font-size:.9rem;padding:.35em .7em; } /* Job and Workorder identification pills sit slightly smaller than the generic .badge so a row reading [job][wo][routing][status] doesn't feel top-heavy. Adopted from the /shopview operator- facing tuning so every shop-floor surface (workorders / shop- control / team-control / drafting-blended / RTP / samples / inline-qc-report / apple-control / shop-drawings) shares the same identifier sizing. */ .job-badge,.wo-badge{ font-size:.85rem;padding:.3em .6em;letter-spacing:.03em; } /* Routing pills used across shopview / shopcontrol / teamcontrol / applecontrol / drafting-blended / RTP. Main routing rides the primary pill size; extension routings render at a deliberately smaller size so a workorder showing [main] + [ext] reads as a primary stop with a secondary detour, not two peer routings. Promoted from /shopview's operator tuning so every page using .sv-routing-badge picks up the same hierarchy. */ .sv-routing-badge{ font-size:.85rem;padding:.3em .6em;letter-spacing:.03em; } .sv-routing-badge.routing-extension-badge{ font-size:.7rem;padding:.2em .5em;letter-spacing:.02em; line-height:1.2;vertical-align:middle; } /* The little prefix tag inside an extension pill (e.g. the extension index) sits a notch smaller than the outer pill so the nested chip reads clearly as a sub-label. */ .routing-extension-badge > .badge{ font-size:.6rem;padding:.1em .4em;line-height:1.2; letter-spacing:.02em;margin-right:4px;vertical-align:middle; } /* --------------------------------------------------------------------------- DATATABLES GRID (#workordersTable) — typography, spacing, rounded controls. No background/color/border-color: striping, hover, sort colors stay themed. --------------------------------------------------------------------------- */ .dataTables_wrapper{font-family:'DM Sans';} .dataTables_wrapper .dataTables_info{font-size:var(--msv-text-sm);} /* Column headers: readable at the wall-monitor distances operators actually use. The earlier spec sat at .6rem (~9.6px) tracked .1em — adopted from /shopview the operator-friendly .9rem at .04em so headers stay glanceable on every DataTables surface. */ table.dataTable thead th,table.dataTable thead td,#workordersTable thead th{ font-family:'Space Grotesk';font-size:.9rem;letter-spacing:.04em; font-weight:700;text-transform:uppercase; } /* Comfortable, consistent cell rhythm (spacing only) */ table.dataTable thead th,table.dataTable thead td{padding:8px;} table.dataTable tbody td{padding:12px 16px;} /* rounded pagination buttons (radius only; the theme keeps their colors) */ .dataTables_wrapper .dataTables_paginate .paginate_button{ border-radius:var(--msv-r-input)!important;margin:0 3px;padding:.35em .8em; } /* --------------------------------------------------------------------------- MODALS & DROPDOWNS (radius + depth via theme tokens) --------------------------------------------------------------------------- */ .modal-content,.ui-dialog{border-radius:var(--msv-r-btn);box-shadow:var(--msv-shadow-modal);} /* Modal header / footer match the modal-content's 16px so the coloured header strip clips cleanly to the rounded modal shell instead of painting square corners at the top. Bootstrap's defaults use --bs-modal-border-radius (0.5rem) which doesn't match the brand --msv-r-btn (16px); we set them explicitly. */ .modal-header{ border-top-left-radius:calc(var(--msv-r-btn) - 1px); border-top-right-radius:calc(var(--msv-r-btn) - 1px); } .modal-footer{ border-bottom-left-radius:calc(var(--msv-r-btn) - 1px); border-bottom-right-radius:calc(var(--msv-r-btn) - 1px); } .dropdown-menu{border-radius:var(--msv-r-btn);box-shadow:var(--msv-shadow-modal);padding:6px;} .dropdown-item{border-radius:10px;} .ui-autocomplete{border-radius:var(--msv-r-input);box-shadow:var(--msv-shadow-modal);} /* --------------------------------------------------------------------------- GLOBAL FOCUS RING geometry (themed color via the token) --------------------------------------------------------------------------- */ a:focus-visible,button:focus-visible,[tabindex]:focus-visible, .page-link:focus,.form-check-input:focus{box-shadow:var(--msv-shadow-focus-ring);outline:0;} /* --------------------------------------------------------------------------- SPACING SCALE helpers (optional, opt-in via class; no color) --------------------------------------------------------------------------- */ .msv-stack-sm{gap:8px;} .msv-stack{gap:16px;} .msv-stack-lg{gap:24px;} .msv-gutter{padding-left:24px;padding-right:24px;} /* ============================================================================ SPACING / SIZING REFINEMENT — color-neutral, append-only ---------------------------------------------------------------------------- 4 / 8 / 12 / 16 / 24 / 32 rhythm. ~40px minimum interactive targets via padding + line-height. Consistent gutters/card/modal interiors so content never reads flush. Aligned mono columns. Sidebar flex-row collapse preserved (only the .sidebar-scrollable .nav-link rule above is augmented). No color, background, border-color, display, visibility, position, z-index, overflow, or markup change. Only allowed properties used. ============================================================================ */ /* --- Interactive minimums. Bootstrap's defaults sit between 32–36px; the line-height/padding below carry them to ~40–44px without affecting overall layout. ---------------------------------------------------- */ .btn { line-height: 1.4; } .btn-sm { line-height: 1.4; padding: 6px 12px; } .btn-lg { line-height: 1.4; padding: 14px 24px; } .form-control, input.ui-autocomplete-input, .ui-widget input{ padding: 8px 12px; line-height: 1.5; } /* .dataTables_wrapper .dataTables_filter input intentionally omitted here — it gets the button-matching 6px 12px / 1.4 / .875rem geometry above in the shape layer. */ /* Native