@use "page";
@use "ct-card";
@import "global-variables";
@import "@patternfly/patternfly/utilities/Text/text.scss";

// utilities for `pf-u...` classes
@import "@patternfly/patternfly/utilities/Spacing/spacing.css";

#app {
  section.pf-c-page__main-breadcrumb {
    padding-bottom: var(--pf-c-page__main-breadcrumb--PaddingTop);
  }
}

html {
  --metrics-heading-color: #fff;
  --metrics-heading-time-color: #eee;
}

.pf-theme-dark {
  --metrics-heading-color: var(--pf-global--BackgroundColor-dark-100);
  --metrics-heading-time-color: var(--pf-global--BackgroundColor--300);
  --metrics-events-border-color: #000;
}

// Remove doubled-up padding on "main" sections, when two+ sections are used.
.pf-c-page__main-section + .pf-c-page__main-section {
  padding-top: 0;
}

// FIXME: More styles from ct-system-overview
.current-metrics {
  --card-width: 200px;
  --pf-l-gallery--GridTemplateColumns: repeat(auto-fit, minmax(var(--card-width), 1fr));

  // the cards already have padding, align the "top 5" tables with the other content
  .pf-c-table {
    --pf-c-table--m-compact--cell--first-last-child--PaddingLeft: 0;
    --pf-c-table--m-compact--cell--first-last-child--PaddingRight: 0;

    tr > * {
      --pf-c-table--cell--PaddingTop: var(--pf-global--spacer--xs);
      --pf-c-table--cell--PaddingBottom: var(--pf-global--spacer--xs);
    }
  }

  .pf-c-card {
    // Make sure the cards do not get taller than 50% of the screen
    // ...and when they do, they should scroll
    @media screen and (orientation: landscape) {
      max-height: 50vh;
      overflow: auto;
    }

    &__title {
      font-size: var(--pf-global--FontSize--xl);
      font-weight: var(--pf-global--FontWeight--normal);
    }

    // Let the children get flexy
    &__body {
      display: flex;
      flex-direction: column;

      // Strip the padding from the first item,
      // including table headings
      > :first-child,
      > :first-child > thead > tr > th {
        padding-top: 0;
      }

      .pf-c-table thead th:not(:first-child),
      .pf-c-table tbody td:not(:first-child) {
        text-align: right;
      }
    }

    .align-baseline {
      align-items: baseline;
    }

    .text-color-warning {
      color: var(--pf-global--warning-color--200);
    }

    .icon-color-warning {
      color: var(--pf-global--warning-color--100);
    }

    .text-color-critical {
      color: var(--pf-global--danger-color--200);
    }

    .icon-color-critical {
      color: var(--pf-global--danger-color--100);
    }

    .progress-stack {
      display: grid;
      padding-bottom: var(--pf-global--spacer--sm);
      grid-gap: var(--pf-global--spacer--sm) var(--pf-global--spacer--md);

      &:not(:first-child) {
        padding-top: var(--pf-global--spacer--sm);
      }
    }

    .progress-stack-no-space {
      display: grid;
      padding-bottom: var(--pf-global--spacer--sm);
      grid-gap: 0;

      &:not(:first-child) {
        padding-top: var(--pf-global--spacer--sm);
      }

      // avoid the "x" icon on high CPU usage
      .pf-c-progress__status-icon {
        display: none;
      }

      // don't center the "View all CPUs" button
      button {
        padding-left: 0;
        width: fit-content;
      }
    }

    // Stretch the progress stack and description list so they fill up remaining space.
    // This pushes the (unflexing) tables to the bottom.
    .progress-stack,
    .pf-c-description-list {
      flex: 1 1 0;
      align-content: start;
    }

    // When progress stack and description list are used sequentially,
    // give the most space to the latter of the two elements.
    .progress-stack + .pf-c-description-list,
    .pf-c-description-list + .progress-stack {
      flex-basis: 100%;
    }

    // WebKit is a little wonky with flex sizing; it needs specific instructions here
    .pf-c-description-list:first-child {
      flex-grow: 0;
    }

    .pf-c-description-list__description {
      font-size: var(--pf-global--FontSize--sm);
    }
  }

  // Shrink progress bars and their gap a little
  .pf-c-progress {
    grid-gap: 0;
    --pf-c-progress__bar--Height: var(--pf-global--spacer--xs);
    // PF4 uses end; it probably should arguably use last baseline.
    // (perhaps end may work better for non-text content?)
    align-items: last baseline;

    + .pf-c-progress {
      // Add a tiny gap for sandwiched usage bars (as in CPU)
      padding-top: 1px;
    }
  }

  // Only underline the description
  .pf-c-button.pf-m-link.pf-m-inline:hover {
    text-decoration: none;

    .pf-c-progress__description {
      text-decoration: var(--pf-c-button--m-link--m-inline--hover--TextDecoration);
    }
  }

  // Match font weight with description list terms
  .pf-c-progress__description {
    font-weight: var(--pf-global--FontWeight--bold);
  }

  // Recolor text
  .pf-m-link {
    &, &:hover {
      .pf-c-progress__measure {
        color: var(--pf-global--Color--100);
      }
    }
  }

  // default is way too wide for the cards
  .pf-c-description-list {
    --pf-c-description-list--m-horizontal__term--width: minmax(0, auto);
    --pf-c-description-list--m-horizontal__description--width: minmax(0, auto);
  }

  // Don't wrap network in / out data
  // Shrink network cards and data a little more
  // (as space is costly and they use a lot)
  // FIXME: Let's fix the content (split off units) and drop this when we can
  .network-nowrap-shrink {
    td {
      white-space: nowrap;
      font-size: var(--pf-global--FontSize--xs);
    }
  }

  // Shrink percentage column to allow for more service text
  th[data-label="%"],
  td[data-label="%"] {
    .pf-c-table__text {
      --pf-c-table--cell--MinWidth: 0;
      display: inline;
    }
    width: 2rem;
    min-width: 0;
  }

  // Adjust responsive versions of lg grid tables
  // (mainly for the network table, as it is more information dense)
  .pf-m-grid-lg.pf-c-table {
    tbody:first-of-type {
      border-top: none;
    }

    tbody tr:not(.pf-c-table__expandable-row) {
      --pf-c-table-tr--responsive--PaddingTop: var(--pf-global--spacer--sm);
      --pf-c-table-tr--responsive--PaddingRight: 0;
      --pf-c-table-tr--responsive--PaddingBottom: var(--pf-global--spacer--sm);
      --pf-c-table-tr--responsive--PaddingLeft: 0;
      --pf-c-table-tr--responsive--border-width--base: 1px;

      &:last-child {
        border-bottom: none;
      }

      > * {
        --pf-c-table--cell--responsive--PaddingTop: 0;
        --pf-c-table--cell--responsive--PaddingBottom: 0;
      }
    }
  }

  .all-disks-no-gap {
    // don't center the "View all disks" button
    button {
      padding-left: 0;
      width: fit-content;
    }
  }
}

