
// Custom Theming for Angular Material
// For more information: https://material.angular.io/guide/theming
//@import '~@angular/material/theming';
// Plus imports for other components in your app.

@import './colors';

// 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-core();

// Define the palettes for your theme using the Material Design palettes available in palette.scss
// (imported above). For each palette, you can optionally specify a default, lighter, and darker
// hue. Available color palettes: https://material.io/design/color/
// $instructor-primary: mat-palette($mat-blue-gray, 800, 600, 900);
// $instructor-accent: mat-palette($mat-red, 800, 900, 700);

// // The warn palette is optional (defaults to red).
// $instructor-warn: mat-palette($mat-red);

// Create the theme object. A theme consists of configurations for individual
// theming systems such as "color" or "typography".
// $instructor-theme: mat-light-theme((
//   color: (
//     primary: $instructor-primary,
//     accent: $instructor-accent,
//     warn: $instructor-warn,
//   )
// ));

// 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.
@include angular-material-theme($instructor-theme);

// Define a custom typography config that overrides the font-family as well as the
// `headlines` and `body-1` levels.
$custom-typography: mat-typography-config(
  $font-family: 'Open Sans, sans-serif'
);

@include angular-material-typography($custom-typography);

/* You can add global styles to this file, and also import other style files */

html, body { height: 100%; }
body { margin: 0; font-family: 'Inter', sans-serif; }

h1, h2, h3, h4, h5, h6 {
  color: mat-color($instructor-primary, default);  
  //font-family: Roboto, "Helvetica Neue", sans-serif;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
}

.logged-user {
  padding-top: 16px;
  font-size: 14px;
  margin-right: 24px;
  position: relative;
  top: 6px;
}

.center {
  text-align: center;
}

.align-right {
  text-align: right;
}

.table-item-counter {
  color: map-get($instructor-primary, lighter);
  font-size: smaller;
}

.sidenav-top-button-bar {
  height: 40px;
}

button.button-large, a.button-large {
  padding: 8px 32px;
}

.example-spacer {
  flex: 1 1 auto;
}

.main-content {
  margin: 40px 16%;
}

.return-block .info {
  color: mat-color($instructor-primary, default);
  font-size: small;
  margin-right: 6px;
}

.form-error {
  margin-left: 6px;
  color: mat-color($instructor-warn, default);
}

.form-info {
  margin-left: 6px;
  color: mat-color($instructor-primary, default);
}

.form-group {
  //border: #DDD 1px solid;
  // background-color: #EEE;
  // border-radius: 6px;
  // padding: 0 12px;
  // margin-bottom: 16px;

  .mat-form-field {
    padding-left: 32px;
    width: calc(90% - 32px);
  }
}

.buttons-row {
  padding: 12px;
}

.right-align {
  text-align: right;
}

.form-buttons-row button {
  margin: 12px 12px;
}

.aligned-with-icon {
  position: relative;
  top: -5px;
  margin-left: 5px; /* optional */
}

.button-icon {
  margin-right: 12px;
}

.common-card {
  margin-bottom: 16px;
}

.badge {
  color: #FFF;
  background-color: mat-color($instructor-primary, lighter);
  padding: 6px 18px;
  border-radius: calc(100vh / 2);
}

.badge-accent {
  background-color: mat-color($instructor-accent, lighter);
}

.saving-indicator-absolute {
  position: fixed;
  bottom: 0;
  padding: 0 12px;
  border: 1px solid #AAA;
  border-radius: 6px 6px 0 0;
  border-bottom: none;
  background-color: white;
}

.mat-success {
  color: green;
}

.mat-raised-button.mat-success {
  color: white;
  background-color: green;
}

.mat-fail {
  color: mat-color($instructor-accent, default);
}

.mat-raised-button.mat-fail {
  color: white;
  background-color: mat-color($instructor-accent, default);
}

.mat-light {
  color: map-get($instructor-primary, lighter);
}

.mat-button.narrow-button {
  padding: 0 2px;
}

.agreement-link {
  color: map-get($instructor-accent, normal);
  text-decoration: underline;
  cursor: pointer;
}

// -------------------------------------------------------  snackBar

.snackBarError, .snackBarError button {
  color: darkred;
  background-color: lightcoral;
}

.snackBarSuccess, .snackBarSuccess button {
  color: darkgreen;
  background-color: lightgreen;
}

.snackBarInfo, .snackBarInfo button {
  color: #333;
  background-color: #DDD;
}

// -------------------------------------------------------  tabulky

table {
  margin-bottom: 30px;
}

.no-right-padding th.mat-header-cell:last-of-type, .no-right-padding td.mat-cell:last-of-type, .no-right-padding td.mat-footer-cell:last-of-type {
  padding-right: 4px;
}

table.full-width-table {
  width: 100%;
}

.dense-table {

  td.mat-cell, th.mat-header-cell {
    padding-left: 8px;
    padding-right: 8px;
  }

  td.mat-cell:first-of-type, th.mat-header-cell:first-of-type {
    padding-left: 12px;
  }

  td.mat-cell:last-of-type, th.mat-header-cell:last-of-type {
    padding-right: 12px;
  }

  td.mat-cell, th.mat-header-cell:first-of-type, td.mat-footer-cell:first-of-type {
    border-left: solid 1px #DDD;
  }

  
  tr.past {
    background-color: #EEE;
  }

  tr.mat-row:hover {
    background-color: #ffe6e6;
  }

  tr.past:hover {
    background-color: #ffe6e6;
  }

  tr.mat-row .mat-flat-button {
    background-color: transparent;
  }

}

// -------------------------------------------------------  dva sloupce

.two-column-layout {
  overflow: hidden;

  .column {
    width: calc(50% - 36px); // 32 za padding + 1 za border + rezerva
    padding: 16px;
    float: left;
  }

  // .column:nth-child(even) {
  //   border-left: solid 1px #CCC;
  // }
}

form .two-column-layout .column {
  padding: 0;
}

// -------------------------------------------------------  tri sloupce

.three-column-layout {
  overflow: hidden;

  .column {
    width: calc(33% - 36px); // 32 za padding + 1 za border + rezerva
    padding: 16px;
    float: left;
  }
}

form .three-column-layout .column {
  padding: 0;
}

// -------------------------------------------------------  responzivita

@media only screen and (max-width: 1400px) {
  .main-content {
    margin: 30px 6%;
  }
  #main-toolbar-title {
    font-size: large;
  }
  .logged-user {
    margin-right: 8px;
  }
}

@media only screen and (max-width: 1100px) {
  .main-content {
    margin: 20px 2%;
  }
  #main-toolbar-title {
    font-size: small;
  }
  .logged-user {
    font-size: small;
    margin-right: 4px;
    .mat-icon{
      display: none;
    }
  }
  .two-column-layout .column {
    width: calc(100% - 36px); // 32 za padding + 1 za border + rezerva
    float: none;
  }

  .three-column-layout .column {
      width: calc(100% - 36px); // 32 za padding + 1 za border + rezerva
      float: none;
  }
}

@media only screen and (max-width: 600px) {
  .logged-user {
    display: none;
  }
}

