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

/* === Layer 1: GRN.CLOUD design tokens === */
:root {
  --grn-bg-base:       #071A0F;
  --grn-bg-raised:     #0A2218;
  --grn-bg-overlay:    #0D2E1A;
  --grn-accent-lime:   #9EFF12;
  --grn-brand-green:   #02753C;
  --grn-lime-hover:    #7ACC0E;
  --grn-text-primary:  #FFFFFF;
  --grn-text-secondary: rgba(255,255,255,0.6);
  --grn-text-muted:    rgba(255,255,255,0.35);
  --grn-border:        rgba(158,255,18,0.18);
  --grn-font:          "Roboto", sans-serif;

  /* PatternFly v6 global token overrides */
  --pf-t--global--font--family--100: var(--grn-font);
  --pf-t--global--font--family--200: var(--grn-font);
  --pf-t--global--font--family--300: var(--grn-font);
  --pf-t--global--font--family--body--legacy: var(--grn-font);
  --pf-t--global--font--family--heading--legacy: var(--grn-font);
  --pf-t--global--font--family--mono--legacy: var(--grn-font);

  --pf-t--global--color--brand--100: var(--grn-accent-lime);
  --pf-t--global--color--brand--200: var(--grn-lime-hover);
  --pf-t--global--color--brand--300: var(--grn-brand-green);

  --pf-t--global--text--color--link--100: var(--grn-accent-lime);
  --pf-t--global--text--color--link--200: var(--grn-lime-hover);
  --pf-t--global--text--color--link--300: var(--grn-brand-green);

  --pf-t--global--dark--text--color--link--100: var(--grn-accent-lime);
  --pf-t--global--dark--text--color--link--200: var(--grn-lime-hover);
  --pf-t--global--dark--text--color--link--300: var(--grn-brand-green);

  --pf-t--global--color--status--success--100: var(--grn-accent-lime);
  --pf-t--global--color--status--success--200: var(--grn-lime-hover);

  /* === Layer 2: Dark mode as default (applied unconditionally to :root) === */
  --pf-t--global--background--color--primary--default: var(--grn-bg-base);
  --pf-t--global--background--color--secondary--default: var(--grn-bg-raised);
  --pf-t--global--background--color--action--plain--hover: var(--grn-bg-raised);
  --pf-t--global--background--color--action--plain--pressed: var(--grn-bg-overlay);

  --pf-t--global--text--color--100: var(--grn-text-primary);
  --pf-t--global--text--color--200: var(--grn-text-secondary);

  --pf-t--global--border--color--100: var(--grn-border);
  --pf-t--global--border--color--200: rgba(158,255,18,0.25);
  --pf-t--global--border--color--50:  rgba(158,255,18,0.10);
  --pf-t--global--border--color--default: var(--grn-border);
}

/* PatternFly v5 palette layer */
:root {
  --pf-v5-global--palette--green-50:  #f7fdec;
  --pf-v5-global--palette--green-100: #dff6b3;
  --pf-v5-global--palette--green-200: #c0ed68;
  --pf-v5-global--palette--green-300: #9EFF12;
  --pf-v5-global--palette--green-400: #8dba35;
  --pf-v5-global--palette--green-500: #6a8c28;
  --pf-v5-global--palette--green-600: #02753C;
  --pf-v5-global--palette--green-700: #1F3E0D;
}

/* === Layer 3: Component overrides === */
:root {
  /* Masthead */
  .pf-v6-c-masthead {
    background-color: var(--grn-bg-overlay);
    border-bottom: 1px solid rgba(158,255,18,0.35);
  }

  /* Nav sidebar */
  .pf-v6-c-nav__link {
    color: var(--grn-text-secondary);
    max-width: calc(100% - (var(--pf-v6-c-nav__link--PaddingInlineStart) + var(--pf-v6-c-nav__link--PaddingInlineEnd)));
  }

  .pf-v6-c-nav__link.pf-m-current,
  .pf-v6-c-nav__link.pf-m-current:hover {
    --pf-v6-c-nav__link--m-current--Color: var(--grn-accent-lime);
    --pf-v6-c-nav__link--FontWeight: 700;
  }

  /* Menu toggle */
  .pf-v6-c-menu-toggle {
    --pf-v6-c-menu-toggle--hover--Color: var(--grn-accent-lime);
  }

  .pf-v6-c-menu-toggle.pf-m-full-width {
    max-width: calc(100% - (var(--pf-v6-c-menu-toggle--PaddingInlineStart) + var(--pf-v6-c-menu-toggle--PaddingInlineEnd)));
  }

  /* Selected menu item */
  .pf-v6-c-menu {
    --pf-v6-c-menu__item--m-selected__item-select-icon--Color: var(--grn-accent-lime);
  }

  /* Tabs */
  .pf-v6-c-tabs__item.pf-m-current {
    font-weight: 700;
  }
}

