@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Outfit:wght@500;600;700&display=swap');

/* ==========================================================================
   ManageIQ branding: Amernet
   Install as: /var/www/miq/vmdb/public/custom.css

   Palette lifted from the live CSS custom properties on amer.net
   (WordPress/WPBakery build): --color-content-primary #c60000,
   --color-content-heading #0F172A, --btn-hover-background #122b69,
   --ink #14161C, --ink-2 #3C4656, --bg2 #F6F7F9, --bg3 #F1F2F4,
   plus the status hues #16A37B / #D97706 / #E23B3B and the
   Inter / Outfit / JetBrains Mono stack.

   ---------------------------------------------------------------------------
   TWO THINGS TO KNOW BEFORE EDITING
   ---------------------------------------------------------------------------
   1. LOAD ORDER. This file is the only stylesheet_link_tag in the layouts
      (application/login/report_only/remote_console .html.haml). Every other
      style arrives later, injected by the webpack packs in
      `javascript_dependencies`. So this file loses every equal-specificity
      tie. Overrides here are deliberately one notch more specific than the
      rule they replace (e.g. `html.login-pf` against `.login-pf`), and use
      !important where the upstream rule is itself !important -- which
      vendor/assets/stylesheets/brand.scss does for the login brand image and
      the whitelabel background.

   2. TWO OVERRIDE LAYERS, ON PURPOSE. Sections 4 and 5 retint the UI by
      redefining Carbon's --cds-* custom properties. That is the clean path:
      @carbon/react ~1.106 (Carbon v11) resolves its SCSS theme tokens to
      `var(--cds-<token>, <fallback>)`, so redefining the property retints
      everything downstream. Sections 7-9 then repeat the important cases as
      explicit selector rules. If a future Carbon build ever inlines static
      hex instead of var(), layer one goes quiet and layer two still holds.
      Both together are harmless; do not delete one to "clean up".

   Air-gapped install: drop the @import on line 1. The font stacks below all
   end in system fonts, so the UI degrades to Segoe/Roboto/Helvetica cleanly.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. BRAND TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Primary. 6.2:1 on white -- passes WCAG AA for body text and for white
     text on a #c60000 button fill. Safe as a text colour. */
  --amr-primary:        #c60000;
  --amr-primary-hover:  #a30000;
  --amr-primary-active:  #8a0000;
  --amr-primary-faded:  rgba(198, 0, 0, 0.15);
  --amr-primary-tint:   #feecec;
  --amr-primary-tint-2: #fbc9c9;

  /* Only 2.9:1 against the navy rail, so #c60000 must NOT be used for text or
     icons on dark surfaces. This brighter red (from the site's
     rgba(255,92,92) accents) is 5.9:1 on the rail -- use it for the dark-rail
     accents in section 5. */
  --amr-primary-on-dark: #ff5c5c;

  /* Dark chrome. #0F172A is amer.net's heading + button colour. */
  --amr-navy:          #0f172a;
  --amr-navy-2:        #16203a;   /* derived: rail hover */
  --amr-navy-3:        #1e2b47;   /* derived: rail selected */
  --amr-navy-hover:    #122b69;   /* --btn-hover-background from the site */
  --amr-ink:           #14161c;
  --amr-ink-2:         #3c4656;

  --amr-slate:         #6a7789;
  --amr-slate-2:       #97a2b2;
  --amr-border:        #d0d5dd;
  --amr-border-2:      #e4e7ec;
  --amr-border-3:      #e7eaef;

  --amr-bg:            #ffffff;
  --amr-bg-2:          #f6f7f9;
  --amr-bg-3:          #f1f2f4;
  --amr-bg-4:          #fafafb;
  --amr-text:          #333333;

  --amr-success:       #16a37b;
  --amr-success-dark:  #087a45;
  --amr-success-tint:  #d9f5e8;
  --amr-warning:       #d97706;
  --amr-warning-tint:  #fdecd0;
  --amr-danger:        #e23b3b;

  --amr-font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --amr-font-display: 'Outfit', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --amr-font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}


/* --------------------------------------------------------------------------
   2. TYPOGRAPHY
   Scoped away from the login page's own type scale, and away from anything
   that relies on an icon font (.fa, .pficon, .cds--*__icon) -- setting
   font-family on those blanks the glyph.
   -------------------------------------------------------------------------- */
html body,
html body .cds--btn,
html body .form-control,
html body .btn {
  font-family: var(--amr-font-sans);
}

html body h1, html body h2, html body h3,
html body .card-pf-title,
html body .dashboard-title {
  font-family: var(--amr-font-display);
  letter-spacing: -0.01em;
}

html body pre,
html body code,
html body .cds--code-snippet,
html body .CodeMirror {
  font-family: var(--amr-font-mono);
}


