/* ------ irrigation recommendation -------------- */
.irrigation-recommendation-page-container{
    /* height: 100%; */
    width: 100%;
    height: 95vh; 
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center; 
    justify-content:flex-start;  
    background-color: var(--primary-background-color);
    padding: 1px;
    box-sizing: border-box;
}

.irrigation-recommendation-page-head-content{
    height: 20%;
    width: 99.7%;
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: center; 
    justify-content:space-between;  
    margin: 0px;
    background-color: var(--div-head-first-background-color);
    border: var(--div-border);
    border-radius: 5px;
    box-sizing: border-box;
}
/* all plant units */
.irrigation-recommendation-page-content{
    width: 99.7%;
    height: 80%; 
    /* flex: 1; */
    display: flex;
    flex-direction: column;
    align-items: center; 
    justify-content:flex-start;  
    background-color: var(--div-body-background-color);
    padding: 0px;
    overflow-y:auto;
    box-sizing: border-box;
}

/* -------- page head -------------- */
#irrigation-recommendation-total-plan-recommended-graph-div{
    width: 10%;
    height: 98%;
    flex: 1;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    margin: 1px;
    background-color: var(--info-background-color);
    border: var(--div-border);
    border-radius: 5px; 
}

#irrigation-recommendation-total-plan-by-day-recommended-graph-div{
    width: 30%;
    height: 98%;
    flex: 1;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    margin: 1px;
    background-color: var(--info-background-color);
    border: var(--div-border);
    border-radius: 5px;
}

#irrigation-recommendation-total-plan-by-plot-recommended-graph-div{
    width: 40%;
    height: 98%;
    flex: 1;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    margin: 1px;
    background-color: var(--info-background-color);
    border: var(--div-border);
    border-radius: 5px;
    overflow-x: auto;
}

.irrigation-recommendation-page-head-button-content{
    width: 18%;
    height: 98%; 
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly; 
    align-items: flex-end; 
    margin: 1px;
    padding-right: 10px;
    background-color: var(--info-background-color);
    border: var(--div-border);
    border-radius: 5px;
}

.irrigation-recommendation-page-head-buttons-row{
    width: 100%;
    height: 28%; 
    flex: 1;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly; 
    align-items: center; 
    margin: 1px;
    color: var(--text-color);
    font-style: var(--font-style);
    font-weight: var(--font-width);
}

/* ------- plant unit ------- */
.irrigation-recommendation-plant-unit-container{
    width: 100%;
    height: 35.5vh; 
    min-height: 35.5vh;
    /* flex: 1; */
    display: flex;
    flex-direction: column;
    align-items: center; 
    justify-content:flex-start;  
    margin-top: 3px;
    border: var(--div-border);
    border-radius: 5px;
}

/* plant unit head */
.irrigation-recommendation-plant-unit-head{
    width: 100%;
    height: 4.5vh;
    /* flex: 1; */
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content:space-between;
    margin: 1px;
    color: var(--text-color);
    border: var(--div-border);
    border-radius: 5px;
    background-color: var(--div-head-second-background-color);
}

.irrigation-recommendation-plant-unit-head-title-content{
    height: 90%;
    /* flex: 1; */
    display: flex;
    flex-direction: row;
    align-items: center; 
    justify-content:space-between;  
    background-color: var(--div-head-second-background-color);
}

.irrigation-recommendation-plant-unit-head-title{
    font-size: 110%;
    color: var(--text-color);
    font-weight: var(--font-width);
    font-style: var(--font-style);
}

.irrigation-recommendation-plant-unit-head-reported-phenological-stage-same{
    font-size: 110%;
    color: var(--text-color);
    font-weight: var(--font-width);
    font-style: var(--font-style); 
}

.irrigation-recommendation-plant-unit-head-reported-phenological-stage-different{
    font-size: 110%;
    color: #ec1010;
    font-weight: var(--font-width);
    font-style: var(--font-style);
}

.irrigation-recommendation-plant-unit-head-phenological-stage-calculated{
    font-size: 110%;
    color: var(--text-color);
    font-weight: var(--font-width);
    font-style: var(--font-style);
    margin-left: 10px;
}

.irrigation-recommendation-plant-unit-head-stress-level{
    font-size: 110%;
    font-weight: var(--font-width);
    font-style: var(--font-style);
    margin-left: 10px;
}

