@use "./system-global.scss";
/* System Time Modal dialog needs table.css */
@use "../lib/table.css";
@import "global-variables";
@import "@patternfly/patternfly/components/Table/table.scss";

.ct-limited-access-alert {
  --pf-c-alert--GridTemplateColumns: auto auto 1fr;

  // Fix vertical alignment
  // Unset the H4 line-height (as PF3/Bootstrap/etc. sets it; PF4 doesn't)
  > .pf-c-alert__title {
    line-height: unset;
  }

  // Deconstruct nicely on small screen sizes (especially mobile)
  // This will not be needed in a future PF4 update
  //
  // References:
  // - https://github.com/cockpit-project/cockpit/issues/14106
  // - https://github.com/patternfly/patternfly/issues/3125
  // - https://github.com/patternfly/patternfly/pull/2921
  //
  // When we have the upcoming version of PF4 in Cockpit, we should drop this code
  // (and adjust things for the button to show up on the side of desktop mode instead)
  @media (max-width: $pf-global--breakpoint--lg) {
    grid-template-areas: "icon title" ". content" ". action";
    grid-gap: var(--pf-global--spacer--sm) 0;
  }

  @media (max-width: 320px) {
    // Allow the action button to have a bit more space on iPhone SE sized phones
    grid-template-areas: "icon title" ". content" "action action";
  }

  // Set the right padding so that the button aligns with the other alerts in the page on the side
  padding-right: var(--pf-c-page__main-section--PaddingRight);

  > .pf-c-alert__action {
    margin-right: 0;
    margin-left: var(--pf-global--spacer--md);
  }

  // Align left content with the rest of the page
  @media (min-width: $pf-global--breakpoint--xl) {
    padding-left: var(--pf-global--spacer--lg);
  }
}

.ct-overview-header {
  align-items: center;
  display: flex;
  flex: none;

  &,
  &-hostname {
    flex-wrap: wrap;
  }

  &-actions,
  &-hostname {
    box-sizing: border-box;
    display: flex;
  }

  &-hostname {
    align-items: baseline;
    flex: auto;
    /* Collapse down to 15rem, to help preserve button on the right */
    flex-basis: 15rem;

    > h1 {
      font-size: var(--pf-global--FontSize--2xl);
    }
  }

  &-hostname > h1,
  &-subheading {
    padding-right: 1rem;
  }

  &-actions {
    align-items: center;
  }

  &-subheading {
    font-size: var(--pf-global--FontSize--md);
  }
}

.ct-system-overview {
  --card-width: 22rem;
  --pf-l-gallery--GridTemplateColumns: repeat(auto-fill, minmax(var(--card-width), 1fr));

  .motd-box {
    grid-column: 1 / -1;
  }

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

    &__body {
      &:last-child .pf-c-table:last-child tr:last-child {
        /* Remove the border of tables when it's the last item in a card and there isn't a card footer */
        border-bottom: none;
      }

      p {
        + p,
        + button {
          margin-top: calc(var(--pf-global--LineHeight--md) * 1rem);
        }
      }

      td {
        vertical-align: middle;
      }

      th {
        font-size: var(--pf-global--FontSize--sm);
      }
    }
  }

  .pf-c-progress {
    &__status {
      display: flex;
      align-items: baseline;

      &-icon {
        display: flex;
        align-self: center;
      }
    }
  }

  .pf-m-compact {
    th, td {
      &:first-child {
        :not([dir="rtl"]) & {
          padding-left: 0;
        }

        [dir="rtl"] & {
          padding-right: 0;
        }
      }

      &:last-child {
        :not([dir="rtl"]) & {
          padding-right: 0;
        }

        [dir="rtl"] & {
          padding-left: 0;
        }
      }
    }
  }
}

