/* HTML Styling */
html, body {
  /* Variables */
  --desp-background-color: #0D1527FF;
  --desp-background-color-transparent: #0D1527BB;
  --desp-font-color: #FFFFFF;
  --desp-hover-color: #7A7A7A;
  --desp-purple-color: #EF2B89;
  --desp-violet-color: #7B34DB;
  --desp-frame-grey-color: #B7B7B7;
  --desp-darkgrey-color: #3C3C3C;
  --desp-frame-hover-color: #1E2637;
  --desp-frame-background-color: #0D1527BB;
  --desp-font-size: 16px;
  --desp-frame-font-size: 16px;
  --header-username-max-width: 200px;
  --header-height: 64px;
  --header-eu-logo-width: 160px;
  --header-eu-logo-height: 36px;
  /* FloodMIND v2 logo is a square (1024x1024) bitmap -- keep width == height
     so it is not stretched, and match --header-eu-logo-height so both logos
     in #left-container sit on the same optical line. */
  --header-service-logo-width: auto;
  --header-service-logo-height: 56px;
  --header-icon-height: 24px;
  --header-user-icon-height: 18px;
  --header-padding: 20px;
  --link-padding: 16px;

  /* Footer Variables */
  --footer-height: 64px;
  --footer-logo-height: 40px;

  margin: 0;
  padding: 0;
}

/* --- DESP page layout -------------------------------------------------------
   Lay the page out as a fixed-height column: header / app / footer. The app
   cell (#main-container) takes all remaining space, so the footer is always
   visible and GeoWeb -- which sizes #root to height:100% of #main-container --
   can never overflow past the bottom. No pixel math; self-adjusts if the
   header/footer height ever changes. */
body {
  display: flex;
  flex-direction: column;
}
#desp-header-container {
  flex: 0 0 auto; /* natural height, never grow/shrink */
}
#main-container {
  flex: 1 1 auto; /* fill everything between header and footer */
  min-height: 0;  /* allow shrinking instead of overflowing */
  overflow: hidden;
}
/* GeoWeb's app layout Box hard-codes height:100dvh -- the FULL viewport --
   which ignores our header/footer and pushes the maps' bottom timeline down
   under the footer. Size it to the space between header and footer instead.
   Anchored on the stable data-testid, never the volatile emotion class
   (e.g. .css-g7uspx), so it survives GeoWeb version bumps. */
[data-testid="appLayout"] {
  height: calc(100dvh - var(--header-height) - var(--footer-height)) !important;
}

/* GeoWeb's own account/avatar icon button. The DESP header already carries
   the user area, so this duplicate inside the app is hidden. Anchored on the
   avatar child's stable data-testid, never the volatile emotion class
   (e.g. .css-4gppig), so it survives GeoWeb version bumps. !important beats
   emotion's runtime-injected <style> rules, which land after this sheet. */
.MuiIconButton-root:has([data-testid="avatar"]) {
  display: none !important;
}
/* GeoWeb's overlayer picker in the layer manager (map-overlay icon plus the
   "countryborders" select). Hidden so users can't switch the overlay.
   Anchored on the plain "overlayers-column" class GeoWeb sets on the Grid,
   not the volatile emotion class (e.g. .css-h88nfx). */
.overlayers-column {
  display: none !important;
}

/* DESP Font */
@font-face {
  font-family: "Roboto-Regular";
  src: local("Roboto-Regular"), url(./Roboto/Roboto-Regular.ttf) format("truetype");
}
@font-face {
  font-family: "Roboto-Bold";
  src: local("Roboto-Bold"), url(./Roboto/Roboto-Bold.ttf) format("truetype");
}

/* Header Container */
#desp-header-container {
  width: 100vw;
  max-width: 100vw;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  height: var(--header-height);
  max-height: var(--header-height);
  margin: 0;
  padding: 0;
  background-color: var(--desp-background-color);
  color: var(--desp-font-color);
  font-family: Roboto-Bold, sans-serif;
  font-size: var(--desp-font-size);
  /* GeoWeb is a fixed full-screen app, so pin the header and defeat the DESP
     auto-hide-on-scroll (header.js toggles position/top inline; !important
     wins over inline styles, leaving the provided JS untouched). */
  position: sticky !important;
  top: 0 !important;
  /* Raised above GeoWeb's Material-UI layers (app bar ~1100, modals ~1300,
     tooltips ~1500) so the DESP header and its dropdowns stay in front. */
  z-index: 10000;
}
#desp-header-inner-container {
  max-width: 1600px;
  height: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  flex-grow: 1;
  margin: 0 var(--header-padding);
  padding: 0;
}

/* Left Container */
#left-container {
  height: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  margin: 0;
  padding: 0;
  gap: var(--header-padding);
}
/* The logo anchors are flex items; without this they can be shrunk on narrow
   viewports, which would squeeze the images inside them. */
#left-container > a {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
#eu-flag-de {
  display: block;
  max-width: var(--header-eu-logo-width);
  max-height: var(--header-eu-logo-height);
  width: var(--header-eu-logo-width);
  height: var(--header-eu-logo-height);
}
#service-logo {
  display: block;
  max-width: var(--header-service-logo-width);
  max-height: var(--header-service-logo-height);
  width: var(--header-service-logo-width);
  height: var(--header-service-logo-height);
  /* Guard the aspect ratio if the box is ever made non-square again. */
  object-fit: contain;
}

