/*************
* Tipografía *
**************/
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap");


*{
  font-family: "Montserrat", sans-serif;
  padding:0px; 
  margin:0px;
  box-sizing: border-box;
}


/**********
* Colores *
**********/
:root {
  --bg-dark: hsl(0, 0%, 95%);
  --bg: hsl(0, 0%, 98%);
  --bg-light: hsl(0, 0%, 100%);
  --bg-transparent: rgba(255, 255, 255, 0.65);

  --text: hsl(0, 0%, 5%);
  --text-muted: hsl(0, 0%, 30%);

  /* shadows */
  --shadow: 0px 2px 2px oklch(0 0 0 / 0.2), 0px 4px 4px oklch(0 0 0 / 0.1);
  --shadow-s: 
    inset 0 1px 2px #ffffff30, /* top highlight*/
    0 1px 2px #00000030,  /*dark shadow*/
    0 2px 4px #00000030; /*soft shadow*/ 

  --shadow-m: 
    inset 0 1px 2px #ffffff30, /* top highlight*/
    0 2px 4px #00000030,  /*dark shadow*/
    0 4px 8px #00000030; /*soft shadow*/

    --shadow-l: 
    inset 0 1px 2px #ffffff30, /* top highlight*/
    0 4px 6px #00000030,  /*dark shadow*/
    0 6px 10px #00000030; /*soft shadow*/

  /* type */
  --ff: "Manrope", sans-serif;
  --h1: 700 1.5rem/1.2em var(--ff);
  --h2: 700 1.25rem/1.2em var(--ff);
  --h3: 700 1.125rem/1.4em var(--ff);
  --h4: 700 1rem/1.6em var(--ff);
  --p: 400 1rem/1.6em var(--ff);
  --small: 400 0.75rem/1.8em var(--ff);

  --primary: oklch(0.5241 0.2014 259.43);
  --secondary: rgba(0, 238, 133, 1.0);
  --navbar-height: 48px;
  --transition: all 0.3s ease-in-out;
}

body.dark {

  --bg-dark: hsl(0 0% 0%);
  --bg: hsl(0 0% 5%);
  --bg-light: hsl(0 0% 10%);

  --text: hst(0 0% 95%);
  --text-muted: hsl(0 0% 70%);


}


p, li, ol, ul,input {
  letter-spacing: 0.5px;
  padding: 0px;
  margin: 0px;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Poppins', sans-serif;
  letter-spacing: 0.5px;
  margin:0px;
  padding:0px;
}

h1 {
  font: var(--h1);
  margin-bottom: 0.5rem;
  color: var(--text);
}
h2 {
  font: var(--h2);
  margin-bottom: 0.5rem;
  color: var(--text);
}
h3 {
  font: var(--h3);
  margin-bottom: 0.5rem;
  color: var(--text);
}
h4 {
  font: var(--h4);
  margin-bottom: 0.5rem;
  color: var(--text);
}

p {
  font: var(--p);
  color: var(--text-muted);
}
.small,
small {
  font: var(--small);
}


/* Reusable */ 
.rotate{
    rotate:-180deg;
}

.control-btn{
    background:transparent;
    border:none;
    color:inherit
}
.btn-primary{
    background:var(--primary);
    color: var(--bg-light);
}

.shake{
  animation: shake 0.82s cubic-bezier(.36, .07, .19, .97) both;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 1000px;
}

@keyframes shake {
  10%, 90% {
    transform: translate3d(-1px, 0, 0);
  }
  
  20%, 80% {
    transform: translate3d(2px, 0, 0);
  }

  30%, 50%, 70% {
    transform: translate3d(-4px, 0, 0);
  }

  40%, 60% {
    transform: translate3d(4px, 0, 0);
  }
}



#react-entry-point{
  min-height: 100vh;
  display: grid;
  position:relative;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto 1fr 10%; /* Navbar | contenido | footer */
  grid-template-areas:
    "navbar  navbar"
    "sidebar content"
    "footer  footer";
}