.pf-c-popover {
  thead th:not(:first-child) {
    text-align: right;
  }

  .disks-nowrap {
    td {
      white-space: nowrap;
    }

    td:not(:first-child) {
      text-align: right;
    }
  }
}

@media (min-width: 641px) and (max-width: 1200px) {
  .current-metrics {
    --card-width: 200px;
  }

  .current-metrics .pf-c-card__body {
    overflow-y: auto;
    max-height: 50vw;
  }

  // Trim down the gutter space between cards
  .current-metrics.pf-l-gallery.pf-m-gutter {
    grid-gap: var(--pf-global--spacer--sm);
  }

  // Shave off a few pixels from cards
  .pf-c-card__header, .pf-c-card__title, .pf-c-card__body, .pf-c-card__footer {
    --pf-c-card--first-child--PaddingTop: var(--pf-global--spacer--sm);
    --pf-c-card__title--not--last-child--PaddingBottom: var(--pf-global--spacer--sm);
    --pf-c-card--child--PaddingTop: var(--pf-global--spacer--sm);
    --pf-c-card--child--PaddingRight: var(--pf-global--spacer--md);
    --pf-c-card--child--PaddingBottom: var(--pf-global--spacer--sm);
    --pf-c-card--child--PaddingLeft: var(--pf-global--spacer--md);
  }
}