.irrigation-recommendation-plant-unit-head-button-content{
    height: 4vh;
    /* flex: 1; */
    display: flex;
    flex-direction: row;
    align-items: center; 
    justify-content:space-evenly;  
}

.irrigation-recommendation-plant-unit-head-last-update-time-content{
    height: 80%;
    width: auto;
    flex: 1;
    display: flex;
    align-items: center; 
    justify-content: center;
    font-size: 100%;
    color: var(--text-color);
    font-weight: var(--font-width);
    font-style: var(--font-style);
    background: var(--info-background-color); 
    border-radius: 5px;
    margin: 5px;
    padding-left: 3px;
    padding-right: 3px;
}
/* plant unit content */
.irrigation-recommendation-plant-unit-content{
    width: 100%;
    height: 88%;
    /* flex: 1; */
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    margin: 1px;
    background-color: var(--primary-background-color);
}

.irrigation-recommendation-days-content{
    width: 100%;
    height: 100%;
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content:flex-start;
    box-sizing: border-box;
    overflow-x: auto;
    overflow-y: hidden;
}
/* plant unit day */
.irrigation-recommendation-day-container{
    width: 15vw;
    min-width: 15vw;
    height: 30vh;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0.05%;
    border: var(--div-border);
    border-radius: 5px;
    box-sizing: border-box;
}

.irrigation-recommendation-day-bottom-content-active-limited-water,
.irrigation-recommendation-day-bottom-content-no-active-limited-water
{
    width: 100%;
    height: 9%;
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content:space-around;
    border-bottom-left-radius: 5px;  /* Top-left corner */
    border-bottom-right-radius: 5px; /* Top-right corner */
    
    box-sizing: border-box;
}

/* Different border colors */
.irrigation-recommendation-day-bottom-content-no-active-limited-water {
    background-color: var(--div-bottom-background-color); 
}

.irrigation-recommendation-day-bottom-content-active-limited-water {
    background: #eb775b;
}

.irrigation-recommendation-day-bottom-puls-count{
    font-size: 90%;
    color: var(--text-color);
    text-align: center;
    margin: 1px;
}

.irrigation-recommendation-day-head-content{
    width: 100%;
    height: 15%;
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content:space-between;
    background-color: var(--div-head-third-background-color);
    border-bottom: var(--div-border);
    border-top-left-radius: 5px;  /* Top-left corner */
    border-top-right-radius: 5px; /* Top-right corner */
}

.irrigation-recommendation-day-head-weather-content{
    height: 90%;
    /* width: 45%; */
    width: 7.5vw;
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    background-color: var(--info-background-color);
    border-radius: 5px;
    margin-left: 1px;
}

.irrigation-recommendation-day-head-buttons-content{
    height: 85%;
    width: 7.5vw;
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    background-color: var(--div-head-second-background-color);
}

.irrigation-recommendation-day-content{
    width: 100%;
    min-width: 100%;
    height: 78%;
    /* flex: 1; */
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    overflow-x: auto;
    border-bottom: var(--div-border);
    background-color: var(--div-body-background-color);
}

/* plant pulse content */
.irrigation-recommendation-puls-content {
    width: 25%;
    min-width: 4vw;
    height: 98.5%;
    /* flex: 1; */
    display: flex;
    flex-direction: column; 
    align-items: flex-start;
    justify-content: center;
    overflow-x: hidden; 
    margin: 1px;
    box-sizing: border-box;
    /* background-color: var(--div-body-second-background-color);  */
    background-color: #F4F4F4;
    border: var(--div-border);
    border-radius: 5px;
}

.irrigation-recommendation-puls-buttons-content{
    width: 100%;
    height: 15%;
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;
    margin-top: 1px;
    margin-right: 1px;
}

.irrigation-recommendation-puls-values-content{
    width: 100%;
    height: 10%;
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;
    margin: 1px;
}


.irrigation-recommendation-puls-plan-value{
    color: var(--irrigation-recommendation-plan-background-color);
    margin: 1px; 
    font-weight: bold;
    font-size: 80%;
}

.irrigation-recommendation-puls-rec-value{
    color: var(--irrigation-recommendation-rec-background-color);
    margin: 1px; 
    font-weight: bold;
    font-size: 80%;
}

.irrigation-recommendation-bars-content{
    width: 100%;
    height: 75%;
    overflow-y: hidden;
    display: flex;
    flex-direction: row; 
    align-items: flex-end; 
    justify-content: space-evenly;
}

