/* APP GRID LAYOUTS */
.app-navbar {
  height: 50px;
  padding: 0rem 1rem;
  width: 100% !important;
  max-width: 98vw !important;
  display: flex;
  align-items: center;
}

#box-home-header {
  position: relative;
  z-index: 9;
}
.home-header-container::after {
  content: "";
  clear: both;
  display: table;
}

#home-select-site-button {
  float: right;
  z-index: 1000;
}

#home-select-site-button >button {
  /* width: 200px; */
  padding-right: 1rem;
  text-align: right;
  background-color: transparent !important;
  border-color: transparent !important;
}

#page_content {
  padding: 0px 0.25rem;
}

.search-btn::before {
  display: none;
}

.search-btn::after {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 1.0rem;
	content: "\f002";
}

.dropdown-menu.show {
  overflow-y: auto;
  max-height: 500px;
}

#box-home-mapbox {
  position: relative;
  z-index: 0;
  border: 1px solid rgba(149, 149, 149, 0.829);
  border-radius: 0rem;
}

.main-menu-dropdown.nav-link::after {
    display: none;
}

/* Burger icon color must follow the theme, not Bootstrap's navbar-dark
   default (semi-transparent white) — otherwise it's invisible against the
   white navbar background in light mode. ::before inherits `color` from
   this element, so setting it here re-colors the icon glyph itself. */
.main-menu-dropdown.nav-link {
    color: var(--aesd-text) !important;
}
.main-menu-dropdown.nav-link:hover,
.main-menu-dropdown.nav-link:focus {
    color: var(--aesd-orange) !important;
}

.main-menu-dropdown.nav-link::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 1.5rem;
	content: "\f0c9";
}

#highlight-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.35rem;
  margin: 0.35rem 0.35rem;
  background-color: color-mix(in srgb, var(--aesd-card) 30%, transparent);
}

.highlight-img {
  height: 30px;
  width: 30px;
  text-align: center;
}
.highlight-card {
  min-width: 90px;
  /* max-width: 250px; */
  text-align: center;
  flex-grow: 2;
  box-shadow: 3px 1px 2px rgba(0,0,0,0.35);
  background-color: var(--aesd-card);
  border: 1px solid var(--aesd-border);
  color: var(--aesd-text);
}

/* Header bar ("HIGHLIGHTS") sits inside .highlight-card too, but its H3 is
   oversized relative to the shrunk cards below it — scale it down to match. */
.highlights-header-title {
  font-size: 1.15rem;
}

.highlight-cardbody {
  padding: 0.35rem !important;
}

.highlight-title {
  font-size: 0.8rem;
  margin-bottom: 0.15rem;
}

.highlight-value {
  font-size: 0.9rem;
  margin-bottom: 0.1rem;
}

.highlight-subvalue {
  font-size: 0.7rem;
  margin-bottom: 0;
}

.box-options {
  display: inline-block;
  padding-right: 1rem;
  vertical-align: top;
}

.chartdata {
  padding: 0.25rem 0.8rem;
}

.home-tabledata {
  width: 100%;
  text-align: center;
}

.home-tabledata td:first-child,
.home-tabledata th:first-child {
text-align: left;
padding-left: 0.3rem;
max-width: 10rem;
min-width: 5rem;
width: 5rem;
word-break: break-all;
}

.home-tabledata table,
.home-tabledata th,
.home-tabledata td {
border: 1px solid rgba(50,50,50,1);
border-collapse: collapse;
font-size: calc(max(0.6rem,min(0.9rem,0.9vw))) !important;
word-break: break-all;
}

.home-tabledata th,
.home-tabledata td {
min-width: 4rem;
word-break: break-word;
}

.home-table-div {
  overflow: auto;
  padding-top: 1rem;
}



.homecharts-grid {
  display: grid;
  grid-template-columns: minmax(auto, 1200px);
  grid-template-rows: auto auto;
  grid-gap: 0rem;
}

.nav-tooltips {
  font-size: 1.2rem;
}

/* #fy-site-dropdown {
  margin: auto 5px;
  width: 100%;
  min-width: 500px;
  max-width: 1000px;
} */

#main-home-dropdown {
  border: solid 1px rgb(250, 240, 97);
  font-size: large;
}

#main-home-dropdown > .Select--single > .Select-control .Select-value, .Select-placeholder {
  top: 0.3rem;
}

#grid-ma-b-a, #grid-ma-b-b, #grid-ma-b-c, #grid-ma-b-d {
  overflow: auto;
} 

#grid-ma-b-a, #grid-ma-b-b {
  max-height: 450px;
}



div.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}


.custom-row-gap .mantine-Group-root {
  row-gap: 5px;
}

.kpi-group-title {
  font-size: 1.5rem;
  line-height: 1.4rem;
}

.home-tablecontainer {
  display: none;
}


.ag-theme-alpine-dark.ranking-table,
.ag-theme-alpine.ranking-table {
  --ag-font-size: 0.8rem;
  /* --ag-font-family: monospace; */
}

.fy-dropdown-wrapper .mantine-Input-input,
.fy-year-dropdown-wrapper .mantine-Input-input {
  min-height: 30px;
  height:40px;
}

.fy-dropdown-wrapper{
  min-width: 350px;
  max-width: 500px;
  width: 100%;
}

.fy-year-dropdown-wrapper{
  width: 200px;
}

.grid-ma-2-expand-1 {
  grid-template-areas:
  'one one'
  'two two'
  'three three'
  'four four';
}

