// This file contains declarations used in the styling of the ecr-viewer page

@use "uswds-core" as *;
@use "common" as *;
@use "variables" as *;

// ===== Variables ===== //
$ecr-viewer-gap: 2rem;
$nav-wrapper-width: 15.625rem;
$main-container-padding: 1rem;
$main-min-width: $content-container-min-width + $ecr-viewer-gap +
  $nav-wrapper-width + $main-container-padding * 2;

html {
  --patient-banner-buffer: 3.1rem;
}

main {
  border-top: 0 !important;
}

// ===== Page styling ===== //

.ecr-viewer-container {
  width: 100%;
  max-width: $content-container-max-width;
  min-width: $content-container-min-width;

  // Make sure items we link to don't get stuck behind patient banner
  *[id] {
    scroll-margin-top: calc(var(--patient-banner-buffer) + 0.75em);
  }
}

.content-wrapper {
  display: flex;
  gap: $ecr-viewer-gap;
  overflow: visible;
}

.minw-main {
  min-width: $main-min-width;
}

.width-main {
  max-width: $main-min-width + $content-container-max-width -
    $content-container-min-width;
  min-width: $main-min-width;
  width: 100%;
}

.padding-main {
  padding-left: $main-container-padding;
  padding-right: $main-container-padding;
}

// ===== Line styling helpers ===== //

.vertical-line {
  border-left: 1px solid #005ea2;
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}

