/* Final layout: Backup full-width top row, Applications left and Workspace right below. */
#services {
  align-items: flex-start;
}

.services-group:has(li.service[data-name="Last Backup Status"]) {
  flex-basis: 100%;
  max-width: 100%;
  order: 1;
}

.services-group:has(li.service[data-name="Firebat Task Manager"]) {
  order: 2;
}

.services-group:has(li.service[data-name="All Projects"]) {
  order: 3;
}

@media (min-width: 768px) {
  .services-group:has(li.service[data-name="Last Backup Status"]) {
    flex-basis: 100%;
    max-width: 100%;
  }

  .services-group:has(li.service[data-name="Firebat Task Manager"]),
  .services-group:has(li.service[data-name="All Projects"]) {
    flex-basis: 50%;
    max-width: 50%;
  }
}

/* Hide the CPU Power service card; it only feeds the top header Power widget. */
li.service[data-name="CPU Power"],
li.service[data-name="CPU Power"] .service-card,
.service-card:has(.service-name):has(a[aria-label="/local-icons/flash.svg"]) {
  display: none !important;
}

/* Make Last Backup Status full width and less wrap-prone. */
li.service[data-name="Last Backup Status"] {
  width: 100%;
}

li.service[data-name="Last Backup Status"] .service-card {
  width: 100%;
  border: 1px solid rgb(34 197 94 / 0.35);
}

li.service[data-name="Last Backup Status"] .service-description {
  display: none;
}

li.service[data-name="Last Backup Status"] .service-title-text,
li.service[data-name="Last Backup Status"] .service-name {
  min-width: 0;
}

li.service[data-name="Last Backup Status"] .service-name {
  overflow-wrap: anywhere;
}

li.service[data-name="Last Backup Status"] .service-tags,
li.service[data-name="Last Backup Status"] .service-container,
li.service[data-name="Last Backup Status"] .service-widget {
  min-width: 0;
}

li.service[data-name="Last Backup Status"] dd,
li.service[data-name="Last Backup Status"] span,
li.service[data-name="Last Backup Status"] .service-widget div {
  overflow-wrap: normal;
  word-break: normal;
}

/* Compact Backup Control button directly under backup status. */
li.service[data-name="Backup Control"] {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  width: auto;
  max-width: 100%;
}

li.service[data-name="Backup Control"] .service-card {
  display: inline-flex;
  width: auto;
  min-width: 0;
  margin-bottom: 0.5rem;
  padding: 0.125rem 0.375rem;
  flex: 0 0 auto;
}

li.service[data-name="Backup Control"] .service-title {
  width: auto;
}

li.service[data-name="Backup Control"] .service-icon {
  width: 1.75rem;
}

li.service[data-name="Backup Control"] .service-title-text {
  flex: none;
}

li.service[data-name="Backup Control"] .service-name {
  padding: 0.375rem 0.5rem;
  white-space: nowrap;
}

/* Small live backup status text beside the Backup Control action. */
.firebat-backup-live-status {
  display: inline-flex;
  align-items: center;
  margin-bottom: 0.5rem;
  min-height: 1.75rem;
  font-size: 0.75rem;
  line-height: 1rem;
  color: rgb(148 163 184);
  white-space: nowrap;
  vertical-align: middle;
  flex: 0 1 auto;
}

.firebat-backup-live-status[data-backup-status="running"] {
  color: rgb(250 204 21);
}

.firebat-backup-live-status[data-backup-status="success"] {
  color: rgb(34 197 94);
}

.firebat-backup-live-status[data-backup-status="fail"] {
  color: rgb(239 68 68);
}

#cpu-power-resource [data-power-value] {
  min-width: 3.25rem;
}

/* Hide the generated Convert Media card; custom.js adds a compact File Browser action. */
li.service[data-name="Convert Media"] {
  display: none !important;
}

li.service[data-name="File Browser"] .service-card {
  position: relative;
  padding-right: 10.75rem;
}

li.service[data-name="File Browser"] .service-title-text {
  min-width: 0;
}

