// Custom Theming for Angular Material
// For more information: https://material.angular.io/guide/theming
@use '@angular/material' as mat;
// Plus imports for other components in your app.
@use 'm3-theme' as theme; // Import the m3 theme

// Include the common styles for Angular Material. We include this here so that you only
// have to load a single css file for Angular Material in your app.
// Be sure that you only ever include this mixin once!
@include mat.elevation-classes();
@include mat.app-background();

// Include theme styles for core and each component used in your app.
// Alternatively, you can import and @include the theme mixins for each component
// that you are using.
:root {
  // Apply the dark theme by default
  @include mat.elevation-classes();
  @include mat.app-background();
  @include mat.all-component-themes(theme.$dark-theme);
  @include mat.system-level-colors(theme.$dark-theme);
  @include mat.system-level-typography(theme.$dark-theme);

  // Apply the light theme only when the user prefers light themes.
  .light-theme {
    // Use the `-color` mixins to only apply color styles without reapplying the same
    // typography and density styles.
    @include mat.all-component-colors(theme.$light-theme);
    @include mat.system-level-colors(theme.$light-theme);
    a:not(.mat-mdc-button-base) {
      color: mat.get-theme-color(theme.$light-theme, primary, 40);
    }
  }

  .dark-theme {
    color-scheme: dark;
    // @include mat.strong-focus-indicators-color($dark-theme);
    a:not(.mat-mdc-button-base) {
      color: mat.get-theme-color(theme.$dark-theme, primary, 80);
    }
  }
}

// Comment out the line below if you want to use the pre-defined typography utility classes.
// For more information: https://material.angular.io/guide/typography#using-typography-styles-in-your-application.
@include mat.typography-hierarchy(theme.$light-theme);

// Comment out the line below if you want to use the deprecated `color` inputs.
// @include mat.color-variants-backwards-compatibility($light-theme);
/* You can add global styles to this file, and also import other style files */

html,
body {
  height: 100%;  
}

body {
  margin: 0;
  font-family: Roboto, "Helvetica Neue", sans-serif;
}

a {
  text-decoration: none;
}

.noselect {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.page-container {
  padding: 0 1rem;
  box-sizing: border-box;
  max-width: 1250px;
  margin: auto;
  width: 100%;
  margin-bottom: 48px;
}

.page-header {
  display: flex;
}

.spacer {
  flex: 1 1 auto;
}

highcharts-chart {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

:root {
  --error: #93000a; /* Error */
  --success: #388e3c; /* Green */
  --warning: #f57c00; /* Orange/Yellow */
}