@media (orientation: landscape) and (min-width: 684px) and (max-width: 832px) and (max-height: 703px) {
  /* Optimize for VMs  */
  /*
    Full offset:  Sidebar: 240, switcher: 100
    Small offset: Sidebar: 192, switcher: 84

    Max sidebar (with switcher): 240 + 100 = 340
    Min sidebar (without switcher): 192

    Min iframe width (with switcher): 1024 - 340 = 684
    Max iframe width (without switcher): 1024 - 192 = 832

    Height offset: 65px (for the heading)
    Max iframe: 768 - 65 = 703

    NOTE: For cross-browser reasons, the above media breakpoints need to be px
    NOTE 2: This should be updated when the navigation is updated
  */

  .ct-system-overview {
    /* Adjust card width to be approx. 2×2 */
    --card-width: 16rem;
  }
}

@media (max-width: 320px) {
  .ct-system-overview {
    /* Reduce spacing between items */
    --pf-l-gallery--m-gutter--GridGap: 0.25rem;
  }
}

@media (max-device-width: 780px) and (orientation: portrait) {
  /* Allow cards to be stretch to edges on mobile devices */
  .ct-system-overview {
    --card-width: 100%;
  }
}

@media (max-width: 779px) {
  /* Reduce gutter & padding on smaller widths, for desktop & mobile */

  .pf-l-gallery {
    --pf-l-gallery--m-gutter--GridGap: calc(var(--pf-global--gutter--md)/2);
  }

  .pf-c-card {
    --pf-c-card--first-child--PaddingTop: var(--pf-global--spacer--md);
    --pf-c-card--child--PaddingRight: var(--pf-global--spacer--md);
    --pf-c-card--child--PaddingBottom: var(--pf-global--spacer--md);
    --pf-c-card--child--PaddingLeft: var(--pf-global--spacer--md);
    --pf-c-card__title--not-last-child--PaddingBottom: var(--pf-global--spacer--sm);
  }
}

@media (min-width: 780px) {
  /* Embiggen subheading & card headings when there's space */

  .ct-system-overview .pf-c-card__title {
    font-size: var(--pf-global--FontSize--2xl);
  }

  .ct-overview-header-subheading {
    font-size: var(--pf-global--FontSize--lg);
  }
}

@media (min-width: 1000px) and (max-width: 1400px) {
  /* optimize for approx 1600×1200 on desktops */
  /* (numbers are fudgy due to our nav & possibility of desktop's panels) */

  .ct-system-overview {
    --card-width: 25rem;
  }
}

#machine_id {
  font-family: var(--pf-global--FontFamily--redhatfont--monospace);
  // Some browsers don't support anywhere yet, so we provide break-word as a fallback
  overflow-wrap: break-word;
  overflow-wrap: anywhere;
}

.pf-c-table tr > * {
  vertical-align: top;
}

.ct-inline-list .pf-c-list.pf-m-inline {
  display: inline-flex;
  margin-left: 1rem;
}

/* Add a subtle dropshadow to the alerts, to separate them from the background, similar to the cards on the page */
.pf-c-page__main-section:not(.ct-overview-header),
.pf-l-gallery {
  > .pf-c-alert {
    box-shadow: var(--pf-global--BoxShadow--sm);

    // Default PF4 blue and background grey are too close in shade
    // So: Lighten up the blue to provide a touch more contrast
    // (Based on default's light green, but in a blue shade)
    &.pf-m-info {
      --pf-c-alert--BackgroundColor: #f1f8fe;
    }
  }
}

#motd-box > .pf-c-alert {
  /* Spacing between the MOTD is handled by the .pf-l-gallery grid */
  margin-bottom: 0;
}

.pf-c-alert .pf-c-alert__description a {
  padding-left: 15px;
}

// Stretch modal content to fill body
// This redirects scrolling from the modal body to the select widget
.ct-m-stretch-body {
  // Use flex to let children fully expand to the content
  .pf-c-modal-box__body {
    &, > :only-child {
      // Let children fully stretch to content
      display: flex;
    }

    > :only-child,
    .pf-c-menu__content {
      // Get squishy with children and the menu content
      flex: auto;
    }

    .pf-c-menu__content {
      // Relax the height constraint
      --pf-c-menu__content--MaxHeight: 100%;
    }
  }
}
