/*
 * Transparity brand foundation.
 *
 * Single source of truth for portal + module visual identity. Anything that wants
 * to look like Transparity reads from these tokens; do not hard-code brand colours
 * in component CSS.
 *
 * Palette (brand book v1.0 page 19):
 *   navy    #242a58   primary surfaces, text on light, app bar start
 *   sky     #5abdd9   accents, app bar end, gradient hover states
 *   orange  #ff6200   call-out / status warm
 *   yellow  #fecd10   primary CTA fill, brand highlight
 *   green   #2c9b63   the single brand green: positive / success status
 *   red     #e41b1a   the single brand red: negative / critical status
 *
 * Per the marketing review (2026-06-16): there is ONE green (#2c9b63) and ONE red
 * (#e41b1a) across the portal. No other shades of red or green are used — soft
 * status backgrounds are on-hue translucent tints of these two values.
 */

:root {
  /* Brand palette */
  --brand-navy: #242a58;
  --brand-navy-50: #f1f2f7;
  --brand-navy-100: #d8dae6;
  --brand-navy-200: #aab0c8;
  --brand-navy-700: #1c2147;
  --brand-navy-900: #11142e;

  --brand-sky: #5abdd9;
  --brand-sky-50: #ecf7fb;
  --brand-sky-100: #c7e8f1;
  --brand-sky-200: #9bd5e4;

  --brand-orange: #ff6200;
  --brand-orange-50: #fff1e6;
  --brand-orange-100: #ffd4b3;

  --brand-yellow: #fecd10;
  --brand-yellow-50: #fff9e0;
  --brand-yellow-100: #ffefa8;

  --brand-green: #2c9b63;
  --brand-green-tint: rgba(44, 155, 99, 0.12);
  --brand-red: #e41b1a;
  --brand-red-tint: rgba(228, 27, 26, 0.10);
  --brand-black: #000000;
  --brand-white: #ffffff;

  /* Gradients (brand book p19 — Blue gradient is linear left → right) */
  --brand-gradient-blue: linear-gradient(90deg, #242a58 0%, #3a5283 45%, #5abdd9 100%);
  --brand-gradient-orange: radial-gradient(circle at 100% 100%, #ff6200 0%, #fecd10 70%, #5abdd9 130%);
  --brand-gradient-master: linear-gradient(120deg, #242a58 0%, #5abdd9 45%, #fecd10 80%, #ff6200 100%);

  /* Semantic tokens (use these in components, not raw brand-* values) */
  --primary-color: var(--brand-navy);
  --primary-color-light: var(--brand-sky);
  --primary-color-dark: var(--brand-navy-700);
  --on-primary-color: var(--brand-white);
  --accent-color: var(--brand-orange);
  --accent-color-warm: var(--brand-yellow);

  --background-color: #f5f6fa;
  --surface-color: var(--brand-white);
  --text-color: var(--brand-navy);
  --text-color-strong: var(--brand-navy-900);
  --muted-text: #5b6280;
  --divider-color: rgba(36, 42, 88, 0.12);
  --card-shadow: 0 2px 6px rgba(36, 42, 88, 0.08);
  --card-shadow-lift: 0 6px 18px rgba(36, 42, 88, 0.14);

  /* Status — the single brand green / red carry positive and critical state. */
  --status-success: var(--brand-green);
  --status-warning: #ed6c02;
  --status-critical: var(--brand-red);
  --status-info: var(--brand-sky);

  /* Type — see brand book p21
     IMPACT is reserved for h1 + KPI numerics; Arial Nova is body + everything else.
     The brand book shows Impact as a capitals-only display face, so every Impact
     surface is forced uppercase (text-transform) below.
     Arial Nova ships with Windows 10+; macOS falls back to Arial (same letterforms). */
  --font-display: Impact, "Haettenschweiler", "Arial Narrow Bold", "Oswald", sans-serif;
  --font-body: "Arial Nova", "Arial Nova Cond", Arial, "Helvetica Neue", system-ui, sans-serif;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 999px;
}

/* Dark theme overrides — kept for future use, all tokens flip together. */
html[data-theme="dark"] {
  --background-color: #0e1129;
  --surface-color: #181c39;
  --text-color: #e6ebff;
  --text-color-strong: #ffffff;
  --muted-text: #aab0c8;
  --divider-color: rgba(255, 255, 255, 0.12);
  --card-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
  --card-shadow-lift: 0 8px 22px rgba(0, 0, 0, 0.6);
}

/* ── Gradient utilities ─────────────────────────────────────────────────────── */
.brand-gradient-blue   { background: var(--brand-gradient-blue); color: var(--brand-white); }
.brand-gradient-orange { background: var(--brand-gradient-orange); color: var(--brand-white); }
.brand-gradient-master { background: var(--brand-gradient-master); color: var(--brand-white); }

/* App bar — solid fallback flag is set in MainLayout so MudBlazor stops painting
   its palette colour underneath us.
   The right-edge navy scrim keeps white text WCAG-readable where the gradient
   reaches sky blue (icons + user identity sit on the right of the bar). */
.mud-appbar.brand-appbar,
.brand-appbar {
  background:
    linear-gradient(270deg, rgba(36, 42, 88, 0.45) 0%, rgba(36, 42, 88, 0) 35%),
    var(--brand-gradient-blue) !important;
  color: var(--brand-white) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* App-bar height is the slim shell height (set on .brand-shell-layout). Scoped to the
   shell so module MudLayouts keep MudBlazor's default bar metrics. */
.brand-shell-layout .mud-appbar.brand-appbar {
  height: var(--mud-appbar-height);
  min-height: var(--mud-appbar-height);
}

.brand-appbar .mud-button,
.brand-appbar .mud-icon-button {
  color: var(--brand-white);
}

.brand-appbar__logo {
  height: 44px;
  width: auto;
  display: block;
}

/* ── Typography ─────────────────────────────────────────────────────────────── */
.brand-headline {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  line-height: 1.05;
  color: var(--brand-navy);
}

.brand-headline--gradient {
  background: var(--brand-gradient-blue);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.brand-numeric {
  font-family: var(--font-display);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--brand-navy);
}

/* Units and suffixes inside an Impact numeric (e.g. "kWh", "kg CO₂e", "pts")
   must keep their real casing and read as body text. Impact is forced uppercase,
   which would otherwise turn "kWh" into "KWH". Wrap the unit in this span so the
   number stays in display caps but the unit renders correctly:
     <span class="brand-numeric">1,240 <span class="brand-unit">kWh</span></span>
   Works the same way inside .kpi-card__value and .gauge-center__value. */
.brand-unit {
  font-family: var(--font-body);
  font-weight: 600;
  text-transform: none;
  letter-spacing: normal;
}

/* Map MudBlazor typography classes to brand fonts so MudText components inherit
   the right look without us having to chase down every call site. */
.mud-typography-h1,
.mud-typography-h2 {
  font-family: var(--font-display) !important;
  font-weight: 400 !important;
  letter-spacing: 0.01em !important;
  line-height: 1.1 !important;
  color: var(--brand-navy);
}

.mud-typography-h1 { font-size: 2.75rem; text-transform: uppercase; }
.mud-typography-h2 { font-size: 2.25rem; text-transform: uppercase; }

.mud-typography-h3,
.mud-typography-h4,
.mud-typography-h5,
.mud-typography-h6,
.mud-typography-subtitle1,
.mud-typography-subtitle2 {
  font-family: var(--font-body) !important;
  color: var(--text-color);
}

.mud-typography-h3 { font-size: 1.75rem; font-weight: 700; line-height: 1.2; }
.mud-typography-h4 { font-size: 1.5rem;  font-weight: 700; line-height: 1.25; }
.mud-typography-h5 { font-size: 1.25rem; font-weight: 600; line-height: 1.3; }
.mud-typography-h6 { font-size: 1.125rem; font-weight: 600; line-height: 1.35; }

.mud-typography-body1,
.mud-typography-body2,
.mud-typography-caption,
.mud-typography-button,
.mud-typography-overline {
  font-family: var(--font-body) !important;
}

/* ── Drawer / nav menu — Transparity main-site styling ──────────────────────── */
.brand-drawer .mud-drawer-content {
  background: var(--surface-color);
  color: var(--text-color);
  font-family: var(--font-body);
}

.brand-drawer .mud-nav-link,
.brand-drawer .mud-nav-group .mud-nav-link {
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text-color);
  border-radius: 0 var(--radius-pill) var(--radius-pill) 0;
  margin-right: 12px;
  transition: background-color 120ms ease, color 120ms ease;
}

.brand-drawer .mud-nav-link:hover {
  background: var(--brand-sky-50);
  color: var(--brand-navy-700);
}

.brand-drawer .mud-nav-link.active,
.brand-drawer .mud-nav-link[aria-current="page"] {
  background: var(--brand-sky-100);
  color: var(--brand-navy-700);
  font-weight: 600;
}

.brand-drawer .mud-nav-link.active::before,
.brand-drawer .mud-nav-link[aria-current="page"]::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 4px;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--brand-gradient-blue);
}

.brand-drawer .mud-nav-link .mud-nav-link-icon {
  color: var(--brand-navy-200);
  transition: color 120ms ease;
}

.brand-drawer .mud-nav-link:hover .mud-nav-link-icon,
.brand-drawer .mud-nav-link.active .mud-nav-link-icon {
  color: var(--brand-navy);
}

/* Group headers in the nav drawer — a touch of brand colour to anchor sections. */
.brand-drawer .mud-nav-group .mud-nav-link-text {
  font-weight: 600;
}

/* ── Shell footer + sticky bars (service-gateway link-outs, #47) ──────────────
   IMPORTANT: brand.css is loaded by the portal shell AND every module app, so all
   of the layout/scroll rules below are scoped to .brand-shell-layout (a class on
   the shell's <MudLayout> only). Module MudLayouts keep MudBlazor's default
   scrolling and bar metrics — these rules must never leak into a module iframe.

   The shell is a full-height flex column: the app bar and footer are fixed-height
   rows and the main content is the single scroll region between them, so both bars
   stay visible at all times (the footer is "sticky" like the header). */
.brand-shell-layout {
  /* Slim both bars: the app bar reads this var for its height and main-content top
     offset, and the footer matches it, so the header and footer bookend at one height.
     56px leaves room for the full 44px brand logo while staying slimmer than the
     MudBlazor 64px default. */
  --mud-appbar-height: 56px;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
/* min-height:0 lets a flex child actually scroll instead of growing the layout. */
.brand-shell-layout > .mud-main-content {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

/* On a module page the main content hosts the module iframe; give it a definite height so
   the iframe (height:100%) fills the space between the app bar and the footer exactly,
   leaving the footer visible below rather than overflowing it. */
.brand-shell-layout > .mud-main-content > .brand-module-host {
  height: 100%;
}

/* A module app renders inside an iframe that already sits below the shell app bar, so its
   MudMainContent must not reserve a second app-bar height at the top (MudBlazor adds that
   by default). The shell (.brand-shell-layout) keeps its clearance; every other MudLayout —
   i.e. a module — drops it. CustomerManagement and Sustainability already zero this in their
   own app.css; this covers FinOps, IncidentManagement, Monitoring and any future module in
   one place. Each module's MudContainer keeps its own pt-6 for a small top gap. */
.mud-layout:not(.brand-shell-layout) > .mud-main-content {
  padding-top: 0;
}

.brand-footer {
  position: relative;
  z-index: 1250;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  min-height: var(--mud-appbar-height, 64px); /* match the app bar height */
  /* Header gradient, but with a stronger right-edge navy scrim than the bar: the
     footer carries more text on the light (sky) end — the quick links — so the scrim
     keeps them WCAG-AA readable while preserving the navy→sky look. */
  background:
    linear-gradient(270deg, rgba(17, 20, 46, 0.62) 0%, rgba(17, 20, 46, 0) 55%),
    var(--brand-gradient-blue);
  color: var(--brand-white);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* Full-bleed: copyright hard against the left edge, quick links hard right. */
.brand-footer__inner {
  width: 100%;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 2px 24px;
}

.brand-footer__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.85);
}

.brand-footer__sep {
  color: rgba(255, 255, 255, 0.4);
}

.brand-footer__links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}

.brand-footer__links-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.8);
  margin-right: 4px;
}