// Change progress layout in medium sizes
@media (min-width: 460px) and (max-width: 1200px) {
  // Stack description lists (instead of grid)
  .pf-c-description-list__group {
    display: block;
  }
}

// Stretch network card and reflow items
@media (min-width: 660px) and (max-width: 860px) {
  .current-metrics-network {
    grid-column: 1 / -1;

    // Reflow interfaces horizontally, with wrapping
    .pf-c-table > tbody {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
      grid-gap: 0 var(--pf-global--spacer--lg);
    }
  }
}

.metrics {
  --column-size: 10vw;
  --half-column-size: 8vw;
  --data-min-height: 5px;

  &-heading,
  &-minute {
    display: grid;
    grid-template-columns: 1fr 2fr;
  }

  &-graphs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--column-size), 1fr));

    .metrics-data {
      min-height: var(--data-min-height);
    }
  }

  &-label {
    max-width: 20ch;
    margin: 0.5rem;
  }

  &-sublabels.pf-c-content {
    small {
      font-size: var(--pf-global--FontSize--xs);
    }
    display: flex;
  }

  &-label-graph {
    text-align: right;

    & .metrics-sublabels {
      justify-content: flex-end;
    }
  }

  &-label-graph.have-saturation {
    text-align: center;

    & .metrics-sublabels {
      justify-content: space-evenly;
    }
  }

  &-events-wrapper {
    width: 100%;
  }

  &-events {
    width: 100%;

    --pf-c-table--BorderColor: var(--metrics-events-border-color, default);

    // Remove left padding from the table toggle
    .pf-c-table__toggle {
      padding-left: 0;
    }

    .description {
      display: grid;
      grid-template-columns: [info] 1fr [time] 1fr;

      .details {
        grid-column: time;
        grid-row: 1;
        display: flex;
        justify-content: space-between;
        width: 100%;
      }

      .type {
        grid-column: info;
      }
    }

    // Make messages such as `Loading...` or `No logs found` centered
    .cockpit-log-panel {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;

      .cockpit-logline {
        flex: 0 0 100%;
      }
    }
  }

  &-time,
  &-heading {
    position: relative;
    width: calc(100% + var(--pf-c-page__main-section--PaddingRight) + var(--pf-c-page__main-section--PaddingLeft));
    right: var(--pf-c-page__main-section--PaddingRight);

    padding-right: var(--pf-c-page__main-section--PaddingRight);
    padding-left: var(--pf-c-page__main-section--PaddingLeft);
  }

  &-time {
    background: var(--metrics-heading-time-color);
    padding: 0.5rem 1rem;
    margin-left: var(--pf-global--spacer--md);
  }

  &-heading {
    background: var(--metrics-heading-color);
    margin-bottom: 0.25rem;
    box-shadow: var(--pf-global--BoxShadow--sm);

    &-sticky {
      position: sticky;
      top: 0;
      z-index: 99;
    }
  }

  &-history {
    padding: 0;
  }

  &-data {
    display: grid;
    contain: strict;
    margin-left: 0.5rem;
    margin-right: 0.5rem;
    // Make SVG and generated before/after line position relative to metrics-data
    position: relative;

    // vertical ruler line for areas with data, and horizontal tick mark for utilization half
    &.valid-data::before {
      content: "";
      position: absolute;
      z-index: 1;
      width: 100%;
      top: 0;
      bottom: 0;
      border-right: 1px solid rgb(0 0 0 / 30%);
      border-top: 1px solid rgb(0 0 0 / 30%);
    }

    &.valid-data.have-saturation::before {
      width: 50%;
    }

    // horizontal tick mark for saturation half, for resources that have it
    &.valid-data.have-saturation::after {
      content: "";
      position: absolute;
      z-index: 1;
      width: 50%;
      left: 50%;
      border-top: 1px solid rgb(0 0 0 / 30%);
    }

    > svg {
      fill: var(--color);
      min-width: 2px;
      width: 100%;
      height: 100%;
      // WebKit has an issue with normal positioning (height exceeds bounds), but absolute works fine
      position: absolute;
      top: 0;
      left: 0;
    }

    &-cpu {
      --color: plum;
    }

    &-memory {
      --color: lightblue;
    }

    &-disks {
      --color: lightgreen;
    }

    &-network {
      --color: lightsalmon;
    }

    // compressed minutes without events are simple bars
    .compressed {
      display: grid;
      grid-template-areas: ". utilization .";

      --util-pct: calc(100% * var(--utilization));
      grid-template-columns: calc(100% - var(--util-pct)) var(--util-pct);

      > .saturation,
      > .utilization {
        background-color: var(--color);
      }

      > .utilization {
        grid-area: utilization;
      }

      > .saturation {
        grid-area: saturation;
        opacity: 0.7;
      }
    }

    &.have-saturation .compressed {
      grid-template-areas: ". utilization saturation .";
      --util-pct: calc(50% * var(--utilization));
      --sat-pct: calc(50% * var(--saturation));
      grid-template-columns: calc(50% - var(--util-pct)) var(--util-pct) var(--sat-pct) calc(50% - var(--sat-pct));
    }
  }

  // vertical dotted line through graph center, for areas without data
  &-data::after {
    content: "";
    z-index: -1;
    top: 0;
    bottom: 0;
    position: absolute;
  }

  &-data.empty-data::after {
    position: initial;
    border-right: 1px dotted rgb(0 0 0 / 30%);
  }

  &-data.empty-data.have-saturation::after {
    position: absolute;
    border-left: 1px dotted rgb(0 0 0 / 30%);
    border-right: none;
    left: 50%;
  }

  .pf-c-card__body:first-child {
    padding-top: 0;
  }
}

