/*
 * The site list's component CSS.
 *
 * This lived in an inline <style> inside partials/components/site-list.php.
 * Two things were wrong with that. The cascade one: a <style> in the body
 * loads after every enqueued sheet, so these rules quietly outranked the
 * design layer at equal specificity and no amount of editing wpc-ui.css
 * could move them. The structural one: the quota chips and progress bars are
 * rendered by quota_html from the API and appear wherever that markup does,
 * but their styling only existed on pages that happened to include this one
 * partial — the style guide rendered every quota chip as bare text, which is
 * exactly the kind of thing a style guide is for.
 *
 * Enqueued from classes/enqueues.php::dashboard(), before wpc-ui.css, so the
 * referee layer still wins.
 */
.progress-bar-container {
  display: flex;
  flex-direction: column;
}

.shared-quota-text{
  margin: auto;
  padding: 0!important;
  font-size: 15px;
}

.progress-bar-header {
  display: flex;
  align-items: center;
  margin-bottom: 5px;
}

.progress-bar-header img {
  width: 20px; /* Adjust the size as needed */
  height: 20px; /* Adjust the size as needed */
  margin-right: 5px;
}

.progress-text {
  font-size: 12px;
  font-weight: bold;
}

.progress-bar-row {
  display: flex;
  align-items: center;
  width: 100%;
}

/* 75/25 percentage split, so "1.2 / 10 GB" wrapped onto two lines in
  every quota row of the site list. The bar takes the slack; the
  readout takes the width its own text needs and never breaks. */
.progress-bar-quota {
  flex: 1 1 auto;
  min-width: 0;
  height: 5px;
  background-color: #e0e0e0;
  border-radius: 5px;
  overflow: hidden;
  position: relative;
  margin-right: 10px;
}

.progress-bar-fill {
  height: 100%;
  border-radius: 5px;
  transition: width 0.2s ease-in-out;
}

.progress-bar-fill.green {
  background-color: #22B73A; /* Green */
}

.progress-bar-fill.yellow {
  background-color: #FFB94F; /* Yellow */
}

.progress-bar-fill.orange {
  background-color: #EC7C28; /* Orange */
}

.progress-bar-fill.red {
  background-color: #CD2A2A; /* Red */
}

.progress-bar-fill.purple {
  background-color: #7B5EFF; /* Red */
}

.credits-text {
  flex: 0 0 auto;
  white-space: nowrap;
  text-align: right;
  font-size: 12px;
  font-weight: bold;
}

.shared-quota-container {
  display: flex;
  align-items: center;
  border-radius: 5px;
  padding: 5px;
  border: 1px solid;
  max-width: 150px;
}

.shared-quota-container.green {
  background-color: #22B73A0A;
  border-color: #22B73A;
  color: #22B73A;
}

.shared-quota-container.blue {
  background-color: #437DE60A;
  border-color: #437DE6;
  color: #437DE6;
}

.shared-quota-container.yellow {
  background-color: #FFB94F0A;
  border-color: #FFB94F;
  color: #FFB94F;
}

.shared-quota-container.orange {
  background-color: #EC7C280A;
  border-color: #EC7C28;
  color: #EC7C28;
}

.shared-quota-container.red {
  background-color: #CD2A2A0A;
  border-color: #CD2A2A;
  color: #CD2A2A;
}

.shared-quota-container img {
  width: 20px;
  height: 20px;
  margin-right: 5px;
  margin-left: 5px;
}

/* 9px Arial was the smallest text in the portal, on the one chip that
  exists to warn someone they are over quota. 13px is the floor for a
  state chip (§1) and the face comes from the page. Radius is on the
  scale at 6px — a 999px pill in a table cell reads as a stray control,
  and the pill is reserved for the one CTA that ends a flow. */
.overflowText {
  display: inline-flex !important;
  background-color: #7c3aed;
  color: white;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  padding: 5px 10px;
  border-radius: 6px;
  justify-content: center;
  align-items: center;
  padding-left: 8px !important;
}

.alert-triangle-icon {
  width: 12px !important;
  height: 12px !important;
  margin-right: 4px !important;
}