/* Slim footer links: sky-accent icons, white text, visible keyboard focus ring,
   no layout shift on hover. */
.brand-footer__link,
.brand-footer__gateway {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 4px 10px;
  border-radius: 6px;
  color: var(--brand-white);
  font-size: 0.8125rem;
  font-weight: 500;
  text-decoration: none;
  transition: background-color 120ms ease;
}

.brand-footer__link:hover,
.brand-footer__gateway:hover {
  background: rgba(255, 255, 255, 0.14);
}

.brand-footer__link:focus-visible,
.brand-footer__gateway:focus-visible {
  outline: 2px solid var(--brand-white);
  outline-offset: 2px;
}

.brand-footer__gateway .mud-icon-root {
  color: var(--brand-sky);
}

.brand-footer__ext.mud-icon-root {
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.7);
}

@media (max-width: 599px) {
  .brand-footer__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .brand-footer__link,
  .brand-footer__gateway {
    transition: none;
  }
}

/* ── Attention alerts (dashboard "worth checking" chips) ─────────────────────
   Default MudBlazor Severity.Warning paints a solid orange banner which is
   too loud for routine ops notices (e.g. "4 VMs non-compliant", "3 backups
   failed"). We mute the background to brand navy-50 with an orange left
   stripe and icon so the alert still draws the eye without screaming.
   Severity.Error stays MudBlazor-default (red) for genuine error states. */