/* ---------------- irrigation-recommendation: 3D extruded bars ---------------- */

/* 1) Base 3D/extruded style shared by all four bars */
.irrigation-recommendation-puls-plan-bar-div-normal,
.irrigation-recommendation-puls-rec-bar-div-normal,
.irrigation-recommendation-puls-plan-bar-div-technical,
.irrigation-recommendation-puls-rec-bar-div-technical,
.irrigation-recommendation-puls-plan-bar-div-salt-wash,
.irrigation-recommendation-puls-rec-bar-div-salt-wash {
  /* Tunables */
  --depth: 8px;              /* thickness of the extrusion */
  --bar-bg: transparent;     /* set per-variant below */

  /* Box */
  position: relative;
  width: 22%;
  height: 100%;
  border: 1px solid #dfe9e2;
  border-bottom: none;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  overflow: visible;         /* allow pseudo-faces to extend */

  /* Fill = subtle top-to-bottom highlight over the variant color */
  background:
    linear-gradient(to bottom, rgba(255,255,255,.25), rgba(0,0,0,.10)),
    var(--bar-bg);

  /* Depth: inner top highlight + soft lift */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.6),
    0 4px 10px rgba(0,0,0,.18);
}

/* Right side face (thickness) */
.irrigation-recommendation-puls-plan-bar-div-normal::after,
.irrigation-recommendation-puls-rec-bar-div-normal::after,
.irrigation-recommendation-puls-plan-bar-div-technical::after,
.irrigation-recommendation-puls-rec-bar-div-technical::after, 
.irrigation-recommendation-puls-plan-bar-div-salt-wash::after,
.irrigation-recommendation-puls-rec-bar-div-salt-wash::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: var(--depth);
  right: calc(-1 * var(--depth));
  width: var(--depth);
  border-top-right-radius: 6px;
  background: linear-gradient(to right, rgba(0,0,0,.20), rgba(0,0,0,.08));
  transform: skewY(-10deg);
  filter: saturate(0.9);
  pointer-events: none;
}

/* Bottom face (shadowed lip) */
.irrigation-recommendation-puls-plan-bar-div-normal::before,
.irrigation-recommendation-puls-rec-bar-div-normal::before,
.irrigation-recommendation-puls-plan-bar-div-technical::before,
.irrigation-recommendation-puls-rec-bar-div-technical::before,
.irrigation-recommendation-puls-plan-bar-div-salt-wash::before,
.irrigation-recommendation-puls-rec-bar-div-salt-wash::before {
  content: "";
  position: absolute;
  left: 0;
  right: var(--depth);
  bottom: calc(-1 * var(--depth));
  height: var(--depth);
  border-radius: 0 0 6px 6px;
  background: linear-gradient(to bottom, rgba(0,0,0,.30), rgba(0,0,0,0));
  transform: skewX(-10deg);
  pointer-events: none;
  opacity: .8;
}

/* 2) Variants: set the background color per bar */
.irrigation-recommendation-puls-plan-bar-div-normal {
  --bar-bg: var(--irrigation-recommendation-plan-normal-background-color);
}

.irrigation-recommendation-puls-rec-bar-div-normal {
  --bar-bg: var(--irrigation-recommendation-rec-normal-background-color);
}

.irrigation-recommendation-puls-plan-bar-div-technical {
  --bar-bg: var(--irrigation-recommendation-plan-technical-background-color);
}

.irrigation-recommendation-puls-rec-bar-div-technical {
  --bar-bg: var(--irrigation-recommendation-rec-technical-background-color);
}

.irrigation-recommendation-puls-plan-bar-div-salt-wash {
  --bar-bg: var(--irrigation-recommendation-plan-salt-wash-background-color);
}

.irrigation-recommendation-puls-rec-bar-div-salt-wash {
  --bar-bg: var(--irrigation-recommendation-rec-salt-wash-background-color);
}



/* ----- Weather ---------- */
.irrigation-recommendation-weather-text{
    font-size: 90%;
    text-align: center;
    margin: 3px;
}
.irrigation-recommendation-weather-text:hover{
    font-weight: bold;
    transition: font-size 0.2s ease-in-out;
}

.irrigation-recommendation-total-plot-area{
    width: 20%;
    height: 35px;
    border-radius: 5px;
    border: var(--div-border);
    box-sizing: border-box;
    text-align: center;
    margin-top: 5px;
    padding-top: 7px;
}