ConsultancyProject_2_ETL/dashboard/resources/css/app.css

/* 1. Use a more-intuitive box-sizing model */


*, *::before, *::after {
  box-sizing: border-box;
}

/* 2. Remove default margin */
* {
  margin: 0;
  font-family: sans-serif;
}

body {
  /* 3. Add accessible line-height */
  line-height: 1.5;
  /* 4. Improve text rendering */
  -webkit-font-smoothing: antialiased;
  padding: 0 1em;
  height: 100vh;
  background-image: radial-gradient(73% 147%, #EADFDF 59%, #ECE2DF 100%), radial-gradient(91% 146%, rgba(255,255,255,0.50) 47%, rgba(0,0,0,0.50) 100%);
  background-blend-mode: screen;
}

/* 5. Improve media defaults */
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

/* 6. Inherit fonts for form controls */
input, button, textarea, select {
  font: inherit;
}

/* 7. Avoid text overflows */
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

/* 8. Improve line wrapping */
p {
  text-wrap: pretty;
}
h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
}

dt{
  font-weight: 600;
}

dd + dt{
  margin-top: .2em;
}

nav + button,
span + button{
  margin-left: .5em;
}

ul{
  padding-left: 1em;
}

p + ul{
  margin-top: 1em;
}

button[popovertarget]{
  background: no-repeat center / .3em #4d004b url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 192 512'%3E%3C!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--%3E%3Cpath fill='%23fff' d='M48 80a48 48 0 1 1 96 0A48 48 0 1 1 48 80zM0 224c0-17.7 14.3-32 32-32l64 0c17.7 0 32 14.3 32 32l0 224 32 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 512c-17.7 0-32-14.3-32-32s14.3-32 32-32l32 0 0-192-32 0c-17.7 0-32-14.3-32-32z'/%3E%3C/svg%3E%0A");
  cursor: pointer;
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  border-radius: 50%;
  border: 1px solid #fff;
}

button[popovertarget]::before{
  color: #fff;
  font-weight: 700;
}

button[popovertarget]>span{
  position: absolute;
  left: -999em;
  top: -999em;
}

[popover] {
  border: none;
  border-radius: 1em;
  background: #fff;
  padding: 1.5em;
  border-radius: var(--small-border);
  box-shadow: .0625em .0625em .625em rgba(0, 0, 0, 0.1);
  max-width: 40em;
  top: 4em;
  margin: 0 auto;
}

[popover]::backdrop{
  background-color: rgba(0,0,0,.5);
}

[popover] h2{
  font-size: 1em;
}

[popover] h3{
  font-size: .95em;
  margin-top: 1em;
}

p.formula{
  font-family: monospace;
  border: 1px solid #aaa;
  padding: .5em 1em;
}

p + p{
  margin-top: 1em;
}

/*
  9. Create a root stacking context
*/
#root, #__next {
  isolation: isolate;
}

body>header{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 3em;
    background: #ccc;
    z-index: 99;
    display: flex;
    align-items: center;
    padding: 0 1em;
}

body>header>nav{
  text-align: center;
  min-width: 10em;
  background: #fff;
  border-radius: .2em;
  position: relative;
  border: 1px solid #fff;
}

body>header>nav>ul{
  position: absolute;
  background: #fff;
  width: calc(100% + 2px);
  list-style: none;
  padding: 0 0 1em;
  top: -999em;
  left: -999em;
  border-radius: 0 0 .2em .2em;
  border-left: 1px solid #aaa;
  border-right: 1px solid #aaa;
  border-bottom: 1px solid #aaa;
}

body>header>nav:hover{
  border-radius: .2em .2em 0 0;
  border: 1px solid #aaa;

}

body>header>nav:hover ul{
  top: initial;
  left: -1px;
}

body>header>nav>ul>li a,
body>header>nav>strong{
  display: inline-block;
  padding: .2em .4em;
}

a{
  color: #000;
}

a:hover,
a:focus{
  color: #aaa;
}


