/* Make the "Apps" section the visual focus of the dashboard - roughly 4x bigger */

.group-apps .service-card {
  padding: 2rem !important;
  margin-bottom: 1.5rem !important;
  border-radius: 1rem !important;
}

.group-apps .service-icon {
  width: 12rem !important;
  height: 12rem !important;
}

.group-apps .service-icon img,
.group-apps .service-icon svg {
  width: 100% !important;
  height: 100% !important;
}

.group-apps .service-title-text {
  font-size: 1.75rem !important;
  gap: 0.5rem !important;
}

.group-apps .service-group-name {
  font-size: 2rem !important;
}

.service-description {
  white-space: pre-line !important;
}

.service-url-copy {
  display: inline-block;
  margin-top: 0.4em;
  padding: 0.3em 0.6em;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 0.4em;
  font-size: 0.8em;
  font-family: monospace;
  cursor: pointer;
  word-break: break-all;
}

.service-url-copy:hover {
  background: rgba(255, 255, 255, 0.16);
}

.service-url-copy.copied {
  background: rgba(80, 200, 120, 0.25);
  border-color: rgba(80, 200, 120, 0.5);
}

/* On phones, stack icon above text instead of side-by-side - the big
   desktop icon size otherwise squeezes the text into a narrow column.
   Matches on width OR height so this still applies when the phone is
   rotated to landscape (narrow height, wide width). */
@media (max-width: 640px), (max-height: 500px) {
  .group-apps .service-title {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
  }

  .group-apps .service-icon {
    width: 5rem !important;
    height: 5rem !important;
    margin-bottom: 0.5rem !important;
  }
}

/* Widgets with many stat fields (like Download Status, which has 8) render
   as a single unwrapped flex row and overflow off the right edge on phones.
   Force wrapping into a 2-column grid and let long text break properly. */
@media (max-width: 640px) {
  .service-container {
    flex-wrap: wrap !important;
  }

  .service-block {
    flex: 1 1 45% !important;
    min-width: 45% !important;
  }

  .service-block .font-thin {
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    white-space: normal !important;
  }
}