/*
 * This file is part of Cockpit.
 *
 * Copyright (C) 2015 Red Hat, Inc.
 *
 * Cockpit is free software; you can redistribute it and/or modify it
 * under the terms of the GNU Lesser General Public License as published by
 * the Free Software Foundation; either version 2.1 of the License, or
 * (at your option) any later version.
 *
 * Cockpit is distributed in the hope that it will be useful, but
 * WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
 * Lesser General Public License for more details.
 *
 * You should have received a copy of the GNU Lesser General Public License
 * along with Cockpit; If not, see <https://www.gnu.org/licenses/>.
 */
@use "ct-card";
@use "page";
@use "table";
@use "journal";
@use "global-variables" as *;
@use "@patternfly/patternfly/components/Card/card.scss";
@use "@patternfly/patternfly/components/Progress/progress.scss";
@use "@patternfly/patternfly/utilities/Flex/flex.scss";
@use "@patternfly/patternfly/utilities/Text/text.scss";
@use "@patternfly/patternfly/utilities/Alignment/alignment.scss";

#storage .pf-v6-c-card {
  @extend .ct-card;
}

// Only used in iSCSI dialog
.dialog-select-row-table {
  inline-size: 100%;

  td {
    text-align: start;
    padding-block: 0.75em;
    padding-inline: 0;
    vertical-align: top;
    border: 1px solid #d1d1d1;

    &:first-child {
      border-inline-end-width: 0;
    }

    &:last-child {
      border-inline-start-width: 0;
    }
  }

  th {
    font-weight: var(--pf-t--global--font--weight--body--bold);
    text-align: start;
    color: var(--pf-t--global--text--color--regular);
    padding-block: 0.75em;
    padding-inline: 0;
  }

  td, th {
    &:first-child {
      padding-inline-start: 0.75em;
    }

    &:last-child {
      padding-inline-end: 0.75em;
    }
  }
}

div.progress {
  inline-size: 100%;
  block-size: var(--pf-t--global--font--size--xs);
}

td.job-description {
  inline-size: 50%;
}

td.job-action {
  text-align: end;
}

.storage-graph {
  block-size: 180px;
}

.dialog-item-tooltip {
  margin-inline-start: 5px;
  padding: 0;
  white-space: nowrap;
}

.modal-footer-teardown {
  text-align: start;
}

.modal-footer-teardown td {
  vertical-align: baseline;
}

* + .modal-footer-teardown {
  padding-block-start: var(--pf-t--global--spacer--xl);
}

// FIXME: This is visual only; it needs to be fixed for a11y reasons, likely at the JSX level
.indent {
  padding-inline-start: calc(var(--pf-t--global--spacer--md) * min(var(--level, 0), 10));
  white-space: nowrap;
}

.widest-title {
  visibility: hidden;
  block-size: 0;
}

.sigkey-hash {
  font-family: monospace;
  font-size: 140%;
}

.delete-resource-dangerous {
  color: var(--pf-t--global--color--status--danger--default);
}

.pf-v6-c-modal-box .slot-warning {
  color: var(--pf-t--global--color--status--danger--default);
}

// This is needed to avoid showing scrollbar in dialog
.size-slider {
  padding-block-end: var(--pf-t--global--spacer--xs);
}

.storage-alert-actions button {
  margin-block: 0.5rem 0.2rem;
  margin-inline: 0 0.2rem;
}

// FIXME: There's probably a better way to do this.
// We wrap the data list row with a label to make checkboxes clickable from the whole row
// we need this HACK in order to make alignRight property take effect
.data-list-row-checkbox-label {
  display: flex;
  flex-wrap: wrap;
  flex-grow: 1;
}

.crypto-keyslots-list {
  border: none;
}

.pf-v6-c-description-list .pf-v6-c-progress {
  max-inline-size: 30ch;
}

