/* Tailwind dark-mode compat layer — remaps neutral Tailwind utilities * (bg-white / text-gray-* / bg-slate-100 / borders / chips) to legible dark * values under [data-theme="dark"] ONLY. Light mode untouched. All rules are * [data-theme="dark"]-scoped (specificity 0,2,0) so they beat both the * Tailwind Play CDN's bare utilities AND any earlier sr2_brand rule regardless * of @import position. See tw_dark_compat.css header for the full rationale. * (@import must precede style rules — only a comment may come before it.) */ @import url("./tw_dark_compat.css?v=2way2"); /* SR-2 brand polish overlay — v0.78.2 * * Loaded as ``brand.shell_css`` (branding.py) → linked LAST in * scott_common/shell/_shell.html (after scott_common's shell.css), so it * WINS the cascade on every one of SR-2's ~559 shell pages. * * Holds ONLY the brand deltas — navy accent, backdrop wash, card elevation, * brand-family gradients, focus ring, themed scrollbars. Layout stays in the * shared shell. This makes SR-2 on-brand immediately, even while Server A * still runs the older scott_common (0.76). Once scott_common >=0.78.0 is * deployed fleet-wide, this overlay is harmless/redundant. * * Tokens consumed: --card-shadow / --scott-transition (scott_common tokens), * --card-shadow-hover / --backdrop-wash (defined in recycling/css/theme.css, * which loads first). */ /* ── Accent system → brand navy (BRAND.md §2) ───────────────────────────── */ :root { --accent: #1E3A5F; --accent-soft: #E8EEF5; --accent-fg: #1E3A5F; --app-primary: #1E3A5F; --tint-ops: rgba(30,58,95,.08); --tint-cust: rgba(61,100,136,.10); --tint-sales: rgba(45,122,62,.10); --tint-trucks: rgba(201,148,26,.10); } [data-theme="dark"] { --accent: #6CA0DC; --accent-soft: rgba(108,160,220,.18); --accent-fg: #9DC3EC; } /* ── 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, rgba(30,58,95,.055) 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 ────────────────────────────────────────── */ .sr2-kpi, .sr2-panel, .sr2-recent { box-shadow: var(--card-shadow); } .sr2-kpi, .sr2-panel { transition: transform var(--scott-transition, 180ms ease), box-shadow var(--scott-transition, 180ms ease); } .sr2-kpi:hover { transform: translateY(-2px); box-shadow: var(--card-shadow-hover, 0 10px 24px -6px rgba(15,20,25,.14)); } .sr2-panel:hover { box-shadow: var(--card-shadow-hover, 0 10px 24px -6px rgba(15,20,25,.14)); } /* ── Brand-family KPI icons + department gradients (retire the rainbow) ──── */ .sr2-kpi--ops .sr2-kpi__icon { background: #1E3A5F; } .sr2-kpi--cust .sr2-kpi__icon { background: #3D6488; } .sr2-kpi--sales .sr2-kpi__icon { background: #2D7A3E; } .sr2-kpi--trucks .sr2-kpi__icon { background: #C9941A; } .sr2-grad--ops { background: linear-gradient(135deg, #1E3A5F, #15294A); } .sr2-grad--crm { background: linear-gradient(135deg, #3D6488, #1E3A5F); } .sr2-grad--sales { background: linear-gradient(135deg, #2D7A3E, #1f5a2c); } .sr2-grad--logistics{ background: linear-gradient(135deg, #C9941A, #a87a12); } .sr2-grad--compliance{ background: linear-gradient(135deg, #B33A3A, #8E2E2E); } .sr2-grad--reports { background: linear-gradient(135deg, #1E3A5F, #2D7A3E); } .sr2-grad--hr { background: linear-gradient(135deg, #3D6488, #2D7A3E); } .sr2-grad--marketing{ background: linear-gradient(135deg, #2D7A3E, #C9941A); } /* ── Brand-mark + avatar gradients ──────────────────────────────────────── */ .sr2-sb-brand-mark, .sr2-avatar { background: linear-gradient(135deg, #1E3A5F, #2D7A3E); } /* ── Accessible brand focus ring (BRAND.md §12) ─────────────────────────── */ :focus-visible { outline: 2px solid var(--accent, #1E3A5F); 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 ────────────────────────────────────── */ .sr2-recent td a { color: var(--accent, #1E3A5F); } [data-theme="dark"] .sr2-recent td a { color: var(--accent-fg, #9DC3EC); } /* ═══════════════════════════════════════════════════════════════════════════ * Content-element branding — this is what makes ordinary list / detail / form * pages (not just the dashboard) read as Scott Recycling. These elements are * everywhere: .card (236 templates), (435), .btn-primary (230). * sr2_brand.css loads LAST, so these win over Bootstrap + scott_common.css. * ═══════════════════════════════════════════════════════════════════════════ */ /* Bootstrap cards → elevated, rounded, brand hover lift. */ .card { border: 1px solid var(--card-border, #e2e8f0); border-radius: 12px; box-shadow: var(--card-shadow); transition: box-shadow var(--scott-transition, 180ms ease); } .card:hover { box-shadow: var(--card-shadow-hover, 0 10px 24px -6px rgba(15,20,25,.14)); } /* 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, #E8EEF5), rgba(45,122,62,.12)); border-bottom: 1px solid var(--card-border, #e2e8f0); font-weight: 600; } /* Primary action buttons → brand navy (Bootstrap 5.3 CSS-var theming). * --bs-btn-color is pinned WHITE here (not just in scott_common.css) so the * brand navy fill is self-contained: white text contrasts navy in BOTH light * and dark mode and can never collapse to the fill. sr2_brand.css loads last, * so these are the final word for SR-2. */ .btn-primary { --bs-btn-bg: #1E3A5F; --bs-btn-border-color: #1E3A5F; --bs-btn-color: #ffffff; --bs-btn-hover-color: #ffffff; --bs-btn-active-color: #ffffff; --bs-btn-disabled-color: #ffffff; --bs-btn-hover-bg: #15294A; --bs-btn-hover-border-color: #15294A; --bs-btn-active-bg: #15294A; --bs-btn-active-border-color: #15294A; --bs-btn-disabled-bg: #1E3A5F; --bs-btn-disabled-border-color: #1E3A5F; } /* 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: #1E3A5F; --bs-btn-border-color: #1E3A5F; --bs-btn-hover-color: #ffffff; --bs-btn-active-color: #ffffff; --bs-btn-hover-bg: #1E3A5F; --bs-btn-hover-border-color: #1E3A5F; --bs-btn-active-bg: #1E3A5F; --bs-btn-active-border-color: #1E3A5F; } [data-theme="dark"] .btn-outline-primary { --bs-btn-color: var(--accent-fg, #9DC3EC); --bs-btn-border-color: var(--accent-fg, #9DC3EC); } /* 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: #2D7A3E; --bs-btn-border-color: #2D7A3E; --bs-btn-color: #ffffff; --bs-btn-hover-color: #ffffff; --bs-btn-active-color: #ffffff; --bs-btn-disabled-color: #ffffff; --bs-btn-hover-bg: #246032; --bs-btn-hover-border-color: #246032; } /* btn-link → brand accent; flips light→dark via --accent so it always * contrasts the page surface. */ .btn-link { color: var(--accent, #1E3A5F); } [data-theme="dark"] .btn-link { color: var(--accent-fg, #9DC3EC); } /* Tables read branded — tinted, navy-ruled header row. */ .table thead th { background: var(--accent-soft, #E8EEF5); color: var(--text, #0F1419); border-bottom: 2px solid var(--scott-primary, #1E3A5F); font-weight: 600; } .table { --bs-table-hover-bg: var(--row-hover, rgba(15,23,42,.04)); } /* Every page title gets a navy accent bar — a consistent brand anchor. */ .sr2-header h1 { border-left: 4px solid var(--scott-primary, #1E3A5F); padding-left: 0.6rem; } /* Bootstrap badges/nav-pills/links that use the primary text color. */ .badge.bg-primary { background-color: #1E3A5F !important; } .nav-pills .nav-link.active { background-color: #1E3A5F; } .page-link { color: #1E3A5F; } .page-item.active .page-link { background-color: #1E3A5F; border-color: #1E3A5F; } /* ═══════════════════════════════════════════════════════════════════════════ * PUNCH (v0.78.1) — navy sidebar + login hero. The sidebar recolor is the * single biggest "premium app" upgrade. * ═══════════════════════════════════════════════════════════════════════════ */ /* Deep navy sidebar with light text (overrides the white --card-2 surface). */ .sr2-sidebar { background: #15294A; border-right: 1px solid rgba(255,255,255,.08); } .sr2-sb-head { border-bottom-color: rgba(255,255,255,.10); } .sr2-sb-brand-text { color: #fff; } .sr2-sb-subtitle { color: rgba(255,255,255,.62); } .sr2-sb-collapse { color: rgba(255,255,255,.72); } .sr2-sb-collapse:hover { background: rgba(255,255,255,.10); color: #fff; } .sr2-sb-item { color: rgba(255,255,255,.74); } .sr2-sb-item:hover { background: rgba(255,255,255,.08); color: #fff; } /* 1249 group headers (.sr2-sb-section-label) had NO rule anywhere, so they inherited the body text color — dark-on-navy = INVISIBLE in light mode (readable in dark mode only by luck). Style for the always-navy sidebar. */ .sr2-sb-section-label { color: rgba(255,255,255,.55); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; padding: 14px 14px 4px; } .sr2-sb-item.active { background: rgba(255,255,255,.12); color: #fff; border-left-color: var(--scott-recycling, #2D7A3E); } .sr2-sb-item--recent .sr2-sb-item__icon, .sr2-sb-item--recent .sr2-sb-label { opacity: .85; } .sr2-sb-foot { border-top-color: rgba(255,255,255,.10); } .sr2-sb-foot button.sr2-sb-item { color: rgba(255,255,255,.74); } /* Login hero — gradient by default; drops in a real photo if present at * /static/recycling/img/login-hero.jpg (graceful fallback to the gradient if * the file is absent). Targets the .scott-auth wrapper — no template fork. */ .scott-auth { min-height: 80vh; display: flex; align-items: center; justify-content: center; padding: 2.5rem 1rem; border-radius: 16px; background: linear-gradient(135deg, rgba(15,25,40,.80), rgba(20,55,42,.80)), url("/static/recycling/img/login-hero.jpg") center/cover no-repeat, linear-gradient(135deg, #15294A 0%, #21506e 55%, #2D7A3E 130%); } .scott-auth__brand { color: #fff; } .scott-auth__card { background: #fff; border-radius: 14px; box-shadow: 0 24px 60px rgba(0,0,0,.35); } .scott-auth__help { color: rgba(255,255,255,.85); } /* ═══════════════════════════════════════════════════════════════════════════ * GLOBAL BRAND POLISH — v0.78.2 (handoff 113, 2026-06-14) * * Coverage-gap fix: the rules above brand Bootstrap surfaces (.card, .table, * .btn-*, badges). But ~355 SR-2 templates render page sections with the * TAILWIND shell pattern `bg-white rounded shadow` — served by the Tailwind * CDN runtime that loads AFTER this sheet (scott_common shell line 94) and by * tw-compat.css on a single page. Those flat-white panels got NONE of the * home-page depth/color. This block brings the home-page quality to that * dominant Tailwind surface + the Tailwind report tables + page headers + * status colors + empty states. * * SCOPING / SPECIFICITY STRATEGY (no !important sprawl): * • Tailwind utilities from the CDN are single-class (0,1,0) selectors with * NO !important. A COMPOUND selector like `.bg-white.rounded.shadow` * (0,3,0) beats them on specificity regardless of source order — so we * win the cascade WITHOUT !important. * • We deliberately require the *combination* bg-white + rounded + shadow * (the real "panel" intent). A bare `.bg-white` chip or a `.shadow` button * is NOT matched, so we never over-apply depth to tiny utility elements. * • The 1 page that loads tw-compat.css (its .shadow/.rounded carry * !important) is handled by a small targeted !important fallback at the * end of this block — scoped to the same compound, not blanket. * • Dark mode keys off [data-theme="dark"] (SR-2's convention — NOT `.dark`, * which is the health_erp app). In dark mode literal `bg-white` panels * looked wrong (white slab on slate); we remap them to --card-bg. * ═══════════════════════════════════════════════════════════════════════════ */ /* ── 1. Tailwind panels: bg-white rounded shadow → elevated brand card ─────── */ /* Match the panel INTENT (white surface that is both rounded and shadowed), * not every white element. Compound specificity (0,3,0) wins over the CDN. */ .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, #e2e8f0); 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 (carries a hover: utility or * sits inside a link) — keeps static report blocks calm, lifts clickable tiles * to match the home panels. A plain non-interactive panel still gets the * resting elevation above. */ .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, 0 10px 24px -6px rgba(15,20,25,.14)) !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, #1e293b); border-color: var(--card-border, #334155); color: var(--text, #f1f5f9); } /* ── 2. Tailwind report tables: min-w-full bg-white rounded shadow ─────────── */ /* These tables already match the panel rule above (rounded+shadow). Add the * branded header row + row hover + hairline separators so they read like the * Bootstrap .table rules higher up. Header cells in these templates are a * of
; tint that header navy. */ table.min-w-full.bg-white thead tr, table.min-w-full.bg-white thead th { background: var(--accent-soft, #E8EEF5); color: var(--text, #0F1419); } table.min-w-full.bg-white thead th { border-bottom: 2px solid var(--scott-primary, #1E3A5F); font-weight: 600; } table.min-w-full.bg-white tbody tr:hover { background: var(--row-hover, rgba(15,23,42,.04)); } [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, rgba(108,160,220,.18)); color: var(--text, #f1f5f9); } [data-theme="dark"] table.min-w-full.bg-white tbody tr:hover { background: var(--row-hover, rgba(148,163,184,.10)); } /* ── 3. Page headers: Tailwind h1 → restrained navy→green accent bar ───────── */ /* Dominant header pattern is

. Give it the same * navy accent rail the shell .sr2-header h1 gets, so every page has a polished * header anchor rather than a bare bold line. Restrained: a left rail only. */ h1.text-2xl { border-left: 4px solid var(--scott-primary, #1E3A5F); padding-left: 0.6rem; line-height: 1.2; } /* Headers that already carry a brand color (e.g. text-green-800) keep their * color — only the rail is added, which complements them. */ /* ── 4. Status / badge brand-family colors (Tailwind utility tints) ────────── */ /* The tw-compat status tints are fine; nudge the common "soft pill" status * combos toward the brand family so status reads with color, not gray. These * are additive borders/weight — they don't fight the bg/text utilities. */ .bg-green-100.text-green-800, .bg-green-50.text-green-700 { border: 1px solid rgba(45,122,62,.30); } .bg-amber-100.text-amber-800, .bg-yellow-100.text-yellow-800 { border: 1px solid rgba(201,148,26,.30); } .bg-red-100.text-red-800, .bg-red-50.text-red-700 { border: 1px solid rgba(179,58,58,.30); } .bg-blue-100.text-blue-800, .bg-blue-50.text-blue-700 { border: 1px solid rgba(30,58,95,.25); } /* ── 5. Empty states: consistent muted, centered look ─────────────────────── */ /* The recurring empty-state cell is `text-center text-gray-500` inside a panel * or table. Give it a touch more breathing room + a softer brand-muted tone so * "no X yet" reads as an intentional state, not a layout gap. */ 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, #64748b); } [data-theme="dark"] td.text-center.text-gray-500, [data-theme="dark"] td.text-center.text-gray-400 { color: var(--text-muted, #94a3b8); } /* ── 6. tw-compat.css fallback (the 1 page that loads it w/ !important) ────── */ /* tw-compat's .shadow/.rounded carry !important, so the compound rule in §1 * can't win there on specificity alone. Re-assert the brand elevation for that * exact compound only — scoped, not blanket, so no !important sprawl. */ .bg-white.rounded.shadow, .bg-white.rounded-lg.shadow { box-shadow: var(--card-shadow) !important; } /* ────────────────────────────────────────────────────────────────────────── * Tailwind button-color utilities (2026-06-23) — fix invisible buttons. * Staff templates across the app put bg--/text-white on buttons, * but tw-compat.css (which defines them) is NOT loaded on the shell — its ~300 * !important rules would override styling fleet-wide. Without a background, * text-white buttons render white-on-white = invisible in light mode (e.g. * "Sell selected", "Search" on /inventory/). These NON-!important rules give * those buttons their background everywhere the shell loads, both modes. * ────────────────────────────────────────────────────────────────────────── */ .text-white { color: #fff; } .bg-blue-500{background-color:#3b82f6;} .bg-blue-600{background-color:#2563eb;} .bg-blue-700{background-color:#1d4ed8;} .bg-slate-500{background-color:#64748b;} .bg-slate-600{background-color:#475569;} .bg-slate-700{background-color:#334155;} .bg-green-500{background-color:#22c55e;} .bg-green-600{background-color:#16a34a;} .bg-green-700{background-color:#15803d;} .bg-red-500{background-color:#ef4444;} .bg-red-600{background-color:#dc2626;} .bg-red-700{background-color:#b91c1c;} .bg-indigo-500{background-color:#6366f1;} .bg-indigo-600{background-color:#4f46e5;} .bg-indigo-700{background-color:#4338ca;} .bg-emerald-500{background-color:#10b981;} .bg-emerald-600{background-color:#059669;} .bg-emerald-700{background-color:#047857;} .bg-amber-500{background-color:#f59e0b;} .bg-amber-600{background-color:#d97706;} .bg-amber-700{background-color:#b45309;} .bg-gray-500{background-color:#6b7280;} .bg-gray-600{background-color:#4b5563;} .bg-gray-700{background-color:#374151;} .bg-yellow-500{background-color:#eab308;} .bg-yellow-600{background-color:#ca8a04;} .bg-yellow-700{background-color:#a16207;} .bg-teal-600{background-color:#0d9488;} .bg-teal-700{background-color:#0f766e;} .bg-purple-600{background-color:#9333ea;} .bg-purple-700{background-color:#7e22ce;} .bg-orange-500{background-color:#f97316;} .bg-orange-600{background-color:#ea580c;} .bg-cyan-600{background-color:#0891b2;} .bg-pink-600{background-color:#db2777;} .hover\:bg-blue-700:hover{background-color:#1d4ed8;} .hover\:bg-green-700:hover{background-color:#15803d;} .hover\:bg-red-700:hover{background-color:#b91c1c;} .hover\:bg-slate-800:hover{background-color:#1e293b;} .hover\:bg-indigo-700:hover{background-color:#4338ca;} .hover\:bg-emerald-700:hover{background-color:#047857;} .hover\:bg-amber-700:hover{background-color:#b45309;} .hover\:bg-gray-800:hover{background-color:#1f2937;} /* ════════════════════════════════════════════════════════════════════════ GUARANTEED LEGIBILITY NET (2026-06-25) — token-based + !important so it beats the Tailwind CDN + any theme cascade. Forces readable inventory/ 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. ════════════════════════════════════════════════════════════════════════ */ .sr2-main table { background: var(--card-bg) !important; } .sr2-main table thead { background: var(--card-border) !important; } .sr2-main table th { color: var(--text) !important; } .sr2-main table td { color: var(--text) !important; } .sr2-main table tbody tr:hover { background: var(--card-border) !important; } .sr2-main table a { color: #3b82f6 !important; } /* 919 (re-scope of 896): keep status badges legible in light mode on ANY table. 896 scoped its badge fix under a `.sr2-main table` ancestor, but the `#sales-table` (bg-white) is NOT inside a `.sr2-main` container, so the rule never applied and the badges fell back to the base variant colors — whose accent text (amber `--scott-warning`, gray `--scott-muted`) is too light to read on the near-white tint. Fix: drop the `.sr2-main` scope so it applies everywhere, and use an explicit light tint + a DARK, guaranteed-contrast text for each variant (amber + muted are the worst offenders). `!important` + the `td{color:var(--text)}` net rule above is beaten by the explicit color here. The tint uses the scott_common token with a hardcoded fallback so it holds even where the tokens aren't loaded. */ .sr-badge--success { background-color: var(--scott-success-light, #E6F0E8) !important; color: #1B5E2A !important; } .sr-badge--warning { background-color: var(--scott-warning-light, #F8EFD8) !important; color: #7A5400 !important; } .sr-badge--danger { background-color: var(--scott-error-light, #F1DCDC) !important; color: #8E2E2E !important; } .sr-badge--info { background-color: var(--scott-primary-light, #E8EEF5) !important; color: #1E3A5F !important; } .sr-badge--muted { background-color: #EEF1F4 !important; color: #434B54 !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. */ .sr2-main a.bg-blue-600, .sr2-main button.bg-blue-600 { background:#2563eb !important; color:#fff !important; } .sr2-main a.bg-green-600, .sr2-main button.bg-green-600 { background:#16a34a !important; color:#fff !important; } .sr2-main a.bg-slate-700, .sr2-main button.bg-slate-700 { background:#334155 !important; color:#fff !important; } .sr2-main a.bg-slate-600, .sr2-main button.bg-slate-600 { background:#475569 !important; color:#fff !important; } .sr2-main a.bg-slate-100, .sr2-main button.bg-slate-100 { background:#e2e8f0 !important; color:#0f172a !important; } /* Remaining saturated action-button colors (light-mode legibility net cont.) */ .sr2-main a.bg-yellow-600, .sr2-main button.bg-yellow-600 { background:#ca8a04 !important; color:#fff !important; } .sr2-main a.bg-indigo-600, .sr2-main button.bg-indigo-600 { background:#4f46e5 !important; color:#fff !important; } .sr2-main a.bg-amber-600, .sr2-main button.bg-amber-600 { background:#d97706 !important; color:#fff !important; } .sr2-main a.bg-red-600, .sr2-main button.bg-red-600 { background:#dc2626 !important; color:#fff !important; } .sr2-main a.bg-purple-600, .sr2-main button.bg-purple-600 { background:#9333ea !important; color:#fff !important; } .sr2-main a.bg-emerald-600,.sr2-main button.bg-emerald-600{ background:#059669 !important; color:#fff !important; } .sr2-main a.bg-orange-600, .sr2-main button.bg-orange-600 { background:#ea580c !important; color:#fff !important; } .sr2-main a.bg-orange-500, .sr2-main button.bg-orange-500 { background:#f97316 !important; color:#fff !important; } .sr2-main a.bg-teal-600, .sr2-main button.bg-teal-600 { background:#0d9488 !important; color:#fff !important; } .sr2-main a.bg-cyan-600, .sr2-main button.bg-cyan-600 { background:#0891b2 !important; color:#fff !important; } .sr2-main a.bg-blue-500, .sr2-main button.bg-blue-500 { background:#3b82f6 !important; color:#fff !important; } .sr2-main a.bg-green-700, .sr2-main button.bg-green-700 { background:#15803d !important; color:#fff !important; } /* ════════════════════════════════════════════════════════════════════════════ * 1198 — SYSTEMIC form-control legibility (retires the per-report whack-a-mole) * ---------------------------------------------------------------------------- * THE BUG (fixed one-report-at-a-time in 858/896/959/1136/1149/1187): * Report pages render their content inside
. scott_common * auto-styles ONLY un-classed inputs (`.sr2-main input…:not([class])`, see * scott_common.css). A report control that carries Tailwind utility classes — * e.g. `` — * falls through that `:not([class])` guard. Its own classes set only DARK-mode * colors (or none), so in LIGHT mode it has NO explicit ink and renders * white-on-white / invisible. The Tailwind `dark:` variant keys off * prefers-color-scheme, NOT the app's `data-theme` toggle, so it can even fight * the chosen theme. Every prior fix was the SAME edit: bolt an explicit * theme-aware ink onto the offending control. ~28 report templates / 60+ inputs * still had it. This is the ONE chokepoint that covers them all: sr2_brand.css * is `brand.shell_css`, linked LAST on EVERY SR-2 shell page (incl. every * report), and `.sr2-main` wraps every report's `{% block content %}`. * * FIX: pin the ink (and placeholder) of every CLASSED text-ish form control in * `.sr2-main` to the app-theme `--input-text` token. That token flips on * `data-theme` (theme.css / tokens.css: light #0f172a → dark #f1f5f9), so the * text follows the APP toggle and is legible in BOTH modes regardless of the * template's partial/utility classes. This exactly generalizes the 6 hand-fixes. * * SCOPE / SAFETY: * - INK ONLY (color + ::placeholder). We do NOT touch background or border, so * the templates' intentional Tailwind bg/border utilities are untouched — * matching what all 6 prior per-report commits did (they only added ink). * - Text-ish controls only. Buttons / checkbox / radio / range / color / file / * submit / reset / image are excluded (they are not text fields). * - Specificity (0,1,1) beats Tailwind's single-class utilities (0,1,0) with NO * !important, so it wins the missing-ink case; where a template DID set an * explicit `text-*` on the control it is overridden to the same neutral themed * ink (a fix, never a regression). scott_common's Bootstrap `.form-control` * theming (0,2,0) still wins where it applies, so classed BS controls are * unaffected. * ════════════════════════════════════════════════════════════════════════════ */ .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, var(--text, #111827)); } .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, var(--text-muted, #6b7280)); } /* ════════════════════════════════════════════════════════════════════════ * DARK-MODE BADGE CONTRAST (2026-07-18, Dan report: "on the badges the * text is not visible in dark mode"). * * Root causes found by cascade audit: * 1. tw_dark_compat darkens `.bg-yellow-100` → #422006 but only remaps the * paired `.text-yellow-800`. Chips written with `text-yellow-900` / * `text-yellow-700` (e.g. the HIPAA badge on customer detail) keep dark * brown text on the dark brown surface → invisible. * 2. tw_dark_compat darkens `.bg-white` → #1e293b, but chips that pair * bg-white with a dark COLORED text utility (text-red-800/700, * text-emerald-700, text-amber-700, text-blue-700 — message pills on * scan consoles) aren't in its gray/slate remap table → dark-on-dark. * 3. Bootstrap 5.3 badge variants: `.badge` defaults to white text; the * shell flips data-bs-theme=dark but BS 5.3 does NOT flip * --bs-light-rgb/--bs-dark-rgb/semantic *-rgb, so we pin every variant * explicitly here as a guarantee (bg-light/bg-dark chips also blend * into the dark card surface without a lift/border). * 4. The status-strip punch pill keeps its LIGHT active tint (#ecfdf5) in * dark mode (`.is-active` is declared after the inline dark override, * same specificity) while its text uses var(--text) → light-on-light. * * 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