.section__line_light_gray {
  border-top: 1px solid #f0f0f0;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

.section__line_gray {
  border-top: 1px solid #dfe1e2;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

.section__line_blue {
  border-top: 1px solid #99deea;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

// ===== Element styling ===== //

.data-title {
  flex: 0 1 auto;
  width: 190px;
  font-weight: bold;

  // .data-title takes precedence over text-normal by default
  &.text-normal {
    font-weight: revert;
  }
}
.table-header {
  background-color: #f0f0f0 !important;
}

.fixed-table {
  table-layout: fixed;
}

.table-caption-margin {
  caption {
    margin-bottom: 8px;
  }
}

.caption-normal-weight {
  caption {
    font-weight: normal;
  }
}

.caption-data-title {
  caption {
    flex: 0 1 auto;
    width: 190px;
    font-weight: bold;
    font-size: 1rem; // from .usa-prose
  }
}

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

.header-data-title {
  margin: 0px;
  font-weight: bold;
  font-size: 1rem;
}

.p-list {
  p {
    margin-top: 0;
    margin-bottom: 0.5rem;
  }

  p:last-child {
    margin-bottom: 0;
  }
}

.header-with-tag {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.tag-info {
  display: flex;
  padding: 0.25rem 0.5rem;
  justify-content: center;
  align-items: center;

  border-radius: 0.125rem;
  background-color: #99deea;
  font-weight: normal;
  font-size: 0.875rem;
  line-height: 100%;
  color: #111111;
}

// ===== Section styling ===== //

.ecr-summary-title-long {
  font-weight: bold;
  margin-bottom: 8px;
}

.accordion-primary {
  &.accordion-ecr-section {
    margin-bottom: 2rem;
    --padding: clamp(1.25rem, 5%, 2.75rem);
    & > .usa-accordion__heading {
      font-size: 2rem;

      & > .usa-accordion__button {
        padding-left: var(--padding);
        padding-right: var(--padding);
        background-position-x: calc(100% - var(--padding));
      }
    }

    & > .usa-accordion__content {
      padding-left: var(--padding);
      padding-right: var(--padding);
    }
  }

  & > .usa-accordion__heading {
    & > .usa-accordion__button {
      background-size: 1.5em;
      background-color: color("primary");
      color: white;
      @include add-background-svg("usa-icons-bg/remove--white");

      &[aria-expanded="false"] {
        @include add-background-svg("usa-icons-bg/add--white");
      }
    }

    &:first-of-type {
      margin-top: 0;
    }

    margin-top: 3rem;
  }

  // remove the bottom border from the last-est child in the accordion
  & > .usa-accordion__content {
    .section__line_gray:last-child {
      padding-top: 0;
      padding-bottom: 0;
      border: none;
    }

    :not(:last-child) .section__line_gray:last-child {
      border-top: 1px solid #dfe1e2;
      margin-top: 0.5rem;
      margin-bottom: 0.5rem;
    }
  }
}

.accordion-rr {
  overflow: hidden;
  margin-top: 1rem;
  border: none;
  border-radius: 0;

  .usa-accordion__heading {
    border: #111111 1px solid;
    border-radius: 0.25rem;
    padding: 2px; // a bit of padding to allow the focus state some room

    &:has(> button[aria-expanded="true"]) {
      border-radius: 0.25rem 0.25rem 0 0;
    }

    &:not(:first-child) {
      margin-top: 1rem;
    }
  }

  .usa-accordion__button {
    @include u-text("ink");
    font-size: 1.125rem;
    font-weight: normal;
    background-color: color("white");
    @include add-background-svg("usa-icons/remove");
    border-radius: 0.25rem;

    &:hover {
      background-color: #f0f0f0;
    }

    &[aria-expanded="false"] {
      border-bottom: 0;
      @include add-background-svg("usa-icons/add");
    }
  }

  > div {
    border: #111111 1px solid;
    border-radius: 0 0 0.25rem 0.25rem;
    border-top: none;
  }

  .usa-prose {
    &:has(.lab-results-table-from-div) {
      overflow-x: auto;
    }

    > table {
      overflow-wrap: break-word;
      width: calc(100% + 2.5rem);
      margin-right: -1.25rem;
      margin-left: -1.25rem;
      margin-top: -1rem;
      margin-bottom: 1rem;
      border-bottom: #1b1b1b 1px solid;

      &.lab-results-table-from-div {
        border-bottom: none;
        margin-bottom: 3rem;

        &:last-child {
          margin-bottom: 0;
        }
      }

      thead th {
        background-color: #f0f0f0;
      }

      tr td {
        border-bottom: 0;
      }
    }
  }
}

.table-clinical-problems {
  tbody td:nth-child(2) {
    min-width: 130px;
  }

  tbody td:nth-child(3) {
    min-width: 100px;
  }
}

.clinical_info_container {
  table {
    @include usa-table;
    @include usa-table--borderless;

    & {
      width: 100%;
      border: 1px solid;
      margin-top: 0;
      margin-bottom: 0;
    }

    thead tr th {
      background-color: #f0f0f0;
      min-width: 120px;
    }
  }
}

.immunization_table {
  tr {
    td:nth-child(1) {
      word-break: break-word;
    }
  }
}

.condition-details-accordion {
  .usa-accordion__heading.border-accent-cool-darker {
    &:not(:first-child) {
      margin-top: 1.12rem;
    }
  }

  .usa-accordion__content.border-accent-cool-darker {
    padding: 0.5rem 0.75rem 0 0.75rem;
  }

  .usa-accordion.accordion-rr {
    margin: 0.5rem 0 0.75rem 0;
  }

  .usa-accordion__button {
    padding: 0.88rem 0.75rem;
  }
}

// ===== SideNav styling ===== //

.nav-wrapper {
  padding-top: 2rem;
  padding-bottom: 2rem;
  width: $nav-wrapper-width;
  min-width: $nav-wrapper-width;
  position: sticky;
  height: calc(100vh - var(--patient-banner-buffer));
  top: var(--patient-banner-buffer);
  overflow-y: auto;

  .usa-sidenav__item a:not(.usa-sidenav__sublist a) {
    font-weight: bold;
  }

  ul.usa-sidenav
    > li.usa-sidenav__item
    > ul.usa-sidenav__sublist
    > li.usa-sidenav__item
    > a {
    font-weight: bold;
  }

  ul.usa-sidenav
    > li.usa-sidenav__item
    > ul.usa-sidenav__sublist
    > li.usa-sidenav__item
    > a.usa-current,
  ul.usa-sidenav
    > li.usa-sidenav__item
    > ul.usa-sidenav__sublist
    > li.usa-sidenav__item
    > ul.usa-sidenav__sublist
    > li.usa-sidenav__item
    > a.usa-current {
    &::after {
      background-color: rgb(0, 94, 162);
      content: "";
      display: block;
      position: absolute;
      bottom: 0.25rem;
      top: 0.25rem;
      width: 0.25rem;
      left: 0rem;
      border-radius: 99rem;
    }
  }

  .usa-sidenav__sublist li.usa-sidenav__item:first-child {
    border-top: none !important;
  }
}

// ===== PatientBanner styling ===== //

.patient-banner {
  display: flex;
  // x padding should match overall header
  padding: 0.85rem clamp(1rem, 6.25vw, 5rem);
  align-items: center;
  gap: 12px;
  box-shadow:
    0 0 4px color("primary-dark"),
    0 0 2px color("primary-darker");

  background: color("primary-dark");

  color: var(--White, #fff);

  font-size: 1.375rem;
  font-style: normal;
  line-height: 1.15;

  position: sticky;
  top: 0;
  z-index: 1000;
}

.patient-banner-name {
  font-weight: bold;
}

.patient-banner-dob {
  font-weight: normal;
}