.grid-ma-2-expand-2 {
  grid-template-areas:
  'two two'
  'one one'
  'three three'
  'four four';
}


table.fytable0 {
  width: auto;
  table-layout: auto; 
  border-collapse: collapse; 
  margin: 0 auto;
}

.fytable0 tr:nth-child(even) {
  background-color: color-mix(in srgb, var(--aesd-card) 60%, var(--aesd-border) 40%);
}



.fytable0 th, .fytable0 td {
    border: 1px solid var(--aesd-border);
    padding: 1px 15px;
    text-align: center; 
    font-size: min(max(0.6rem, 0.75vw), 1.5rem);
}

.fytable0 td {
  max-width: 150px; 
  overflow: hidden; 
  text-overflow: ellipsis; 
  white-space: nowrap; 
}

.fytable0 tr:hover {
  color: var(--aesd-text);
  font-weight: bold;
  border: 2px solid var(--aesd-blue-lt) !important; 
}

#sub-tabs .mantine-Tabs-tab[data-active="true"] {
  background-color: var(--aesd-blue); 
}

.mapboxgl-control-container {
  display: none;
}

/* Mobile Devices */
@media (min-width: 1px) {
/* METER ANALYSIS LAYOUT 2*/
.grid-ma-2 {
  grid-template-columns: repeat(1, minmax(1px, 1fr));
  grid-template-areas:
  'one'
  'two'
  'three'
  'four'
  'five'
  'six'
  'seven';
}

}
/* Tablet Devices */
@media (min-width: 720px) {
  #page_content {
    padding: 0px 0.5rem;
  }

  /* HOME LAYOUT */
  #grid-home-layout {
    grid-gap: 0.1rem;
    grid-template-columns: minmax(1px, 1fr);
    grid-template-rows: minmax(auto, auto) 
    repeat(2,minmax(200px,auto))
    minmax(auto, auto)
    ;
    /* grid-template-areas:
    'one one one'
    'two two two'
    'two two two'
    'five five five'
    'six six six'
    'seven seven seven'
    ; */
    position: relative;
  }
  #box-home-header{
    grid-column: 1 / 3;
  }
  #box-home-mapbox {
    grid-column: 1 / 3;
    grid-row: 2 / span 2;
  }
  #box-home-highlights {
    grid-column: 1 / 3;
    grid-row: 2 / span 2;
    position: absolute; 
    right: 0;
    top: 0.2rem;
    z-index: 2; 
    width: 30%; 
    min-width: 225px;
    max-width: 450px;
    max-height: 100%; 
    overflow: auto;
  }
  .home-tablecontainer {
    display: block;
  }

  #box-home-box3 {
    z-index: 2;
  }

  /* FINANCIALS LAYOUT */
  #grid-fi-layout {
    grid-template-columns: repeat(1, minmax(1px, 1fr));
    grid-template-rows: repeat(1, minmax(auto, auto))
    minmax(auto, auto)
    ;
    grid-template-areas:
    'one'
    'two'
    'three'
    'four'
    'five'
    'six'
    'seven'
    ;
  }

  /* RANKINGS LAYOUT */
  #grid-rankings-layout {
    grid-template-columns: minmax(250px, 1fr) minmax(1px, 3fr);
    grid-template-rows: repeat(1, minmax(auto, auto))
    minmax(650px, auto);
    grid-template-areas:
    'one one'
    'two three'
    'four four'
    'five five'
    'six six'
    'seven seven'
    ;
  }

  /* METER DATA LAYOUT */
  #grid-meterdata-layout {
    grid-template-columns: repeat(1, minmax(1px, 1fr));
    grid-template-rows: repeat(1, minmax(auto, auto))
    minmax(auto, auto)
    ;
    grid-template-areas:
    'one'
    'two'
    'three'
    'four'
    'five'
    'six'
    'seven'
    ;
  }


  /* METER ANALYSIS LAYOUT */
  #grid-meteranalysis-layout {
    grid-template-columns: repeat(1, minmax(1px, 1fr));
    grid-template-rows: repeat(1, minmax(auto, auto))
    minmax(auto, auto)
    ;
    grid-template-areas:
    'one'
    'two'
    'three'
    'four'
    'five'
    'six'
    'seven'
    ;
  }
 
  /* WATER GAS OTHER LAYOUT */
  #grid-watergas-layout {
    grid-template-columns: repeat(1, minmax(1px, 1fr));
    grid-template-rows: repeat(1, minmax(auto, auto))
    minmax(auto, auto)
    ;
    grid-template-areas:
    'one'
    'two'
    'three'
    'four'
    'five'
    'six'
    'seven'
    ;
  }

}

  /* Standard Desktop */
@media (min-width: 1000px) {
  #page_content {
    padding: 0px 1rem;
  }

  .homecharts-grid {
    grid-template-columns: 2fr minmax(0px, 1fr);
    grid-template-rows: auto;
    max-height: 520px;
  }

  .home-table-div {
    overflow: auto;
    margin-top: 0rem;
    max-height: 400px;
  }
  
  .home-table-title {
    text-align: center;
  }

  .grid-ma-2 {
    grid-template-columns: minmax(auto,3fr) minmax(auto,3fr);
    grid-template-rows: 550px; /* minmax(200px,auto) minmax(200px,auto); */
    grid-template-areas:
    'one two'
    'three three'
    'four four';
  }
  #grid-ma-b-a, #grid-ma-b-b {
    max-height: 800px;
  }

}