/* YVAI brand re-tokenization of Metronic Layout-14. Loaded AFTER assets/css/styles.css so these custom-property values win the cascade — styles.css itself is never edited, so a future Metronic version bump is a drop-in file replacement. This file used to carry a placeholder "CodeSoko" brand guess (Deep Navy/Signal Blue) because no logo asset existed yet; it now derives its palette straight from the supplied YVAI logo (src/YVAI.Web/wwwroot/YVAI logo.png), sampled to these hex values: YVAI Blue #4C90F0 — the "Y" mark's upper-left arm YVAI Orange #E8890A — the mark's crown / the "Voices" wordmark YVAI Yellow #F8C820 — the mark's right arm YVAI Red #E23820 — the mark's base / the "& Action" wordmark Brand roles: Ink #1C2430 — foreground/text (a soft near-black, not pure black) Canvas #F5F7FB — app background (light mode), a cool near-white that lets the saturated brand hues carry the color Primary #2E6FE0 — YVAI Blue, deepened ~2 steps for AA contrast (4.7:1) against white when used as a filled button/link; the true logo blue (--brand-blue) stays available for badges, icon chips, and other large surfaces. */ :root { --background: #F5F7FB; --foreground: #1C2430; --card: #FFFFFF; --card-foreground: #1C2430; --popover: #FFFFFF; --popover-foreground: #1C2430; --primary: #2E6FE0; --primary-foreground: #FFFFFF; --secondary: #EAF1FD; --secondary-foreground: #1B4ED1; --muted: #EEF1F6; --muted-foreground: #667085; --accent: #FFF1DC; --accent-foreground: #9A5B00; --destructive: #DE2A1B; --destructive-foreground: #FFFFFF; --border: #E3E7EF; --input: #E3E7EF; --ring: #2E6FE0; --radius: 0.75rem; /* Brand tokens (not part of Metronic's default set) sampled straight from the logo, for bespoke chrome — icon chips, sidebar/login accents, the header's brand stripe — that wants the exact logo hues rather than the deepened, AA-safe --primary/--destructive pair above. */ --brand-blue: #4C90F0; --brand-orange: #E8890A; --brand-yellow: #F8C820; --brand-red: #E23820; --brand-blue-tint: #EAF1FD; --brand-orange-tint: #FDECD3; --brand-yellow-tint: #FDF3D3; --brand-red-tint: #FBE0DC; /* Raw Tailwind color-ramps that some kt- components (outline/light badge variants) read from directly instead of the semantic --primary/ --destructive tokens — rebuilt around the brand hues so "primary" and "danger" stay on-brand everywhere, not just on buttons/links. */ --color-blue-50: #EEF4FE; --color-blue-100: #DCE9FD; --color-blue-500: #4C90F0; --color-blue-600: #2E6FE0; --color-blue-700: #1E56B8; --color-blue-800: #163F86; --color-blue-950: #0C2447; --color-red-50: #FDECEA; --color-red-100: #FBD5CF; --color-red-500: #E8543F; --color-red-600: #DE2A1B; --color-red-700: #B21F13; --color-red-800: #8A170E; --color-red-950: #4A0B06; --color-yellow-50: #FFFBEB; --color-yellow-100: #FEF3C7; --color-yellow-200: #FDE9A0; --color-yellow-400: #F8C820; --color-yellow-500: #E8B10E; --color-yellow-600: #C6900A; --color-yellow-700: #966D08; --color-yellow-800: #6E4F06; --color-yellow-950: #3D2A02; } .dark { --background: #10151F; --foreground: #EAEEF6; --card: #171E2B; --card-foreground: #EAEEF6; --popover: #171E2B; --popover-foreground: #EAEEF6; --primary: #4C90F0; --primary-foreground: #0B1220; --secondary: #1E2636; --secondary-foreground: #BFD4F9; --muted: #1B2230; --muted-foreground: #8B95A7; --accent: #2B2013; --accent-foreground: #F3B65A; --destructive: #F0473A; --destructive-foreground: #12080A; --border: #262E3D; --input: #262E3D; --ring: #4C90F0; --brand-blue: #5B9CF5; --brand-orange: #F0900A; --brand-yellow: #F8C820; --brand-red: #F0473A; --brand-blue-tint: #1E2636; --brand-orange-tint: #2B2013; --brand-yellow-tint: #2B2410; --brand-red-tint: #2B1512; /* --color-blue-*/--color-red-*/--color-yellow-* deliberately NOT redefined here: styles.css never redefines these raw Tailwind ramps under .dark either (only the semantic --primary/--background/etc. tokens above flip) — a dark badge already gets its dark-mode look from :is(.dark *) rules that pick different rungs of the *same* invariant ramp (e.g. `border-color: var(--color-blue-950)` alongside a lighter `color: var(--color-blue-600)`), so redefining the ramp per-theme here would fight that and invert every primary/danger badge in dark mode. */ } /* --------------------------------------------------------------------------- Typography: Inter stays the workhorse body/UI face (dense tables and forms read best on it), but headings and other brand moments (page titles, card titles, the login heading) switch to Plus Jakarta Sans — a rounder, friendlier geometric face that better matches the logo's playful mark without sacrificing the professional feel the rest of the app needs. Both are loaded from Google Fonts in index.html. --font-sans itself was never actually applied anywhere despite Inter being loaded since the very first pass (flagged as a TODO in index.html to self-host it) — styles.css's own default is the generic `ui-sans-serif, system-ui, sans-serif` stack, and until this file removed it, app.css's unlayered `html, body { font-family: 'Helvetica Neue', ... }` silently won the cascade over the (layered) Tailwind default, so the app never actually rendered in Inter. Overriding --font-sans here — the same token styles.css's own `html { font-family: var(--default-font-family) }` base rule reads from — is what actually turns the Google Fonts link into the rendered body font. */ :root { --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; --font-display: "Plus Jakarta Sans", var(--font-sans); } /* --------------------------------------------------------------------------- Layout: index.html's is `display:flex` (Tailwind's `flex` class, part of the original scaffold) with Blazor's #app div as its one child — but #app itself never got a width/flex-grow rule, so as a flex item it defaults to shrinking to its content's intrinsic width instead of filling the viewport. MainLayout hides this (Sidebar/TopBar are `position:fixed`, so they ignore #app's box entirely), but it's fully exposed on AuthLayout, where there's no fixed chrome to mask it: the centered card ends up pinned near the left edge instead of centered on the page, confirmed by screenshotting the running app. Found while re-theming AuthLayout, but the fix belongs at the #app level since both layouts sit inside it. */ #app { width: 100%; } h1, h2, h3, .kt-card-title, .kt-dialog-title, .font-display { font-family: var(--font-display); letter-spacing: -0.01em; } /* --------------------------------------------------------------------------- A soft shadow scale used by the cards/components below — Metronic's own cards ship with a hairline border only, which reads flat on a modern dashboard; a low, cool-toned shadow gives surfaces some lift without turning skeuomorphic. */ :root { --shadow-card: 0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.06); --shadow-card-hover: 0 4px 10px rgba(16, 24, 40, 0.07), 0 2px 4px rgba(16, 24, 40, 0.06); } .dark { --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.24), 0 1px 3px rgba(0, 0, 0, 0.3); --shadow-card-hover: 0 6px 16px rgba(0, 0, 0, 0.32), 0 2px 6px rgba(0, 0, 0, 0.28); } .kt-card { box-shadow: var(--shadow-card); transition: box-shadow 200ms ease; } /* --------------------------------------------------------------------------- Brand stripe: a thin four-color band (echoing the logo's own blue/orange/ yellow/red palette) used under the header and behind the auth card. Applied via a utility class rather than baked into the header itself so it can be reused (e.g. AuthLayout). */ .yvai-brand-stripe { height: 3px; background: linear-gradient( 90deg, var(--brand-blue) 0%, var(--brand-blue) 25%, var(--brand-orange) 25%, var(--brand-orange) 50%, var(--brand-yellow) 50%, var(--brand-yellow) 75%, var(--brand-red) 75%, var(--brand-red) 100% ); } /* Header variant: overlaid on the fixed header's own bottom border instead of sitting in normal flow, so it adds a brand accent without adding height that would throw off every --header-height offset elsewhere. */ .yvai-brand-stripe-header { position: absolute; left: 0; right: 0; bottom: 0; } /* Small brand mark (TopBar's collapsed-rail logo slot): the source PNG isn't square, so plain height/width utilities would stretch it — object-fit isn't among the utilities styles.css happens to compile in, hence a dedicated rule instead of guessing at Tailwind class names it may not have. */ .yvai-mark-icon { height: 2rem; width: auto; object-fit: contain; } /* Icon chips used by StatCard and similar summary tiles — a 4-way rotation through the brand palette so a row of stats reads as colorful/branded rather than a wall of identical gray boxes. */ .yvai-chip-blue { background: var(--brand-blue-tint); color: var(--brand-blue); } .yvai-chip-orange { background: var(--brand-orange-tint); color: var(--brand-orange); } .yvai-chip-yellow { background: var(--brand-yellow-tint); color: color-mix(in srgb, var(--brand-yellow) 55%, #6E4F06); } .yvai-chip-red { background: var(--brand-red-tint); color: var(--brand-red); } /* --------------------------------------------------------------------------- AuthLayout (login/logout): a centered panel over a softly brand-tinted background — four faint radial washes in the logo's own hues rather than a flat gray page, so the very first screen a user sees reads as YVAI's, not generic Metronic. Custom classes throughout rather than Tailwind utilities: styles.css is a pre-built bundle that only carries the specific utility classes Layout-14's own markup used, so one-off needs like max-width or this background go here instead of guessing at class names that may not have been compiled in (verified against the bundle: e.g. max-w-md, mt-8, and shadow-lg all render as no-ops today). */ .yvai-auth-shell { min-height: 100vh; width: 100%; display: flex; align-items: center; justify-content: center; padding: 2rem 1.25rem; background: radial-gradient(circle at 12% 18%, var(--brand-blue-tint) 0%, transparent 42%), radial-gradient(circle at 88% 12%, var(--brand-orange-tint) 0%, transparent 38%), radial-gradient(circle at 82% 88%, var(--brand-red-tint) 0%, transparent 42%), radial-gradient(circle at 10% 88%, var(--brand-yellow-tint) 0%, transparent 38%), var(--background); } .yvai-auth-panel { width: 100%; max-width: 26rem; } .yvai-auth-brand { display: flex; justify-content: center; } .yvai-auth-logo { height: 3.25rem; width: auto; } .yvai-auth-stripe { width: 4rem; margin: 1.25rem auto 1.75rem; border-radius: 999px; overflow: hidden; } .yvai-auth-footnote { margin-top: 1.5rem; text-align: center; font-size: 0.75rem; color: var(--muted-foreground); } .yvai-auth-card { box-shadow: var(--shadow-card-hover); border-color: transparent; } /* --------------------------------------------------------------------------- A solid brand-blue button, mirroring .kt-btn-mono's structure (styles.css compiles solid mono/destructive/secondary variants but no solid "primary" — only outline/ghost ones reference --primary) for the handful of CTAs where the on-brand blue should read as more inviting than the mono/black button used for utility actions elsewhere (e.g. the login submit). */ .kt-btn-brand { background-color: var(--primary); color: var(--primary-foreground); } @media (hover: hover) { .kt-btn-brand:hover { background-color: color-mix(in oklab, var(--primary) 90%, transparent); } } .kt-btn-brand.active { background-color: color-mix(in oklab, var(--primary) 90%, transparent); } /* --------------------------------------------------------------------------- StatCard / StatusBreakdown: both were a bare bordered box with no lift or color — every dashboard's summary row looked like unstyled placeholders. This gives them the same soft elevation as .kt-card plus, for StatCard, an optional colored icon chip (see .yvai-chip-*) so a row of stats reads as a deliberately colorful, branded dashboard rather than a gray grid. */ .yvai-stat-card { display: flex; align-items: flex-start; gap: 0.875rem; border-radius: var(--radius); border: 1px solid var(--border); background: var(--card); padding: 1rem; box-shadow: var(--shadow-card); transition: box-shadow 200ms ease, transform 200ms ease; } .yvai-stat-card:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-1px); } .yvai-stat-icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 2.25rem; height: 2.25rem; border-radius: calc(var(--radius) - 2px); font-size: 1.125rem; } .yvai-stat-body { min-width: 0; } .yvai-stat-value { margin-top: 0.125rem; font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; color: var(--foreground); overflow-wrap: break-word; } .yvai-status-breakdown { flex-direction: column; align-items: stretch; } /* --------------------------------------------------------------------------- Sidebar accordion "selected" nav item: styles.css's own .kt-accordion-selected\:bg-primary / :text-primary-foreground utilities (SidebarMenuAccordion.razor's `kt-accordion-selected:*` classes) and .kt-accordion-menu-link's own base rules resolve to the *same* selector shape once matched against our actual markup (`
  • `) — `[data-kt-accordion-initialized] .selected .kt-accordion-menu-link` and `[data-kt-accordion-initialized] .selected .kt-accordion-selected\:bg-primary` are both 0-3-0 specificity, so which one wins is at the mercy of the vendor bundle's internal @layer/utility ordering. In practice the background utility wins (the pill goes blue) but the text-color one doesn't (it stays --foreground, the same near-black used everywhere else), leaving near-invisible dark text on a brand-blue pill. Forcing both here — unlayered, so it isn't subject to that ordering — instead of depending on the variant classes. */ [data-kt-accordion-initialized] .selected .kt-accordion-menu-link, [data-kt-accordion-initialized] .kt-accordion-menu-link.selected { background-color: var(--primary); color: var(--primary-foreground); } [data-kt-accordion-initialized] .selected .kt-accordion-menu-link i, [data-kt-accordion-initialized] .kt-accordion-menu-link.selected i { color: var(--primary-foreground); }