/** global.css */
:root {
  --be-main-color: hsl(93, 69%, 34%);
  --be-secondary-color: hsl(170, 47%, 49%);
  --be-light-color: hsl(225, 22%, 96%);
  --be-txt-color: hsl(0, 0%, 20%);
  --be-txt-medium-color: hsl(0, 0%, 40%);
  --be-txt-light-color: hsl(180, 2%, 64%);
  --be-error-color: hsl(349, 100%, 35%);
  --be-warning-color: hsl(36, 86%, 52%);
  --be-muted-color: hsl(0, 0%, 71%);
  --be-cancel-color: hsl(0, 0%, 40%);

  --sl-color-primary-25: hsl(90, 50%, 98%);
  --sl-color-primary-50: hsl(93, 45%, 94%);
  --sl-color-primary-100: hsl(93, 46%, 84%);
  --sl-color-primary-200: hsl(93, 46%, 74%);
  --sl-color-primary-300: hsl(93, 47%, 63%);
  --sl-color-primary-400: hsl(93, 47%, 55%);
  --sl-color-primary-500: hsl(93, 75%, 37%);
  --sl-color-primary-600: hsl(93, 54%, 45%);
  --sl-color-primary-700: hsl(93, 58%, 42%);
  --sl-color-primary-800: hsl(93, 61%, 39%);
  --sl-color-primary-900: var(--be-main-color);
  --sl-color-primary-darker: hsl(93, 44.78%, 26.27%);
  --sl-focus-ring-color-primary: hsl(93, 52%, 47%, 0.33);

  --lumo-primary-color: var(--sl-color-primary-900);
  --lumo-primary-text-color: var(--sl-color-primary-900);
  --lumo-primary-color-50pct: var(--sl-color-primary-900);
  --lumo-primary-color-10pct: var(--sl-focus-ring-color-primary);

  --own_consumption: var(--sl-color-primary-500);
  --external_consumption: hsl(56, 100%, 50%);
  --own_production_sold: hsl(202, 50%, 45%);
  --self_consumption_saving: hsl(29, 83%, 56%);
  --energy_sold_saving: hsl(308, 100%, 62%);
  --total_produced_energy: hsl(152, 100%, 62%);
  --total_savings: hsl(244, 100%, 62%);
}

html,
body {
  width: 100%;
  height: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--lumo-font-family);
}

::selection {
  color: white;
  background-color: var(--be-main-color);
}

be-flex {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
}

be-page {
  display: grid;
  width: inherit;
  align-content: flex-start;
  overflow-y: auto;
  margin-bottom: 72px;
}

vaadin-details {
  padding: 8px 20px;
}

vaadin-details > [slot='summary'] {
  font-size: var(--lumo-font-size-xl);
}

.long {
  width: calc(192px * 2 + 2rem);
}

.card {
  margin-top: 1rem;
  position: relative;
  width: 100%;
  background-color: #f3f5f5;
  border-radius: 5px;
  box-shadow: 0 20px 25px 5px rgb(0 0 0 / 0.1), 0 15px 8px -5px rgb(0 0 0 / 0.2);
  padding: 12px 8px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
}

.card_header {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 0.2fr;
  align-items: center;
}

.card_title {
  margin: 0;
  color: #a1a5a5;
  font-size: 14px;
  font-weight: 450;
}

.card_data {
  margin: 0;
  color: #495463;
  font-size: 14px;
  font-weight: 400;
}

.btn_card {
  color: var(--sl-color-primary-400);
  border: 0;
  padding: 0;
  background-color: transparent;
  cursor: pointer;
  width: 25px;
  height: 25px;
}

.selector_wrapper {
  width: 100%;
  position: relative;
}

.selector_btn {
  width: 100%;
  text-align: start;
  height: 36px;
  border-radius: 5px;
  outline: none;
  font-size: 14px;
  font-weight: 550;
  background-color: var(--be-light-color);
  border: none;
  padding: 0 8px;
  color: var(--be-main-color);
  margin-bottom: 3px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  transition: background-color 0.3s ease;
  left: 0;
}

.selector_btn > p {
  margin: 0;
}

.arrow_down,
.arrow_up {
  width: 20px;
  height: 20px;
  fill: rgba(36, 49, 68, 0.8);
  transition: all 0.3s ease;
}

.arrow_up {
  transform: rotateX(180deg);
}

.selector_wrapper_options {
  position: absolute;
  z-index: 4;
  background-color: #e8ebef;
  border: none;
  font-size: 16px;
  border-radius: 5px;
  display: grid;
  gap: 8px;
  box-sizing: border-box;
  width: 100%;
  overflow-y: scroll;
  transition: padding 0.3s ease, max-height 0.3s ease;
  scrollbar-color: var(--sl-color-primary-400) transparent;
  scrollbar-width: thin;
  margin-top: 6px;
}

.selector_btn_options {
  border-radius: 5px;
  outline: none;
  font-size: 16px;
  font-weight: 550;
  border: none;
  padding: 8px;
  color: #585858;
  transition: opacity 0.6s ease, background-color 0.3s ease;
}

.selector_btn:hover,
.selector_btn_options:hover {
  background-color: #d9dee0;
}

.hide_selector {
  display: none;
  max-height: 0;
  padding: 0;
}

.show_selector {
  max-height: 500px;
  padding: 8px;
}

.selected {
  pointer-events: none;
  cursor: none;
}

.not_selected {
  background-color: transparent;
  cursor: pointer;
}

@media (width < 768px) {
  .selector_wrapper {
    position: static;
  }
  .selector_wrapper_options {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 90%;
  }
}

@keyframes pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

@media (max-width: 600px) {
  vaadin-text-field,
  vaadin-password-field,
  vaadin-combo-box,
  .long {
    width: 100%;
  }
}

/*
  workaround to set vaadin-login background-image
  we handle here because there is a build path issue from Login
 */
vaadin-login-overlay-wrapper::part(overlay) {
  background-image: url(img/bg.webp);
  background-size: cover;
}


/* SCROLLBAR */
/* width */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: var(--be-light-color); 
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: var(--be-main-color); 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: var(--sl-color-primary-400) 
}