// Graph column labels are the widest part; scale down the labels for narrow widths
@media (min-width: 800px) and (max-width: 1200px) {
  .metrics-label-graph {
    font-size: var(--pf-global--FontSize--s);
  }
}

@media (max-width: 800px) {
  .metrics-label-graph {
    font-size: var(--pf-global--FontSize--xs);
  }
}

.bottom-panel {
  display: flex;
  justify-content: space-around;
  padding: 1em;
}

.nodata {
  margin: 1em;
}

.select-min {
  width: min-content;
}

#pcp-settings-modal {
  .pcp-settings-modal-text {
    // "Read more..." link
    a {
      padding-left: 1em;
      white-space: nowrap;
    }
  }

  // leave some space for the focus rings
  .pf-c-switch {
    margin-bottom: 10px;
  }
}

.cpu-all {
  --pf-l-grid--m-gutter--GridGap: var(--pf-global--spacer--xs) var(--pf-global--spacer--md);
  // Mixing font families need to be aligned properly (to the baseline)
  align-items: baseline;
  // In monospaced text, "100%" is 4 characters
  grid-template-columns: 1fr minmax(4ch, auto);

  > .pf-l-grid__item {
    // Don't use PF's hardcoded 12-column grid
    grid-column: auto;
  }

  > dd {
    // TODO: Use tabular numbers instead of monospace,
    // after new font usage is enabled
    font-family: var(--pf-global--FontFamily--monospace);
    // Aligning percentages to the right, especially when monospaced,
    // makes  it easier to see high percentages
    text-align: right;
  }
}