/* --------------------------------------------------------------------------
   3. GLOBAL LINKS  (legacy PatternFly 3 / Bootstrap layer)
   brand.scss compiles $link-color: #0099d3 into static hex, so this needs an
   explicit rule rather than a token override. Anchors that are really
   buttons, tabs or tree nodes are excluded -- they get their colour from
   their own component rules below.
   -------------------------------------------------------------------------- */
html body a:not(.btn):not(.cds--btn):not(.nav-link):not(.list-group-item):not([role="tab"]) {
  color: var(--amr-primary);
}

html body a:not(.btn):not(.cds--btn):not(.nav-link):not(.list-group-item):not([role="tab"]):hover,
html body a:not(.btn):not(.cds--btn):not(.nav-link):not(.list-group-item):not([role="tab"]):focus {
  color: var(--amr-primary-hover);
}


/* --------------------------------------------------------------------------
   4. CARBON LIGHT THEME  (the main content area)
   Deliberately conservative: the surface/text tokens stay light, because this
   is a dense operations console and a wall of crimson is unusable. Only the
   interactive tokens -- links, primary buttons, focus, selection -- move to
   the brand. That is what a real rebrand touches.
   `html:root` beats the `:root` that @carbon/react emits.
   -------------------------------------------------------------------------- */
html:root {
  --cds-link-primary:          #c60000;
  --cds-link-primary-hover:    #a30000;
  --cds-link-visited:          #8a0000;
  --cds-link-inverse:          #ff5c5c;

  --cds-interactive:           #c60000;
  --cds-border-interactive:    #c60000;
  --cds-focus:                 #c60000;
  --cds-focus-inset:           #ffffff;

  --cds-button-primary:        #c60000;
  --cds-button-primary-hover:  #a30000;
  --cds-button-primary-active: #8a0000;
  --cds-button-danger-primary: #e23b3b;
  --cds-button-separator:      #e4e7ec;

  --cds-background-selected:       rgba(198, 0, 0, 0.10);
  --cds-background-selected-hover: rgba(198, 0, 0, 0.16);
  --cds-layer-selected-01:         #feecec;
  --cds-layer-selected-02:         #feecec;
  --cds-highlight:                 #feecec;

  --cds-text-primary:          #14161c;
  --cds-text-secondary:        #3c4656;
  --cds-text-helper:           #6a7789;
  --cds-text-placeholder:      #97a2b2;

  --cds-border-subtle-01:      #e4e7ec;
  --cds-border-subtle-02:      #e7eaef;
  --cds-border-strong-01:      #6a7789;
  --cds-layer-01:              #f6f7f9;
  --cds-layer-02:              #ffffff;
  --cds-layer-accent-01:       #f1f2f4;

  --cds-support-success:       #16a37b;
  --cds-support-warning:       #d97706;
  --cds-support-error:         #e23b3b;
  --cds-support-info:          #122b69;
}


/* --------------------------------------------------------------------------
   5. DARK SIDE-NAV RAIL
   menu.scss applies `@include theme.theme(themes.$g90)` scoped to #main-menu,
   which emits --cds-* properties on that element; menu-colors.scss then reads
   them ($background -> var(--cds-background) etc). `html #main-menu` outranks
   the bare `#main-menu`, so redefining them here retints the whole rail.
   Amernet's #0f172a is a natural swap for Carbon's gray-90 #262626.
   -------------------------------------------------------------------------- */
html #main-menu {
  --cds-background:         #0f172a;
  --cds-background-hover:   #16203a;
  --cds-layer-01:           #16203a;
  --cds-layer-02:           #1e2b47;
  --cds-layer-03:           #1e2b47;
  --cds-layer-hover-01:     #1e2b47;
  --cds-layer-selected-inverse: #ffffff;
  --cds-border-subtle-01:   #1e2b47;
  --cds-text-primary:       #ffffff;
  --cds-text-secondary:     #dce0e7;
  --cds-text-helper:        #97a2b2;
  --cds-text-placeholder:   #6a7789;
  --cds-icon-primary:       #ffffff;
  --cds-icon-secondary:     #97a2b2;
  --cds-link-primary:       #ff5c5c;
  --cds-focus:              #ff5c5c;
}

/* Explicit fallbacks for the same surfaces (layer two -- see the header note). */
html #main-menu .cds--side-nav,
html #main-menu .cds--side-nav__navigation.primary {
  background-color: var(--amr-navy);
}

html #main-menu .cds--side-nav.secondary,
html #main-menu .cds--side-nav__navigation.secondary {
  background-color: var(--amr-navy-2);
}

html #main-menu .cds--side-nav__link:hover,
html #main-menu .cds--side-nav__link.force-hover,
html #main-menu .cds--side-nav__submenu:hover {
  background-color: var(--amr-navy-3);
}

