/* GTH corporate backend theme overrides
   Primary: #0c9675 (green)
   Secondary: #e29a37 (orange)
*/
:root {
  --gth-primary: #0c9675;
  --gth-primary-600: #0a8165;
  --gth-primary-700: #086b54;
  --gth-secondary: #e29a37;
  --gth-secondary-600: #c9852f;
}

/* Links and accents */
a, .text-primary, .link-primary { color: var(--gth-primary); }
a:hover, a:focus { color: var(--gth-primary-600); }

/* Primary buttons */
.btn.btn-primary,
.btn.primary,
.control-popup .modal-footer .btn.btn-primary {
  background-color: var(--gth-primary);
  border-color: var(--gth-primary);
}
.btn.btn-primary:hover,
.btn.btn-primary:focus,
.btn.btn-primary:active {
  background-color: var(--gth-primary-600);
  border-color: var(--gth-primary-600);
}

/* Default buttons use secondary accent when appropriate */
.btn.btn-default:hover,
.btn.btn-default:focus {
  border-color: var(--gth-secondary);
  color: var(--gth-secondary);
}

/* Switches, checkboxes accent */
.custom-switch input:checked + .custom-switch-indicator,
.switch input:checked + .control-indicator,
.checkbox input:checked + .control-indicator {
  background-color: var(--gth-primary);
  border-color: var(--gth-primary);
}

/* Sidebar main menu hover / active */
.layout > .layout-row > .mainmenu .nav > li.active > a,
.layout > .layout-row > .mainmenu .nav > li a:hover {
  color: #fff;
  background-color: var(--gth-primary);
}

/* Secondary highlights (badges, labels) */
.badge-info, .badge.badge-info,
.label-info, .label.label-info {
  background-color: var(--gth-secondary);
}

/* List filter active chips */
.control-filter .filter-scope .filter-scope-control.active,
.control-filter .filter-scope .filter-scope-control:active {
  border-color: var(--gth-primary);
  color: var(--gth-primary);
}

/* Form section headers underline */
.form-sidebar .layout-cell .form-section:not(.collapsed) .form-section-header,
.form-layout .form-section:not(.collapsed) .form-section-header {
  border-bottom-color: var(--gth-primary);
}

/* Selection highlight */
::selection { background: var(--gth-secondary); color: #fff; }
::-moz-selection { background: var(--gth-secondary); color: #fff; }


/* === Top header (navbar) color ===
   Make the admin top bar light grey as requested (#f2f2f2)
*/
#layout-header,
#layout-header .navbar {
  background-color: #f2f2f2 !important;
  border-bottom: 1px solid #e5e5e5 !important;
}

#layout-header .navbar .nav > li > a,
#layout-header .navbar .navbar-nav > li > a,
#layout-header .navbar .navbar-brand,
#layout-header .navbar .nav > li > a .wn-icon,
#layout-header .navbar .navbar-nav > li > a .wn-icon {
  color: #333 !important;
}

/* Hover / active states keep brand accents for clarity */
#layout-header .navbar .nav > li > a:hover,
#layout-header .navbar .navbar-nav > li > a:hover,
#layout-header .navbar .nav > li.active > a,
#layout-header .navbar .navbar-nav > li.active > a {
  color: var(--gth-primary) !important;
  background-color: transparent !important;
}

/* Dropdown menus under the header */
#layout-header .navbar .dropdown-menu {
  border-color: #e5e5e5;
}
#layout-header .navbar .dropdown-menu > li > a {
  color: #333;
}
#layout-header .navbar .dropdown-menu > li > a:hover {
  background-color: #eee;
  color: var(--gth-primary);
}


/* === Main horizontal menu (layout-mainmenu) ===
   Style the top main menu bar under the header */
#layout-mainmenu,
#layout-mainmenu .navbar {
  background-color: #f2f2f2 !important;
  border-bottom: 1px solid #e5e5e5 !important;
}

#layout-mainmenu .nav > li > a,
#layout-mainmenu .navbar-nav > li > a {
  color: #333 !important;
}

#layout-mainmenu .nav > li > a:hover,
#layout-mainmenu .navbar-nav > li > a:hover {
  color: var(--gth-primary) !important;
  background-color: transparent !important;
}

#layout-mainmenu .nav > li.active > a,
#layout-mainmenu .navbar-nav > li.active > a {
  color: var(--gth-primary) !important;
  border-bottom: 2px solid var(--gth-primary) !important;
  background-color: transparent !important;
}

#layout-mainmenu .nav > li > a .wn-icon,
#layout-mainmenu .navbar-nav > li > a .wn-icon {
  color: inherit !important;
}


/* === GTH custom additions: Breadcrumb + mainmenu active color override (2026-01-18) === */
/* Breadcrumb background and text color */
.control-breadcrumb,
.control-breadcrumb .breadcrumb {
  background-color: #626a80 !important;
  border-color: #626a80 !important;
}
.control-breadcrumb,
.control-breadcrumb a,
.control-breadcrumb li,
.control-breadcrumb li a,
.control-breadcrumb .breadcrumb > li,
.control-breadcrumb .breadcrumb > li > a,
.control-breadcrumb .breadcrumb > li + li:before {
  color: #ffffff !important;
}
/* Make breadcrumb divider triangle blend with background */
.control-breadcrumb li:before,
.control-breadcrumb .breadcrumb > li + li:before {
  border-left-color: #626a80 !important;
}
.control-breadcrumb .breadcrumb > li + li:before { opacity: 0.85; }
.control-breadcrumb a:hover,
.control-breadcrumb a:focus {
  color: #ffffff !important;
  text-decoration: underline;
}

