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

@include mat.core();

$_palettes: (
  primary: (
    0: #000000,
    10: #000767,
    20: #1b247f,
    25: #27308a,
    30: #343d96,
    35: #4049a2,
    40: #4c56af,
    50: #666fca,
    60: #8089e6,
    70: #9ba4ff,
    80: #bdc2ff,
    90: #e0e0ff,
    95: #f1efff,
    98: #fbf8ff,
    99: #fffbff,
    100: #ffffff,
  ),
  secondary: (
    0: #000000,
    10: #181a2c,
    20: #2d2f42,
    25: #383a4d,
    30: #444559,
    35: #505165,
    40: #5c5d72,
    50: #74758b,
    60: #8e8fa6,
    70: #a9a9c1,
    80: #c4c4dd,
    90: #e1e0f9,
    95: #f1efff,
    98: #fbf8ff,
    99: #fffbff,
    100: #ffffff,
  ),
  tertiary: (
    0: #000000,
    10: #2e1126,
    20: #45263c,
    25: #513147,
    30: #5e3c53,
    35: #6b475f,
    40: #78536b,
    50: #926b85,
    60: #ae859f,
    70: #ca9fba,
    80: #e7b9d5,
    90: #ffd7ef,
    95: #ffecf5,
    98: #fff8f9,
    99: #fffbff,
    100: #ffffff,
  ),
  neutral: (
    0: #000000,
    10: #1b1b1f,
    20: #303034,
    25: #3c3b3f,
    30: #47464a,
    35: #535256,
    40: #5f5e62,
    50: #78767a,
    60: #929094,
    70: #adaaaf,
    80: #c8c5ca,
    90: #e4e1e6,
    95: #f3f0f4,
    98: #fcf8fd,
    99: #fffbff,
    100: #ffffff,
    4: #0e0e11,
    6: #131316,
    12: #1f1f23,
    17: #2a2a2d,
    22: #353438,
    24: #39393c,
    87: #dcd9de,
    92: #eae7ec,
    94: #f0edf1,
    96: #f6f2f7,
  ),
  neutral-variant: (
    0: #000000,
    10: #1b1b23,
    20: #303038,
    25: #3b3b43,
    30: #46464f,
    35: #52525b,
    40: #5e5d67,
    50: #777680,
    60: #91909a,
    70: #abaab4,
    80: #c7c5d0,
    90: #e3e1ec,
    95: #f2effa,
    98: #fbf8ff,
    99: #fffbff,
    100: #ffffff,
  ),
  error: (
    0: #000000,
    10: #410002,
    20: #690005,
    25: #7e0007,
    30: #93000a,
    35: #a80710,
    40: #ba1a1a,
    50: #de3730,
    60: #ff5449,
    70: #ff897d,
    80: #ffb4ab,
    90: #ffdad6,
    95: #ffedea,
    98: #fff8f7,
    99: #fffbff,
    100: #ffffff,
  ),
);

$_rest: (
  secondary: map.get($_palettes, secondary),
  neutral: map.get($_palettes, neutral),
  neutral-variant: map.get($_palettes,  neutral-variant),
  error: map.get($_palettes, error),
);
$_primary: map.merge(map.get($_palettes, primary), $_rest);
$_tertiary: map.merge(map.get($_palettes, tertiary), $_rest);

