/* ============================================================================= * DarkRange — UI/UX redesign override (UI-ONLY, no backend touched). * Loaded LAST in , after the bundle's /assets/index-*.css. Works through * the app's shadcn HSL tokens plus targeted rules. Injected into BOTH portals. * * DIRECTION: * - Backgrounds: light = pure WHITE, dark = pure BLACK. * - ONE accent = the brand LOGO BLUE, used everywhere (buttons, links, active * nav, KPI rails, tool tiles, login, focus). All OTHER decorative colour is * removed. SECURITY data (severity badges + charts) keeps its colour. * - SIDE PANEL is an inverted high-contrast rail: near-BLACK in light mode, * near-WHITE in dark mode, with blue active states. The sidebar logo flips * opposite the content (handled in brand-redesign.js) so it always reads. * - Default for all/new unbranded users = this scheme (teal default removed in * brand-redesign.js). Per-tenant Settings → Branding colours still apply. * * Brand blue: #1456E0 hsl(221 83% 48%) (light) · #2f7bff hsl(217 92% 60%) (dark). * ========================================================================== */ /* ---- 1. Tokens ----------------------------------------------------------- */ :root{ --background: 0 0% 100%; /* pure white */ --foreground: 0 0% 9%; --card: 0 0% 100%; --card-foreground: 0 0% 9%; --popover: 0 0% 100%; --popover-foreground: 0 0% 9%; --primary: 221 83% 48%; /* brand blue */ --primary-foreground: 0 0% 100%; --secondary: 0 0% 96.1%; --secondary-foreground: 0 0% 12%; --muted: 0 0% 96.1%; --muted-foreground: 0 0% 40%; --accent: 221 83% 48%; --accent-foreground: 0 0% 100%; --destructive: 0 72% 48%; --destructive-foreground: 0 0% 100%; --border: 0 0% 89.5%; --input: 0 0% 89.5%; --ring: 221 83% 48%; --radius: .6rem; --glow-primary: 221 83% 48%; --glass-bg: 0 0% 100%; --glass-border: 0 0% 90%; --gradient-start: 221 83% 48%; --gradient-mid: 219 86% 52%; --gradient-end: 217 92% 56%; --dr-tile: 221 83% 48%; /* solid blue icon-tile (white glyph) */ /* companion accents from the brand-blue family (decorative variety) */ --dr-indigo: 243 75% 59%; /* #4F46E5 */ --dr-sky: 199 89% 48%; /* #0EA5E9 */ --dr-navy: 226 86% 16%; /* #061B4D logo navy */ /* side panel matches the APP background; hierarchy comes from FONT colours */ --sidebar-background: 0 0% 100%; --sidebar-foreground: 0 0% 25%; --sidebar-primary: 221 83% 48%; --sidebar-primary-foreground: 0 0% 100%; --sidebar-accent: 0 0% 96%; --sidebar-accent-foreground: 0 0% 9%; --sidebar-border: 0 0% 90%; --sidebar-ring: 221 83% 48%; --sidebar-glass-bg: 221 83% 48%; /* blue active tint base */ --sidebar-glass-border: 221 83% 48%; --sidebar-hover-bg: 0 0% 95.5%; --sidebar-ambient: 221 83% 48%; --sidebar-divider: 0 0% 82%; --sidebar-section-label: 0 0% 46%; --sidebar-text-default: 0 0% 30%; --sidebar-text-active: 221 83% 42%; --sidebar-icon-default: 0 0% 42%; --sidebar-icon-active: 221 83% 48%; } .dark{ --background: 0 0% 0%; /* pure black */ --foreground: 0 0% 98%; --card: 0 0% 8%; --card-foreground: 0 0% 98%; --popover: 0 0% 9%; --popover-foreground: 0 0% 98%; --primary: 217 92% 60%; /* brighter blue for black bg */ --primary-foreground: 0 0% 100%; --secondary: 0 0% 14%; --secondary-foreground: 0 0% 98%; --muted: 0 0% 14%; --muted-foreground: 0 0% 64%; --accent: 217 92% 60%; --accent-foreground: 0 0% 100%; --destructive: 0 72% 51%; --destructive-foreground: 0 0% 100%; --border: 0 0% 17%; --input: 0 0% 17%; --ring: 217 92% 60%; --glow-primary: 217 92% 60%; --glass-bg: 0 0% 8%; --glass-border: 0 0% 17%; --gradient-start: 221 83% 52%; --gradient-mid: 218 88% 56%; --gradient-end: 217 92% 62%; --dr-tile: 217 92% 58%; --dr-indigo: 239 84% 67%; /* #6366F1 brighter on black */ --dr-sky: 199 93% 60%; /* #38BDF8 */ --dr-navy: 222 60% 28%; /* side panel matches the APP background (black); FONT colours carry hierarchy */ --sidebar-background: 0 0% 0%; --sidebar-foreground: 0 0% 78%; --sidebar-primary: 217 92% 60%; --sidebar-primary-foreground: 0 0% 100%; --sidebar-accent: 0 0% 12%; --sidebar-accent-foreground: 0 0% 98%; --sidebar-border: 0 0% 15%; --sidebar-ring: 217 92% 60%; --sidebar-glass-bg: 217 92% 60%; --sidebar-glass-border: 217 92% 60%; --sidebar-hover-bg: 0 0% 10%; --sidebar-ambient: 217 92% 60%; --sidebar-divider: 0 0% 22%; --sidebar-section-label: 0 0% 56%; --sidebar-text-default: 0 0% 74%; --sidebar-text-active: 217 92% 68%; --sidebar-icon-default: 0 0% 62%; --sidebar-icon-active: 217 92% 64%; } body{ font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* ---- 2. Kill neon glows / scanlines; clean sidebar active ---------------- */ [class*="shadow-glow"]{ --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .06) !important; --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color) !important; box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), 0 1px 2px 0 rgb(0 0 0 / .06) !important; } .scanline-overlay{ display: none !important; } .animate-pulse-glow, [class*="neon"]{ animation: none !important; } .sidebar-nav-active{ box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: hsl(var(--sidebar-glass-bg) / .16) !important; border-color: hsl(var(--sidebar-glass-bg) / .32) !important; color: hsl(var(--sidebar-text-active)) !important; } /* ---- 3. Decorative GRADIENTS -> brand-family palette ---------------------- * Tailwind from-/via-/to- only affect gradient backgrounds — never solid * severity badges or chart SVG fills. Instead of flattening everything to one * blue, map each shipped hue family onto a curated brand-adjacent companion so * components stay interesting but cohesive on white AND black: * purple/violet/pink family -> INDIGO (--dr-indigo) * cyan/teal family -> SKY (--dr-sky) * warm + green families -> BRAND BLUE (--dr-tile) (colour = data only) */ [class*="from-purple-"],[class*="from-violet-"],[class*="from-fuchsia-"], [class*="from-pink-"],[class*="from-rose-"]{ --tw-gradient-from: hsl(var(--dr-indigo)) var(--tw-gradient-from-position) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, hsl(var(--dr-indigo))) !important; } [class*="from-cyan-"],[class*="from-teal-"]{ --tw-gradient-from: hsl(var(--dr-sky)) var(--tw-gradient-from-position) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, hsl(var(--dr-sky))) !important; } [class*="from-emerald-"],[class*="from-green-"],[class*="from-lime-"], [class*="from-yellow-"],[class*="from-amber-"],[class*="from-orange-"]{ --tw-gradient-from: hsl(var(--dr-tile)) var(--tw-gradient-from-position) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, hsl(var(--dr-tile))) !important; } [class*="via-purple-"],[class*="via-violet-"],[class*="via-fuchsia-"], [class*="via-pink-"],[class*="via-rose-"], [class*="via-cyan-"],[class*="via-teal-"],[class*="via-emerald-"], [class*="via-green-"],[class*="via-amber-"],[class*="via-orange-"]{ --tw-gradient-via: hsl(var(--dr-tile)) var(--tw-gradient-via-position) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-via), var(--tw-gradient-to, hsl(var(--dr-tile))) !important; } [class*="to-purple-"],[class*="to-violet-"],[class*="to-fuchsia-"], [class*="to-pink-"],[class*="to-rose-"]{ --tw-gradient-to: hsl(var(--dr-indigo)) var(--tw-gradient-to-position) !important; } [class*="to-cyan-"],[class*="to-teal-"]{ --tw-gradient-to: hsl(var(--dr-sky)) var(--tw-gradient-to-position) !important; } [class*="to-emerald-"],[class*="to-green-"],[class*="to-lime-"], [class*="to-yellow-"],[class*="to-amber-"],[class*="to-orange-"]{ --tw-gradient-to: hsl(217 92% 58%) var(--tw-gradient-to-position) !important; } /* signature brand gradient (logo navy -> royal -> bright) for hero tiles/CTAs */ .bg-gradient-primary{ background: linear-gradient(135deg, hsl(var(--dr-navy)), hsl(var(--primary)) 55%, hsl(217 92% 58%)) !important; } /* 3a. Opacity-modified decorative gradients/borders -> faint blue wash ------ */ [class*="cyan-500/"],[class*="cyan-400/"],[class*="purple-500/"],[class*="purple-400/"], [class*="violet-500/"],[class*="violet-400/"],[class*="fuchsia-500/"],[class*="pink-500/"], [class*="pink-400/"],[class*="indigo-500/"],[class*="teal-500/"],[class*="emerald-500/"], [class*="rose-500/"]{ --tw-gradient-from: hsl(var(--primary) / .06) var(--tw-gradient-from-position) !important; --tw-gradient-to: hsl(var(--primary) / 0) var(--tw-gradient-to-position) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; } [class*="border-cyan-500/"],[class*="border-purple-500/"],[class*="border-violet-500/"], [class*="border-fuchsia-500/"],[class*="border-pink-500/"],[class*="border-indigo-500/"], [class*="border-teal-500/"],[class*="border-emerald-500/"]{ border-color: hsl(var(--primary) / .18) !important; } /* 3b. Gradient-CLIP-TEXT headings -> solid ink (readable in both themes) ---- */ .bg-clip-text,[class*="bg-clip-text"]{ background: none !important; -webkit-text-fill-color: hsl(var(--foreground)) !important; color: hsl(var(--foreground)) !important; } /* ---- 4. KPI cards: rails + glyphs cycle the brand family ------------------ * Sibling cards rotate blue -> indigo -> sky -> navy: interesting, but every * hue is from the logo-blue family so it stays clean and professional. */ .insight-widget .absolute.left-0.rounded-r-full, .insight-widget [class*="w-[3px]"].absolute, .insight-widget [class*="w-[4px]"].absolute{ background: hsl(var(--primary)) !important; background-image: none !important; } .insight-widget [class*="rounded-[10px]"] svg{ color: hsl(var(--primary)) !important; } .insight-widget:nth-child(4n+2) .absolute.left-0.rounded-r-full, .insight-widget:nth-child(4n+2) [class*="w-[3px]"].absolute{ background: hsl(var(--dr-indigo)) !important; } .insight-widget:nth-child(4n+2) [class*="rounded-[10px]"] svg{ color: hsl(var(--dr-indigo)) !important; } .insight-widget:nth-child(4n+3) .absolute.left-0.rounded-r-full, .insight-widget:nth-child(4n+3) [class*="w-[3px]"].absolute{ background: hsl(var(--dr-sky)) !important; } .insight-widget:nth-child(4n+3) [class*="rounded-[10px]"] svg{ color: hsl(var(--dr-sky)) !important; } .insight-widget:nth-child(4n) .absolute.left-0.rounded-r-full, .insight-widget:nth-child(4n) [class*="w-[3px]"].absolute{ background: hsl(217 70% 38%) !important; } .insight-widget:nth-child(4n) [class*="rounded-[10px]"] svg{ color: hsl(217 70% 45%) !important; } /* matching tinted icon-tile per card -> visible, cohesive colour variety */ .insight-widget [class*="rounded-[10px]"]{ background: hsl(var(--primary) / .10) !important; border-color: hsl(var(--primary) / .22) !important; } .insight-widget:nth-child(4n+2) [class*="rounded-[10px]"]{ background: hsl(var(--dr-indigo) / .10) !important; border-color: hsl(var(--dr-indigo) / .22) !important; } .insight-widget:nth-child(4n+3) [class*="rounded-[10px]"]{ background: hsl(var(--dr-sky) / .10) !important; border-color: hsl(var(--dr-sky) / .22) !important; } .insight-widget:nth-child(4n) [class*="rounded-[10px]"]{ background: hsl(217 70% 42% / .12) !important; border-color: hsl(217 70% 42% / .26) !important; } .insight-widget [class*="bg-sky-"],.insight-widget [class*="bg-indigo-"], .insight-widget [class*="bg-violet-"],.insight-widget [class*="bg-purple-"],.insight-widget [class*="bg-emerald-"], .insight-widget [class*="bg-green-"],.insight-widget [class*="bg-teal-"],.insight-widget [class*="bg-cyan-"], .insight-widget [class*="bg-amber-"],.insight-widget [class*="bg-orange-"],.insight-widget [class*="bg-pink-"]{ background-color: hsl(var(--primary)) !important; } .insight-widget [class*="inset-y-0"][class*="rounded-full"], .insight-widget [class*="inset-y-0"].rounded-full{ background: hsl(var(--primary)) !important; background-image: none !important; } /* ---- 5. Decorative role badges -> blue tint ------------------------------ */ .sidebar-role-badge-owner, .sidebar-role-badge-admin, .sidebar-role-badge-manager{ color: hsl(var(--primary)) !important; background: hsl(var(--primary) / .12) !important; border-color: hsl(var(--primary) / .25) !important; } /* ---- 6. LOGIN / auth screen -> theme-aware white / pure black ------------- */ .dr-auth{ background: hsl(var(--background)) !important; } .dr-auth-light{ background-image: linear-gradient(hsl(221 83% 48% / .05) 1px, transparent 1px), linear-gradient(90deg, hsl(221 83% 48% / .05) 1px, transparent 1px) !important; background-size: 34px 34px, 34px 34px !important; background-position: center top !important; } .dr-auth-dark{ background-image: linear-gradient(hsl(217 92% 60% / .07) 1px, transparent 1px), linear-gradient(90deg, hsl(217 92% 60% / .07) 1px, transparent 1px) !important; background-size: 34px 34px, 34px 34px !important; background-position: center top !important; } .dr-auth-card{ background: hsl(var(--card)) !important; background-image: none !important; border: 1px solid hsl(var(--border)) !important; border-radius: 14px !important; box-shadow: 0 12px 34px -14px rgb(0 0 0 / .22) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } .dr-auth-card input{ background: hsl(var(--background)) !important; border: 1px solid hsl(var(--input)) !important; border-radius: 9px !important; padding: 10px 12px !important; color: hsl(var(--foreground)) !important; } .dr-auth-card input:focus{ border-color: hsl(var(--ring)) !important; box-shadow: 0 0 0 3px hsl(var(--ring) / .18) !important; outline: none !important; } .dr-auth button[type="submit"]{ background: hsl(var(--primary)) !important; background-image: none !important; color: hsl(var(--primary-foreground)) !important; box-shadow: none !important; } .dr-auth button[type="submit"] *{ color: hsl(var(--primary-foreground)) !important; } .dr-auth button[type="submit"]:hover{ filter: brightness(.93); } .dr-auth [class*="rounded-full"]{ opacity: .3 !important; } .dr-auth-card [class*="border-"].absolute{ border-color: hsl(var(--primary) / .3) !important; } .dr-auth [class*="text-blue-"],.dr-auth [class*="text-indigo-"],.dr-auth [class*="text-cyan-"]{ color: hsl(var(--primary)) !important; } /* ---- 7. Injected floating action buttons -> brand blue ------------------- */ #dr-scrci-fab, [id$="-fab"]{ background: hsl(var(--primary)) !important; background-image: none !important; color: hsl(var(--primary-foreground)) !important; border-color: hsl(var(--primary)) !important; box-shadow: 0 4px 14px -4px hsl(var(--primary) / .5) !important; } #dr-scrci-fab *, [id$="-fab"] *{ color: hsl(var(--primary-foreground)) !important; } /* ---- 7b. Branded loading screen (paired with fixLoading in JS) ------------ */ .dr-load-mark{ width: 44px; height: 44px; display: block; margin: 0 auto 14px; animation: dr-spin-soft 1.6s ease-in-out infinite; } @keyframes dr-spin-soft{ 0%{ transform: scale(1); opacity: 1; } 50%{ transform: scale(.92); opacity: .65; } 100%{ transform: scale(1); opacity: 1; } } /* ---- 7c. Tabs: brand-blue active state in both themes -------------------- */ [role="tab"][data-state="active"]{ color: hsl(var(--primary)) !important; border-color: hsl(var(--primary) / .35) !important; background: hsl(var(--primary) / .08) !important; box-shadow: inset 0 -2px 0 hsl(var(--primary)) !important; } [role="tab"]:not([data-state="active"]):hover{ color: hsl(var(--foreground)) !important; background: hsl(var(--foreground) / .05) !important; } /* ---- 7d. Outline/secondary buttons: visible, crisp edges in both themes -- */ button[class*="border-input"],button[class*="variant-outline"], [class*="btn-outline"]{ border-color: hsl(var(--border)) !important; } button[class*="border-input"]:hover{ border-color: hsl(var(--primary) / .45) !important; color: hsl(var(--primary)) !important; background: hsl(var(--primary) / .05) !important; } /* ---- 7e. Top-bar AI-credits pill: emerald -> brand blue ------------------- */ button[class*="bg-emerald-500/10"][class*="border-emerald-500/30"]{ color: hsl(var(--primary)) !important; background: hsl(var(--primary) / .10) !important; border-color: hsl(var(--primary) / .30) !important; } button[class*="bg-emerald-500/10"][class*="border-emerald-500/30"] *{ color: hsl(var(--primary)) !important; } /* ---- 7f. Theme-aware scrollbars (default white tracks glare on black) ----- */ *{ scrollbar-width: thin; scrollbar-color: hsl(var(--foreground) / .25) transparent; } ::-webkit-scrollbar{ width: 10px; height: 10px; } ::-webkit-scrollbar-track{ background: transparent; } ::-webkit-scrollbar-thumb{ background: hsl(var(--foreground) / .22); border-radius: 8px; border: 2px solid hsl(var(--background)); } ::-webkit-scrollbar-thumb:hover{ background: hsl(var(--foreground) / .35); } /* ---- 7g. Tables: calm header, gentle row hover ---------------------------- */ table thead th{ color: hsl(var(--muted-foreground)) !important; } table tbody tr{ transition: background-color .12s ease; } table tbody tr:hover{ background: hsl(var(--primary) / .045) !important; } /* ---- 7h. Interactive cards: premium depth + micro-elevation -------------- * A whisper-faint diagonal brand sheen gives the metric cards depth instead of * reading as flat boxes — tasteful, theme-aware, never noisy. */ .insight-widget{ transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; background-image: linear-gradient(135deg, hsl(var(--primary) / .035) 0%, transparent 42%) !important; } .insight-widget:hover{ transform: translateY(-1px); border-color: hsl(var(--primary) / .35) !important; box-shadow: 0 8px 22px -10px hsl(var(--primary) / .28) !important; } /* ---- 7i. Flat decorative tints follow the family mapping too -------------- * (text / slashed-opacity bg / border utilities; charts are SVG fills — safe. * Green/amber/red are status colours and stay.) */ [class*="text-purple-"],[class*="text-violet-"],[class*="text-fuchsia-"],[class*="text-pink-"]{ color: hsl(var(--dr-indigo)) !important; } [class*="text-cyan-"],[class*="text-teal-"]{ color: hsl(var(--dr-sky)) !important; } [class*="bg-purple-500/"],[class*="bg-purple-400/"],[class*="bg-violet-500/"], [class*="bg-fuchsia-500/"],[class*="bg-pink-500/"]{ background-color: hsl(var(--dr-indigo) / .12) !important; } [class*="bg-cyan-500/"],[class*="bg-cyan-400/"],[class*="bg-teal-500/"]{ background-color: hsl(var(--dr-sky) / .12) !important; } [class*="border-purple-"],[class*="border-violet-"],[class*="border-fuchsia-"],[class*="border-pink-"]{ border-color: hsl(var(--dr-indigo) / .3) !important; } [class*="border-cyan-"],[class*="border-teal-"]{ border-color: hsl(var(--dr-sky) / .3) !important; } /* ---- 7j. Empty states: give the illustration icon a soft brand home ------- * Large muted lucide icons (h-10..h-20 + muted/low-opacity) are empty-state * illustrations — tint them soft brand blue so zero-data screens feel designed, * not flat gray. Small action icons (h-4/h-5) never match, so they're safe. */ .empty-state svg, [class*="empty-state"] svg, svg[class*="h-10"][class*="text-muted-foreground"], svg[class*="h-12"][class*="text-muted-foreground"], svg[class*="h-14"][class*="text-muted-foreground"], svg[class*="h-16"][class*="text-muted-foreground"], svg[class*="h-20"][class*="text-muted-foreground"], svg[class*="h-10"][class*="opacity-40"], svg[class*="h-12"][class*="opacity-40"], svg[class*="h-16"][class*="opacity-40"]{ color: hsl(var(--primary) / .5) !important; opacity: .9 !important; } /* ---- 7k. Dialogs / popovers: crisp edges on white AND black --------------- */ [role="dialog"], [data-radix-popper-content-wrapper] > *{ border-color: hsl(var(--border)) !important; } [role="dialog"]{ box-shadow: 0 18px 50px -18px rgb(0 0 0 / .45) !important; } /* ---- 7l. Native form controls -> match the app (date / time / file) ------- */ input[type="date"], input[type="datetime-local"], input[type="time"], input[type="month"], input[type="week"]{ border: 1px solid hsl(var(--input)) !important; border-radius: 8px !important; padding: 8px 10px !important; background: hsl(var(--background)) !important; color: hsl(var(--foreground)) !important; font-family: inherit !important; } input[type="date"]:focus, input[type="datetime-local"]:focus, input[type="time"]:focus{ border-color: hsl(var(--ring)) !important; box-shadow: 0 0 0 3px hsl(var(--ring) / .18) !important; outline: none !important; } /* the picker glyph: tint toward brand and keep visible on black via color-scheme */ input::-webkit-calendar-picker-indicator{ opacity: .65; cursor: pointer; border-radius: 4px; } input::-webkit-calendar-picker-indicator:hover{ opacity: 1; } /* native file input button -> brand pill */ input[type="file"]{ color: hsl(var(--muted-foreground)) !important; } input[type="file"]::file-selector-button{ border: 1px solid hsl(var(--border)) !important; border-radius: 8px !important; padding: 6px 12px !important; margin-right: 12px !important; background: hsl(var(--secondary)) !important; color: hsl(var(--foreground)) !important; font-weight: 500 !important; cursor: pointer; transition: background-color .15s ease, border-color .15s ease; } input[type="file"]::file-selector-button:hover{ border-color: hsl(var(--primary) / .45) !important; color: hsl(var(--primary)) !important; background: hsl(var(--primary) / .06) !important; } /* ---- 7m. Chart harmonisation: OFF-BRAND series -> brand family ----------- * Recharts paints series with hardcoded hex in SVG fill/stroke/stop-color. * Severity hues (red/orange/amber/yellow + the blue/green used for Low/Open/ * Fixed) are MEANINGFUL and left as-is. Only the decorative non-severity * series — violet/purple/fuchsia/pink and cyan/teal — are remapped onto the * logo-blue companions (indigo / sky) so charts read on-brand in both themes. */ [fill="#8b5cf6" i],[fill="#7c3aed" i],[fill="#a855f7" i],[fill="#9333ea" i], [fill="#d946ef" i],[fill="#c026d3" i],[fill="#ec4899" i],[fill="#f472b6" i], [fill="#db2777" i],[fill="#a78bfa" i],[fill="#c084fc" i]{ fill: hsl(var(--dr-indigo)) !important; } [stop-color="#8b5cf6" i],[stop-color="#7c3aed" i],[stop-color="#a855f7" i], [stop-color="#9333ea" i],[stop-color="#d946ef" i],[stop-color="#ec4899" i], [stop-color="#f472b6" i],[stop-color="#a78bfa" i],[stop-color="#c084fc" i]{ stop-color: hsl(var(--dr-indigo)) !important; } [stroke="#8b5cf6" i],[stroke="#7c3aed" i],[stroke="#a855f7" i],[stroke="#9333ea" i], [stroke="#d946ef" i],[stroke="#ec4899" i],[stroke="#a78bfa" i]{ stroke: hsl(var(--dr-indigo)) !important; } [fill="#06b6d4" i],[fill="#0891b2" i],[fill="#22d3ee" i],[fill="#14b8a6" i], [fill="#2dd4bf" i],[fill="#0d9488" i]{ fill: hsl(var(--dr-sky)) !important; } [stop-color="#06b6d4" i],[stop-color="#22d3ee" i],[stop-color="#14b8a6" i], [stop-color="#2dd4bf" i],[stop-color="#0d9488" i]{ stop-color: hsl(var(--dr-sky)) !important; } [stroke="#06b6d4" i],[stroke="#22d3ee" i],[stroke="#14b8a6" i],[stroke="#2dd4bf" i]{ stroke: hsl(var(--dr-sky)) !important; } /* ---- 7n. Decorative ICON TILES in warm hues -> brand --------------------- * Square 40–48px icon tiles (rounded-xl/lg + h-10/h-12) that use a warm hue are * decoration, not severity (severity shows as PILLS, never as h-12 rounded-xl * tiles). Scope tightly to that tile signature so severity badges/KPIs stay. */ [class*="h-12"][class*="rounded-xl"][class*="bg-orange-500/"], [class*="h-12"][class*="rounded-xl"][class*="bg-amber-500/"], [class*="h-12"][class*="rounded-xl"][class*="bg-yellow-500/"], [class*="h-12"][class*="rounded-xl"][class*="bg-green-500/"], [class*="h-12"][class*="rounded-xl"][class*="bg-emerald-500/"], [class*="h-10"][class*="rounded-lg"][class*="bg-orange-500/"], [class*="h-10"][class*="rounded-lg"][class*="bg-amber-500/"], [class*="h-10"][class*="rounded-xl"][class*="bg-orange-500/"]{ background-color: hsl(var(--primary) / .12) !important; } [class*="h-12"][class*="rounded-xl"][class*="bg-orange-500/"] svg, [class*="h-12"][class*="rounded-xl"][class*="bg-amber-500/"] svg, [class*="h-12"][class*="rounded-xl"][class*="bg-yellow-500/"] svg, [class*="h-12"][class*="rounded-xl"][class*="bg-green-500/"] svg, [class*="h-12"][class*="rounded-xl"][class*="bg-emerald-500/"] svg, [class*="h-10"][class*="rounded-lg"][class*="bg-orange-500/"] svg, [class*="h-10"][class*="rounded-lg"][class*="bg-amber-500/"] svg{ color: hsl(var(--primary)) !important; } /* ---- 7o. Gradient ICON TILES -> one signature brand gradient ------------- * The square gradient tiles next to tool/page titles ship in random pairs * (orange→red, purple→pink, etc.). Even after the per-stop remap, an excluded * endpoint (e.g. to-red, protected for severity) can leave a blue→red tile. * Force every small square gradient tile to the SAME signature brand gradient * (logo navy → royal → bright) — cohesive, premium, and white glyphs read on it * in both themes. Scoped to icon-tile sizes so banners/charts are unaffected. */ [class*="bg-gradient-to-"][class*="rounded-2xl"][class*="h-16"], [class*="bg-gradient-to-"][class*="rounded-2xl"][class*="h-14"], [class*="bg-gradient-to-"][class*="rounded-2xl"][class*="h-12"], [class*="bg-gradient-to-"][class*="rounded-2xl"][class*="h-10"], [class*="bg-gradient-to-"][class*="rounded-xl"][class*="h-14"], [class*="bg-gradient-to-"][class*="rounded-xl"][class*="h-12"], [class*="bg-gradient-to-"][class*="rounded-xl"][class*="h-10"], [class*="bg-gradient-to-"][class*="rounded-lg"][class*="h-10"], [class*="bg-gradient-to-"][class*="rounded-lg"][class*="h-9"]{ background-image: linear-gradient(135deg, hsl(var(--dr-navy)), hsl(var(--primary)) 55%, hsl(217 92% 58%)) !important; } /* ---- 7p. Clickable cards: consistent premium hover ---------------------- * Give every clickable card (project / client / template / framework …) the * same gentle lift + brand-tinted shadow the KPI cards have, so the app feels * interactive, not static. Scoped to cursor-pointer rounded-xl/2xl so buttons * (rounded-md/lg) and static panels are unaffected. */ [class*="cursor-pointer"][class*="rounded-xl"], [class*="cursor-pointer"][class*="rounded-2xl"]{ transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; } [class*="cursor-pointer"][class*="rounded-xl"]:hover, [class*="cursor-pointer"][class*="rounded-2xl"]:hover{ transform: translateY(-2px); border-color: hsl(var(--primary) / .32) !important; box-shadow: 0 8px 22px -10px hsl(var(--primary) / .24) !important; } /* ---- 8. Focus ring ------------------------------------------------------- */ :where(a,button,input,textarea,select,[role="tab"],[tabindex]):focus-visible{ outline: 2px solid hsl(var(--ring) / .6); outline-offset: 2px; border-radius: 6px; } button:hover{ transition: background-color .15s ease, border-color .15s ease, color .15s ease, filter .15s ease; } /* ============================================================================= * 9. SIDEBAR — pure-ink text (white on black / black on white) + FLYOUT nav * ========================================================================== */ :root{ --sidebar-foreground:0 0% 9%; --sidebar-text-default:0 0% 9%; --sidebar-section-label:0 0% 9%; } .dark{ --sidebar-foreground:0 0% 100%; --sidebar-text-default:0 0% 100%; --sidebar-section-label:0 0% 100%; } .sidebar-section-header,.dr-rail-label,.dr-flyout-title{ color:hsl(var(--sidebar-foreground)) !important; opacity:1 !important; } .sidebar-nav-item,.sidebar-nav-item .truncate,.dr-rail-btn,.dr-rail-link,.dr-flyout a,.dr-flyout-item{ color:hsl(var(--sidebar-text-default)) !important; } .sidebar-nav-item svg,.dr-rail-btn svg,.dr-flyout-item svg{ color:hsl(var(--sidebar-text-default)) !important; } .dr-rail-active,.dr-rail-active svg,.dr-rail-active .dr-rail-label,.dr-flyout-active,.dr-flyout-active svg{ color:hsl(var(--sidebar-text-active)) !important; } /* FOUC prevention: hide stock sidebar nav items immediately (before JS builds * .dr-rail). Items stay in the DOM for proxy-click — only paint is suppressed. * The .dr-rail flyout, inserted as a sibling of nav, is unaffected. */ nav.sidebar-scroll > div, nav[class*="sidebar-scroll"] > div{ display:none !important; } /* Also hide the default section headers that flash during load */ .sidebar-section-header{ display:none !important; } /* ---- rail ---- */ .dr-rail{ display:flex; flex-direction:column; gap:2px; padding:8px; } .dr-rail-btn{ display:flex; align-items:center; gap:.6rem; width:100%; padding:9px 12px; border:1px solid transparent; border-radius:var(--radius); background:transparent; font:600 14px/1 Inter,system-ui,sans-serif; cursor:pointer; text-align:left; transition:background .15s ease,color .15s ease; } .dr-rail-btn:hover{ background:hsl(var(--sidebar-hover-bg)); } .dr-rail-btn .dr-rail-ico{ display:inline-flex; flex:0 0 auto; } .dr-rail-btn .dr-rail-ico svg{ width:20px; height:20px; } .dr-rail-btn .dr-rail-label{ flex:1 1 auto; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .dr-rail-btn .dr-rail-caret{ opacity:.5; font-size:16px; } .dr-rail-link .dr-rail-caret{ display:none; } .dr-rail-active{ background:hsl(var(--sidebar-glass-bg) / .16); border-color:hsl(var(--sidebar-glass-bg) / .32); } .dr-rail-btn:focus-visible{ outline:2px solid hsl(var(--sidebar-ring)); outline-offset:2px; } .dr-rail.dr-collapsed .dr-rail-label,.dr-rail.dr-collapsed .dr-rail-caret{ display:none; } .dr-rail.dr-collapsed .dr-rail-btn{ justify-content:center; padding:9px 0; } /* ---- flyout panel (body-level fixed layer so it escapes sidebar overflow) -- */ .dr-flyout-layer{ position:fixed; inset:0; pointer-events:none; z-index:60; } .dr-flyout{ position:fixed; min-width:230px; max-width:300px; max-height:80vh; overflow-y:auto; padding:8px; background:hsl(var(--sidebar-background)); border:1px solid hsl(var(--sidebar-border)); border-radius:12px; box-shadow:0 14px 40px -12px rgb(0 0 0 / .35); pointer-events:auto; opacity:0; transform:translateX(-6px); visibility:hidden; transition:opacity .14s ease,transform .14s ease,visibility .14s; } .dr-flyout.dr-open{ opacity:1; transform:translateX(0); visibility:visible; } .dr-flyout-title{ font:600 11px/1 Inter,system-ui,sans-serif; text-transform:uppercase; letter-spacing:1.1px; padding:4px 10px 10px; } .dr-flyout-item{ display:flex; align-items:center; gap:.6rem; padding:8px 10px; border-radius:8px; font:500 14px/1.1 Inter,system-ui,sans-serif; text-decoration:none; } .dr-flyout-item:hover{ background:hsl(var(--sidebar-hover-bg)); } .dr-flyout-item:focus-visible{ outline:2px solid hsl(var(--sidebar-ring)); outline-offset:-2px; } .dr-flyout-item .dr-flyout-ico{ display:inline-flex; flex:0 0 auto; } .dr-flyout-item .dr-flyout-ico svg{ width:18px; height:18px; } .dr-flyout-active{ background:hsl(var(--sidebar-glass-bg) / .16); border:1px solid hsl(var(--sidebar-glass-bg) / .32); } .dark .dr-flyout{ box-shadow:0 14px 40px -10px rgb(0 0 0 / .7); } /* ============================================================================= * 10. LOGIN — split-screen enterprise auth (overrides section 6) * ========================================================================== */ .dr-auth{ background: hsl(var(--background)) !important; background-image: none !important; display: grid !important; grid-template-columns: minmax(0,1.05fr) minmax(0,0.95fr) !important; min-height: 100vh !important; } .dr-auth-light, .dr-auth-dark{ background-image: none !important; } .dr-auth > div.absolute.inset-0{ display: none !important; } .dr-auth > div.relative.z-10{ grid-column: 2 !important; position: relative !important; background: hsl(var(--background)) !important; padding: 32px !important; } /* injected LEFT brand panel */ .dr-brandpanel{ grid-column: 1 !important; position: relative; overflow: hidden; display: flex; flex-direction: column; padding: 56px !important; color: #fff; background: radial-gradient(120% 90% at 0% 0%, hsl(217 92% 60% / .35) 0%, transparent 55%), linear-gradient(150deg, hsl(var(--dr-navy)) 0%, hsl(221 83% 30%) 45%, hsl(var(--primary)) 100%); } .dr-brandpanel::after{ content:""; position:absolute; inset:0; pointer-events:none; background-image: radial-gradient(rgb(255 255 255 / .9) 1px, transparent 1px); background-size: 28px 28px; opacity:.06; } .dr-brandpanel .dr-bp-logo{ height:34px; width:auto; object-fit:contain; position:relative; z-index:1; align-self:flex-start; } .dr-brandpanel .dr-bp-spacer{ flex:1 1 auto; } /* Hero tagline — bold catchy display treatment; "Weaponized." gets a light gradient accent. */ .dr-brandpanel .dr-bp-head{ position:relative; z-index:1; font-size:clamp(46px,4.6vw,62px); line-height:1.0; font-weight:800; letter-spacing:-.035em; margin:0 0 16px; max-width:none; } .dr-brandpanel .dr-bp-head .dr-bp-head-1{ color:#fff; } .dr-brandpanel .dr-bp-head .dr-bp-head-2{ background:linear-gradient(92deg,#eef3ff 0%,#a9c7ff 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:#cfe0ff; } .dr-brandpanel .dr-bp-sub{ position:relative; z-index:1; font-size:19px; line-height:1.5; font-weight:500; color:rgb(255 255 255 / .82); max-width:34ch; margin:0 0 34px; letter-spacing:-.01em; } .dr-brandpanel .dr-bp-list{ position:relative; z-index:1; display:flex; flex-direction:column; gap:14px; margin:0 0 8px; padding:0; list-style:none; } .dr-brandpanel .dr-bp-list li{ display:flex; align-items:center; gap:12px; font-size:14.5px; color:rgb(255 255 255 / .92); } .dr-brandpanel .dr-bp-list li i{ flex:0 0 auto; width:22px; height:22px; border-radius:7px; background:rgb(255 255 255 / .16); display:inline-flex; align-items:center; justify-content:center; color:#fff; } .dr-brandpanel .dr-bp-trust{ position:relative; z-index:1; margin-top:36px; font-size:12.5px; letter-spacing:.02em; color:rgb(255 255 255 / .55); } /* CARD: strip notch + decorative chrome, neutral surface */ .dr-auth-card{ width:100% !important; max-width:400px !important; margin:0 auto !important; clip-path:none !important; background:hsl(var(--card)) !important; background-image:none !important; border:1px solid hsl(var(--border)) !important; border-radius:16px !important; box-shadow:0 1px 2px rgb(0 0 0 / .04), 0 12px 32px -16px rgb(0 0 0 / .18) !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; padding:0 !important; } .dr-auth-dark .dr-auth-card{ box-shadow:0 12px 40px -16px rgb(0 0 0 / .6) !important; border-color:hsl(0 0% 16%) !important; } .dr-auth-card > .absolute{ display:none !important; } .dr-auth-card > div:not(.absolute){ padding:40px 40px 36px !important; } .dr-auth-card .h-px.w-6{ display:none !important; } .dr-auth-card .mb-8{ align-items:center !important; text-align:center !important; gap:10px !important; margin-bottom:22px !important; } .dr-auth-card .mb-8 img{ height:48px !important; } /* big, centered brand logo */ /* "The OffSecOps Platform" caption: "The"/"Platform" are hardcoded white-opacity * (text-white/35, text-white/55) — invisible on the white light-mode card. Bind * them to the theme's muted-foreground so the full statement reads in BOTH themes. */ .dr-auth-card [class*="text-white/35"]{ color:hsl(var(--muted-foreground) / .85) !important; } .dr-auth-card [class*="text-white/55"]{ color:hsl(var(--muted-foreground)) !important; } .dr-auth-card label{ font-size:13px !important; font-weight:600 !important; text-transform:none !important; letter-spacing:.01em !important; color:hsl(var(--foreground)) !important; margin-bottom:8px !important; } .dr-auth-card form .space-y-1 > div.group{ display:block !important; border-bottom:0 !important; position:relative; } .dr-auth-card form .group > div.shrink-0{ display:none !important; } .dr-auth-card form .group > div.absolute.bottom-0{ display:none !important; } .dr-auth-card input{ width:100% !important; height:44px !important; background:hsl(var(--card)) !important; color:hsl(var(--foreground)) !important; border:1px solid hsl(var(--border)) !important; border-radius:10px !important; padding:0 14px !important; font-size:15px !important; box-shadow:none !important; } .dr-auth-dark .dr-auth-card input{ background:hsl(0 0% 11%) !important; border-color:hsl(0 0% 18%) !important; } .dr-auth-card input::placeholder{ color:hsl(var(--muted-foreground) / .7) !important; } .dr-auth-card input:focus, .dr-auth-card input:focus-visible{ border-color:hsl(var(--ring)) !important; box-shadow:0 0 0 3px hsl(var(--ring) / .16) !important; outline:none !important; } .dr-auth-card form .group > button[type="button"]{ position:absolute !important; right:10px !important; top:50% !important; transform:translateY(-50%) !important; padding:4px !important; color:hsl(var(--muted-foreground)) !important; z-index:2; } .dr-auth-card form .group > button[type="button"]:hover{ color:hsl(var(--foreground)) !important; } .dr-auth-card form.space-y-6 > *{ margin-top:18px !important; } .dr-auth-card form.space-y-6 > *:first-child{ margin-top:0 !important; } /* sign-in button: flat, no arrow chip */ .dr-auth button[type="submit"]{ height:48px !important; margin-top:24px !important; border-radius:10px !important; background:hsl(var(--primary)) !important; background-image:none !important; color:hsl(var(--primary-foreground)) !important; font-size:15px !important; font-weight:600 !important; letter-spacing:0 !important; box-shadow:none !important; overflow:hidden !important; } .dr-auth button[type="submit"] *{ color:hsl(var(--primary-foreground)) !important; } .dr-auth button[type="submit"] .w-8.h-8{ display:none !important; } .dr-auth button[type="submit"]:hover{ filter:brightness(.96) !important; box-shadow:0 6px 18px -6px hsl(var(--primary) / .5) !important; } .dr-auth button[type="submit"]:active{ transform:translateY(1px); } .dr-auth button[type="submit"]:disabled{ opacity:.55 !important; } .dr-auth-card .mt-8{ margin-top:24px !important; font-size:12px !important; } .dr-auth [class*="rounded-full"]{ opacity:.3 !important; } .dr-auth [class*="text-blue-"],.dr-auth [class*="text-indigo-"],.dr-auth [class*="text-cyan-"]{ color:hsl(var(--primary)) !important; } .dr-card-heading{ text-align:center; } .dr-card-heading h2{ font-size:23px; font-weight:650; letter-spacing:-.012em; margin:0; color:hsl(var(--foreground)); } .dr-card-heading p, .dr-card-heading .dr-card-sub{ font-size:13.5px; margin:7px 0 0; color:hsl(var(--muted-foreground)); letter-spacing:.01em; } /* injected theme toggle */ #dr-auth-theme{ position:absolute !important; top:20px !important; right:20px !important; z-index:50 !important; width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center; border:1px solid hsl(var(--border)); border-radius:10px; background:hsl(var(--card)); color:hsl(var(--muted-foreground)); cursor:pointer; transition:background .15s, color .15s, border-color .15s; } #dr-auth-theme:hover{ color:hsl(var(--foreground)); border-color:hsl(var(--ring) / .5); background:hsl(var(--muted)); } #dr-auth-theme svg{ width:18px; height:18px; } .dr-auth-dark #dr-auth-theme{ background:hsl(0 0% 10%); border-color:hsl(0 0% 18%); } @media (max-width: 1023px){ .dr-auth{ display:block !important; } .dr-brandpanel{ display:none !important; } .dr-auth > div.relative.z-10{ grid-column:auto !important; min-height:100vh; } } /* ============================================================================= * SECTION 11 — Scan-detail consoles (Live Feed terminal) readability. * The Live Feed terminal (live-feed-override.js, classes .dr-lf-*) is a dark * console (bg #0b0f14) that stays dark in BOTH themes — correct for a terminal. * Its problem: several text roles were painted slate-600 (#4a5568) which is * near-invisible on the near-black panel (timestamps, the "Waiting…" empty * state, the top-right log label) and the muted-green output (#78a080) was * borderline. On the white page this reads as "nothing is visible". We brighten * every text role to clearly-readable values while preserving the dark-console * look + the existing colour hierarchy (cmd > out > timestamp). UI-only. * ============================================================================= */ /* Make the dark console feel like an intentional card on the white page. */ .dr-lf-terminal{ color:#d4ddea !important; /* base output text — crisp light slate */ border-color:hsl(217 33% 26%) !important; box-shadow:0 10px 30px -14px rgba(2,6,18,.55), inset 0 1px 0 rgba(255,255,255,.03) !important; } /* Timestamps: readable but secondary metadata (was #4a5568 → invisible). */ .dr-lf-terminal .dr-lf-ts{ color:#9aa7bd !important; } /* Command lines: brightest (primary content). */ .dr-lf-terminal .dr-lf-cmd{ color:#bcd6f0 !important; } /* Tool/script stdout: clearly-readable green (was #78a080). */ .dr-lf-terminal .dr-lf-out{ color:#9fd3ab !important; } /* Error lines stay red but ensure they pop on dark. */ .dr-lf-terminal .dr-lf-err{ color:#ff8f8f !important; } /* Empty / "Waiting for tool executions…" placeholder (was #4a5568). */ .dr-lf-empty{ color:#aeb9cb !important; } /* The top-right inline label (scan_command_log • ) is an inline-styled * span using the same dim slate — lift it via attribute match (beats inline). */ .dr-lf-wrap [style*="4a5568"], .dr-lf-wrap [style*="#4a5568"]{ color:#9aa7bd !important; } /* Spinner contrast on the dark console. */ .dr-lf-spinner{ border-color:#3a4a5e !important; border-top-color:#6db3ee !important; } /* Connecting/idle badge text already light; keep, just ensure full opacity. */ .dr-lf-badge{ opacity:1 !important; } /* ---- Bundle-native Live Feed console (chunk ContainerScanView, .bg-[#0a0e0a]) * This is a SECOND, always-dark emerald terminal on the scan page. It paints * its log lines with `text-muted-foreground` (used 182x) + dark `emerald-700`. * In LIGHT theme `--muted-foreground` resolves to a DARK slate, so every log * line rendered dark-on-near-black and vanished (the user's dim "supply-chain * -scan" line). Fix: inside this always-dark subtree, pin the dark-theme (light) * token values so the console stays readable in BOTH themes. UI-only. */ .bg-\[\#0a0e0a\]{ --muted-foreground:215 20% 72% !important; /* light slate, was dark in light theme */ --foreground:213 30% 92% !important; } .bg-\[\#0a0e0a\] .text-muted-foreground{ color:hsl(215 20% 72%) !important; } .bg-\[\#0a0e0a\] .text-emerald-700, .bg-\[\#0a0e0a\] [class*="text-emerald-700"]{ color:#34d399 !important; } .bg-\[\#0a0e0a\] .text-emerald-500\/60, .bg-\[\#0a0e0a\] .text-emerald-500\/70{ color:rgba(16,185,129,.92) !important; } /* the console header strip shares the emerald-900 border + black/40 bg */ .bg-\[\#0a0e0a\] .border-emerald-900\/40 .text-muted-foreground{ color:hsl(215 20% 72%) !important; } /* ============================================================================= * SECTION 12 — Unified, stable form/modal system. * Two problems made the create-scan / module forms look "distorted, unstable, * AI-generated": (A) an APP-WIDE bug where modals render off-centre with a * horizontal scrollbar, and (B) every form was built differently (mixed widths, * paddings, input styles) because they were migrated piecemeal. This section * fixes both. UI-only — no markup/behaviour change. * ============================================================================= */ /* ---- (A) Modal anchoring fix (the big one) -------------------------------- * `.page-transition` (the main content wrapper) runs `animation: …forwards * page-enter`, and `page-enter` animates `transform`. A forwards-filling * transform animation makes the element a CONTAINING BLOCK for every `fixed` * descendant — so modal overlays anchored to the content area (left = sidebar * width) instead of the viewport, shifting modals right and spawning a * horizontal scrollbar. We swap the keyframe for an opacity-only fade (opacity * does NOT create a containing block), keeping the entrance while letting fixed * overlays anchor to the viewport and centre correctly. */ @keyframes dr-page-enter{ from{ opacity:0; } to{ opacity:1; } } /* Broaden to any page-transition* wrapper (route variants); position:relative keeps * the absolute-positioning containing block while transform:none guarantees it is * NOT a fixed-positioning containing block, so fixed overlays anchor to the viewport. */ [class*="page-transition"]{ position:relative !important; transform:none !important; animation:.28s cubic-bezier(.33,1,.68,1) forwards dr-page-enter !important; } /* ---- (B) Unified modal shell ---------------------------------------------- * brand-redesign.js tags each create/edit modal overlay + card with * .dr-modal-overlay / .dr-modal. We normalise the chrome (scrim, width, radius, * shadow, border, surface) without touching each form's internal padding / * scroll / flex so no layout breaks. Both light + dark via tokens. */ .dr-modal-overlay{ position:fixed !important; inset:0 !important; z-index:120 !important; display:flex !important; align-items:center !important; justify-content:center !important; padding:1.25rem !important; background:rgb(15 23 42 / .45) !important; /* neutral scrim — dims in BOTH themes (was a white wash in light) */ -webkit-backdrop-filter:blur(6px) saturate(1.1) !important; backdrop-filter:blur(6px) saturate(1.1) !important; } /* Radix dialogs (Archetype C) keep their own bg-black/80 overlay; add matching frost. */ .dr-modal-scrim{ -webkit-backdrop-filter:blur(5px) saturate(1.05) !important; backdrop-filter:blur(5px) saturate(1.05) !important; } .dr-modal{ width:100% !important; max-width:42rem !important; /* one width for every wizard (was 2xl/3xl mix) */ background:hsl(var(--background)) !important; /* flat single surface (matches Archetype A); fields read via their border */ border:1px solid hsl(var(--border)) !important; border-radius:16px !important; box-shadow:0 24px 60px -18px rgb(15 23 42 / .35), 0 8px 24px -12px rgb(15 23 42 / .22) !important; } @media (min-width:640px){ .dr-modal{ max-height:90vh !important; } } /* don't clip footers on full-height mobile sheets */ .dr-modal.dr-modal-wide{ max-width:min(64rem, calc(100vw - 2.5rem)) !important; } /* opt-out for genuinely wide / table modals */ .dr-modal [class*="overflow-y-auto"]{ min-height:0 !important; } /* keep inner scroll boundaries sane */ .dark .dr-modal{ box-shadow:0 28px 70px -18px rgb(0 0 0 / .65), 0 0 0 1px hsl(var(--border)) !important; } /* Title: consistent across h2 (old) / h3 (new) archetypes. */ .dr-modal h1, .dr-modal h2, .dr-modal h3{ letter-spacing:-.012em !important; color:hsl(var(--foreground)) !important; } .dr-modal > div > h2:first-child, .dr-modal h2.text-xl, .dr-modal h3.text-xl{ font-size:1.2rem !important; font-weight:650 !important; } /* Section sub-labels / step copy. */ .dr-modal p.text-muted-foreground{ color:hsl(var(--muted-foreground)) !important; } /* ---- Unified form fields (the main consistency win) ----------------------- * Every text input, textarea, native select and shadcn SelectTrigger (a button * with justify-between) gets the SAME height, radius, border, surface, type * scale and focus ring — so a Network field and a Web-PT field look identical. */ .dr-modal input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([type="image"]):not([type="search"]), .dr-modal textarea, .dr-modal select, .dr-modal [role="combobox"], .dr-modal button[role="combobox"]{ min-height:40px !important; border:1px solid hsl(var(--input)) !important; border-radius:10px !important; background:hsl(var(--background)) !important; color:hsl(var(--foreground)) !important; font-size:14px !important; padding:8px 12px !important; box-shadow:none !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important; /* kill the half-baked input blur */ transition:border-color .15s, box-shadow .15s !important; } .dr-modal textarea{ min-height:84px !important; padding:10px 12px !important; line-height:1.5 !important; } .dr-modal input::placeholder, .dr-modal textarea::placeholder{ color:hsl(var(--muted-foreground) / .8) !important; } .dr-modal input:focus, .dr-modal input:focus-visible, .dr-modal textarea:focus, .dr-modal textarea:focus-visible, .dr-modal select:focus, .dr-modal [role="combobox"]:focus, .dr-modal [role="combobox"]:focus-visible, .dr-modal button[class*="justify-between"]:focus-visible{ outline:none !important; border-color:hsl(var(--primary)) !important; box-shadow:0 0 0 3px hsl(var(--primary) / .22) !important; } /* Field labels — uniform weight/size/spacing, but DON'T flatten inline * checkbox/radio/consent rows (labels that are flex or wrap their own input). */ .dr-modal label:not([class*="flex"]):not(:has(input)){ display:block !important; font-size:13px !important; font-weight:550 !important; color:hsl(var(--foreground)) !important; margin-bottom:6px !important; letter-spacing:.005em !important; } /* Each field group gets even rhythm regardless of the form's own spacing class. */ .dr-modal .space-y-2 > * + *{ margin-top:6px !important; } /* ---- Unified stepper ------------------------------------------------------ * Numbered pills already use --primary; normalise their size + the inactive * state so steppers read the same in every wizard. */ .dr-modal [class*="rounded-md"][class*="w-6"], .dr-modal [class*="rounded-full"][class*="w-6"], .dr-modal [class*="size-6"][class*="rounded"], .dr-modal [class*="w-7"][class*="rounded"], .dr-modal [class*="h-6"][class*="w-6"][class*="rounded"]{ width:24px !important; height:24px !important; border-radius:7px !important; font-weight:650 !important; } /* ---- Non-text controls — dropzones, checkbox / radio / switch ------------- * Excluded from the text-field block above; give them their own consistent * treatment so they don't clash with the boxed inputs. */ .dr-modal [class*="border-dashed"]{ border:1px dashed hsl(var(--input)) !important; border-radius:12px !important; background:hsl(var(--muted) / .3) !important; } .dr-modal [role="checkbox"], .dr-modal [role="radio"], .dr-modal [role="switch"]{ border:1px solid hsl(var(--input)) !important; } .dr-modal [role="checkbox"][data-state="checked"], .dr-modal [role="radio"][data-state="checked"], .dr-modal [role="switch"][data-state="checked"]{ background:hsl(var(--primary)) !important; border-color:hsl(var(--primary)) !important; } /* ---- Unified footer buttons ---------------------------------------------- * Consistent height/radius for the Back / Next / Cancel / Create row. */ .dr-modal button[class*="border-t"] , .dr-modal [class*="border-t"][class*="justify-between"]{ border-top-color:hsl(var(--border)) !important; } .dr-modal [class*="border-t"][class*="justify-between"] button, .dr-modal .pt-2 button, .dr-modal .pt-4 + * button{ min-height:40px !important; border-radius:10px !important; font-weight:550 !important; } /* Close control (× or "Close") — consistent muted icon-button, top-right. */ .dr-modal > button[class*="absolute"], .dr-modal button[aria-label="Close" i]{ color:hsl(var(--muted-foreground)) !important; border-radius:8px !important; } .dr-modal > button[class*="absolute"]:hover{ color:hsl(var(--foreground)) !important; background:hsl(var(--muted)) !important; } /* ============================================================================= * SECTION 13 — Injected report-export FAB (#dr-structured-export-fab). * Shipped as a fixed panel at z-index 2147483600 (max) with a saturated-blue * container, sharp 0px corners, and dark-navy/blue buttons — a foreign block * clashing on the white page (and floating over everything, incl. modals). * Reskin it as a calm, theme-aware floating panel with outline buttons; both * themes; drop the z-index below modal/overlay (120) so it can't cover dialogs. * ============================================================================= */ #dr-structured-export-fab{ z-index:55 !important; background:hsl(var(--card)) !important; border:1px solid hsl(var(--border)) !important; border-radius:14px !important; padding:7px !important; box-shadow:0 16px 40px -16px rgb(15 23 42 / .35) !important; display:flex !important; flex-direction:column !important; gap:6px !important; } .dark #dr-structured-export-fab{ box-shadow:0 18px 44px -16px rgb(0 0 0 / .6), 0 0 0 1px hsl(var(--border)) !important; } #dr-structured-export-fab > *{ background:hsl(var(--background)) !important; color:hsl(var(--foreground)) !important; border:1px solid hsl(var(--border)) !important; border-radius:9px !important; box-shadow:none !important; font-weight:550 !important; font-size:12px !important; padding:8px 14px !important; letter-spacing:.005em !important; transition:border-color .15s, color .15s, background .15s !important; } #dr-structured-export-fab > *:hover{ border-color:hsl(var(--primary)) !important; color:hsl(var(--primary)) !important; background:hsl(var(--primary) / .06) !important; } /* ============================================================================= * SECTION 14 — Normalise decorative gradient CTA buttons. * Some action buttons (e.g. "Create Your First Channel") use a decorative * cyan→purple gradient that renders as a heavy dark/navy block clashing on the * white empty-states, and is inconsistent with the app's solid brand-blue CTAs * (Add Team Member, Create Report, Add Finding…). Flatten gradient BUTTONS/links * to the solid primary so the CTA language is uniform. Scoped to interactive * elements only — decorative gradient banners/hero blocks are untouched. * ============================================================================= */ button[class*="bg-gradient-to-"][class*="from-cyan"], button[class*="bg-gradient-to-"][class*="from-purple"], button[class*="bg-gradient-to-"][class*="to-purple"], button[class*="bg-gradient-to-"][class*="to-cyan"], button[class*="bg-gradient-to-"][class*="from-violet"], button[class*="bg-gradient-to-"][class*="from-fuchsia"], a[role="button"][class*="bg-gradient-to-"][class*="from-cyan"], a[role="button"][class*="bg-gradient-to-"][class*="to-purple"]{ background-image:none !important; background-color:hsl(var(--primary)) !important; color:hsl(var(--primary-foreground)) !important; border-color:transparent !important; } button[class*="bg-gradient-to-"][class*="from-cyan"]:hover, button[class*="bg-gradient-to-"][class*="from-purple"]:hover, button[class*="bg-gradient-to-"][class*="to-purple"]:hover, button[class*="bg-gradient-to-"][class*="to-cyan"]:hover{ background-color:hsl(var(--primary) / .9) !important; } /* ============================================================================= * SECTION 15 — Findings list performance: content-visibility + contain * Prevents browser from painting 100+ off-screen finding cards at once. * ============================================================================= */ [class*=AccordionItem], [data-state][class*=border] { content-visibility: auto; contain-intrinsic-size: auto 120px; }