/* ============================================================
   Nucor Buildings Group — Official Design System Tokens
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Archivo:wght@500;600;700;800;900&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {
  /* ---- Brand assets ----
     Theme files override these two values together, so the login logo and browser favicon
     always represent the same brand. The favicon URL is read by App.razor after the theme
     stylesheets load; the logo URL is consumed directly by Login.razor.scss. */
  --nbg-login-logo-url: url('/img/nbg-logo-reverse.svg');
  --nbg-login-logo-aspect-ratio: 407.81332 / 89.480003;
  --nbg-favicon-url: '/img/nucor-logo.svg';

  /* ---- Brand palette ---- */
  --nbg-color-brand-green-dark:   #213B34;
  --nbg-color-brand-green-medium: #006325;
  --nbg-color-brand-green-light:  #A1CEAD;
  --nbg-color-brand-green-pale:   #D9E8E2;

  /* Blue is a real second accent for portal/data actions (Create, Filter, Manage), not an unused brand swatch. */
  --nbg-color-brand-blue:         #7CC5EB;
  --nbg-color-brand-blue-light:   #BFE2F6;
  --nbg-color-brand-gray-light:   #F5F4F0;
  --nbg-color-brand-white:        #FFFFFF;
  --nbg-color-brand-ink:          #0E1A17;
  --nbg-color-brand-ink-2:        #2A3B36;
  --nbg-color-brand-ink-3:        #5A6B66;
  --nbg-color-brand-line:         #D4DBD7;
  --nbg-color-brand-line-strong:  #B4BFBA;
  --nbg-color-brand-line-dark:    #2F4A42;

  /* ---- Neutral gray ramp (theme-independent primitive; 1 = lightest, 12 = darkest) ----
     Shared source for every neutral surface/border/text token below — both themes draw
     their neutral steps from here instead of each re-declaring the same grays. Pure white
     isn't a ramp step: it's already --nbg-color-brand-white, so consumers that need it
     reference that primitive directly rather than a redundant "neutral-0" synonym. */
  --nbg-color-neutral-1:  #F4F4F4;
  --nbg-color-neutral-2:  #E8E8E8;
  --nbg-color-neutral-3:  #E0E0E0;
  --nbg-color-neutral-4:  #C6C6C6;
  --nbg-color-neutral-5:  #A8A8A8;
  --nbg-color-neutral-6:  #8D8D8D;
  --nbg-color-neutral-7:  #525252;
  --nbg-color-neutral-8:  #474747;
  --nbg-color-neutral-9:  #353535;
  --nbg-color-neutral-10: #262626;
  --nbg-color-neutral-11: #1C1C1C;
  --nbg-color-neutral-12: #161616;

  /* ---- Dark-theme surface tokens (IBM Carbon neutral gray ramp) ---- */
  --nbg-color-surface-1:   var(--nbg-color-neutral-12);
  --nbg-color-surface-2:   var(--nbg-color-neutral-11);
  --nbg-color-surface-3:   var(--nbg-color-neutral-10);
  --nbg-color-surface-4:   var(--nbg-color-neutral-9);
  --nbg-color-surface-5:   var(--nbg-color-neutral-8);  /* Carbon G80 hover; extends the 4-step ramp */

  /* Surface variants pulled from the design system — no existing local
     equivalent. -bg-deep aliases neutral-2 in light theme (exact hex
     match); -card-2 and -input-bg keep their own raw values in both files. */
  --nbg-color-bg-deep:  #0E120E;
  --nbg-color-card-2:   #1E1E1E;
  --nbg-color-input-bg: #373737;

  /* Brand-tinted (not neutral) — dark theme's borders/text lean warm-green rather than
     drawing from the neutral ramp above; this is a deliberate brand-warmth choice. */
  --nbg-color-border-1: #1F3933;
  --nbg-color-border-2: #2A4D45;
  --nbg-color-border-3: #3A6358;

  /* Plain neutral hairline divider — a distinct role from the
     brand-tinted -1/-2/-3 borders above, not a 4th step in that ramp.
     -hairline-strong aliases the neutral ramp rather than duplicating its hex;
     -hairline itself is a genuinely new value with no matching neutral step. */
  --nbg-color-border-hairline:        #393939;
  --nbg-color-border-hairline-strong: var(--nbg-color-neutral-7);

  --nbg-color-text-1:   #E8F0EC;
  --nbg-color-text-2:   #B5C5BF;
  --nbg-color-text-3:   #7E938C;
  --nbg-color-text-4:   #5A6F69;

  --nbg-color-accent:        #00793A;
  --nbg-color-accent-strong: #42BE65;
  --nbg-color-accent-dim:    #00501F;
  --nbg-color-accent-tint:   #00793A1F;
  --nbg-color-accent-tint-2: #00793A33;

  --nbg-color-info:         var(--nbg-color-accent);
  --nbg-color-info-tint:    var(--nbg-color-accent-tint);
  --nbg-color-warning:      #E0A340;
  --nbg-color-warning-tint: #E0A34024;
  --nbg-color-warning-dim:  #E0A34066;
  --nbg-color-success:      #7EEAA7;
  --nbg-color-success-tint: #7EEAA71F;
  --nbg-color-success-dim:  #7EEAA74D;

  /* Tier 0 reconciliation: green accent modifiers pulled from the
     design system's --eq-green-hover/-bright/-light. -hover has no light-theme
     override in the source (hover state stays the same swatch in both themes). */
  --nbg-color-accent-hover:  #005528;
  --nbg-color-accent-bright: #3DDC84;
  --nbg-color-accent-light:  #4ADE80;

  /* ---- Accent — blue (portal/data actions: Create, Filter, Manage) ----
     Blue is a real second accent alongside green, mirroring the design
     system's Carbon-blue role (--eq-blue* family).
     -bright aliases -strong here because dark theme's source values are equal;
     light theme flips which one is the alias (see light override below). */
  --nbg-color-accent-blue:        #0F62FE;
  --nbg-color-accent-blue-hover:  #0353E9;
  --nbg-color-accent-blue-light:  #78A9FF;
  --nbg-color-accent-blue-strong: #4589FF;
  --nbg-color-accent-blue-bright: var(--nbg-color-accent-blue-strong);
  --nbg-color-accent-blue-tint:   #78A9FF26;

  /* Text placed on top of a surface colored with --nbg-color-accent (avatar, brand mark, FAB,
     active segment controls). --nbg-color-brand-ink is the official brand ink token, not theme-aware —
     it reads fine against dark theme's brighter --nbg-color-accent, but needs a light-theme
     override below since light theme's --nbg-color-accent is a darker green. */
  --nbg-color-on-accent: var(--nbg-color-brand-ink);

  --nbg-color-danger:       #F87171;
  --nbg-color-danger-pale:  #FCA5A5;
  --nbg-color-danger-tint:  #F871711F;
  --nbg-color-violet:       #C4B5FD;

  /* ---- GoodThru "expired" pill — its own tint/border tuning, distinct from danger-tint ---- */
  --nbg-color-expired-red:        var(--nbg-color-danger);
  --nbg-color-expired-red-tint:   #F8717126;
  --nbg-color-expired-red-border: #F8717161;

  --nbg-color-button-text: var(--nbg-color-brand-white);

  /* Logo mask color (see .brand-mark) — white to read against the dark topbar. */
  --nbg-color-brand-mark: var(--nbg-color-brand-white);

  --nbg-shadow-soft:  0 1px 2px #0000004D;
  --nbg-shadow-mid:   0 8px 24px -8px #00000080;
  --nbg-shadow-pop:   0 24px 60px -16px #00000099;
  --nbg-shadow-modal: 0 24px 64px #000000B3; /* deepest shadow, above -pop */
  --nbg-shadow-glow:  0 8px 20px #0066334D;  /* green emphasis glow on primary CTAs */

  /* ---- CAD diagram palette — always on the dark #0a0a0a diagram
     canvas regardless of theme; used in panel section SVGs instead of raw hex. ---- */
  --nbg-color-cad-bg:       #0A0A0A;
  --nbg-color-cad-dim:      #FF0000;
  --nbg-color-cad-dim-2:    #E5484D;
  --nbg-color-cad-accent:   #39FF5F;
  /* -2 aliases -accent-bright, which does shift in the light-theme block below —
     an inherited quirk from the same aliasing in the upstream source. */
  --nbg-color-cad-accent-2: var(--nbg-color-accent-bright);
  --nbg-color-cad-grid:     #FFFF00;
  --nbg-color-cad-detail:   #00FFFF;
  --nbg-color-cad-steel:    #CFCFCF;

  /* ---- Chart / categorical colors — theme-independent. Chart-1/-2 use
     fixed hex values (not aliased to the accent tokens) because accent
     is redefined per-theme and these must not drift with it. ---- */
  --nbg-color-chart-1: #00793A;
  --nbg-color-chart-2: #42BE65;
  --nbg-color-chart-3: #BE95FF;
  --nbg-color-chart-4: #FF7EB6;
  --nbg-color-chart-5: #FFB3B8;

  /* ---- Typography ---- */
  --nbg-type-font-display: 'Archivo', 'Inter', system-ui, -apple-system, sans-serif;
  --nbg-type-font-sans:    'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --nbg-type-font-mono:    'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --nbg-type-h1:      44px;
  --nbg-type-h2:      32px;
  --nbg-type-h3:      24px;
  --nbg-type-h4:      20px;
  --nbg-type-body-l:  18px;
  --nbg-type-body:    16px;
  --nbg-type-body-s:  14px;
  --nbg-type-caption: 12px;
  --nbg-type-eyebrow: 11px;

  --nbg-type-weight-regular:  400;
  --nbg-type-weight-medium:   500;
  --nbg-type-weight-semibold: 600;
  --nbg-type-weight-bold:     700;
  --nbg-type-weight-black:    800;

  --nbg-type-tracking-tight:   -0.02em;
  --nbg-type-tracking-snug:    -0.01em;
  --nbg-type-tracking-wide:     0.04em;
  --nbg-type-tracking-eyebrow:  0.1em;

  /* ---- Spacing scale (4px base) ---- */
  --nbg-space-1:  4px;
  --nbg-space-2:  8px;
  --nbg-space-3:  12px;
  --nbg-space-4:  16px;
  --nbg-space-5:  24px;
  --nbg-space-6:  32px;
  --nbg-space-7:  48px;
  --nbg-space-8:  64px;

  /* ---- Layout & grid — theme-independent chrome/rail dimensions ---- */
  --nbg-layout-nav-h:        48px;
  --nbg-layout-subhead-h:    56px;
  --nbg-layout-portal-max-w: 1440px;
  --nbg-layout-rail-sm:      240px;
  --nbg-layout-rail-md:      320px;
  --nbg-layout-rail-lg:      384px;
  --nbg-layout-rail-xl:      480px;

  /* ---- Radius ---- */
  --nbg-radius-1:    2px;
  --nbg-radius-2:    4px;
  --nbg-radius-3:    8px;
  --nbg-radius-4:    12px; /* gap between -3 and -pill */
  --nbg-radius-pill: 999px;

  /* ---- Motion ---- */
  --nbg-motion-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --nbg-motion-dur-fast:      120ms;
  --nbg-motion-dur-medium:    200ms;
  --nbg-motion-dur-slow:      320ms;

  /* ---- Line-height scale ---- */
  --nbg-type-leading-none:    1;
  --nbg-type-leading-tight:   1.2;
  --nbg-type-leading-normal:  1.5;
  --nbg-type-leading-relaxed: 1.65;

  /* ---- Z-index scale ----
     Named after the two dominant tiers already in use across the app (most dialogs'
     backdrop/panel pair sits at 100/101; ProfileMenu/ProjectContextMenu's popover pair
     at 299/300; toasts always on top at 9999). RightSidePanel (40/41), ImportDialog
     (50/51), and SubmitProjectDialog's nested picker (110) don't match either tier —
     worth a look, but left as-is here since retuning them is a stacking-behavior change,
     not a token-naming one. */
  --nbg-z-base:             0;   /* in-flow content, below the named tiers */
  --nbg-z-raised:           10;  /* hover cards, focused rows */
  --nbg-z-modal-backdrop:   100;
  --nbg-z-modal:            101;
  --nbg-z-dropdown:         200; /* gap between the modal and popover tiers */
  --nbg-z-popover-backdrop: 299;
  --nbg-z-popover:          300;
  --nbg-z-toast:            9999;
}

