/* ──────────────────────────────────────────────────────────────── MyShopView Brand Guide v2.0 — site-wide style guide layer. Loaded site-wide by base.html. To opt a page out of the brand layer, override the `body_class` block to omit `msv-brand` (this is how /dashboard and /myview are intentionally excluded). All rules live under `.msv-brand` (the class applied to ) so they cannot leak onto pages that opted out. Token values mirror the brand-spec single source of truth — do NOT introduce one-off hex colors below; use the tokens. ──────────────────────────────────────────────────────────── */ :root { /* ── Color tokens ───────────────────────────────────────── */ --msv-primary: #1E6BFF; --msv-primary-deep: #1654CC; --msv-ink: #25282D; --msv-teal: #2BB8A0; --msv-orange: #F47B20; --msv-danger: #E5484D; --msv-bg: #FFFFFF; --msv-surface-2: #F7F8FA; --msv-border: #E5E7EB; --msv-muted: #6B7280; /* ── Type scale ─────────────────────────────────────────── */ --msv-text-xs: 12px; --msv-text-sm: 14px; --msv-text-base: 16px; --msv-text-lg: 18px; --msv-text-xl: 22px; --msv-text-2xl: 28px; --msv-text-3xl: 36px; --msv-text-4xl: 48px; /* ── Shadows ────────────────────────────────────────────── */ --msv-shadow-card: 0 6px 18px -8px rgba(37, 40, 45, 0.18); --msv-shadow-modal: 0 18px 40px -20px rgba(37, 40, 45, 0.28); --msv-shadow-cta-hover: 0 10px 30px -12px rgba(30, 107, 255, 0.45); --msv-shadow-focus-ring: 0 0 0 3px rgba(30, 107, 255, 0.22); } /* ── Signature label (usable inside or outside the .msv-brand scope so callers can drop it onto any page) ───────────── */ .msv-label { font-family: 'Space Grotesk', system-ui, sans-serif; font-size: 0.6rem; letter-spacing: 0.12em; font-weight: 700; text-transform: uppercase; color: var(--msv-muted); } /* ════════════════════════════════════════════════════════════ SCOPED STYLES — everything below applies only when carries the .msv-brand class. ════════════════════════════════════════════════════════════ */ /* ── Typography ─────────────────────────────────────────────── */ /* Body text intentionally inherits the platform/legacy font — only TITLES and BUTTONS use the brand fonts per product call. Removing the body font keeps tables, modals, and other dense surfaces reading exactly as they did before the brand pass landed. */ .msv-brand { color: var(--msv-ink); } .msv-brand h1, .msv-brand h2, .msv-brand h3, .msv-brand h4, .msv-brand h5, .msv-brand h6, .msv-brand .h1, .msv-brand .h2, .msv-brand .h3, .msv-brand .h4, .msv-brand .h5, .msv-brand .h6, .msv-brand .display-1, .msv-brand .display-2, .msv-brand .display-3, .msv-brand .display-4, .msv-brand .display-5, .msv-brand .display-6 { font-family: 'Space Grotesk', system-ui, sans-serif; font-weight: 600; color: var(--msv-ink); } /* ── Buttons (16px radius, 10×18px padding, 600 weight) ────── */ /* Buttons keep the brand body font (DM Sans) on top of the reverted body-text inheritance — the explicit declaration here is what makes button labels look branded even when the rest of the page inherits the legacy font stack. */ .msv-brand .btn { font-family: 'DM Sans', system-ui, -apple-system, "Helvetica Neue", sans-serif; border-radius: 16px; padding: 10px 18px; font-weight: 600; transition: transform 0.1s ease, box-shadow 0.15s ease, background-color 0.15s ease, border-color 0.15s ease; } .msv-brand .btn:active { transform: translateY(1px); } .msv-brand .btn:focus, .msv-brand .btn:focus-visible { box-shadow: var(--msv-shadow-focus-ring); outline: none; } .msv-brand .btn-sm { padding: 6px 12px; border-radius: 12px; } .msv-brand .btn-lg { padding: 14px 24px; border-radius: 18px; } .msv-brand .btn-primary { background-color: var(--msv-primary); border-color: var(--msv-primary); color: #fff; } .msv-brand .btn-primary:hover, .msv-brand .btn-primary:focus, .msv-brand .btn-primary:active { background-color: var(--msv-primary-deep); border-color: var(--msv-primary-deep); color: #fff; } .msv-brand .btn-primary:hover { box-shadow: var(--msv-shadow-cta-hover); } .msv-brand .btn-success { background-color: var(--msv-teal); border-color: var(--msv-teal); color: #fff; } .msv-brand .btn-success:hover { background-color: #239985; border-color: #239985; color: #fff; } .msv-brand .btn-warning { background-color: var(--msv-orange); border-color: var(--msv-orange); color: #fff; } .msv-brand .btn-warning:hover { background-color: #d76912; border-color: #d76912; color: #fff; } .msv-brand .btn-danger { background-color: var(--msv-danger); border-color: var(--msv-danger); color: #fff; } .msv-brand .btn-info { background-color: var(--msv-primary); border-color: var(--msv-primary); color: #fff; } .msv-brand .btn-info:hover { background-color: var(--msv-primary-deep); border-color: var(--msv-primary-deep); color: #fff; } .msv-brand .btn-secondary { background-color: var(--msv-muted); border-color: var(--msv-muted); color: #fff; } /* ── Inputs (12px radius) ───────────────────────────────────── */ .msv-brand .form-control, .msv-brand .form-select, .msv-brand .input-group-text { border-radius: 12px; border-color: var(--msv-border); } .msv-brand .form-control:focus, .msv-brand .form-select:focus { border-color: var(--msv-primary); box-shadow: var(--msv-shadow-focus-ring); } /* Inputs inside an input-group keep matching radii on outer corners only so the group reads as one composed control. */ .msv-brand .input-group > :first-child { border-top-left-radius: 12px; border-bottom-left-radius: 12px; } .msv-brand .input-group > :last-child { border-top-right-radius: 12px; border-bottom-right-radius: 12px; } .msv-brand .form-control-sm, .msv-brand .form-select-sm { border-radius: 10px; } /* ── Cards (16px radius, cool-gray border, soft tinted shadow) */ .msv-brand .card { border-radius: 16px; border: 1px solid var(--msv-border); box-shadow: var(--msv-shadow-card); background-color: var(--msv-bg); } .msv-brand .card .card-header { background-color: var(--msv-surface-2); border-bottom: 1px solid var(--msv-border); border-top-left-radius: 16px; border-top-right-radius: 16px; } /* When a page paints a card-header with a dark inline background and sets `color: white` on it (the sidebar_bg_color pattern used on /locations, /warehouse details, and similar surfaces), the `.msv-brand h1..h6` rule above would otherwise force the heading inside it back to var(--msv-ink) and produce dark-on-dark text. Detect the intent via the inline style and let those headings inherit their parent's white instead. Same logic for h1..h6 inside a card-header.text-white utility-class. */ .msv-brand .card-header[style*="color: white" i] h1, .msv-brand .card-header[style*="color: white" i] h2, .msv-brand .card-header[style*="color: white" i] h3, .msv-brand .card-header[style*="color: white" i] h4, .msv-brand .card-header[style*="color: white" i] h5, .msv-brand .card-header[style*="color: white" i] h6, .msv-brand .card-header[style*="color:#fff" i] h1, .msv-brand .card-header[style*="color:#fff" i] h2, .msv-brand .card-header[style*="color:#fff" i] h3, .msv-brand .card-header[style*="color:#fff" i] h4, .msv-brand .card-header[style*="color:#fff" i] h5, .msv-brand .card-header[style*="color:#fff" i] h6, .msv-brand .card-header[style*="color: #fff" i] h1, .msv-brand .card-header[style*="color: #fff" i] h2, .msv-brand .card-header[style*="color: #fff" i] h3, .msv-brand .card-header[style*="color: #fff" i] h4, .msv-brand .card-header[style*="color: #fff" i] h5, .msv-brand .card-header[style*="color: #fff" i] h6, .msv-brand .card-header.text-white h1, .msv-brand .card-header.text-white h2, .msv-brand .card-header.text-white h3, .msv-brand .card-header.text-white h4, .msv-brand .card-header.text-white h5, .msv-brand .card-header.text-white h6 { color: inherit; } .msv-brand .card .card-footer { border-bottom-left-radius: 16px; border-bottom-right-radius: 16px; } /* ── Badges / status chips ───────────────────────────────────── Shape (radius, size, padding, casing, tracking, weight) is owned by the shape layer (msv-brand-shape.css `.badge` + `.job-badge, .wo-badge`). This color-layer block used to restate sizing at 0.6rem / 4px 10px which outranked the shape layer by specificity and shrunk job/wo badges to ~9.6 px — removed so the shape layer can drive geometry. Color variants below (.badge.bg-*) are unaffected. */ .msv-brand .badge.bg-primary { background-color: var(--msv-primary) !important; color: #fff; } .msv-brand .badge.bg-success { background-color: var(--msv-teal) !important; color: #fff; } .msv-brand .badge.bg-warning { background-color: var(--msv-orange) !important; color: #fff; } .msv-brand .badge.bg-danger { background-color: var(--msv-danger) !important; color: #fff; } .msv-brand .badge.bg-secondary { background-color: var(--msv-muted) !important; color: #fff; } .msv-brand .badge.bg-info { background-color: var(--msv-primary) !important; color: #fff; } .msv-brand .badge.bg-dark { background-color: var(--msv-ink) !important; color: #fff; } /* Job-name and workorder badges default to white text, but the per-badge inline color (from contrast_text_color() server-side and the getContrastTextColor JS) MUST win so light badge backgrounds stay legible. So this is a plain fallback — NOT !important — used only when no contrast color is computed. Applies across shopcontrol / teamcontrol / applecontrol / shopview / drafting-blended / RTP. */ .job-badge, .wo-badge { color: #fff; } /* ── Links ──────────────────────────────────────────────────── */ .msv-brand a { color: var(--msv-primary); text-decoration-color: rgba(30, 107, 255, 0.35); } .msv-brand a:hover { color: var(--msv-primary-deep); } /* ── Bootstrap text/bg utility recolors ─────────────────────── */ .msv-brand .text-primary { color: var(--msv-primary) !important; } .msv-brand .text-success { color: var(--msv-teal) !important; } .msv-brand .text-warning { color: var(--msv-orange) !important; } .msv-brand .text-danger { color: var(--msv-danger) !important; } .msv-brand .text-muted { color: var(--msv-muted) !important; } .msv-brand .text-info { color: var(--msv-primary) !important; } .msv-brand .bg-primary { background-color: var(--msv-primary) !important; color: #fff; } .msv-brand .bg-success { background-color: var(--msv-teal) !important; color: #fff; } .msv-brand .bg-warning { background-color: var(--msv-orange) !important; color: #fff; } .msv-brand .bg-danger { background-color: var(--msv-danger) !important; color: #fff; } .msv-brand .bg-info { background-color: var(--msv-primary) !important; color: #fff; } .msv-brand .bg-light { background-color: var(--msv-surface-2) !important; } .msv-brand .bg-dark { background-color: var(--msv-ink) !important; color: #fff; } /* ── Alerts (16px radius, recolored to brand palette) ───────── */ .msv-brand .alert { border-radius: 16px; border: 1px solid transparent; } .msv-brand .alert-primary { background-color: rgba(30, 107, 255, 0.08); border-color: rgba(30, 107, 255, 0.25); color: var(--msv-primary-deep); } .msv-brand .alert-success { background-color: rgba(43, 184, 160, 0.10); border-color: rgba(43, 184, 160, 0.30); color: #1a7a68; } .msv-brand .alert-warning { background-color: rgba(244, 123, 32, 0.10); border-color: rgba(244, 123, 32, 0.30); color: #b35713; } .msv-brand .alert-danger { background-color: rgba(229, 72, 77, 0.10); border-color: rgba(229, 72, 77, 0.30); color: #b3363a; } .msv-brand .alert-info { background-color: rgba(30, 107, 255, 0.08); border-color: rgba(30, 107, 255, 0.25); color: var(--msv-primary-deep); } /* ── Modals ─────────────────────────────────────────────────── */ .msv-brand .modal-content { border-radius: 16px; border: 1px solid var(--msv-border); box-shadow: var(--msv-shadow-modal); } /* Default modal header — matches the sidebar's Ink background so modal chrome reads as a continuation of the sidebar surface. Modals that explicitly set their own bg class (e.g. bg-success, bg-danger) keep that colour because Bootstrap's utility classes carry !important. Headers carrying the legacy inline `style="background-color: {{ sidebar_bg_color }}"` also keep their inline colour (sidebar_bg_color resolves to the company theme's chosen sidebar tone), so each company's modals match their own sidebar exactly. */ .msv-brand .modal-header { background-color: var(--msv-ink); color: #fff; border-bottom-color: rgba(255, 255, 255, 0.15); } .msv-brand .modal-header .modal-title, .msv-brand .modal-header h1, .msv-brand .modal-header h2, .msv-brand .modal-header h3, .msv-brand .modal-header h4, .msv-brand .modal-header h5, .msv-brand .modal-header h6 { color: #fff; } /* Bootstrap's btn-close is a black SVG; invert it so the X is visible on the coloured header without changing markup. */ .msv-brand .modal-header .btn-close { filter: brightness(0) invert(1); opacity: 0.85; } .msv-brand .modal-header .btn-close:hover { opacity: 1; } /* ── Nav links ──────────────────────────────────────────────── */ .msv-brand .nav-link { color: var(--msv-ink); } .msv-brand .nav-link.active, .msv-brand .nav-tabs .nav-link.active, .msv-brand .nav-pills .nav-link.active { color: #fff; background-color: var(--msv-primary); border-color: var(--msv-primary); } .msv-brand .nav-tabs .nav-link.active { color: var(--msv-primary); background-color: transparent; border-color: transparent transparent var(--msv-primary); border-bottom-width: 2px; } /* ── Tables ─────────────────────────────────────────────────── */ /* Headers were originally `color: var(--msv-muted)` (light grey) on transparent — readable from a laptop but hard to glance from a shop-floor monitor. Promoted from /shopview's tuning so column headers everywhere read as proper dark labels on a soft surface strip that separates them from the data rows. */ .msv-brand .table thead th { color: var(--msv-ink); background-color: var(--msv-surface-2); border-bottom: 2px solid var(--msv-border); } /* ── Page background ────────────────────────────────────────── */ .msv-brand { background-color: var(--msv-bg); } /* ── Pagination ─────────────────────────────────────────────── */ .msv-brand .pagination .page-link { color: var(--msv-primary); border-color: var(--msv-border); } .msv-brand .pagination .page-item.active .page-link { background-color: var(--msv-primary); border-color: var(--msv-primary); color: #fff; } /* ── Progress bars ──────────────────────────────────────────── */ .msv-brand .progress { border-radius: 999px; background-color: var(--msv-surface-2); } .msv-brand .progress-bar { background-color: var(--msv-primary); } /* ── Icon sizing contract (Bootstrap Icons + Font Awesome) ── Inherit currentColor and keep 18px nominal so icon swaps don't shift layout. Pages can opt out per-icon as needed. */ .msv-brand .bi, .msv-brand .fa, .msv-brand .fas, .msv-brand .far, .msv-brand .fab, .msv-brand .fa-solid, .msv-brand .fa-regular, .msv-brand .fa-brands { color: inherit; }