.brand-alert-attention.mud-alert {
  background-color: var(--brand-navy-50) !important;
  color: var(--brand-navy) !important;
  border-left: 4px solid var(--brand-orange) !important;
  box-shadow: none !important;
}
.brand-alert-attention .mud-alert-icon,
.brand-alert-attention .mud-icon-root {
  color: var(--brand-orange) !important;
}
.brand-alert-attention .mud-alert-message {
  color: var(--brand-navy) !important;
}

/* ── Impersonation chip ─────────────────────────────────────────────────────
   Used when a Transparity admin is viewing another customer's data (FR-015).
   The chip must stay clearly visible against both the navy AppBar and the
   white page background so the admin sees they are not in their normal view.
   Brand yellow (#fecd10) is the "highlight" colour on brand book p19, and
   keeps the safety cue visible without competing with the navy gradient. */
.brand-chip-impersonation.mud-chip,
.brand-chip-impersonation.mud-chip.mud-chip-filled,
.brand-chip-impersonation.mud-chip.mud-chip-outlined {
  background-color: var(--brand-yellow) !important;
  color: var(--brand-navy) !important;
  border-color: var(--brand-yellow) !important;
  font-weight: 600;
}
.brand-chip-impersonation .mud-chip-icon,
.brand-chip-impersonation .mud-chip-close-button {
  color: var(--brand-navy) !important;
}