/* Current page marker. inset box-shadow rather than border-left so nothing
   shifts by 4px when the item becomes current. */
html #main-menu .cds--side-nav__link.cds--side-nav__link--current,
html #main-menu .cds--side-nav__item--active > .cds--side-nav__link {
  background-color: var(--amr-navy-3);
  box-shadow: inset 4px 0 0 var(--amr-primary-on-dark);
}

html #main-menu .cds--side-nav__link-text,
html #main-menu .cds--side-nav__submenu-title,
html #main-menu li.menu-group {
  color: #ffffff;
}

/* Divider under the logo -- menu.scss sets this from $row-active-primary-bg. */
html #main-menu .cds--side-nav__header.menu-logo {
  border-bottom: 1px solid var(--amr-navy-3);
}

/* --- Brand image in the rail header -------------------------------------
   menu.scss:270 sets `.navbar-brand-name { height: 32px; margin: -4px 0 0 -8px }`
   for ManageIQ's own SVG, which carries built-in padding. A cropped PNG
   logo does not, so the negative margin misaligns it.

   Note that when Settings.server.custom_brand is on, miq-logo.tsx serves
   custom_brand.png in BOTH the expanded and collapsed rail (it stops
   switching to the glyph-only mark). At 48px collapsed width a wide
   wordmark would be squashed, so it is clipped rather than distorted --
   this is exactly the resizing the Custom Logos tab means when it points
   you at /public/custom.css.
   AMERNET_Urnet.png is 1500x338 (4.44:1), so 28px tall reads about 124px wide. */
html body .navbar-brand-name {
  height: 28px;
  width: auto;
  margin: 0;
  object-fit: contain;
  object-position: left center;
}

html body .miq-main-menu-collapsed .navbar-brand-name,
html body .cds--side-nav:not(.cds--side-nav--expanded) .navbar-brand-name {
  max-width: 32px;
  object-position: left center;
}


/* --------------------------------------------------------------------------
   6. PRIMARY BUTTONS
   Both button systems are live in this UI: Carbon for React screens, PF3 /
   Bootstrap for the older HAML ones.
   -------------------------------------------------------------------------- */
html body .cds--btn--primary {
  background-color: var(--amr-primary);
  border-color: var(--amr-primary);
  color: #ffffff;
}

html body .cds--btn--primary:hover {
  background-color: var(--amr-primary-hover);
  border-color: var(--amr-primary-hover);
}

html body .cds--btn--primary:active {
  background-color: var(--amr-primary-active);
}

html body .cds--btn--ghost,
html body .cds--btn--tertiary {
  color: var(--amr-primary);
}

html body .cds--btn--tertiary {
  border-color: var(--amr-primary);
}

html body .cds--btn--tertiary:hover {
  background-color: var(--amr-primary);
  color: #ffffff;
}

html body .btn-primary,
html body .btn-primary:focus {
  background-color: var(--amr-primary);
  background-image: none;
  border-color: var(--amr-primary-hover);
  color: #ffffff;
}

html body .btn-primary:hover,
html body .btn-primary:active,
html body .btn-primary.active,
html body .btn-primary:not(:disabled):not(.disabled):active {
  background-color: var(--amr-primary-hover);
  background-image: none;
  border-color: var(--amr-primary-active);
}

/* Keep the focus ring visible -- it is the only affordance keyboard users get
   on the dense list screens, and a brand retint often eats it by accident. */
html body .btn-primary:focus-visible,
html body .cds--btn:focus-visible,
html body .form-control:focus-visible {
  outline: 2px solid var(--amr-primary);
  outline-offset: 1px;
}


/* --------------------------------------------------------------------------
   7. ACTIVE TABS / SELECTED ROWS  (PF3 layer)
   -------------------------------------------------------------------------- */
html body .nav-tabs > li.active > a,
html body .nav-tabs > li.active > a:hover,
html body .nav-tabs > li.active > a:focus {
  border-bottom-color: var(--amr-primary);
  color: var(--amr-primary);
}

html body .list-group-item.active,
html body .list-group-item.active:hover {
  background-color: var(--amr-primary-tint);
  border-color: var(--amr-primary-tint-2);
  color: var(--amr-ink);
}

html body .label-primary,
html body .badge-primary {
  background-color: var(--amr-primary);
}

html body .table > tbody > tr.selected > td,
html body .table > tbody > tr.active > td {
  background-color: var(--amr-primary-tint);
}


/* --------------------------------------------------------------------------
   8. LOGIN PAGE
   The markup switches classes off Settings, which lets each mode be targeted
   precisely (dashboard/login.html.haml + layouts/login.html.haml):
     <html class="login-pf {rcue-login unless custom_login_logo}">
     <body class="login {whitelabel if custom_login_logo}">
   So `.rcue-login` present  <=> no custom login background uploaded.
   -------------------------------------------------------------------------- */

