/* ============================================================================
   GRN.CLOUD - OpenShift Console theme
   Strategy: brand the CHROME (masthead + side-nav glow), the ACCENTS
   (primary = brand green, links = green, active nav = lime), and the FONTS.
   Let PatternFly own the content canvas so LIGHT *and* DARK themes both work.
   No forced color-scheme.
   ============================================================================ */

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

/* ---------- Layer 1: brand tokens ---------- */
:root {
  --grn-green:      #02753C;
  --grn-green-700:  #015a2d;
  --grn-green-300:  #61CE70;
  --grn-lime:       #9EFF12;
  --grn-lime-elec:  #8FDC0F;
  --grn-link-dark:  #7CE59B;
  --grn-font-display: 'Rubik', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --grn-font-body:    'Karla', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --grn-chrome:
    radial-gradient(circle at 15% 4%, rgba(158,255,18,.50), rgba(88,240,25,.18) 14%, transparent 46%),
    linear-gradient(135deg, #0a1611 0%, #0d2719 50%, #0f3d24 130%);
}

/* ---------- Layer 2: PF6 global token overrides (theme-agnostic) ---------- */
:root {
  /* Fonts */
  --pf-t--global--font--family--100: var(--grn-font-body);
  --pf-t--global--font--family--200: var(--grn-font-body);
  --pf-t--global--font--family--300: var(--grn-font-display);
  --pf-t--global--font--family--body--legacy:    var(--grn-font-body);
  --pf-t--global--font--family--heading--legacy: var(--grn-font-display);

  /* Brand / primary action = brand green */
  --pf-t--global--color--brand--default: var(--grn-green);
  --pf-t--global--color--brand--hover:   var(--grn-green-700);
  --pf-t--global--color--brand--clicked: var(--grn-green-700);
  --pf-t--global--color--brand--100: var(--grn-green);
  --pf-t--global--color--brand--200: var(--grn-green-700);
  --pf-t--global--color--brand--300: var(--grn-green-300);

  /* Links = brand green */
  --pf-t--global--text--color--link--default: var(--grn-green);
  --pf-t--global--text--color--link--hover:   var(--grn-green-700);
  --pf-t--global--text--color--link--100: var(--grn-green);
  --pf-t--global--text--color--link--200: var(--grn-green-700);

  /* Active / selected accents */
  --pf-t--global--color--nonstatus--green--default: var(--grn-green);
  --pf-t--global--icon--color--brand--default: var(--grn-green);
  --pf-t--global--border--color--brand--default: var(--grn-green);

  /* Rounded corners (design-system: 8px inputs / 10px cards) */
  --pf-t--global--border--radius--tiny:   4px;
  --pf-t--global--border--radius--small:  8px;
  --pf-t--global--border--radius--medium: 10px;
  --pf-t--global--border--radius--large:  14px;
  --pf-v5-global--BorderRadius--sm: 8px;
  --pf-v5-global--BorderRadius--lg: 12px;
}

/* Explicit rounding for the main surfaces */
.pf-v6-c-card, .pf-v5-c-card,
.pf-v6-c-panel, .pf-v6-c-menu, .pf-v5-c-dropdown__menu,
.co-m-pane__body, .pf-v6-c-modal-box, .pf-v6-c-alert {
  border-radius: 12px !important;
}
.pf-v6-c-table, .pf-v6-c-toolbar { border-radius: 10px; }

/* ---------- Layer 2b: PF5 fallbacks (some plugins still ship v5) ---------- */
:root {
  --pf-v5-global--primary-color--100: var(--grn-green);
  --pf-v5-global--primary-color--200: var(--grn-green-700);
  --pf-v5-global--active-color--100:  var(--grn-green);
  --pf-v5-global--link--Color:        var(--grn-green);
  --pf-v5-global--link--Color--hover: var(--grn-green-700);
  --pf-v5-global--palette--green-500: var(--grn-green-300);
  --pf-v5-global--palette--green-600: var(--grn-green);
}

/* ---------- Layer 3: dark-mode tweaks ---------- */
/* PatternFly already flips the canvas dark; we only brighten links so brand
   green stays legible on the dark canvas. Chrome + primary buttons stay as-is. */
:root:where(.pf-v6-theme-dark) {
  --pf-t--global--text--color--link--default: var(--grn-link-dark);
  --pf-t--global--text--color--link--hover:   #A7F0BE;
  --pf-t--global--text--color--link--100: var(--grn-link-dark);

  /* Green-tinted dark canvas (the "F" mockup look) instead of PF neutral gray */
  --pf-t--global--background--color--primary--default:          #0f2619;
  --pf-t--global--background--color--secondary--default:        #163a26;
  --pf-t--global--background--color--floating-element--default: #16271d;
  --pf-t--global--border--color--default: #21362a;
  --pf-t--global--border--color--100:     #21362a;
  --pf-t--global--border--color--200:     #1a2c21;
}
/* Belt-and-braces: paint the dark canvas + cards green-tinted directly */
:root:where(.pf-v6-theme-dark) .pf-v6-c-page__main,
:root:where(.pf-v6-theme-dark) .pf-v6-c-page__main-section,
:root:where(.pf-v6-theme-dark) body { background-color: #0f2619 !important; }
:root:where(.pf-v6-theme-dark) .pf-v6-c-card,
:root:where(.pf-v6-theme-dark) .co-m-pane__body { background-color: #163a26 !important; }

/* ---------- Typography ---------- */
.pf-v6-c-title, .pf-v5-c-title,
h1, h2, h3, h4, .co-m-page-title__title {
  font-family: var(--grn-font-display) !important;
}

/* ============================================================================
   CHROME - masthead + side-nav share one continuous glow (fixed to viewport
   so the bloom spans the L-shape). Applies in light AND dark themes.
   ============================================================================ */
.pf-v6-c-masthead,
.pf-v5-c-masthead,
.co-masthead,
.pf-v6-c-page__sidebar,
.pf-v5-c-page__sidebar,
.pf-v6-c-page__sidebar .pf-v6-c-nav,
.pf-v5-c-page__sidebar .pf-v5-c-nav {
  background-color: #0a1611 !important;
  background-image: var(--grn-chrome) !important;
  background-attachment: fixed !important;
  background-size: 100vw 100vh !important;
  background-position: top left !important;
  border-color: rgba(158,255,18,.14) !important;
}

/* ---------- Page backdrop = same green chrome, so the content canvas floats on it ---------- */
html, body, .pf-v6-c-page, .pf-v5-c-page {
  background-color: #0a1611 !important;
  background-image: var(--grn-chrome) !important;
  background-attachment: fixed !important;
  background-size: 100vw 100vh !important;
  background-position: top left !important;
}
/* Float the content canvas above the backdrop: rounded top-left + lift shadow.
   The main section keeps an opaque canvas (light = #F6F8FA, dark = #0f2619). */
.pf-v6-c-page__main {
  border-top-left-radius: 18px !important;
  box-shadow: -10px -2px 30px rgba(0,0,0,.22) !important;
  overflow: hidden;
}
:root:where(:not(.pf-v6-theme-dark)) .pf-v6-c-page__main-section,
:root:where(:not(.pf-v6-theme-dark)) .pf-v6-c-page__main {
  background-color: #F6F8FA !important;
}

/* Masthead text/icons -> white */
.pf-v6-c-masthead, .pf-v5-c-masthead,
.pf-v6-c-masthead a, .pf-v5-c-masthead a,
.pf-v6-c-masthead .pf-v6-c-menu-toggle,
.pf-v5-c-masthead .pf-v5-c-menu-toggle,
.pf-v6-c-masthead button, .pf-v5-c-masthead button,
.pf-v6-c-masthead svg, .pf-v5-c-masthead svg {
  color: #ffffff !important;
  fill: #ffffff !important;
}

/* Hamburger / page toggle */
.pf-v6-c-page__header-brand-toggle button,
.pf-v6-c-masthead__toggle button,
.pf-v6-c-masthead__toggle svg { color: rgba(255,255,255,.9) !important; fill: rgba(255,255,255,.9) !important; }

/* ---------- Masthead logo -> GRN.CLOUD wordmark ---------- */
/* Hide the stock OKD mark and render our wordmark as text (local-test friendly;
   in production a logo file is mounted via --custom-logo-files). */
.co-masthead-logo img,  .co-masthead-logo svg,  .co-masthead-logo > div,
.pf-v6-c-masthead__logo img, .pf-v6-c-masthead__logo svg,
.pf-v5-c-masthead__brand img, .pf-v5-c-masthead__brand svg,
.pf-v6-c-brand img, .pf-v6-c-brand svg,
.pf-v5-c-brand img, .pf-v5-c-brand svg { display: none !important; }

.co-masthead-logo::after,
.pf-v6-c-masthead__logo::after {
  content: "";
  display: inline-block;
  width: 170px; height: 30px;
  background-image: url("data:image/png;base64,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");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: left center;
}

/* ============================================================================
   SIDE-NAV
   ============================================================================ */
.pf-v6-c-nav__section-title, .pf-v5-c-nav__section-title {
  color: rgba(255,255,255,.55) !important;
}
/* Nav items rendered as rounded buttons */
.pf-v6-c-nav__link, .pf-v5-c-nav__link {
  color: rgba(255,255,255,.84) !important;
  border-radius: 8px !important;
  margin: 2px 10px !important;
  padding-block: 8px !important;
  --pf-v6-c-nav__link--BackgroundColor: transparent !important;
}
.pf-v6-c-nav__link:hover, .pf-v6-c-nav__link:focus-visible,
.pf-v5-c-nav__link:hover, .pf-v5-c-nav__link:focus {
  --pf-v6-c-nav__link--hover--BackgroundColor: rgba(158,255,18,.10) !important;
  color: #ffffff !important;
  background-color: rgba(158,255,18,.10) !important;
}
/* Unfolded sub-menu items - indented buttons */
.pf-v6-c-nav__subnav .pf-v6-c-nav__link,
.pf-v5-c-nav__subnav .pf-v5-c-nav__link {
  margin-left: 20px !important;
  font-size: 13px !important;
  color: rgba(255,255,255,.72) !important;
}

/* Active item - solid lime pill (matches the mockup) */
.pf-v6-c-nav__link.pf-m-current,
.pf-v6-c-nav__link.pf-m-current:hover,
.pf-v5-c-nav__link.pf-m-current,
.pf-v5-c-nav__link.pf-m-current:hover {
  --pf-v6-c-nav__link--m-current--BackgroundColor: var(--grn-lime) !important;
  --pf-v6-c-nav__link--m-current--Color: #0a1611 !important;
  background: linear-gradient(90deg, var(--grn-lime), #b6ff5a) !important;
  color: #0a1611 !important;
  box-shadow: 0 2px 12px rgba(158,255,18,.40);
  font-weight: 700;
}
.pf-v6-c-nav__link.pf-m-current svg,
.pf-v5-c-nav__link.pf-m-current svg { fill: #0a1611 !important; }

/* Perspective switcher TOGGLE (closed, on dark chrome) - a readable white pill */
.pf-v6-c-page__sidebar .pf-v6-c-menu-toggle {
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(158,255,18,.28) !important;
  border-radius: 6px !important;
}
.pf-v6-c-page__sidebar .pf-v6-c-menu-toggle,
.pf-v6-c-page__sidebar .pf-v6-c-menu-toggle__text,
.pf-v6-c-page__sidebar .pf-v6-c-menu-toggle__controls,
.pf-v6-c-page__sidebar .pf-v6-c-menu-toggle svg { color: #ffffff !important; fill: #ffffff !important; }
/* NOTE: the project/namespace bar (.co-namespace-bar) lives in the CONTENT canvas,
   not the chrome - leave its text to the theme (dark on light, light on dark). */

/* ============================================================================
   FLOATING ELEMENTS - dropdowns, menus, popovers must stay readable.
   The chrome-white rules above must NOT leak into floating panels (which sit
   on a white/dark surface, not the green chrome). Use theme tokens so text is
   dark in light mode and light in dark mode.
   ============================================================================ */
/* Opaque surface for EVERY dropdown/menu/popover/select - explicit colour, not a
   token (the floating-element token is undefined in light theme and collapses to
   transparent, which makes portaled menus show the chrome behind them). */
.pf-v6-c-menu, .pf-v6-c-menu__content,
.pf-v5-c-dropdown__menu, .pf-v6-c-popover__content,
.pf-v6-c-select__menu, .pf-v6-c-select__toggle + .pf-v6-c-menu {
  background-color: #ffffff !important;
}
:root:where(.pf-v6-theme-dark) .pf-v6-c-menu,
:root:where(.pf-v6-theme-dark) .pf-v6-c-menu__content,
:root:where(.pf-v6-theme-dark) .pf-v5-c-dropdown__menu,
:root:where(.pf-v6-theme-dark) .pf-v6-c-popover__content,
:root:where(.pf-v6-theme-dark) .pf-v6-c-select__menu {
  background-color: #16271d !important;
}
:root:where(.pf-v6-theme-dark) .pf-v6-c-menu__item:hover,
:root:where(.pf-v6-theme-dark) .pf-v5-c-dropdown__menu-item:hover {
  background-color: rgba(158,255,18,.10) !important;
}
/* Menu text - explicit per theme. (The PF text token does NOT flip to light in
   dark theme, so relying on it gives black-on-dark menus.) */
.pf-v6-c-menu, .pf-v6-c-menu__list, .pf-v6-c-menu__group,
.pf-v6-c-menu__item, .pf-v6-c-menu__item-text, .pf-v6-c-menu__group-title,
.pf-v5-c-dropdown__menu, .pf-v5-c-dropdown__menu-item {
  color: #1e1e1e !important;
}
:root:where(.pf-v6-theme-dark) .pf-v6-c-menu,
:root:where(.pf-v6-theme-dark) .pf-v6-c-menu__list,
:root:where(.pf-v6-theme-dark) .pf-v6-c-menu__group,
:root:where(.pf-v6-theme-dark) .pf-v6-c-menu__item,
:root:where(.pf-v6-theme-dark) .pf-v6-c-menu__item-text,
:root:where(.pf-v6-theme-dark) .pf-v6-c-menu__group-title,
:root:where(.pf-v6-theme-dark) .pf-v5-c-dropdown__menu,
:root:where(.pf-v6-theme-dark) .pf-v5-c-dropdown__menu-item {
  color: #EAF1ED !important;
}
.pf-v6-c-menu__item:hover { background-color: rgba(2,117,60,.08) !important; }

/* Menus that open INSIDE the dark sidebar chrome (e.g. the perspective
   switcher) must be an opaque dark-green panel with light text - not a
   transparent panel with dark text. Scoped so content-area dropdowns are
   unaffected. */
.pf-v6-c-page__sidebar .pf-v6-c-menu,
.pf-v6-c-page__sidebar .pf-v6-c-menu__content,
.pf-v6-c-page__sidebar .pf-v6-c-menu__list {
  background-color: #0e2a1c !important;
  --pf-v6-c-menu--BackgroundColor: #0e2a1c !important;
}
.pf-v6-c-page__sidebar .pf-v6-c-menu {
  border: 1px solid rgba(158,255,18,.22) !important;
  border-radius: 10px !important;
  box-shadow: 0 10px 28px rgba(0,0,0,.5) !important;
  overflow: hidden;
}
.pf-v6-c-page__sidebar .pf-v6-c-menu,
.pf-v6-c-page__sidebar .pf-v6-c-menu * {
  color: #ffffff !important;
  fill: #ffffff !important;
}
.pf-v6-c-page__sidebar .pf-v6-c-menu__item:hover,
.pf-v6-c-page__sidebar .pf-v6-c-menu__list-item:hover {
  background-color: rgba(158,255,18,.14) !important;
}
.pf-v6-c-page__sidebar .pf-v6-c-menu__item.pf-m-selected,
.pf-v6-c-page__sidebar .pf-v6-c-menu__list-item[aria-selected="true"] {
  color: var(--grn-lime) !important;
}