/*  Estilos generales */
#navbar{
  grid-area: navbar;
  height: var(--navbar-height);
  position:sticky;
  top:0;
  width:100%;
  display: grid;
  grid-template-columns: 0.5fr auto 0.5fr;
  padding: 5px 20px;
  background: var(--primary);
  color:white;
  z-index: 9;

  >div{
    display: flex;
    align-items: center;
    gap:15px;
  }

  #search-zone {
    justify-self: center;
  };


  >div:last-child{
    justify-content: flex-end;
  }

  .logo-icon{
    display: block;
    width: auto;
  }
  #logo-navbar svg{
      display:block;
      max-width: 20px;
      height: auto;
      fill: var(--bg-light) !important;
  }

  #toggle-btn-icon {
      transition: 200ms ease-in-out;
  }
  .profile-avatar {
    background: rgba(255, 255, 255, 0.7);
  } 

  #search-zone input, 
  #search-zone button, 
  #search-zone svg, 
  #search-zone *::placeholder{
      background:var(--bg);
      color:var(--primary);
  }

  #search-zone .mantine-Popover-dropdown{
    box-shadow:var(--shadow-s);
}


}

#sidebar {
  grid-area: sidebar;
  height:calc(100vh - var(--navbar-height));
  position:sticky;
  top:var(--navbar-height);
  width:250px;
  border-right: var(--border);
  padding:10px;
  background: var(--bg);
  transition: 200ms ease-in-out;

  a {
    color:var(--text-muted);
    border-radius: 7px;
    border:var(--border);
  }

  a:hover {
    background: var(--bg-dark);
    color:var(--text);
  }


}

#sidebar.close {
    width: 65px;
    overflow: hidden;
}



#page-content {
  grid-area: content;
  background: var(--bg-dark);
  padding:20px;
  display:flex;
  flex-direction:column;
  gap:50px;
}

#footer {

  grid-area: footer;
  display:grid;
  grid-template-columns: 0.5fr auto 0.5fr;
  z-index: 999;
  background: var(--bg-dark);

  > div{
    display: flex;
    align-items: center;
    justify-content: center;
  }
  #nextg-logo{
    max-height: 100%;  /* que no pase de la altura del contenedor */
    width: auto;       /* mantiene proporciones */
    max-height: 40px;   
  }
    
}

/* Estilos sin logar */
/* Hago que el content ocupe todo en la página de login*/
#react-entry-point:has(#page-content.login) {
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: "content";
}

/* Ocultar navbar, sidebar y footer */
#react-entry-point:has(#page-content.login) #navbar,
#react-entry-point:has(#page-content.login) #sidebar,
#react-entry-point:has(#page-content.login) #footer {
  display: none;
}

/* Hacer que page-content ocupe todo */
#layout:has(#page-content.login) #page-content {
  width: 100%;
  height: 100%;
}

#page-content.login {
    display: flex;
    justify-content: center;
    align-items: center;
    gap:20px;

  .login_section{
      background:var(--bg);
      border-radius:7px;
      padding:2rem;
      box-shadow:var(--shadow-m);
      width: 400px;

  }
  .login-form-wrapper{
      display:flex;
      flex-direction:column;
      flex-wrap:wrap;
      gap:20px;
  }
  .login_section #logo{
    width:100%;
  }
}




.graph-card{
  display: flex;
  flex-direction: column;
  border: var(--border);
  background: var(--bg-light);
  padding:1rem;
  border-radius: 7px;
  box-shadow: var(--shadow);  

  .graph-card-header{
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .graph-card-content {
    flex: 1 1 auto;
    display: flex;
    position:relative;
  }

  .dash-graph{
    flex:1 1 auto;
  }

}

#plant-analysis {
    /* display: flex;
    flex-wrap: wrap; */
  display: grid; 
  grid-template-columns: repeat(2, 1fr);
  justify-items: center;
  align-items: center;
  gap: 2rem;
  position:relative;

  .graph-card{
    box-sizing: border-box;
    width: 100%;
    height: calc((100vh - var(--navbar-height) - 80px) / 2);
    transition: var(--transition);
  }

  .graph-card.expanded {
    grid-column: 1 / -1;
    height: calc(100vh - var(--navbar-height) - 80px) !important;
  }


  .graph-card-title {
    padding-right:10px;
    white-space: nowrap;       
    overflow: hidden;          
    text-overflow: ellipsis;   
  }

  .modebar{
    display: none !important;
  }

}