@mixin smart-theme-variables {
  /* Display Large */
  --md-sys-typescale-display-large-font-size: 36px;
  --md-sys-typescale-display-large-line-height: 1.2;
  --md-sys-typescale-display-large-font-weight: 300;

  /* Display Medium */
  --md-sys-typescale-display-medium-font-size: 24px;
  --md-sys-typescale-display-medium-line-height: 1.2;
  --md-sys-typescale-display-medium-font-weight: 400;

  /* Display Small */
  --md-sys-typescale-display-small-font-size: 20px;
  --md-sys-typescale-display-small-line-height: 1.2;
  --md-sys-typescale-display-small-font-weight: 400;

  /* Headline Large */
  --md-sys-typescale-headline-large-font-size: 16px;
  --md-sys-typescale-headline-large-line-height: 1.2;
  --md-sys-typescale-headline-large-font-weight: 400;

  /* Headline Medium */
  --md-sys-typescale-headline-medium-font-size: 14px;
  --md-sys-typescale-headline-medium-line-height: 1.2;
  --md-sys-typescale-headline-medium-font-weight: 400;

  /* Headline Small */
  --md-sys-typescale-headline-small-font-size: 18px;
  --md-sys-typescale-headline-small-line-height: 1.2;
  --md-sys-typescale-headline-small-font-weight: 500;

  /* Body Large */
  --md-sys-typescale-body-large-font-size: 13px;
  --md-sys-typescale-body-large-line-height: 1.5;
  --md-sys-typescale-body-large-font-weight: 400;

  /* Body Medium */
  --md-sys-typescale-body-medium-font-size: 12px;
  --md-sys-typescale-body-medium-line-height: 1.5;
  --md-sys-typescale-body-medium-font-weight: 400;

  /* Body Small */
  --md-sys-typescale-body-small-font-size: 12px;
  --md-sys-typescale-body-small-line-height: 1.5;
  --md-sys-typescale-body-small-font-weight: 400;

  /* Label Large */
  --md-sys-typescale-label-large-font-size: 12px;
  --md-sys-typescale-label-large-line-height: 1.5;
  --md-sys-typescale-label-large-font-weight: 500;

  /* Label Medium */
  --md-sys-typescale-label-medium-font-size: 11px;
  --md-sys-typescale-label-medium-line-height: 1.5;
  --md-sys-typescale-label-medium-font-weight: 500;

  /* Label Small */
  --md-sys-typescale-label-small-font-size: 10px;
  --md-sys-typescale-label-small-line-height: 1.5;
  --md-sys-typescale-label-small-font-weight: 500;

  /* Floating Label */
  --md-comp-form-field-floating-label-font-size: 0.75rem; 
  --md-comp-form-field-floating-label-font-weight: 400; 

  /* Inline Label */
  --md-comp-form-field-inline-label-font-size: 0.75rem;
  --md-comp-form-field-inline-label-font-weight: 500; 
  --mdc-outlined-text-field-label-text-size: 0.75rem;

  /* Option label */
  --mat-option-label-text-size: 0.75rem;
  --mat-option-label-text-weight: 400;

  /* Optgroup label */
  --mat-optgroup-label-text-size: 0.75rem;
  --mat-optgroup-label-text-weight: 500;

  /* Card title */
  --mat-card-title-text-size: 1.375rem;
  --mat-card-title-text-weight: 400;

  /* Card subtitle */
  --mat-card-subtitle-text-size: 0.75rem;
  --mat-card-subtitle-text-weight: 500;

  /* Tooltip supporting text */
  --mdc-plain-tooltip-supporting-text-size: 0.75rem;
  --mdc-plain-tooltip-supporting-text-weight: 400;

  /* Form field container text */
  --mat-form-field-container-text-size: 0.75rem;
  --mat-form-field-container-text-weight: 400;

  /* Form field subscript text */
  --mat-form-field-subscript-text-size: 0.75rem;
  --mat-form-field-subscript-text-weight: 400;

  /* Select trigger text */
  --mat-select-trigger-text-size: 0.75rem;
  --mat-select-trigger-text-weight: 400;

  /* Menu item label text */
  --mat-menu-item-label-text-size: 0.75rem;
  --mat-menu-item-label-text-weight: 500;

  /* Paginator container text */
  --mat-paginator-container-text-size: 0.75rem;
  --mat-paginator-container-text-weight: 400;

  /* Paginator select trigger text */
  --mat-paginator-select-trigger-text-size: 0.75rem;

  /* Dialog subhead text */
  --mdc-dialog-subhead-size: 1.5rem;
  --mdc-dialog-subhead-weight: 400;

  /* Dialog supporting text */
  --mdc-dialog-supporting-text-size: 0.75rem;
  --mdc-dialog-supporting-text-weight: 400;

  /* Datepicker calendar text */
  --mat-datepicker-calendar-text-size: 0.75rem;

  /* Datepicker calendar body label text */
  --mat-datepicker-calendar-body-label-text-size: 0.75rem;
  --mat-datepicker-calendar-body-label-text-weight: 500;

  /* Datepicker calendar header text */
  --mat-datepicker-calendar-header-text-size: 0.75rem;
  --mat-datepicker-calendar-header-text-weight: 500;

  /* Expansion header text */
  --mat-expansion-header-text-size: 0.75rem;
  --mat-expansion-header-text-weight: 500;

  /* Expansion container text */
  --mat-expansion-container-text-size: 0.75rem;
  --mat-expansion-container-text-weight: 400;

  /* mat-list */
  --mdc-list-list-item-label-text-size: 0.75rem;
  --mdc-list-list-item-label-text-weight: 500;
  --mdc-list-list-item-label-text-line-height: 1.43;

  /* Grid list tile header primary text */
  --mat-grid-list-tile-header-primary-text-size: 0.75rem;
  --mat-grid-list-tile-header-primary-text-weight: 400;

  /* Grid list tile header secondary text */
  --mat-grid-list-tile-header-secondary-text-size: 0.75rem;
  --mat-grid-list-tile-header-secondary-text-weight: 400;

  /* Grid list tile footer primary text */
  --mat-grid-list-tile-footer-primary-text-size: 0.75rem;
  --mat-grid-list-tile-footer-primary-text-weight: 400;

  /* Grid list tile footer secondary text */
  --mat-grid-list-tile-footer-secondary-text-size: 0.75rem;
  --mat-grid-list-tile-footer-secondary-text-weight: 400;

  /* Toolbar title text */
  --mat-toolbar-title-text-size: 1.375rem;
  --mat-toolbar-title-text-weight: 400;

  /* Tree node text */
  --mat-tree-node-text-size: 0.75rem;
  --mat-tree-node-text-weight: 400;

  /* Badge text */
  --mat-badge-text-size: 0.688rem;
  --mat-badge-text-weight: 500;
  --mat-badge-large-size-text-size: 0.688rem;

  /* Bottom sheet container text */
  --mat-bottom-sheet-container-text-size: 0.75rem;
  --mat-bottom-sheet-container-text-weight: 400;

  /* Stepper header label text */
  --mat-stepper-header-label-text-size: 0.75rem;
  --mat-stepper-header-label-text-weight: 500;
  --mat-stepper-header-error-state-label-text-size: 0.75rem;
  --mat-stepper-header-selected-state-label-text-size: 0.75rem;
  --mat-stepper-header-selected-state-label-text-weight: 500;

  /* Table header headline text */
  --mat-table-header-headline-size: 0.75rem;
  --mat-table-header-headline-weight: 500;

  /* Table row item label text */
  --mat-table-row-item-label-text-size: 0.75rem;
  --mat-table-row-item-label-text-weight: 400;

  /* Table footer supporting text */
  --mat-table-footer-supporting-text-size: 0.75rem;
  --mat-table-footer-supporting-text-weight: 400;

  /* Tab header label text */
  --mat-tab-header-label-text-size: 0.75rem;
  --mat-tab-header-label-text-weight: 500;

  /* Switch label text */
  --mat-switch-label-text-size: 0.75rem;
  --mat-switch-label-text-weight: 400;

  /* Chip label text */
  --mat-chip-label-text-size: 0.75rem;
  --mat-chip-label-text-weight: 500;

  /* Checkbox label text */
  --mat-checkbox-label-text-size: 0.75rem;
  --mat-checkbox-label-text-weight: 400;

  /* Text button label text */
  --mdc-text-button-label-text-size: 0.75rem;
  --mdc-text-button-label-text-weight: 500;

  /* Outlined button label text */
  --mat-outlined-button-label-text-size: 0.75rem;
  --mat-outlined-button-label-text-weight: 500;

  /* Extended FAB label text */
  --mdc-extended-fab-label-text-size: 0.75rem;
  --mdc-extended-fab-label-text-weight: 500;

  /* Filled button label text */
  --mdc-filled-button-label-text-size: 0.75rem;
  --mdc-filled-button-label-text-weight: 500;

  /* Outlined button label text (MDC) */
  --mdc-outlined-button-label-text-size: 0.75rem;
  --mdc-outlined-button-label-text-weight: 500;

  /* Radio label text */
  --mat-radio-label-text-size: 0.75rem;
  --mat-radio-label-text-weight: 400;

  /* Slider label text */
  --mdc-slider-label-label-text-size: 0.75rem;
  --mdc-slider-label-label-text-weight: 500;

  /* MDC Chip label text */
  --mdc-chip-label-text-size: 0.75rem;
  --mdc-chip-label-text-weight: 500;

  /* MDC Chip set label text */
  --mat-form-field-outlined-label-text-populated-size: 0.75rem;

  /* custom font */
  --default-text-size: 0.75rem;
  --sm-icon-button-size: 0.9rem;
  --sm-icon-size: 1.5rem;
}