/* === Dark mode explicit class (user-toggled or system default) === */
:root:where(.pf-v6-theme-dark) {
  --pf-t--global--background--color--primary--default: var(--grn-bg-base);
  --pf-t--global--background--color--secondary--default: var(--grn-bg-raised);
  --pf-t--global--background--color--action--plain--hover: var(--grn-bg-base);
  --pf-t--global--border--color--default: var(--grn-border);

  --pf-t--global--dark--color--brand--100: var(--grn-accent-lime);
  --pf-t--global--dark--color--brand--200: var(--grn-lime-hover);
  --pf-t--global--dark--color--brand--300: var(--grn-brand-green);

  --pf-t--global--dark--border--color--100: var(--grn-border);
  --pf-t--global--dark--border--color--200: rgba(158,255,18,0.25);
  --pf-t--global--dark--border--color--50:  rgba(158,255,18,0.10);

  .pf-v6-c-masthead__logo > * {
    filter: none;
  }

  .pf-v6-c-form-control {
    --pf-v6-c-form-control--BackgroundColor: var(--grn-bg-raised);
  }

  .pf-v6-c-nav__link:hover,
  .pf-v6-c-nav__link.pf-m-hover,
  .pf-v6-c-nav__link:focus {
    --pf-v6-c-nav__link--hover--BackgroundColor: var(--grn-bg-base);
  }

  .pf-v6-c-nav__link.pf-m-current,
  .pf-v6-c-nav__link.pf-m-current:hover {
    --pf-v6-c-nav__link--m-current--BackgroundColor: var(--grn-bg-base);
  }

  .pf-v6-c-menu-toggle {
    --pf-v6-c-menu-toggle--BackgroundColor: var(--grn-bg-base);
  }

  .pf-v6-c-button.pf-m-primary {
    --pf-v6-c-button--m-primary--BackgroundColor: var(--grn-accent-lime);
    --pf-v6-c-button--m-primary--Color: #000000;
    --pf-v6-c-button--hover--Color: #000000;
  }
}

/* PatternFly v5 dark mode */
:where(.pf-v5-theme-dark) {
  --pf-v5-global--link--Color: var(--grn-accent-lime);
  --pf-v5-global--link--Color--hover: var(--grn-lime-hover);
  --pf-v5-global--link--Color--visited: var(--grn-brand-green);
}

/* === Floating elements: menus, dropdowns, popovers === */
:root {
  --pf-t--global--background--color--floating-element--default: var(--grn-bg-raised);
  --pf-t--global--box-shadow--lg: 0 4px 20px rgba(0, 0, 0, 0.7);
}

.pf-v6-c-menu {
  --pf-v6-c-menu--BackgroundColor: var(--grn-bg-raised);
  --pf-v6-c-menu--BorderColor: var(--grn-border);
}

.pf-v6-c-menu__list-item:hover > .pf-v6-c-menu__item,
.pf-v6-c-menu__list-item:focus-within > .pf-v6-c-menu__item {
  background-color: var(--grn-bg-overlay);
}

.pf-v6-c-menu__item-text {
  color: var(--grn-text-primary);
}

:root:where(.pf-v6-theme-dark) .pf-v6-c-menu {
  --pf-v6-c-menu--BackgroundColor: var(--grn-bg-raised);
  border: 1px solid var(--grn-border);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.7);
}

/* === Text inputs and search fields === */
.pf-v6-c-text-input-group__text-input,
input.pf-v6-c-text-input-group__text-input {
  background-color: var(--grn-bg-raised) !important;
  color: var(--grn-text-primary) !important;
  border-color: var(--grn-border) !important;
}

.pf-v6-c-text-input-group__text-input:focus,
input.pf-v6-c-text-input-group__text-input:focus {
  border-color: var(--grn-accent-lime) !important;
  outline: none;
  box-shadow: 0 0 0 2px rgba(158, 255, 18, 0.15) !important;
}

.pf-v6-c-text-input-group {
  --pf-v6-c-text-input-group--BackgroundColor: var(--grn-bg-raised);
  background-color: var(--grn-bg-raised);
  border-color: var(--grn-border);
}

.pf-v6-c-text-input-group:focus-within {
  --pf-v6-c-text-input-group--focus-within--OutlineColor: var(--grn-accent-lime);
  border-color: var(--grn-accent-lime);
}

/* === Form controls (broader coverage) === */
.pf-v6-c-form-control {
  --pf-v6-c-form-control--BackgroundColor: var(--grn-bg-raised);
  background-color: var(--grn-bg-raised);
  color: var(--grn-text-primary);
  border-color: var(--grn-border);
}

/* === Catalog tile badges === */
.catalog-tile-pf-badge,
span.catalog-tile-pf-badge {
  background-color: var(--grn-bg-overlay) !important;
  color: var(--grn-accent-lime) !important;
  border: 1px solid var(--grn-border) !important;
}

/* === Modal dialogs === */
.pf-v6-c-modal-box {
  --pf-v6-c-modal-box--BackgroundColor: var(--grn-bg-raised);
  background-color: var(--grn-bg-raised) !important;
  border: 1px solid var(--grn-border);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.8);
}

.pf-v6-c-modal-box__body {
  background-color: var(--grn-bg-raised) !important;
  color: var(--grn-text-primary);
}

.pf-v6-c-modal-box__header {
  background-color: var(--grn-bg-overlay) !important;
  border-bottom: 1px solid var(--grn-border);
}

.pf-v6-c-modal-box__footer {
  background-color: var(--grn-bg-raised) !important;
  border-top: 1px solid var(--grn-border);
}

.pf-v6-c-backdrop {
  background-color: rgba(0, 0, 0, 0.75) !important;
}