li.service[data-name="File Browser"] .service-name,
li.service[data-name="File Browser"] .service-description {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.filebrowser-convert-button {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.35rem;
  width: 8.75rem;
  padding: 0 0.75rem;
  border-radius: 0.375rem;
  border: 1px solid rgb(148 163 184 / 0.25);
  background: rgb(255 255 255 / 0.07);
  color: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1rem;
  white-space: nowrap;
  text-decoration: none;
  box-shadow: 0 1px 2px rgb(15 23 42 / 0.18);
  z-index: 20;
}

.filebrowser-convert-button:hover,
.filebrowser-convert-button:focus-visible {
  background: rgb(255 255 255 / 0.12);
  border-color: rgb(59 130 246 / 0.45);
  outline: none;
}

.filebrowser-convert-button[data-convert-state="running"] {
  pointer-events: none;
  opacity: 0.72;
  cursor: progress;
}

.filebrowser-convert-button[data-convert-state="success"] {
  border-color: rgb(34 197 94 / 0.5);
  background: rgb(34 197 94 / 0.12);
}

.filebrowser-convert-button[data-convert-state="failed"] {
  border-color: rgb(239 68 68 / 0.5);
  background: rgb(239 68 68 / 0.12);
}

@media (max-width: 767px) {
  li.service[data-name="File Browser"] .service-card {
    padding-right: 1rem;
    padding-bottom: 3.4rem;
  }

  .filebrowser-convert-button {
    left: 4rem;
    right: 1rem;
    top: auto;
    bottom: 0.65rem;
    width: auto;
    transform: none;
  }
}


/* Embed Total Visitors in Professional Profile like Convert Media in File Browser. */
li.service[data-name="Total Visitors"] {
  display: none !important;
}

li.service[data-name="Professional Profile"] .service-card {
  position: relative;
  padding-right: 10.75rem;
}

@media (max-width: 767px) {
  li.service[data-name="Professional Profile"] .service-card {
    padding-right: 1rem;
    padding-bottom: 3.4rem;
  }

/* Keep the embedded analytics action readable and contained on narrow screens. */
@media (max-width: 767px) {
  li.service[data-name="Professional Profile"] .service-card {
    min-height: 7rem;
    padding: 1rem 1rem 4.25rem;
    overflow: visible;
  }

  .professional-profile-visitors-button {
    left: 1rem;
    right: 1rem;
    bottom: 0.75rem;
    width: auto;
    max-width: none;
    min-height: 2.5rem;
    transform: none;
    box-sizing: border-box;
  }
}

}

/* Equal track lengths for CPU, Power, RAM, and disk. */
#information-widgets .information-widget-resource > div {
  width: 160px;
  min-width: 160px;
  flex: 0 0 160px;
}

#information-widgets .firebat-memory-resource > div:not([data-memory-content]) {
  display: none;
}

#information-widgets [data-memory-value] {
  white-space: nowrap;
}

/* Leave room for the resource bars and keep search usable on small screens. */
@media (min-width: 1024px) {
  #information-widgets-right {
    flex: 0 1 30%;
    max-width: 320px;
    min-width: 180px;
    margin-left: auto;
    margin-right: 0;
  }
}

/* Replace the SSD free-space readout with percent and GB used. */
#information-widgets .firebat-disk-resource > div:not([data-disk-content]) {
  display: none;
}

#information-widgets [data-disk-value] {
  white-space: nowrap;
}

/* Two balanced resource columns, with search below, on phones. */
@media (max-width: 767px) {
  #widgets-wrap > .widget-container:has(.information-widget-resource) {
    width: 100%;
    flex-basis: 100%;
    min-width: 0;
  }

  #widgets-wrap > .widget-container > div:has(> .information-widget-resource) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 24px;
    width: 100%;
  }

  #information-widgets .information-widget-resource {
    position: relative;
    min-width: 0;
    margin-right: 0;
  }

  #information-widgets .information-widget-resource > .resource-icon {
    position: absolute;
    top: 6px;
    right: 0;
    width: 18px;
    height: 18px;
  }

  #information-widgets .information-widget-resource > div {
    width: 100%;
    min-width: 0;
    flex: 1 1 0%;
    margin-left: 0;
  }

  #information-widgets .information-widget-resource > div > div:first-child {
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: 6px;
  }

  #information-widgets .information-widget-resource > div > div:first-child > div {
    padding-left: 0;
    padding-right: 0;
  }

  #information-widgets .resource-usage {
    margin-top: 6px;
  }

  #information-widgets-right {
    width: 100%;
    flex-basis: 100%;
    min-width: 0;
    margin: 0;
  }
}