@mixin smart-custom-theme($theme) {
  $primary: mat.get-theme-color($theme, 'primary');

  *::-webkit-scrollbar {
    width: 0.7em;
  }

  *::-webkit-scrollbar-thumb {
    background-color: mat.get-theme-color($theme, 'primary', 20);
    outline: 1px solid;
  }



  mat-list-item.active {
    background-color: mat.get-theme-color($theme, 'primary', 80);
    //background-color: #005cbb26;
  }

  // a.mat-mdc-unelevated-button {
  //   background-color: transparent;
  // }

  .mat-app-background {
    display: flex;
    width: 100%;
    min-height: 100vh;
    flex-direction: column;
  }

  .main-container {
    // display: flex;
    // flex-direction: column;
    flex: 1;
    padding-left: 4px;
  }

  .footer {
    background: $primary;
  }



  /*TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version.*/
  .mat-form-field-required-marker {
    color: red !important;
  }

  .logo-img {
    width: 70px;
  }

  .logo-footer-img {
    width: 350px;
  }

  .user-name {
    margin-left: 8px;
  }

  .copy-right {
    display: flex;
    padding: 8px;
    justify-content: center;
  }

  mat-toolbar, .mat-toolbar h1, .mat-toolbar h2, .mat-toolbar h3, .mat-toolbar h4, .mat-toolbar h5, .mat-toolbar h6 {
    //font: 500 14px/20px 'Poppins', sans-serif !important
    font-size: var(--md-sys-typescale-headline-small-font-size) !important;
    margin: 0;
  }

  .card-header.mat-toolbar-row, .card-header.mat-toolbar-single-row {
    height: 42px !important;
    padding: 0 16px;
  }


  .smart-card{
    background-color: var(--mdc-elevated-card-container-color);
    border: 1px solid #ccc;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 16px 0px 16px 2px;
    width: 100%;
  }

  .smart-card-header{
    display: flex;
    flex-direction: column;
    align-items:start;
  }

  .smart-label{
    font-size: var(--default-text-size);
  }

  .smart-card-table{
    margin: 16px 2px;
  }

  .mat-mdc-form-field {
    margin: 8px 0 !important;
  }

  .smart-flex-container {
    display: flex !important;
    justify-content: space-between;
    flex-wrap: wrap;
  }

  .smart-action-content{
    display: flex;
    justify-content: flex-end;
    margin: 12px;
  }

  .smart-button{
    margin: 0px 4px;
  }

  .smart-add-button{
    margin: 0px 4px;
    font-size: var(--sm-icon-button-size) !important;
  }

  .smart-icon{
    font-size: var(--sm-icon-size) !important;
  }

  .material-icons {
    vertical-align: baseline !important;
  }

  .smart-paginator{
    display: flex !important;
  }

  .smart-card-actions{
    display: flex;
    justify-content: flex-start;
    margin: 12px;
  }

  // .mat-checkbox-label, .mat-radio-label{}

  &:hover,
  &:focus {
    > .mat-mdc-list-item:not(.expanded) {
      background-color: mat.get-theme-color($theme, 'primary', 20);
    }
  }
}

