/*********************************************************************
 *                                                                   *
 * Purpose: Defines the styles for some commonly used html elements  *
 *                                                                   *
 * What it Contains:                                                 *
 *      - positioning of the buttons and filter dropdowns for the    *
 *          graphs                                                   *
 *********************************************************************/


:root {
    /** colour theme **

    Note: 
      - The colours are based off Android's Material colour theme:
         https://m2.material.io/develop/android/theming/color
         https://m2.material.io/design/color/the-color-system.html

    *******************/
    --fontColour: #333333;
    --background: #ffffff;
    --surface: #ffffff;
    --secondarySurface: #fbfcf8;
    --error: #ff0000;
    --onBackground: #000000;
    --onSurface: #000000;
    --onSecondarySurface: #000000;
    --onError: #ffffff;
    --primary: #26374a;
    --primaryVariant: #3B4B5C;
    --onPrimary: #ffffff;
    --primaryBorderColour: #7D828B;
    --primaryHover: #444444;
    --onPrimaryHover: #ffffff;
    --secondary: #335075;
    --onSecondary: #ffffff;
    --secondaryHover: #753350;
    --onSecondaryHover: #f2f2f2;
    --secondaryBorderColour: #bbbfc5;
    --tertiary: #d7faff;
    --tertiaryBorderColour: #269abc;
    --onTertiary: #333333;
    --link: #284162;
    --headerTitleColor: #000000;

    --smBorderRadius: 5px;
    --borderRadius: 10px;

    --fastTransition: all 0.25s ease-in-out;
    --medTransition: all 0.5s ease-in-out;
    --slowTransition: all 0.75s ease-in-out;
    --defaultTransition: var(--medTransition);
}


/* For small phone screeens */
@media screen and (max-width: 600px) {
    body { 
        font-size: calc(0.8em + 1vw) !important; 
    }

    main {
        font-size: calc(0.8em + 1vw) !important;
    }
    
    h1 {
        font-size: calc(1.7em + 1vw) !important; 
    }
    
    h3 {
        font-size: calc(1em + 1vw) !important; 
    }

    .btn {
        font-size: calc(0.6em + 1vw) !important;
        margin: 3px 0;
    }

    .graph-selects-container {
        .graph-select {
            img {
                height: calc(2em + 1vw) !important;
            }

            .graph-select-subtitle {
                font-size: calc(0.6em + 1vw) !important;
            }
        }
    }

    .graphContainer {
        min-height: 40vh !important;
    }

    .emptyGraphsContainer {
        height: 40vh !important;
    }
}

.pageSelectBtnContainer {
    padding: 10px 15px;
}

.pageSelectBtn {
    width: 100%;
    min-height: 50px;
}

/*

Graph Selects

*/

.graph-selects-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;

  .graph-select {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 0.5rem;
    border-radius: 0.2rem;
    border: 0.18rem solid rgba(0, 0, 0, 0);
    transition: var(--medTransition);
    
    img {
      object-fit: contain;
      width: 100%;
      height: 6rem;
      filter: grayscale(1);
      opacity: 0.4;
      transition: var(--medTransition);
    }
    .graph-select-subtitle {
      text-align: center;
      font-size: 16px;
      font-weight: bold;
      line-height: 100%;
    }
  }
  .graph-select:hover {
    box-shadow: rgba(0, 0, 0, 0.26) 0px 1px 4px;
    cursor: pointer;
  }
  .active-graph-select {
    border: 0.18rem solid var(--primary);
  }

  .active-graph-select img {
    filter: none;
    opacity: 0.8;
  }
}

/* container for all the graphs */
.graphContainer {
    min-height: 50vh;
}

/* SVG of the graph */
.svgGraph {
    max-width: 100%;
    height: auto;
    display: flex;
    margin: auto;
}

/* ==== Area to display "No Data" for the graphs ===== */

.emptyGraphsContainer {
    position: relative;
    height: 60vh;
}

.emptyGraphTextContainer {
    text-align: center;
    position: absolute;
    top: 40%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.emptyGraphIcon {
    color: var(--primary);
    max-height: 80px;
    width: auto;
}

/* =================================================== */
/* =========== SVG Icons ============================== */

.svgPrimaryIconPath {
    fill: var(--primary);
}

/* ==================================================== */