main{
    width: 100%;
    height: 100vh;
    padding: 4em 0 1em;
    display: grid;
    gap: .5em;
}

body.overview main{
  grid-template-columns: repeat(8, minmax(1%, 50%));
  grid-template-rows: repeat(4, 1fr);
  grid-template-areas:
      "chart1 chart1 chart1 chart2 chart2 chart2 chart4 chart4"
      "chart1 chart1 chart1 chart2 chart2 chart2 chart4 chart4"
      "chart1 chart1 chart1 chart3 chart3 chart3 chart4 chart4"
      "chart1 chart1 chart1 chart3 chart3 chart3 chart4 chart4"
}

body.region main{
  grid-template-columns: repeat(4, minmax(10%, 50%));
    grid-template-rows: repeat(6, 1fr) 4em;
    grid-template-areas:
      "chart1 chart1 chart2 chart2"
      "chart1 chart1 chart2 chart2"
      "chart1 chart1 chart3 chart4"
      "chart1 chart1 chart3 chart4"
      "chart1 chart1 chart6 chart6"
      "chart1 chart1 chart6 chart6"
      "chart1 chart1 timeline timeline";
}

body.property main{
  grid-template-columns: repeat(4, minmax(10%, 50%));
    grid-template-rows: repeat(4, 1fr) 4em;
    grid-template-areas:
      "chart1 chart1 chart2 chart2"
      "chart1 chart1 chart2 chart2"
      "chart5 chart5 chart3 chart4"
      "chart5 chart5 chart3 chart4"
      "chart5 chart5 timeline timeline";
}

article{
    background: #f9f9f9;
    border: .0625em solid #ccc;
    box-shadow: 0 5px 10px rgba(154,160,185,.05), 0 15px 40px rgba(166,173,201,.2);
    border-radius: .2em;
    display: grid;
}

article.header{
    grid-template-columns: 100%;
    grid-template-rows: minmax(1%, 2em) 1fr;
    padding: .5em 1em 1em .5em;
}

article.map{
    padding: 0;
}

article.map>header{
  padding: .5em 1em 1em .5em;
}

article>header{
  display: grid;
  grid-template-columns: 1fr 1em;
  grid-template-rows: 1fr;
}

article>header>h2{
    font-size: .8em;
    font-weight: 600;
}

@media(max-width: 960px){

  body{
    height: auto;
  }

  body.overview main,
  body.region main,
  body.property main{
    height: auto;
    grid-template-columns: 100%;
    grid-template-rows: repeat(5, minmax(20em, 25em)) 4em;
    grid-template-areas: "chart1" "chart2" "chart3" "chart4" "chart5" "chart6" "timeline";
  }

  body.overview main{
    grid-template-rows: minmax(20em, 40em) repeat(3, minmax(20em, 25em));
    grid-template-areas: "chart1" "chart2" "chart3" "chart4";
  }

  body.region main{
    grid-template-rows: minmax(20em, 40em) repeat(4, minmax(20em, 25em)) 4em;
    grid-template-areas: "chart1" "chart2" "chart3" "chart4" "chart6" "timeline";
  }

  body.property main{
    grid-template-rows: repeat(5, minmax(20em, 25em)) 4em;
    grid-template-areas: "chart1" "chart2" "chart3" "chart4" "chart5" "timeline";
  }
}

.leaflet-marker-icon span{
  background: #4d004b;
  width: 2rem;
  height: 2rem;
  display: block;
  left: -1rem;
  top: -1rem;
  position: relative;
  border-radius: 50% 50% 0;
  transform: rotate(45deg);
  border: 2px solid #fff
}

/*['#9ecae1','#6baed6','#4292c6','#2171b5','#084594'*/
.leaflet-marker-icon.region1 span{
  background: #8c96c6;
}

.leaflet-marker-icon.region2 span{
  background: #88419d;
}

.leaflet-marker-icon.region3 span{
  background: #810f7c;
}

.leaflet-marker-icon.region4 span{
  background: #4d004b;
}