@mixin smart-light-custom-theme(){
  mat-expansion-panel-header{
    background-color:#EBF5FB;
  }

  .offender-header-container {
    background-color: #eae9e9 !important;
  }


  .mat-mdc-slide-toggle .mdc-form-field {
    color: white !important;
  }

  .logo-text {
    color: white;
    font-size: var(--default-text-size);
  }

  .copy-right {
    color: white;
  }


  .mat-toolbar .mat-mdc-button-base.mat-mdc-button-base.mat-unthemed {
    --mdc-outlined-button-label-text-color: white !important;
  }

  .mat-mdc-tab-labels {
    background-color: #f3f3f4db;
    color: #000;
  }

  .mat-mdc-row:nth-child(odd) {
    background-color: #ffffff;
  }

  .mat-mdc-row:nth-child(even) {
    background-color: #d3d3d3;

  }

  .mat-mdc-cell-first {
    border-left: solid .5px black !important;
  }


  .mat-mdc-row {
    --mat-table-row-item-label-text-color: #0f0f0f;
  }

  mat-toolbar.external-link-group{
    background-color: #121B6F !important;
  }

  .footer {
    background-color: #030d67 !important;
  }

  .externalLink {
    background-color: #202869 !important;
  }

  
  .mat-calendar-period-button:hover {
    background-color: #f0f0f0 !important;
    padding: 10px 5px !important;
    border: 1px solid transparent !important;
  }


}