/* Mode A -- no custom_login_logo. Replaces ManageIQ's bg-login.png with a
   brand gradient, so the login page is branded even before anyone uploads
   artwork. Beats `.login-pf body` from legacy/login.scss:61. */
html.login-pf.rcue-login body {
  background-image:
    radial-gradient(circle at 18% 12%, rgba(198, 0, 0, 0.30) 0%, rgba(198, 0, 0, 0) 45%),
    linear-gradient(135deg, #0f172a 0%, #14161c 55%, #122b69 100%) !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-color: var(--amr-navy) !important;
}

/* Mode B -- custom_login_logo uploaded. brand.scss:44-47 sets
   `body.login.whitelabel { background: url(/upload/custom_login_logo.png)
   !important; background-size: 100% auto !important }`. `100% auto` leaves a
   dead band under the image on wide monitors; `cover` fixes it. Needs both
   !important and a longer selector to win, since brand.scss lands later. */
html body.login.whitelabel {
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-color: var(--amr-navy) !important;
}

/* The translucent panel holding the login form. Upstream is
   rgba(0,0,0,0.2) (brand.scss:33), which is too thin to keep white labels
   legible over a photographic background. */
html.login-pf .container {
  background-color: rgba(15, 23, 42, 0.82);
  border-top: 3px solid var(--amr-primary);
  backdrop-filter: blur(2px);
}

/* Brand wordmark above the form. brand.scss:37-39 pins this at
   `height: 38px !important` with specificity (0,1,1,1); the extra `html`
   here outranks it. */
html.login-pf #brand img {
  height: 44px !important;
  width: auto !important;
  max-width: 320px;
}

/* The custom_logo badge, top-right of the login page. */
html.login-pf #badge img {
  max-height: 70px;
  width: auto;
}

html.login-pf .container .login .btn-primary {
  background-color: var(--amr-primary);
  border-color: var(--amr-primary-hover);
  background-image: none;
}

html.login-pf .container .login .btn-primary:hover {
  background-color: var(--amr-primary-hover);
}

/* custom_login_text renders here. Upstream leaves it at the inherited white,
   which disappears against a light uploaded background. */
html.login-pf .container .details p,
html.login-pf .container .help-block {
  color: #f6f7f9;
}


/* --------------------------------------------------------------------------
   9. ABOUT MODAL
   legacy/about_modal_background.scss paints .cds--modal-container with
   $modal-about-pf-bg-color #101010 and bg-modal-about-pf.png. The .whitelabel
   variant swaps the image for the uploaded custom_login_logo.png -- which is
   why that upload is labelled "Custom Login & 'About' Screen Background".
   Heading text here is I18n product.name_full, so it only says "Amernet"
   once en_amernet.yml is installed.
   -------------------------------------------------------------------------- */
html body .about-modal .cds--modal-container {
  background-color: var(--amr-navy) !important;
  background-image:
    radial-gradient(circle at 85% 15%, rgba(198, 0, 0, 0.28) 0%, rgba(198, 0, 0, 0) 55%),
    linear-gradient(135deg, #0f172a 0%, #14161c 100%) !important;
  border-top: 3px solid var(--amr-primary);
}

html body .about-modal .cds--modal-header__heading,
html body .about-modal .cds--modal-header .cds--modal-header__label,
html body .about-modal .about-modal-body,
html body .about-modal .ModalItem {
  color: #ffffff;
}

html body .about-modal .cds--modal-header__heading {
  font-family: var(--amr-font-display);
}

/* Logo in the modal footer -- API branding_info.logo, i.e. custom_logo.png. */
html body .about-modal .miq-product-info-and-logo-wrapper .logo {
  max-height: 48px;
  width: auto;
}


/* --------------------------------------------------------------------------
   10. STATUS / TOAST ACCENTS
   Amernet's own status hues, so alerts match the marketing site rather than
   PatternFly's defaults.
   -------------------------------------------------------------------------- */
html body .alert-success  { border-left: 3px solid var(--amr-success); }
html body .alert-warning  { border-left: 3px solid var(--amr-warning); }
html body .alert-danger   { border-left: 3px solid var(--amr-danger); }
html body .alert-info     { border-left: 3px solid var(--amr-navy-hover); }

html body .cds--toast-notification--success { border-left-color: var(--amr-success); }
html body .cds--toast-notification--warning { border-left-color: var(--amr-warning); }
html body .cds--toast-notification--error   { border-left-color: var(--amr-danger); }
html body .cds--toast-notification--info    { border-left-color: var(--amr-navy-hover); }