/* Active item in the main horizontal menu should be dark on light background */
nav#layout-mainmenu.navbar ul li.active > a,
.mainmenu-collapsed li.active > a {
  color: #333333 !important;
}
nav#layout-mainmenu.navbar ul li.active > a .wn-icon,
.mainmenu-collapsed li.active > a .wn-icon {
  color: #333333 !important;
}


/* === Left sidenav (layout-sidenav-container) background and link colors === */
.layout-cell.layout-sidenav-container {
  background-color: #f2f2f2 !important;
  border-right: 1px solid #e5e5e5;
}

/* Make links in the left sidenav dark for contrast on light bg */
.layout-sidenav-container .nav > li > a,
.layout-sidenav-container a {
  color: #333 !important;
}
.layout-sidenav-container .nav > li > a .wn-icon,
.layout-sidenav-container a .wn-icon {
  color: inherit !important;
}

/* Hover / active states keep brand accent color */
.layout-sidenav-container .nav > li > a:hover,
.layout-sidenav-container .nav > li > a:focus {
  color: var(--gth-primary) !important;
  background-color: transparent !important;
}
.layout-sidenav-container .nav > li.active > a {
  color: var(--gth-primary) !important;
  background-color: transparent !important;
}


/* === Left sidenav alt background helper (.bg-p) ===
   Some backend layouts use .bg-p to color the left menu background.
   Align it with our light theme and link colors. */
.bg-p {
  background-color: #f2f2f2 !important;
}
.bg-p a,
.bg-p .nav > li > a {
  color: #333 !important;
}
.bg-p .nav > li > a .wn-icon,
.bg-p a .wn-icon {
  color: inherit !important;
}
/* Hover / active states */
.bg-p .nav > li > a:hover,
.bg-p .nav > li > a:focus {
  color: var(--gth-primary) !important;
  background-color: transparent !important;
}
.bg-p .nav > li.active > a {
  color: var(--gth-primary) !important;
  background-color: transparent !important;
}


/* === Left sidenav icon color tweaks (2026-01-18) ===
   Ensure icons inside left sidenav links are dark on light bg,
   and follow hover/active accent color. */
#layout-sidenav ul li a i {
  color: #333 !important;
}
#layout-sidenav ul li a:hover i,
#layout-sidenav ul li a:focus i,
#layout-sidenav ul li.active > a i {
  color: var(--gth-primary) !important;
}


/* === Settings sidenav tree text colors (2026-01-18) ===
   Make headers/links inside settings trees dark for readability on light bg */
.sidenav-tree ul.top-level > li > ul li a span.header {
  color: #333 !important;
}
.sidenav-tree ul.top-level > li > ul li a span.description {
  color: #333 !important;
}
.sidenav-tree ul.top-level > li > div.group h3 {
  color: #333 !important;
}


/* === Settings sidenav tree group marker color (2026-01-18) ===
   Make the small marker to the left of settings group headers dark */
.sidenav-tree ul.top-level > li > div.group h3:before {
  color: #333 !important;               /* if the marker uses font/icon */
  border-left-color: #333 !important;   /* if the marker is a triangle via border */
}


/* === Mainmenu pressed/focused while hovered state (2026-01-18) ===
   Ensure text and icons stay dark on light background when link is active/focused */
nav#layout-mainmenu.navbar ul li:hover a:active,
.mainmenu-collapsed li:hover a:active,
nav#layout-mainmenu.navbar ul li:hover a:focus,
.mainmenu-collapsed li:hover a:focus {
  color: #333 !important;
  background-color: transparent !important;
}
nav#layout-mainmenu.navbar ul li:hover a:active .wn-icon,
.mainmenu-collapsed li:hover a:active .wn-icon,
nav#layout-mainmenu.navbar ul li:hover a:focus .wn-icon,
.mainmenu-collapsed li:hover a:focus .wn-icon {
  color: #333 !important;
}

nav#layout-mainmenu.navbar-mode-inline ul.mainmenu-toolbar li.mainmenu-quick-action a, nav#layout-mainmenu.navbar-mode-inline_no_icons ul.mainmenu-toolbar li.mainmenu-quick-action a {
  color: #333;
}

/* === Signin page customizations (GTH) — 2026-01-18 === */
/* Replace Winter CMS text logo with corporate SVG on the signin page */
body.signin .layout-head .wn-logo {
  position: relative;
  display: block;
  width: 220px;              /* adjust as needed to fit the SVG */
  height: 48px;              /* adjust as needed to fit the SVG */
  margin: 0;
  background-image: url('../logos/green-hydrogen-en.svg');
  background-repeat: no-repeat;
  background-position: left center;
  background-size: contain;
  text-indent: -9999px;      /* hide the "Winter CMS" text */
  overflow: hidden;
  white-space: nowrap;
  color: transparent;
}

/* For hydrogen en logo */
body.outer .layout>.layout-row.layout-head>.layout-cell h1.wn-logo, body.outer .layout>.layout-row.layout-head>.layout-cell h1.oc-logo {
    width: 25rem;
    height: 22rem;
}

/* Background for the block that contains the outer-form-container */
body.signin .outer-form-container {
  background-color: #f2f2f2;
}
/* Or apply background to the immediate layout cell as requested */
body.signin .layout-row:nth-child(2) .layout-cell {
  background-color: #f2f2f2;
}

/* Make the heading dark on the light background */
body.outer .layout>.layout-row>.layout-cell .outer-form-container h2 {
  color: #333333;
}
body.outer .layout>.layout-row>.layout-cell .outer-form-container .forgot-password a{
  color: #333333;
}

/* Make the login button green using the corporate primary color */
body.outer .layout>.layout-row>.layout-cell .outer-form-container .horizontal-form button {
  background-color: var(--gth-primary);
  border-color: var(--gth-primary);
  color: #ffffff;
}