/* ---- Light mode overrides (IBM Carbon white/Gray-10 ramp) ---- */
:root[data-theme="light"] {
  --nbg-color-surface-1: var(--nbg-color-neutral-1);
  --nbg-color-surface-2: var(--nbg-color-brand-white);
  --nbg-color-surface-3: var(--nbg-color-neutral-2);
  --nbg-color-surface-4: var(--nbg-color-neutral-3);
  --nbg-color-surface-5: var(--nbg-color-neutral-4);

  --nbg-color-border-1: var(--nbg-color-neutral-3);
  --nbg-color-border-2: var(--nbg-color-neutral-4);
  --nbg-color-border-3: var(--nbg-color-neutral-5);

  --nbg-color-text-1: var(--nbg-color-neutral-12);
  --nbg-color-text-2: var(--nbg-color-neutral-7);
  --nbg-color-text-3: var(--nbg-color-neutral-6);
  --nbg-color-text-4: var(--nbg-color-neutral-5);

  /* Light theme's accent and accent-dim are the official brand green swatches verbatim —
     not independently-tuned colors, so they alias the brand palette rather than repeating it. */
  --nbg-color-accent:        var(--nbg-color-brand-green-medium);
  --nbg-color-accent-strong: #004A1C;
  --nbg-color-accent-dim:    var(--nbg-color-brand-green-light);
  --nbg-color-accent-tint:   #00632514;
  --nbg-color-accent-tint-2: #00632526;

  --nbg-color-info:         var(--nbg-color-accent);
  --nbg-color-info-tint:    var(--nbg-color-accent-tint);
  --nbg-color-warning:      #996B10;
  --nbg-color-warning-tint: #996B101A;
  --nbg-color-warning-dim:  #996B104D;
  --nbg-color-success:      #1B7B47;
  --nbg-color-success-tint: #1B7B4714;
  --nbg-color-success-dim:  #1B7B4740;

  /* -hover has no light override in the design system (same swatch
     both themes); -bright/-light are darkened here for AA contrast on white. */
  --nbg-color-accent-bright: #198038;
  --nbg-color-accent-light:  #0E6027;

  /* Light theme collapses -light and -strong to the same darkened
     swatch for contrast, then reuses the vivid dark-mode blue for -bright
     instead (inverse of the dark-theme aliasing above). */
  --nbg-color-accent-blue:        #0043CE;
  --nbg-color-accent-blue-light:  #0043CE;
  --nbg-color-accent-blue-strong: var(--nbg-color-accent-blue-light);
  --nbg-color-accent-blue-bright: #0F62FE;
  --nbg-color-accent-blue-tint:   #0F62FE1A;

  --nbg-color-border-hairline:        var(--nbg-color-neutral-3);
  --nbg-color-border-hairline-strong: var(--nbg-color-neutral-6);

  --nbg-color-bg-deep:  var(--nbg-color-neutral-2);
  --nbg-color-card-2:   var(--nbg-color-surface-1);
  --nbg-color-input-bg: var(--nbg-color-brand-white);

  /* Light theme's --nbg-color-accent is a darker green than dark theme's — near-black ink text
     no longer contrasts, so use light text against it here instead. */
  --nbg-color-on-accent: var(--nbg-color-brand-white);

  --nbg-color-danger:       #DC2626;
  --nbg-color-danger-pale:  #EF4444;
  --nbg-color-danger-tint:  #DC262614;
  --nbg-color-violet:       #7C3AED;

  /* Logo reads better against light surfaces in the brand's own accent green. */
  --nbg-color-brand-mark: var(--nbg-color-accent);

  /* ---- GoodThru "expired" pill (light overrides) ---- */
  --nbg-color-expired-red:        var(--nbg-color-danger);
  --nbg-color-expired-red-tint:   #DC26261A;
  --nbg-color-expired-red-border: #DC262652;

  --nbg-shadow-soft:  0 1px 2px #00000014;
  --nbg-shadow-mid:   0 8px 24px -8px #00000026;
  --nbg-shadow-pop:   0 24px 60px -16px #00000033;
  --nbg-shadow-modal: 0 24px 64px #00000033;
}

/* ---- Base resets ---- */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--nbg-type-font-sans);
  font-size: var(--nbg-type-body-s);
  line-height: 1.5;
  color: var(--nbg-color-text-1);
  background-color: var(--nbg-color-surface-1);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'cv11', 'ss01';
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--nbg-type-font-display);
  color: var(--nbg-color-text-1);
  font-weight: var(--nbg-type-weight-bold);
  margin: 0;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

:focus-visible {
  outline: 2px solid var(--nbg-color-accent);
  outline-offset: 2px;
}

/* Blazor's <FocusOnNavigate> moves screen-reader focus to the page's h1 on
   navigation by giving it a temporary tabindex="-1". That's not a real
   keyboard-focusable element, so it shouldn't get a visible focus ring. */
[tabindex="-1"]:focus,
[tabindex="-1"]:focus-visible {
  outline: none;
}