/* scott_common brand chrome — 2665 (promoted from SR-2's sr2_brand.css v0.78.2) * ============================================================================ * The LOOK Dan recognises — navy sidebar, section labels, tinted KPI tiles, * panel elevation, badge palette, dark-mode fixes — lived for months in an * SR-2-only stylesheet (recycling/css/sr2_brand.css). Every other instance * therefore rendered the plain shell. This file is that stylesheet promoted * into the shared shell, so every instance gets the same chrome from ONE * sheet that SR-2 also runs. * * LOADED BY: scott_common/shell/_shell.html, right after shell_midtier.css and * tw_dark_compat.css, BEFORE the optional per-app ``brand.shell_css`` (so an * app can still add to it, but nothing has to re-derive it). * * RULES OF THIS FILE (tests/test_brand_chrome_2665.py enforces them): * 1. Every colour literal lives in the TOKEN BLOCK between the * ``@sc-tokens:start`` / ``@sc-tokens:end`` markers. Zero literals * outside it (fleet rule). Rules reference ``var(--sc-*)`` or the * tokens.css / shell.css vocabulary (``--card-bg``, ``--text`` ...). * 2. Selectors are ``.sc-*``; every rule also carries its ``.sr2-*`` twin * as an alias for one release because the shell markup and ~559 SR-2 * pages still write ``sr2-``. The alias is a second selector in the SAME * rule — never a copied rule — so the two can never drift. * 3. Declarations are the SR-2 originals, byte-for-byte after token * resolution (the parity test compares against the frozen original). * Deliberate exceptions are listed in that test, each with its reason. * * PALETTE: an instance that sets nothing renders exactly like SR-2 (navy * #1E3A5F / sidebar #15294A). An instance MAY override the accent FAMILY only, * via ``settings.SCOTT_BRAND = {"accent": ...}`` — the shell emits those as * ``--sc-*`` overrides after this sheet. See BRAND.md v2.1 §2. * ========================================================================== */ /* @sc-tokens:start */ :root { /* ── Accent family (BRAND.md §2) — the overridable part ──────────────── * --sc-brand-* : the brand navy, SAME in both themes (button fills, badge * ink on light tints, header rails — things that must not * lift in dark mode). * --sc-accent-* : the theme-adaptive accent (links, focus ring, active * rows) — navy in light, lifted blue in dark. */ --sc-brand: #1E3A5F; --sc-brand-hover: #15294A; --sc-brand-soft: #E8EEF5; --sc-brand-2: #3D6488; /* steel navy — customers / CRM */ --sc-accent: #1E3A5F; --sc-accent-soft: #E8EEF5; --sc-accent-fg: #1E3A5F; /* ── Sidebar — the coloured nav ───────────────────────────────────────── */ --sc-sidebar-bg: var(--sc-brand-hover); --sc-sidebar-border: rgba(255,255,255,.08); --sc-sidebar-rule: rgba(255,255,255,.10); --sc-sidebar-fg: #fff; --sc-sidebar-fg-item: rgba(255,255,255,.74); --sc-sidebar-fg-collapse: rgba(255,255,255,.72); --sc-sidebar-fg-subtitle: rgba(255,255,255,.62); --sc-sidebar-fg-label: rgba(255,255,255,.55); --sc-sidebar-hover: rgba(255,255,255,.08); --sc-sidebar-hover-strong: rgba(255,255,255,.10); --sc-sidebar-active: rgba(255,255,255,.12); /* ── Department family (brand-family gradients + KPI icons) ───────────── */ --sc-green: #2D7A3E; /* recycling green — sales / success */ --sc-green-deep: #1f5a2c; --sc-green-hover: #246032; --sc-amber: #C9941A; /* logistics */ --sc-amber-deep: #a87a12; --sc-red: #B33A3A; /* compliance */ --sc-red-deep: #8E2E2E; /* ── Section tints (KPI tile washes; shell.css names them --tint-*) ──── */ --sc-tint-ops: rgba(30,58,95,.08); --sc-tint-cust: rgba(61,100,136,.10); --sc-tint-sales: rgba(45,122,62,.10); --sc-tint-logistics: rgba(201,148,26,.10); /* ── Backdrop + surfaces ──────────────────────────────────────────────── */ --sc-dot-grid: rgba(30,58,95,.055); --sc-green-wash: rgba(45,122,62,.12); --sc-white: #ffffff; --sc-auth-shade-a: rgba(15,25,40,.80); --sc-auth-shade-b: rgba(20,55,42,.80); --sc-auth-mid: #21506e; --sc-auth-card-shadow: rgba(0,0,0,.35); --sc-auth-help-fg: rgba(255,255,255,.85); /* ── Status-chip borders (Tailwind soft pills) ────────────────────────── */ --sc-chip-green: rgba(45,122,62,.30); --sc-chip-amber: rgba(201,148,26,.30); --sc-chip-red: rgba(179,58,58,.30); --sc-chip-navy: rgba(30,58,95,.25); /* ── Badge ink (guaranteed-contrast, both themes — 919) ───────────────── */ --sc-badge-success-fg: #1B5E2A; --sc-badge-warning-fg: #7A5400; --sc-badge-danger-fg: #8E2E2E; --sc-badge-info-fg: #1E3A5F; --sc-badge-muted-bg: #EEF1F4; --sc-badge-muted-fg: #434B54; /* ── Tailwind palette the legibility net + fills reference ────────────── */ --sc-tw-blue-300: #93c5fd; --sc-tw-blue-500: #3b82f6; --sc-tw-blue-600: #2563eb; --sc-tw-blue-700: #1d4ed8; --sc-tw-slate-100: #f1f5f9; --sc-tw-slate-200: #e2e8f0; --sc-tw-slate-300: #cbd5e1; --sc-tw-slate-500: #64748b; --sc-tw-slate-600: #475569; --sc-tw-slate-700: #334155; --sc-tw-slate-800: #1e293b; --sc-tw-slate-850: #273548; /* lifted dark surface (tokens.css --scott-surface-2 dark) */ --sc-tw-slate-900: #0f172a; --sc-tw-slate-950: #0b1220; --sc-tw-green-400: #4ade80; --sc-tw-green-500: #22c55e; --sc-tw-green-600: #16a34a; --sc-tw-green-700: #15803d; --sc-tw-red-300: #fca5a5; --sc-tw-red-500: #ef4444; --sc-tw-red-600: #dc2626; --sc-tw-red-700: #b91c1c; --sc-tw-indigo-500: #6366f1; --sc-tw-indigo-600: #4f46e5; --sc-tw-indigo-700: #4338ca; --sc-tw-emerald-300: #6ee7b7; --sc-tw-emerald-500: #10b981; --sc-tw-emerald-600: #059669; --sc-tw-emerald-700: #047857; --sc-tw-amber-300: #fcd34d; --sc-tw-amber-500: #f59e0b; --sc-tw-amber-600: #d97706; --sc-tw-amber-700: #b45309; --sc-tw-gray-500: #6b7280; --sc-tw-gray-600: #4b5563; --sc-tw-gray-700: #374151; --sc-tw-gray-800: #1f2937; --sc-tw-yellow-200: #fde68a; --sc-tw-yellow-500: #eab308; --sc-tw-yellow-600: #ca8a04; --sc-tw-yellow-700: #a16207; --sc-tw-teal-600: #0d9488; --sc-tw-teal-700: #0f766e; --sc-tw-purple-600: #9333ea; --sc-tw-purple-700: #7e22ce; --sc-tw-orange-500: #f97316; --sc-tw-orange-600: #ea580c; --sc-tw-cyan-600: #0891b2; --sc-tw-pink-600: #db2777; --sc-ink-black: #1a1a1a; /* dark text on the yellow badge */ --sc-cyan-ink: #04303a; /* dark text on the cyan (info) badge */ --sc-green-night: #0d3321; /* status-strip punch pill, dark */ --sc-green-night-border: #1d6b42; /* ── Legacy names shell.css / shell_midtier.css consume ───────────────── */ --accent: var(--sc-accent); --accent-soft: var(--sc-accent-soft); --accent-fg: var(--sc-accent-fg); --app-primary: var(--sc-brand); --tint-ops: var(--sc-tint-ops); --tint-cust: var(--sc-tint-cust); --tint-sales: var(--sc-tint-sales); --tint-trucks: var(--sc-tint-logistics); } [data-theme="dark"] { --sc-accent: #6CA0DC; --sc-accent-soft: rgba(108,160,220,.18); --sc-accent-fg: #9DC3EC; --sc-tint-ops: rgba(30,58,95,.45); --sc-tint-cust: rgba(61,100,136,.38); --sc-tint-sales: rgba(45,122,62,.40); --sc-tint-logistics: rgba(201,148,26,.32); --accent: var(--sc-accent); --accent-soft: var(--sc-accent-soft); --accent-fg: var(--sc-accent-fg); --tint-ops: var(--sc-tint-ops); --tint-cust: var(--sc-tint-cust); --tint-sales: var(--sc-tint-sales); --tint-trucks: var(--sc-tint-logistics); } /* @sc-tokens:end */ /* ── Brand backdrop: wash + faint navy dot-grid texture (not a photo, so it * never competes with table/form text) ───────────────────────────────── */ body { background-image: radial-gradient(circle at center, var(--sc-dot-grid) 1px, transparent 1.7px), var(--backdrop-wash, none); background-size: 24px 24px, 100% 100%, 100% 100%; background-repeat: repeat, no-repeat, no-repeat; background-attachment: fixed; } /* ── Card elevation + hover lift ────────────────────────────────────────── */ .sc-kpi, .sc-panel, .sc-recent, .sr2-kpi, .sr2-panel, .sr2-recent { box-shadow: var(--card-shadow); } .sc-kpi, .sc-panel, .sr2-kpi, .sr2-panel { transition: transform var(--scott-transition, 180ms ease), box-shadow var(--scott-transition, 180ms ease); } .sc-kpi:hover, .sr2-kpi:hover { transform: translateY(-2px); box-shadow: var(--card-shadow-hover); } .sc-panel:hover, .sr2-panel:hover { box-shadow: var(--card-shadow-hover); } /* ── Brand-family KPI icons + department gradients (retire the rainbow) ──── */ .sc-kpi--ops .sc-kpi__icon, .sr2-kpi--ops .sr2-kpi__icon { background: var(--sc-brand); } .sc-kpi--cust .sc-kpi__icon, .sr2-kpi--cust .sr2-kpi__icon { background: var(--sc-brand-2); } .sc-kpi--sales .sc-kpi__icon, .sr2-kpi--sales .sr2-kpi__icon { background: var(--sc-green); } .sc-kpi--trucks .sc-kpi__icon, .sr2-kpi--trucks .sr2-kpi__icon { background: var(--sc-amber); } .sc-grad--ops, .sr2-grad--ops { background: linear-gradient(135deg, var(--sc-brand), var(--sc-brand-hover)); } .sc-grad--crm, .sr2-grad--crm { background: linear-gradient(135deg, var(--sc-brand-2), var(--sc-brand)); } .sc-grad--sales, .sr2-grad--sales { background: linear-gradient(135deg, var(--sc-green), var(--sc-green-deep)); } .sc-grad--logistics, .sr2-grad--logistics { background: linear-gradient(135deg, var(--sc-amber), var(--sc-amber-deep)); } .sc-grad--compliance, .sr2-grad--compliance { background: linear-gradient(135deg, var(--sc-red), var(--sc-red-deep)); } .sc-grad--reports, .sr2-grad--reports { background: linear-gradient(135deg, var(--sc-brand), var(--sc-green)); } .sc-grad--hr, .sr2-grad--hr { background: linear-gradient(135deg, var(--sc-brand-2), var(--sc-green)); } .sc-grad--marketing, .sr2-grad--marketing { background: linear-gradient(135deg, var(--sc-green), var(--sc-amber)); } /* ── Brand-mark + avatar gradients ──────────────────────────────────────── */ .sc-sb-brand-mark, .sc-avatar, .sr2-sb-brand-mark, .sr2-avatar { background: linear-gradient(135deg, var(--sc-brand), var(--sc-green)); } /* ── Accessible brand focus ring (BRAND.md §12) ─────────────────────────── */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; } /* ── Quiet themed scrollbars ────────────────────────────────────────────── */ * { scrollbar-width: thin; scrollbar-color: var(--border-2) transparent; } *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; } *::-webkit-scrollbar-thumb:hover { background: var(--text-muted); background-clip: padding-box; } /* ── Recent-table links → brand navy ────────────────────────────────────── */ .sc-recent td a, .sr2-recent td a { color: var(--accent); } [data-theme="dark"] .sc-recent td a, [data-theme="dark"] .sr2-recent td a { color: var(--accent-fg); } /* ═══════════════════════════════════════════════════════════════════════════ * Content-element branding — this is what makes ordinary list / detail / form * pages (not just the dashboard) read as Scott. These elements are everywhere: * .card (236 SR-2 templates), (435), .btn-primary (230). This sheet * loads after Bootstrap + scott_common.css, so these win. * ═══════════════════════════════════════════════════════════════════════════ */ /* Bootstrap cards → elevated, rounded, brand hover lift. */ .card { border: 1px solid var(--card-border); border-radius: 12px; box-shadow: var(--card-shadow); transition: box-shadow var(--scott-transition, 180ms ease); } .card:hover { box-shadow: var(--card-shadow-hover); } /* Plain card headers get a subtle navy tint; utility-colored headers (.bg-primary/.bg-success/etc., higher specificity) keep their color. */ .card-header { background: linear-gradient(135deg, var(--accent-soft), var(--sc-green-wash)); border-bottom: 1px solid var(--card-border); font-weight: 600; } /* Primary action buttons → brand navy (Bootstrap 5.3 CSS-var theming). * --bs-btn-color is pinned WHITE so the navy fill is self-contained: white * text contrasts navy in BOTH light and dark mode. */ .btn-primary { --bs-btn-bg: var(--sc-brand); --bs-btn-border-color: var(--sc-brand); --bs-btn-color: var(--sc-white); --bs-btn-hover-color: var(--sc-white); --bs-btn-active-color: var(--sc-white); --bs-btn-disabled-color: var(--sc-white); --bs-btn-hover-bg: var(--sc-brand-hover); --bs-btn-hover-border-color: var(--sc-brand-hover); --bs-btn-active-bg: var(--sc-brand-hover); --bs-btn-active-border-color: var(--sc-brand-hover); --bs-btn-disabled-bg: var(--sc-brand); --bs-btn-disabled-border-color: var(--sc-brand); } /* Outline-primary: navy text+border at rest, white once the navy fill paints * on hover/active. In dark mode the navy resting text would be navy-on-dark * (the invisible-button bug) — lift it to the light brand accent there. */ .btn-outline-primary { --bs-btn-color: var(--sc-brand); --bs-btn-border-color: var(--sc-brand); --bs-btn-hover-color: var(--sc-white); --bs-btn-active-color: var(--sc-white); --bs-btn-hover-bg: var(--sc-brand); --bs-btn-hover-border-color: var(--sc-brand); --bs-btn-active-bg: var(--sc-brand); --bs-btn-active-border-color: var(--sc-brand); } [data-theme="dark"] .btn-outline-primary { --bs-btn-color: var(--accent-fg); --bs-btn-border-color: var(--accent-fg); } /* Success keeps the recycling green it should already imply; white text pinned * so green-on-green can't happen in either mode. */ .btn-success { --bs-btn-bg: var(--sc-green); --bs-btn-border-color: var(--sc-green); --bs-btn-color: var(--sc-white); --bs-btn-hover-color: var(--sc-white); --bs-btn-active-color: var(--sc-white); --bs-btn-disabled-color: var(--sc-white); --bs-btn-hover-bg: var(--sc-green-hover); --bs-btn-hover-border-color: var(--sc-green-hover); } /* btn-link → brand accent; flips light→dark via --accent so it always * contrasts the page surface. */ .btn-link { color: var(--accent); } [data-theme="dark"] .btn-link { color: var(--accent-fg); } /* Tables read branded — tinted, navy-ruled header row. */ .table thead th { background: var(--accent-soft); color: var(--text); border-bottom: 2px solid var(--scott-primary); font-weight: 600; } .table { --bs-table-hover-bg: var(--row-hover); } /* Every page title gets a navy accent bar — a consistent brand anchor. */ .sc-header h1, .sr2-header h1 { border-left: 4px solid var(--scott-primary); padding-left: 0.6rem; } /* Bootstrap badges/nav-pills/links that use the primary text color. */ .badge.bg-primary { background-color: var(--sc-brand) !important; } .nav-pills .nav-link.active { background-color: var(--sc-brand); } .page-link { color: var(--sc-brand); } .page-item.active .page-link { background-color: var(--sc-brand); border-color: var(--sc-brand); } /* ═══════════════════════════════════════════════════════════════════════════ * Navy sidebar + login hero (SR-2 v0.78.1 "PUNCH"). The sidebar recolour is * the single biggest "premium app" upgrade — and the thing Dan noticed * plastics was missing. * ═══════════════════════════════════════════════════════════════════════════ */ /* Deep navy sidebar with light text (overrides the white --card-2 surface). */ .sc-sidebar, .sr2-sidebar { background: var(--sc-sidebar-bg); border-right: 1px solid var(--sc-sidebar-border); } .sc-sb-head, .sr2-sb-head { border-bottom-color: var(--sc-sidebar-rule); } .sc-sb-brand-text, .sr2-sb-brand-text { color: var(--sc-sidebar-fg); } .sc-sb-subtitle, .sr2-sb-subtitle { color: var(--sc-sidebar-fg-subtitle); } .sc-sb-collapse, .sr2-sb-collapse { color: var(--sc-sidebar-fg-collapse); } .sc-sb-collapse:hover, .sr2-sb-collapse:hover { background: var(--sc-sidebar-hover-strong); color: var(--sc-sidebar-fg); } .sc-sb-item, .sr2-sb-item { color: var(--sc-sidebar-fg-item); } .sc-sb-item:hover, .sr2-sb-item:hover { background: var(--sc-sidebar-hover); color: var(--sc-sidebar-fg); } /* Group headers had NO rule anywhere before SR-2 1249, so they inherited the body text colour — dark-on-navy = INVISIBLE in light mode. Styled for the always-navy sidebar. */ .sc-sb-section-label, .sr2-sb-section-label { color: var(--sc-sidebar-fg-label); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; padding: 14px 14px 4px; } .sc-sb-item.active, .sr2-sb-item.active { background: var(--sc-sidebar-active); color: var(--sc-sidebar-fg); border-left-color: var(--scott-recycling); } .sc-sb-item--recent .sc-sb-item__icon, .sc-sb-item--recent .sc-sb-label, .sr2-sb-item--recent .sr2-sb-item__icon, .sr2-sb-item--recent .sr2-sb-label { opacity: .85; } .sc-sb-foot, .sr2-sb-foot { border-top-color: var(--sc-sidebar-rule); } .sc-sb-foot button.sc-sb-item, .sr2-sb-foot button.sr2-sb-item { color: var(--sc-sidebar-fg-item); } /* Login hero — navy→green gradient behind the auth card. Targets the shared * .scott-auth wrapper — no template fork. (SR-2's original also listed an * optional login-hero.jpg layer; the file never existed, so the gradient is * what has always painted. An app that wants a photo adds it in its own * brand.shell_css.) */ .scott-auth { min-height: 80vh; display: flex; align-items: center; justify-content: center; padding: 2.5rem 1rem; border-radius: 16px; background: linear-gradient(135deg, var(--sc-auth-shade-a), var(--sc-auth-shade-b)), linear-gradient(135deg, var(--sc-brand-hover) 0%, var(--sc-auth-mid) 55%, var(--sc-green) 130%); } .scott-auth__brand { color: var(--sc-white); } .scott-auth__card { background: var(--sc-white); border-radius: 14px; box-shadow: 0 24px 60px var(--sc-auth-card-shadow); } .scott-auth__help { color: var(--sc-auth-help-fg); } /* ═══════════════════════════════════════════════════════════════════════════ * GLOBAL BRAND POLISH (SR-2 v0.78.2, handoff 113) * * The rules above brand Bootstrap surfaces. But ~355 SR-2 templates render * page sections with the TAILWIND shell pattern `bg-white rounded shadow` * (served by the Tailwind CDN runtime the shell loads AFTER this sheet). Those * flat-white panels got NONE of the home-page depth. This block brings the * home-page quality to that dominant Tailwind surface + report tables + page * headers + status colours + empty states. * * SCOPING / SPECIFICITY STRATEGY (no !important sprawl): * • Tailwind CDN utilities are single-class (0,1,0) with NO !important. A * COMPOUND selector like `.bg-white.rounded.shadow` (0,3,0) beats them on * specificity regardless of source order. * • We require the *combination* bg-white + rounded + shadow (the real * "panel" intent), so tiny utility elements never get depth. * • Dark mode keys off [data-theme="dark"] (the shell's convention). * ═══════════════════════════════════════════════════════════════════════════ */ /* ── 1. Tailwind panels: bg-white rounded shadow → elevated brand card ─────── */ .bg-white.rounded.shadow, .bg-white.rounded-lg.shadow, .bg-white.rounded.shadow-sm, .bg-white.rounded-lg.shadow-sm, .bg-white.rounded-md.shadow, .bg-white.rounded-xl.shadow { box-shadow: var(--card-shadow); border: 1px solid var(--card-border); border-radius: 12px; transition: box-shadow var(--scott-transition, 180ms ease), transform var(--scott-transition, 180ms ease); } /* Hover lift only when the panel is interactive — keeps static report blocks * calm, lifts clickable tiles to match the home panels. */ .bg-white.rounded.shadow:hover, .bg-white.rounded-lg.shadow:hover, .bg-white.rounded.shadow-sm:hover, .bg-white.rounded-lg.shadow-sm:hover { /* !important so the hover lift survives both the Tailwind CDN .shadow and the * §6 resting !important re-assert (otherwise hover would be a no-op). */ box-shadow: var(--card-shadow-hover) !important; } a > .bg-white.rounded.shadow:hover, a .bg-white.rounded.shadow:hover { transform: translateY(-2px); } /* Dark mode: literal white slabs read wrong on the slate backdrop. Remap the * panel surface + text to the theme card tokens so these pages look native. */ [data-theme="dark"] .bg-white.rounded.shadow, [data-theme="dark"] .bg-white.rounded-lg.shadow, [data-theme="dark"] .bg-white.rounded.shadow-sm, [data-theme="dark"] .bg-white.rounded-lg.shadow-sm, [data-theme="dark"] .bg-white.rounded-md.shadow, [data-theme="dark"] .bg-white.rounded-xl.shadow { background-color: var(--card-bg); border-color: var(--card-border); color: var(--text); } /* ── 2. Tailwind report tables: min-w-full bg-white rounded shadow ─────────── */ table.min-w-full.bg-white thead tr, table.min-w-full.bg-white thead th { background: var(--accent-soft); color: var(--text); } table.min-w-full.bg-white thead th { border-bottom: 2px solid var(--scott-primary); font-weight: 600; } table.min-w-full.bg-white tbody tr:hover { background: var(--row-hover); } [data-theme="dark"] table.min-w-full.bg-white thead tr, [data-theme="dark"] table.min-w-full.bg-white thead th { background: var(--accent-soft); color: var(--text); } [data-theme="dark"] table.min-w-full.bg-white tbody tr:hover { background: var(--row-hover); } /* ── 3. Page headers: Tailwind h1 → restrained navy accent bar ─────────────── */ h1.text-2xl { border-left: 4px solid var(--scott-primary); padding-left: 0.6rem; line-height: 1.2; } /* ── 4. Status / badge brand-family colors (Tailwind utility tints) ────────── */ .bg-green-100.text-green-800, .bg-green-50.text-green-700 { border: 1px solid var(--sc-chip-green); } .bg-amber-100.text-amber-800, .bg-yellow-100.text-yellow-800 { border: 1px solid var(--sc-chip-amber); } .bg-red-100.text-red-800, .bg-red-50.text-red-700 { border: 1px solid var(--sc-chip-red); } .bg-blue-100.text-blue-800, .bg-blue-50.text-blue-700 { border: 1px solid var(--sc-chip-navy); } /* ── 5. Empty states: consistent muted, centered look ─────────────────────── */ td.text-center.text-gray-500, td.text-center.text-gray-400, .bg-white.rounded.shadow > .text-center.text-gray-500 { color: var(--text-muted); } [data-theme="dark"] td.text-center.text-gray-500, [data-theme="dark"] td.text-center.text-gray-400 { color: var(--text-muted); } /* ── 6. tw-compat.css fallback (the 1 SR-2 page that loads it w/ !important) ─ */ .bg-white.rounded.shadow, .bg-white.rounded-lg.shadow { box-shadow: var(--card-shadow) !important; } /* ────────────────────────────────────────────────────────────────────────── * Tailwind button-colour utilities — fix invisible buttons. Templates put * bg--/text-white on buttons; without a background, text-white * buttons render white-on-white. These NON-!important rules give those * buttons their background everywhere the shell loads, both modes. * ────────────────────────────────────────────────────────────────────────── */ .text-white { color: var(--sc-white); } .bg-blue-500{background-color:var(--sc-tw-blue-500);} .bg-blue-600{background-color:var(--sc-tw-blue-600);} .bg-blue-700{background-color:var(--sc-tw-blue-700);} .bg-slate-500{background-color:var(--sc-tw-slate-500);} .bg-slate-600{background-color:var(--sc-tw-slate-600);} .bg-slate-700{background-color:var(--sc-tw-slate-700);} .bg-green-500{background-color:var(--sc-tw-green-500);} .bg-green-600{background-color:var(--sc-tw-green-600);} .bg-green-700{background-color:var(--sc-tw-green-700);} .bg-red-500{background-color:var(--sc-tw-red-500);} .bg-red-600{background-color:var(--sc-tw-red-600);} .bg-red-700{background-color:var(--sc-tw-red-700);} .bg-indigo-500{background-color:var(--sc-tw-indigo-500);} .bg-indigo-600{background-color:var(--sc-tw-indigo-600);} .bg-indigo-700{background-color:var(--sc-tw-indigo-700);} .bg-emerald-500{background-color:var(--sc-tw-emerald-500);} .bg-emerald-600{background-color:var(--sc-tw-emerald-600);} .bg-emerald-700{background-color:var(--sc-tw-emerald-700);} .bg-amber-500{background-color:var(--sc-tw-amber-500);} .bg-amber-600{background-color:var(--sc-tw-amber-600);} .bg-amber-700{background-color:var(--sc-tw-amber-700);} .bg-gray-500{background-color:var(--sc-tw-gray-500);} .bg-gray-600{background-color:var(--sc-tw-gray-600);} .bg-gray-700{background-color:var(--sc-tw-gray-700);} .bg-yellow-500{background-color:var(--sc-tw-yellow-500);} .bg-yellow-600{background-color:var(--sc-tw-yellow-600);} .bg-yellow-700{background-color:var(--sc-tw-yellow-700);} .bg-teal-600{background-color:var(--sc-tw-teal-600);} .bg-teal-700{background-color:var(--sc-tw-teal-700);} .bg-purple-600{background-color:var(--sc-tw-purple-600);} .bg-purple-700{background-color:var(--sc-tw-purple-700);} .bg-orange-500{background-color:var(--sc-tw-orange-500);} .bg-orange-600{background-color:var(--sc-tw-orange-600);} .bg-cyan-600{background-color:var(--sc-tw-cyan-600);} .bg-pink-600{background-color:var(--sc-tw-pink-600);} .hover\:bg-blue-700:hover{background-color:var(--sc-tw-blue-700);} .hover\:bg-green-700:hover{background-color:var(--sc-tw-green-700);} .hover\:bg-red-700:hover{background-color:var(--sc-tw-red-700);} .hover\:bg-slate-800:hover{background-color:var(--sc-tw-slate-800);} .hover\:bg-indigo-700:hover{background-color:var(--sc-tw-indigo-700);} .hover\:bg-emerald-700:hover{background-color:var(--sc-tw-emerald-700);} .hover\:bg-amber-700:hover{background-color:var(--sc-tw-amber-700);} .hover\:bg-gray-800:hover{background-color:var(--sc-tw-gray-800);} /* ════════════════════════════════════════════════════════════════════════ GUARANTEED LEGIBILITY NET — token-based + !important so it beats the Tailwind CDN + any theme cascade. Forces readable table text + action buttons in BOTH light and dark mode. Tokens (--text, --card-bg) are flipped by the shell per theme, so this is theme-correct. ════════════════════════════════════════════════════════════════════════ */ .sc-main table, .sr2-main table { background: var(--card-bg) !important; } .sc-main table thead, .sr2-main table thead { background: var(--card-border) !important; } .sc-main table th, .sr2-main table th { color: var(--text) !important; } .sc-main table td, .sr2-main table td { color: var(--text) !important; } .sc-main table tbody tr:hover, .sr2-main table tbody tr:hover { background: var(--card-border) !important; } .sc-main table a, .sr2-main table a { color: var(--sc-tw-blue-500) !important; } /* 919: status badges legible in light mode on ANY table — an explicit light tint + a DARK, guaranteed-contrast text for each variant (amber + muted are the worst offenders). */ .sr-badge--success { background-color: var(--scott-success-light) !important; color: var(--sc-badge-success-fg) !important; } .sr-badge--warning { background-color: var(--scott-warning-light) !important; color: var(--sc-badge-warning-fg) !important; } .sr-badge--danger { background-color: var(--scott-error-light) !important; color: var(--sc-badge-danger-fg) !important; } .sr-badge--info { background-color: var(--scott-primary-light) !important; color: var(--sc-badge-info-fg) !important; } .sr-badge--muted { background-color: var(--sc-badge-muted-bg) !important; color: var(--sc-badge-muted-fg) !important; } /* Action buttons that set text-white via Tailwind but may lose their bg: force a visible fill so white text is never on white. */ .sc-main a.bg-blue-600, .sc-main button.bg-blue-600, .sr2-main a.bg-blue-600, .sr2-main button.bg-blue-600 { background:var(--sc-tw-blue-600) !important; color:var(--sc-white) !important; } .sc-main a.bg-green-600, .sc-main button.bg-green-600, .sr2-main a.bg-green-600, .sr2-main button.bg-green-600 { background:var(--sc-tw-green-600) !important; color:var(--sc-white) !important; } .sc-main a.bg-slate-700, .sc-main button.bg-slate-700, .sr2-main a.bg-slate-700, .sr2-main button.bg-slate-700 { background:var(--sc-tw-slate-700) !important; color:var(--sc-white) !important; } .sc-main a.bg-slate-600, .sc-main button.bg-slate-600, .sr2-main a.bg-slate-600, .sr2-main button.bg-slate-600 { background:var(--sc-tw-slate-600) !important; color:var(--sc-white) !important; } .sc-main a.bg-slate-100, .sc-main button.bg-slate-100, .sr2-main a.bg-slate-100, .sr2-main button.bg-slate-100 { background:var(--sc-tw-slate-200) !important; color:var(--sc-tw-slate-900) !important; } .sc-main a.bg-yellow-600, .sc-main button.bg-yellow-600, .sr2-main a.bg-yellow-600, .sr2-main button.bg-yellow-600 { background:var(--sc-tw-yellow-600) !important; color:var(--sc-white) !important; } .sc-main a.bg-indigo-600, .sc-main button.bg-indigo-600, .sr2-main a.bg-indigo-600, .sr2-main button.bg-indigo-600 { background:var(--sc-tw-indigo-600) !important; color:var(--sc-white) !important; } .sc-main a.bg-amber-600, .sc-main button.bg-amber-600, .sr2-main a.bg-amber-600, .sr2-main button.bg-amber-600 { background:var(--sc-tw-amber-600) !important; color:var(--sc-white) !important; } .sc-main a.bg-red-600, .sc-main button.bg-red-600, .sr2-main a.bg-red-600, .sr2-main button.bg-red-600 { background:var(--sc-tw-red-600) !important; color:var(--sc-white) !important; } .sc-main a.bg-purple-600, .sc-main button.bg-purple-600, .sr2-main a.bg-purple-600, .sr2-main button.bg-purple-600 { background:var(--sc-tw-purple-600) !important; color:var(--sc-white) !important; } .sc-main a.bg-emerald-600,.sc-main button.bg-emerald-600,.sr2-main a.bg-emerald-600,.sr2-main button.bg-emerald-600{ background:var(--sc-tw-emerald-600) !important; color:var(--sc-white) !important; } .sc-main a.bg-orange-600, .sc-main button.bg-orange-600, .sr2-main a.bg-orange-600, .sr2-main button.bg-orange-600 { background:var(--sc-tw-orange-600) !important; color:var(--sc-white) !important; } .sc-main a.bg-orange-500, .sc-main button.bg-orange-500, .sr2-main a.bg-orange-500, .sr2-main button.bg-orange-500 { background:var(--sc-tw-orange-500) !important; color:var(--sc-white) !important; } .sc-main a.bg-teal-600, .sc-main button.bg-teal-600, .sr2-main a.bg-teal-600, .sr2-main button.bg-teal-600 { background:var(--sc-tw-teal-600) !important; color:var(--sc-white) !important; } .sc-main a.bg-cyan-600, .sc-main button.bg-cyan-600, .sr2-main a.bg-cyan-600, .sr2-main button.bg-cyan-600 { background:var(--sc-tw-cyan-600) !important; color:var(--sc-white) !important; } .sc-main a.bg-blue-500, .sc-main button.bg-blue-500, .sr2-main a.bg-blue-500, .sr2-main button.bg-blue-500 { background:var(--sc-tw-blue-500) !important; color:var(--sc-white) !important; } .sc-main a.bg-green-700, .sc-main button.bg-green-700, .sr2-main a.bg-green-700, .sr2-main button.bg-green-700 { background:var(--sc-tw-green-700) !important; color:var(--sc-white) !important; } /* 1979 — Work Punch actions own a token-backed surface. These semantic classes * contain ``scott-btn`` (opting out of the raw-button baseline) and resolve * entirely through the shared palette in both themes. */ .sc-main .timeclock-punch-action, .sr2-main .timeclock-punch-action { width: 100%; } .sc-main .timeclock-punch-action--work, .sr2-main .timeclock-punch-action--work { background-color: var(--scott-success); border-color: var(--scott-success); color: var(--scott-on-primary); } .sc-main .timeclock-punch-action--clock-out, .sr2-main .timeclock-punch-action--clock-out { background-color: var(--scott-error); border-color: var(--scott-error); color: var(--scott-on-error); } .sc-main .timeclock-punch-action--meal, .sr2-main .timeclock-punch-action--meal { background-color: var(--scott-warning); border-color: var(--scott-warning); color: var(--nav-bg); } .sc-main .timeclock-punch-action--break, .sr2-main .timeclock-punch-action--break { background-color: var(--scott-primary); border-color: var(--scott-primary); color: var(--scott-on-primary); } /* ════════════════════════════════════════════════════════════════════════════ * 1198 — SYSTEMIC form-control legibility (retires the per-report whack-a-mole) * scott_common auto-styles ONLY un-classed inputs; a control that carries * Tailwind utility classes falls through that guard and, in LIGHT mode, has NO * explicit ink → white-on-white. Pin the ink (and placeholder) of every CLASSED * text-ish form control in the main column to the theme-aware --input-text * token. INK ONLY — background/border untouched. Specificity (0,1,1) beats * Tailwind's single-class utilities with NO !important. * ════════════════════════════════════════════════════════════════════════════ */ .sc-main input[type="text"], .sc-main input[type="email"], .sc-main input[type="password"], .sc-main input[type="tel"], .sc-main input[type="number"], .sc-main input[type="date"], .sc-main input[type="time"], .sc-main input[type="datetime-local"], .sc-main input[type="month"], .sc-main input[type="week"], .sc-main input[type="url"], .sc-main input[type="search"], .sc-main input:not([type]), .sc-main select, .sc-main textarea, .sr2-main input[type="text"], .sr2-main input[type="email"], .sr2-main input[type="password"], .sr2-main input[type="tel"], .sr2-main input[type="number"], .sr2-main input[type="date"], .sr2-main input[type="time"], .sr2-main input[type="datetime-local"], .sr2-main input[type="month"], .sr2-main input[type="week"], .sr2-main input[type="url"], .sr2-main input[type="search"], .sr2-main input:not([type]), .sr2-main select, .sr2-main textarea { color: var(--input-text); } .sc-main input[type="text"]::placeholder, .sc-main input[type="email"]::placeholder, .sc-main input[type="password"]::placeholder, .sc-main input[type="tel"]::placeholder, .sc-main input[type="number"]::placeholder, .sc-main input[type="url"]::placeholder, .sc-main input[type="search"]::placeholder, .sc-main input:not([type])::placeholder, .sc-main textarea::placeholder, .sr2-main input[type="text"]::placeholder, .sr2-main input[type="email"]::placeholder, .sr2-main input[type="password"]::placeholder, .sr2-main input[type="tel"]::placeholder, .sr2-main input[type="number"]::placeholder, .sr2-main input[type="url"]::placeholder, .sr2-main input[type="search"]::placeholder, .sr2-main input:not([type])::placeholder, .sr2-main textarea::placeholder { color: var(--input-placeholder); } /* ════════════════════════════════════════════════════════════════════════ * DARK-MODE BADGE CONTRAST (Dan, 2026-07-18: "on the badges the text is not * visible in dark mode"). All rules are [data-theme="dark"]-scoped compounds * (0,3,0) so they beat tw_dark_compat (0,2,0), the Tailwind CDN utilities * (0,1,0), inline template