@import "fonts.css";

/**
 * A stylesheet for theming Cockpit via CSS overrides workaround described at
 * https://github.com/cockpit-project/cockpit/pull/17437
 *
 * Only works when using a Cockpit version patched for loading this file in
 * each HTML page.
 */

:root {
  /* Custom theme: variables */
  /* See https://brand.suse.com and https://suse.eosdesignsystem.com/typography */
  --PineGreen: #0C322C;
  --JungleGreen: #30BA78;
  --DarkerJungleGreen: #0E7E3C;
  --Mint: #90EBCD;
  --Fog:  #EFEFEF;
  --Persimmon: #FE7C3F;
  --MidnightBlue: #192072;
  --WaterholeBlue: #2453FF;
  --BaseFont: Lato, arial, helvetica, sans-serif;
  --HeadlinesFont: Poppins, san-serif;
  --MonospaceFont: 'Roboto Mono', monospace;
  --Headings: "Poppins";

  --color-primary: var(--DarkerJungleGreen);
  --color-primary-active: var(--PineGreen);

  --pf-v6-c-page__main-container--MarginInlineStart: 1.5em;
  --pf-v6-c-page__main-container--BackgroundColor: black;

  /* Custom theme: PatternFly overrides */

  /** Fonts **/
  --pf-global--FontFamily--sans-serif: var(--BaseFont);
  --pf-global--FontFamily--heading--sans-serif: var(--HeadlinesFont);
  --pf-global--FontFamily--monospace: var(--MonospaceFont);
  --pf-global--FontFamily--redhat-updated--sans-serif: var(--BaseFont);
  --pf-global--FontFamily--redhat-updated--heading--sans-serif: var(--HeadlinesFont);
  --pf-global--FontFamily--redhat--monospace: var(--MonospaceFont);
  --pf-global--FontFamily--redhatVF--sans-serif: var(--BaseFont);
  --pf-global--FontFamily--redhatVF--heading--sans-serif: var(--HeadlinesFont);
  --pf-global--FontFamily--redhatVF--monospace: var(--MonospaceFont);
  --pf-global--FontFamily--overpass--sans-serif: var(--BaseFont);
  --pf-global--FontFamily--overpass--monospace: var(--BaseFont);

  /** Colors **/
  --pf-global--BackgroundColor--dark-100: var(--PineGreen);
  --pf-global--BackgroundColor--light-100: var(--JungleGreen);
  --pf-global--danger-color--100: var(--Persimmon);
  --pf-t--global--color--brand--100: var(--JungleGreen);
  --pf-t--global--color--brand--200: var(--DarkerJungleGreen);
  --pf-t--global--color--brand--300: var(--DarkerJungleGreen);
  --pf-t--global--color--brand--hover: var(--PineGreen);
  --pf-t--global--text--color--link--100: var(--JungleGreen);
  --pf-t--global--text--color--link--200: var(--DarkerJungleGreen);
  --pf-t--global--text--color--link--300: var(--DarkerJungleGreen);

  --pf-t--global--dark--color--brand--100: var(--Mint);
  --pf-t--global--dark--color--brand--200: var(--JungleGreen);
  --pf-t--global--dark--color--brand--300: var(--DarkerJungleGreen);
}

.pf-v6-theme-dark {
  --pf-t--global--color--brand--hover: var(--Fog);
  --pf-t--global--text--color--brand--default: var(--pf-t--global--dark--color--brand--100);
}

.sidebar, #hosts-sel, #topnav, #sidebar-toggle {
  background-color: var(--pf-global--BackgroundColor--dark-100);
}

#nav-system .pf-v6-c-nav, #hosts-sel .pf-v6-c-menu-toggle, #topnav .pf-v6-c-menu-toggle, #sidebar-toggle .ct-nav-toggle {
  --pf-t--global--text--color--regular: var(--Fog);
  --pf-t--global--text--color--subtle: var(--Fog);
  --pf-v6-c-nav__link--m-current--Color: var(--pf-t--global--color--brand--hover);
  --pf-v6-c-nav__link--hover--Color: var(--pf-t--global--color--brand--hover);
  --pf-v6-c-menu-toggle--m-plain--Color: var(--Fog);
  --pf-t--global--icon--color--regular: var(--Fog);
}

#topnav .pf-v6-c-menu-toggle:is(:hover, :focus), #topnav .pf-v6-c-menu-toggle:is(:hover, :focus) .pf-v6-c-icon__content {
  --pf-v6-c-menu-toggle--Color: var(--pf-t--global--color--brand--hover);
  --pf-v6-c-icon__content--Color: var(--pf-t--global--color--brand--hover);
  background-color: var(--pf-t--global--background--color--action--plain--alt--hover);
}

#super-user-indicator .pf-v6-c-button.ct-unlocked {
  --pf-v6-c-button--Color: var(--Mint)
}

.header {
  --pf-v6-c-menu-toggle--hover--Color: red;
}

.pf-v6-c-page__main-container {
  margin-block-start: var(--pf-v6-c-page__main-container--MarginInlineStart);
}

.nav-system-menu {
  padding-inline-start: 0;
  padding-inline-end: 0;
}

.nav-system-menu .host-apps {
  padding-inline-start: calc(var(--pf-t--global--spacer--inset--page-chrome) / 2);
  padding-inline-end: calc(var(--pf-t--global--spacer--inset--page-chrome) / 2);
}

.page > .navbar {
  margin: 0;
}

.page > .navbar .ct-nav-toggle {
  background: transparent;
}

.usage-bar {
  --bg-color: var(--JungleGreen);
}

.pf-v6-c-form-control > select > option {
  background-color: var(--ct-color-bg);
}