/* Central Menu Container */
#central-container {
  height: 100%;
  max-width: 800px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  flex-grow: 1;
  margin: 0;
  padding: 0 calc(var(--header-padding) * 2);
}
.header-link {
  color: var(--desp-font-color);
  /*white-space: nowrap;*/
  text-decoration: none;
  transition: color 250ms ease-in-out;
}
.header-link:hover {
  color: var(--desp-hover-color);
}
.header-link.current-link {
  color: var(--desp-purple-color);
} 
.header-link.visited {
  color: var(--desp-purple-color);
}

/* Right container */
#right-container {
  display: flex;
  height: 100%;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: var(--header-padding);
}
#info-container {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  /* #user-container (the login area) is hidden, so the info button would sit
     flush against the inner container edge -- nudge it inward. */
  margin-right: calc(var(--header-padding) * 2);
}
#user-container {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
/* No authentication wired up: hide the whole login / Sign In area.
   (Kept in the DOM so header.js's getElementById('login-div')/('user-frame')
   don't throw and break the rest of the header.) */
#user-container {
  display: none;
}
#info-button {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
}
#info-icon {
  width: var(--header-icon-height);
  height: var(--header-icon-height);
  transition: color 250ms ease-in-out;
}
#info-container:hover #info-icon {
  color: var(--desp-hover-color);
}

#info-frame, #user-frame {
  position: absolute;
  display: none;
  opacity: 0;
  top: var(--header-height);
  flex-direction: column;
  padding: 0;
  margin: 0;
  background-color: var(--desp-frame-background-color);
  gap: 0px;
  font-size: var(--desp-frame-font-size);
}
#info-frame {
  width: 160px;
  left: auto;
  right: 0;
}
#user-frame {
  width: 200px;
  left: 0px;
}
.frame-link {
  text-decoration: none;
  padding: var(--link-padding);
  transition: color 250ms ease-in-out;
  cursor: pointer;
}
.frame-link:link {
  color: var(--desp-frame-grey-color);
}
.frame-link:visited {
  color: var(--desp-frame-grey-color);
}
.frame-link:hover {
  background-color: var(--desp-frame-hover-color);
  color: var(--desp-hover-color);
}
#info-container hr, #user-container hr {
  color: var(--desp-darkgrey-color);
  margin: 0 3px;
}

#login-div {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 0 calc(var(--header-padding) * 2);
  border-radius: calc(var(--header-eu-logo-height) / 2);
  height: var(--header-eu-logo-height);
  background: linear-gradient(90deg, var(--desp-purple-color) 0%, var(--desp-purple-color) 40%, var(--desp-violet-color) 60%, var(--desp-violet-color) 100%);
  background-size: 400% 100%;
  animation: violet-to-mix 250ms ease-in-out forwards;
  cursor: pointer;
}
#login-div:hover {
  animation: mix-to-violet 250ms ease-in-out forwards;
}
.login-a {
  display: flex;
  text-decoration: none;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: var(--header-padding);
}
.login-icon {
  width: var(--header-user-icon-height);
  height: var(--header-user-icon-height);
  color: var(--desp-font-color);
  padding: 0;
  margin: 0;
}
.login-text {
  max-width: var(--header-username-max-width);
  font-size: var(--desp-font-size);
  color: var(--desp-font-color);
  margin: 0;
  padding: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.not-logged {
  /* TO DEVS: set 'display: none' when user is logged, 'display: flex' when not-logged */
  display: none;
}
.logged {
  /* TO DEVS: set 'display: flex' when user is logged, 'display: none' when not-logged */
  display: flex;
}

/* Hamburger Menu on Mobile */
#menu-icon-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
#menu-icon {
  width: var(--header-logo-height);
  height: var(--header-logo-height);
  transition: color 250ms ease-in-out;
}
#menu-icon:hover {
  color: var(--desp-hover-color);
}

/* Gradient Color Button Animation */
@keyframes mix-to-violet {
  0% {
    background-position: 50% 50%;
  }
  100% {
    background-position: 100% 50%;
  }
}
@keyframes violet-to-mix {
  0% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 50% 50%;
  }
}


/* Mobile menu */
#dropdown-menu-container {
  /* TO DEVS: change to 'display: flex' on menu-icon click */
  display: none;
  /* display: flex; */
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: calc(100dvh - var(--header-height));
  top: 0;
  padding: 0;
  font-family: Roboto-Bold, sans-serif;
  font-size: var(--desp-font-size);
  z-index: 999;
}
.dropdown-link {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 100%;
  flex-grow: 1;
  
  background-color: var(--desp-background-color);
  border-top: solid 1px #000;
  border-bottom: solid 1px #000;
}
.dropdown-link a {
  text-decoration: none;
  color: var(--desp-font-color);
  transition: color 250ms ease-in-out;
}
.dropdown-link a:hover {
  color: var(--desp-hover-color);
}


/* Responsiveness */
@media only screen and (max-width: 1024px) {
  #central-container{
    display: none;
  }
}
@media only screen and (min-width: 1025px) {
  #central-container{
    display: flex;
  }
  #menu-icon-container {
    display: none;
  }
  #dropdown-menu-container {
    display: none;
  }
}
@media only screen and (max-width: 1280px) {
  .login-text {
    display: none;
  }
  #login-div {
    padding: 0 9px;
  }
  #user-frame {
    left: auto;
    right: -20px;
  }
}
@media only screen and (min-width: 1281px) {
  .login-text.logged {
    /* show logged text over 1280px when user is logged */
    display: flex;
  }
  .login-text.not-logged {
    /* show not-logged text over 1280px when user is not-logged */
    display: flex;
  }
}