/*******
* Logs *
********/

#page-content.logs {
    align-items:center;

  #logs-page {
    max-width:1000px;
    width:100%;
  }


  #log-div{
    overflow: auto;
    padding: 20px;
    border: 1px solid lightgray;
    border-radius: 7px;   
    margin-bottom: 30px;
  }

  .log_debug{
    color:gray;
  }
  .log_info {
    color:green;
  }

  .log_warning {
    color:yellow;
  }
  .log_error, .log_fatal {
    color:red;
  }

  .log_debug, .log_info, .log_warning, .log_error, .log_fatal{
    padding: 5px 0px;
    border-bottom:1px solid lightgray
  }

  #logs_filter_col{
    margin-left: auto;
    order: 2;
  }

  #log_level{
    padding-bottom:30px;
  }
  #log-div{
      padding-bottom:0px;
      padding-top:0px;;
  }
  #log-div>div pre{
      margin: 0.25rem 0px;
  }

  #log-div>div:last-child {
      border-bottom-color:transparent;
  }


}

/*Metricas*/
.metric-card{
    border-radius:7px;
    background: var(--bg);
    border: var(--border);
    color:var(--text-muted);
    box-shadow:var(--shadow-s);
    position:relative;
    display:flex;
    flex-wrap: wrap;
    flex-direction: column-reverse;

    > div{
      width:100%;
    }
}


.metric-card:hover{
  box-shadow:var(--shadow-m);
}

  .metric-content-wrapper{
    padding: 1rem;
    padding-bottom: 0px;
  }

  .metric-value{
      color:var(--text);
      font:var(--h4);
      font-size:3.5rem;
      display: flex;
      align-items: baseline;
  }

  .metric-title p {
    font-size:0.7rem;
    color: var(--text-muted);
  }

.metric-card-with-evol{

    .metric-title{
        flex: 1 0 100%;
    }

    .metric-content-wrapper{
        flex-wrap:wrap;
    }


    .metric-content-wrapper{
        display:flex;
        justify-content:space-between;
        align-items: start;
    }

    .metric-value{
        font-size:2.5rem !important;
        line-height: 2.5rem;
    }
}

.metric-background-icon {
    position:absolute;
    height:100%;
    width:max(50%, 140px);
    top:0px;
    right:0px;
    overflow: hidden;
}

.metric-background-icon svg{
    width:100%;
    height:100%;
    opacity:0.2;
    transform: translate3d(20px, -50px, 0px);
    rotate: 30deg;
}

.metric-background-icon svg path{
  stroke-width: 1px;
}
.metric-evolution {
    margin-bottom: -10px;
}



#overview-metrics {
    display: flex;
    gap: 30px;
    justify-content: center;

    .metric-card{
      width:250px;
    }


    #active-alerts{
      width: 180px;
    }
    

}

#plants-general-overview {
    box-shadow:var(--shadow-l);
}

#fechas {
    min-width: 280px;
}



.ag-grid-graph-cell{
  padding:0px !important;
  display:flex !important;    
}

.graph-cell-container{
    display:flex;
    flex-wrap:wrap;
    justify-content: center;
    align-items: center;
}
.cell-graph{
  flex: 1 0 100%;
}


.cell-metric{
    display:flex;
    justify-content:center;
    align-items:baseline;

    .cell-metric-value{
        color:var(--text);
        padding-right:2px;
        line-height: 1rem;
    }

    .cell-metric-units{
        color:var(--text-muted);
        font-size:0.6rem;
        line-height: 1rem;
    }
}