/* ── Primary action button (yellow on navy, matching main site CTA) ─────────── */
.brand-cta {
  background: var(--brand-yellow);
  color: var(--brand-black);
  font-family: var(--font-body);
  font-weight: 600;
  border-radius: var(--radius-md);
  padding: 11px 30px;
  transition: filter 120ms ease, transform 120ms ease;
}
.brand-cta:hover { filter: brightness(0.95); }
.brand-cta:active { transform: translateY(1px); }

/* ── Body baseline ──────────────────────────────────────────────────────────── */
body {
  font-family: var(--font-body);
  color: var(--text-color);
  background-color: var(--background-color);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--brand-navy);
}

h3, h4, h5, h6 {
  font-family: var(--font-body);
  color: var(--text-color);
}

/* Focus ring — visible for keyboard nav, branded sky-blue. */
:focus-visible {
  outline: 2px solid var(--brand-sky);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Skip navigation link — hidden offscreen until focused by keyboard.
   Must be the first focusable element in the layout (WCAG 2.4.1 Bypass Blocks). */
.skip-link {
  position: absolute;
  top: -48px;
  left: 8px;
  z-index: 10000;
  padding: 10px 18px;
  background: var(--brand-navy);
  color: var(--brand-white);
  font-weight: 600;
  font-size: 0.95rem;
  border-radius: 0 0 6px 6px;
  text-decoration: none;
  transition: top 0.15s ease;
  outline: none;
}

.skip-link:focus {
  top: 0;
  outline: 3px solid var(--brand-yellow);
  outline-offset: 2px;
}

/* Screen-reader-only: visually hidden but still announced by assistive tech.
   Used for live-region status text (e.g. widget load/error announcements). */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Honour user motion preferences. Brand transitions stay subtle and short by
   default; for users who opt out, drop them to near-zero so nothing animates. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

/* ── Data classification banner (dp-3 / ISO 27001 A.8.2 / SC-11) ───────────
   A persistent strip at the top of every module layout that signals the
   sensitivity classification of the content visible on the current page.
   Classification levels: INTERNAL (navy), CONFIDENTIAL (amber), RESTRICTED (red).
   The banner must be clearly readable against the --background-color (#f5f6fa)
   background used by all module layouts. IRM and DLP tools consume the
   accompanying X-Data-Classification HTTP response header; this banner provides
   the visual equivalent at the user interface layer. */

.data-classification-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: var(--radius-md);
  margin-bottom: 16px;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.data-classification-banner__icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.data-classification-banner__label {
  flex-shrink: 0;
}

.data-classification-banner__hint {
  font-weight: 400;
  font-size: 0.7rem;
  letter-spacing: 0;
  text-transform: none;
  opacity: 0.85;
}

/* INTERNAL — brand navy palette, low-attention */
.data-classification-banner--internal {
  background-color: var(--brand-navy-50);
  color: var(--brand-navy-700);
  border-left: 3px solid var(--brand-navy-200);
}

/* CONFIDENTIAL — amber/orange, medium attention */
.data-classification-banner--confidential {
  background-color: var(--brand-orange-50);
  color: #7c3000;
  border-left: 3px solid var(--brand-orange);
}

/* RESTRICTED — red, high attention */
.data-classification-banner--restricted {
  background-color: var(--brand-red-tint);
  color: var(--brand-red);
  border-left: 3px solid var(--brand-red);
}

/* ── WidgetCard layout ──────────────────────────────────────────────────────
   Cards on the same MudGrid row should match the tallest card's height,
   irrespective of body content. Without this every card sizes to its own
   intrinsic content and the row looks ragged. Stretch the card itself to
   the parent grid item's height, then let the body flex to fill the
   remaining vertical space below the header. */
.mud-grid-item > .widget-card,
.mud-grid > .widget-card {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.widget-card > .widget-card__body {
  flex: 1 1 auto;
  min-height: 0;
}

/* Inner chart container fills the available card body so the visualisation
   sizes to the equalised card height instead of a fixed pixel value. */
.widget-card__body .kpi-card__chart,
.widget-card__body .kpi-card__sparkline {
  height: 100%;
  min-height: 120px;
}

.auto-height{ height: auto !important; }