@mixin smart-dark-custom-theme(){

  mat-toolbar.external-link-group{
    background-color: #121B6F !important;
  }

  .externalLink {
    background-color: #202869 !important;
    color: #f1eaea !important;
  }


  .footer {
    background-color: #030d67 !important;
  }

  .mat-mdc-slide-toggle .mdc-form-field {
    color: rgb(229 236 245) !important;
  }

  mat-expansion-panel-header{
    background-color:#00000086;
  }

  .offender-header-container {
    background-color: #120e0e !important;
  }


  .logo-text {
    color: rgb(245, 235, 235);
    font-size: var(--default-text-size);
  }

  .copy-right {
    color: rgb(224, 215, 215);
  }

  .mat-mdc-list-item.active {
    //background-color: #005cbb26 !important;
  }

  // .mat-toolbar .mat-mdc-button-base.mat-mdc-button-base.mat-unthemed {
  //   --mdc-outlined-button-label-text-color: black !important;
  // }

  .mat-mdc-tab-labels {
    background-color: #2f2f2f;
    color: #ece6e6;
  }

  .mat-mdc-row:nth-child(odd) {
    background-color: #1d253f !important;
  }

  .mat-mdc-row:nth-child(even) {
    background-color: rgb(92, 92, 105) !important;
  }

  .mat-mdc-row {
    --mat-table-row-item-label-text-color: #f1eeee;
  }

}


$light-theme: mat.define-theme((
  color: (
    theme-type: light,
    primary: $_primary,
    tertiary: $_tertiary,
  ),
  typography: (
    use-system-variables: true,
  )
));

$dark-theme: mat.define-theme((
  color: (
    theme-type: dark,
    primary: $_primary,
    tertiary: $_tertiary,
  ),
  typography: (
    use-system-variables: true,
  )
));



// Define CSS classes for each theme
.smart-light-theme {
  @include smart-custom-theme($light-theme);
  @include smart-light-custom-theme();
  @include smart-theme-variables();

  //@include mat.typography-hierarchy($light-theme);
  @include mat.core();
  @include mat.color-variants-backwards-compatibility($light-theme);
}

.smart-dark-theme {
  mat.$theme-ignore-duplication-warnings: true;
  @include mat.all-component-themes($dark-theme);
  @include smart-custom-theme($dark-theme);
  @include smart-dark-custom-theme();
  @include smart-theme-variables();

  // @include mat.typography-hierarchy($dark-theme);
  @include mat.core();
  @include mat.color-variants-backwards-compatibility($dark-theme);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
  width: 100%;
  overflow-x: hidden; /* Prevent horizontal scrolling */
}

html {
  height: 100%;

  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */

  // $primary: $primary;

  ::-webkit-scrollbar {
    display: none;
  }

  // *::-webkit-scrollbar-thumb {
  //   background-color:  $primary;
  //   outline: 1px solid;
  // }
}

:root {
  @include mat.all-component-themes($light-theme);
}

body {
  display: flex;
  flex-direction: column;
  font-family: 'Open Sans', sans-serif;
  font-size: var(--default-text-size);
  min-height: 100vh;
  h1:{
    font-size: var(--md-sys-typescale-display-large-font-size); //36px
  }
  h2{
    font-size: var(--md-sys-typescale-display-small-font-size); //20px
  }
  h3{
    font-size: var(--md-sys-typescale-headline-large-font-size); //16px
  }
  h4{
    font-size: var(--md-sys-typescale-headline-medium-font-size); //14px
  }
}