// https://material.angular.io/guide/theming
// https://material.angular.io/guide/system-variables

@use "@angular/material" as mat;
// @use "dashboard-styles" as *;

@use "../../tsai/src/lib/styles/tsai.scss";

:root {
  --cb-error: #ff0000;
  --cb-success: #00ff00;
  --cb-gray: #777;
  --cb-box-shadow: 5px 5px rgba(0, 0, 0, 0.12);
  --cb-box-shadow-bottom: 0 5px rgba(0, 0, 0, 0.12);
  --cb-content-max-width: 1200px;
  --cb-break-point-small: 800px;
  --cb-break-point-xsmall: 500px;
}

html {
  // height: 100% !important;
  overflow-x: hidden;
  color-scheme: light;
  @include mat.theme(
    (
      typography: Roboto,
      density: 0,
    )
  );
}

body {
  overflow-x: hidden;
  margin: 0;
  min-height: 100vh;
  font-family: Roboto, "Helvetica Neue", sans-serif;
  // Subtle primary-tinted glow at the top for depth; stays theme-aware via
  // system tokens and falls back to the flat surface fill.
  background: var(--mat-sys-surface)
    radial-gradient(
      1200px 500px at 50% -10%,
      color-mix(in srgb, var(--mat-sys-primary) 6%, var(--mat-sys-surface)) 0%,
      var(--mat-sys-surface) 60%
    )
    no-repeat fixed;
  color: var(--mat-sys-on-surface);
  // height: 100% !important;
}

table.cb-table {
  width: 100% !important;
  // border: 1px solid red !important;
  // td,
  // th {
  //   border: 1px solid blue;
  // }
}

body.dark-mode {
  color-scheme: dark;
}

.success {
  @include mat.theme(
    (
      color: (
        primary: mat.$green-palette,
      ),
    )
  );
}

.ai {
  @include mat.theme(
    (
      color: mat.$yellow-palette,
    )
  );
}

a,
a:link,
a:visited,
a:active {
  cursor: pointer;
  color: var(--mat-sys-primary);
}

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

.login-backdrop {
  background: black;
}

.cb-outline {
  border: 1px solid var(--mat-sys-outline);
  border-radius: 0.5em;
  padding: 10px;
}

// messenger styles
// .prompter-input-wrapper {
//   .prompter-input {
//     width: 100%;
//   }
// }

.streamed-message {
  pre {
    border: 1px solid gray !important;
    padding: 10px;
    overflow-x: scroll;
  }
}

.cdk-overlay-dark-backdrop {
  background: rgba(0, 0, 0, 0.6);
}

.cdk-overlay-pane {
  language-icon svg {
    vertical-align: middle;
    margin-right: 6px;
  }
}

// https://stackoverflow.com/questions/64143862/proper-way-to-pad-and-remove-margin-from-mat-form-field
.mat-form-field-no-padding .mat-mdc-form-field-subscript-wrapper {
  margin-bottom: -1.25em;
}

// widget manager
#manager-paginator
  .mat-mdc-paginator-outer-container
  .mat-mdc-paginator-container {
  justify-content: center !important;
}

// daahboards
.dash-cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  // align-items: center;
  gap: 10px;
  margin: 10px;

  // @media (min-width: $content-max-width) {
  //   margin: 10px 0;
  // }

  .dash-card {
    flex: 1 1 330px;
    padding: 10px;
    min-width: 400px;
    mat-toolbar {
      button {
        margin-left: 10px;
      }
    }
    mat-card-content {
      .recent {
        .articles {
          list-style: none;
          .by-line {
            font-size: smaller;
          }

          //   margin-left: -25px;
        }
        .image-container {
          display: flex;
          justify-content: space-around;
          align-items: flex-start;
          flex-wrap: wrap;
          .image {
            flex: 1;
            width: 100%;
            max-width: 100px;
            height: auto;
            margin: 8px 5px;
            border: 1px solid gray;
          }
        }
      }
      .news {
        margin-top: 10px;
        .article {
          margin: 10px 0;
          img {
            border-radius: 7px;
            margin: 5px 10px 5px 0;
            float: left;
            width: 100px;
            height: 100px;
          }
          .author,
          .date {
            font-size: smaller;
          }
          .excerpt {
            font-size: x-small;
          }
        }
      }
    }
  }

  mat-card-actions {
    margin-top: 20px;
    margin-left: 7px;
    a {
      margin: 0 5px;
    }
  }
}