/*
 * Red-only whole-card problem styling.
 *
 * Cards with no problems retain Homepage's default appearance.
 */

#media-health-card,
#port-sync-card,
#vpn-health-card,
#plex-card,
#tautulli-card,
#seerr-card,
#qbittorrent-card,
#qbit-activity-card,
#prowlarr-card,
#autobrr-card,
#cross-seed-card,
#sonarr-card,
#radarr-card,
#bazarr-card,
#lidarr-card,
#kometa-card,
#recyclarr-card,
#unpackerr-card,
#nginx-proxy-manager-card,
#homepage-card,
#stack-status-card {
  position: relative;
  overflow: hidden;
  transition:
    border-color 180ms ease,
    box-shadow 180ms ease,
    background-color 180ms ease;
}


/*
 * Error card
 */

.status-card-error {
  background-color: rgba(225, 29, 72, 0.035) !important;
  border-color: rgba(251, 113, 133, 0.48) !important;
  box-shadow:
    inset 3px 0 0 rgba(251, 113, 133, 0.92),
    0 0 0 1px rgba(251, 113, 133, 0.08),
    0 4px 12px rgba(0, 0, 0, 0.10) !important;
}


/*
 * Preserve Homepage's normal inner metric-block appearance.
 */

.status-card-error [class*="bg-theme"],
.status-card-error [class*="service-block"],
.status-card-error [class*="information-widget"] {
  background-color: rgba(15, 23, 42, 0.18) !important;
}


/*
 * Give the service title a very slight error tint.
 */

.status-card-error h2,
.status-card-error h3 {
  color: rgba(254, 205, 211, 0.98) !important;
}

/*
 * The Details field is retrieved through Homepage's custom API widget,
 * but displayed in the dedicated alert beneath the Media Health card.
 */
.media-health-details-source {
  display: none !important;
}


/*
 * Server Health healthy state.
 * Only cards explicitly given status-card-healthy use this.
 */

.status-card-healthy {
  background-color: rgba(16, 185, 129, 0.035) !important;
  border-color: rgba(52, 211, 153, 0.42) !important;
  box-shadow:
    inset 3px 0 0 rgba(52, 211, 153, 0.90),
    0 0 0 1px rgba(52, 211, 153, 0.08),
    0 4px 12px rgba(0, 0, 0, 0.10) !important;
}

.status-card-healthy [class*="bg-theme"],
.status-card-healthy [class*="service-block"],
.status-card-healthy [class*="information-widget"] {
  background-color: rgba(15, 23, 42, 0.18) !important;
}

.status-card-healthy h2,
.status-card-healthy h3 {
  color: rgba(167, 243, 208, 0.96) !important;
}

/*
 * Detailed Media Health error message.
 *
 * It is inserted directly after the Media Health card and only appears
 * when the overall stack status is ERROR.
 */

.status-card-message {
  grid-column: 1 / -1;
  width: 100%;
  box-sizing: border-box;

  display: flex;
  align-items: flex-start;
  gap: 0.65rem;

  margin-top: -0.25rem;
  margin-bottom: 0.5rem;
  padding: 0.65rem 0.8rem;

  color: rgba(254, 226, 226, 0.98);
  background-color: rgba(127, 29, 29, 0.22);
  border: 1px solid rgba(251, 113, 133, 0.35);
  border-left: 3px solid rgba(251, 113, 133, 0.95);
  border-radius: 0.45rem;

  font-size: 0.78rem;
  line-height: 1.35;

  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.10);
}

.status-card-message[hidden] {
  display: none !important;
}

.status-card-message-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;

  width: 1.2rem;
  height: 1.2rem;

  color: rgba(255, 255, 255, 0.98);
  background-color: rgba(244, 63, 94, 0.85);
  border-radius: 9999px;

  font-size: 0.75rem;
  font-weight: 800;
  line-height: 1;
}

.status-card-message strong {
  color: rgba(255, 255, 255, 0.98);
  font-weight: 650;
}