/* ============================================================================= * 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: micro-elevation on hover ---------------------- */ .insight-widget{ transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; } .insight-widget:hover{ transform: translateY(-1px); border-color: hsl(var(--primary) / .35) !important; box-shadow: 0 6px 18px -8px hsl(var(--primary) / .25) !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 icon a soft brand-blue home --------------- */ .empty-state svg, [class*="empty-state"] svg{ color: hsl(var(--primary) / .55) !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; } /* ---- 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; }