.usage-bar {
  --bg-color: var(--pf-t--chart--theme--colorscales--blue--colorscale--100);
  display: inline-block;
  inline-size: 20em;
  block-size: 1rem;
  margin-inline-start: 1rem;
  position: relative;
  inset-block-start: 0.15rem; // XXX - center it
  inset-inline-start: 0;

  &-short {
    inline-size: 3.5rem;
  }

  &-danger {
    --bg-color: var(--pf-t--chart--global--danger--color--100);
  }

  &-empty {
    --bg-color: none;
  }

  &-indicator {
    display: inline-block;
    background: var(--bg-color);
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    block-size: 100%;
  }

  // Hatched effect for progressbars that are parts of a group, but not the main
  &-other {
    // Use the page's default background color
    --bg-light: transparent;
    // Alternate with the used color of the progress bar
    --bg-dark: var(--bg-color);
    // Repeat a gradient with hard stops, a perfect slant, and a consistency
    // with all "other" hatched backgrounds
    background: repeating-linear-gradient(
      -45deg,
      var(--bg-light),
      var(--bg-light) 25%,
      var(--bg-dark) 25%,
      var(--bg-dark) 50%,
      var(--bg-light) 50%
    ) top left;
    background-size: var(--pf-t--global--spacer--sm) var(--pf-t--global--spacer--sm);
    // Overlay at 1/3  to mix the light and dark against the through color
    opacity: 0.333;
  }

  &::before {
    display: inline-block;
    content: "";
    background: var(--bg-color);
    opacity: 0.2;
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    inline-size: 100%;
    block-size: 100%;
  }
}

.storage-pvs-box {
  border: 1px solid var(--pf-t--global--border--color--nonstatus--purple--default);
  background: var(--pf-t--global--color--nonstatus--purple--default);
  color: var(--pf-t--global--text--color--on-highlight);
  border-radius: var(--pf-t--global--border--radius--tiny);
}

.storage-pvs-pv-box {
  padding: var(--pf-t--global--spacer--sm);

  &:not(:last-child) {
    border-block-end: 1px solid var(--pf-t--global--border--color--nonstatus--purple--clicked);
  }
}

.storage-pvs-pv-box-dev {
  font-size: var(--pf-t--global--font--size--sm);
  font-weight: var(--pf-t--global--font--weight--400);
}

.storage-stripe-box {
  border: 1px solid var(--pf-t--global--border--color--nonstatus--purple--default);
  background: var(--pf-t--global--color--nonstatus--purple--default);
  color: var(--pf-t--global--text--color--on-highlight);
  border-radius: var(--pf-t--global--border--radius--tiny);
}

.storage-stripe-pv-box {
  padding: var(--pf-t--global--spacer--sm);
}

.storage-stripe-pv-box:not(:last-child) {
  border-block-end: 1px solid var(--pf-t--global--border--color--nonstatus--purple--clicked);
}

.storage-stripe-pv-box-dev {
  font-size: var(--pf-t--global--font--size--sm);
  font-weight: var(--pf-t--global--font--weight--400);
}

.remove-border {
  border-block-end: 0 !important;
}

.ct-clickable-card:hover {
    background: var(--pf-t--global--background--color--primary--hover);
    cursor: pointer;
}

.storage-menu-title {
    text-align: start;
    white-space: nowrap !important;
}

.pf-v6-c-table__tbody .storage-device-icon {
  --icon-size: 18px;
  // Ensure the icon's cell size is as minimal as the icon allows
  // (WebKit needs a size; 0 doesn't work for it)
  inline-size: 1px;
  // Remove unnecessary padding
  padding-inline-end: 0;

  > svg {
    // Bump the icon down to align with text, based on the difference between icon and text size, just for the top
    inset-block-start: calc((var(--pf-t--global--spacer--md) * var(--pf-t--global--font--line-height--body) - var(--icon-size)) / 2);
    position: relative;

    path {
      fill: var(--pf-t--global--text--color--subtle);
    }
  }
}

.storage-size-column {
    text-align: end;
    white-space: nowrap !important;
}

.storage-size-column-header {
    text-align: end;
    // Align the "Size" header with the text of the usage bars.
    // var(--pf-v6-c-table--cell--PaddingInlineEnd): padding of compact td cells
    // 3.5rem: width of short progress bars
    // 1rem: margin between text and progress bar
    padding-inline-end: calc(var(--pf-v6-c-table--cell--PaddingInlineEnd) + 3.5rem + 1rem) !important;
}