/* Compact Homepage: full-width departments, responsive cards, no effects layer. */
:root {
  --dashboard-gap: 0.375rem;
  --dashboard-border: rgb(148 163 184 / 18%);
  --dashboard-card: rgb(15 23 42 / 88%);
}

/* Keep the system font and the native status colours. */
#information-widgets {
  margin: 0.75rem 0.75rem 0;
  padding-bottom: 0.5rem;
  border-bottom-width: 1px;
}

#widgets-wrap { gap: 0.375rem 0.75rem; }
#information-widgets-right { gap: 0.375rem 0.75rem; }
#information-widgets .information-widget-search { min-width: 8rem; }

#layout-groups {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 0.375rem;
  margin: 0.5rem 0.75rem;
}

#layout-groups > :is(.services-group, .bookmark-group) {
  flex: none;
  width: 100%;
  min-width: 0;
  padding: 0;
}

#layout-groups :is(.service-group-name, .bookmark-group-name) {
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.015em;
}

#layout-groups :is(.services-list, .bookmark-group ul) {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: var(--dashboard-gap);
  margin-top: 0.25rem;
}

#layout-groups :is(.service, .service-card, .service-title-text, .service-name, .service-block) {
  min-width: 0;
}

#layout-groups .service-card {
  height: auto;
  margin-bottom: 0;
  padding: 0.25rem;
  border: 1px solid var(--dashboard-border);
  border-radius: 0.375rem;
  background: var(--dashboard-card);
  box-shadow: none;
  container-type: inline-size;
  transition: border-color 120ms ease, background-color 120ms ease;
}

#layout-groups .service-card:hover {
  border-color: rgb(148 163 184 / 42%);
  background: rgb(22 32 51 / 94%);
}

#layout-groups .service-title { min-height: 2.5rem; }
#layout-groups .service-icon { width: 2rem; }
#layout-groups .service-icon :is(img, svg) { width: 1.5rem; height: 1.5rem; }

#layout-groups .service-name {
  padding: 0.25rem 0.375rem;
  font-size: 0.8125rem;
  line-height: 1.3;
  font-weight: 600;
  overflow-wrap: anywhere;
}

#layout-groups .service-description {
  margin-top: 0.125rem;
  font-size: 0.6875rem;
  font-weight: 400;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#layout-groups .service-tags { gap: 0.25rem; margin-right: 0.375rem; }
#layout-groups .service-tag > div { padding: 0.5rem; }
#layout-groups .service-tag .rounded-full { width: 0.5rem; height: 0.5rem; }
#layout-groups .service-card:has(.service-tags > *) .service-name { padding-right: 1.5rem; }
#layout-groups .service-card:has(.service-tags > :nth-child(2)) .service-name { padding-right: 3rem; }

/* Widget labels already explain Plex, SAB, etc.; avoid repeating descriptions. */
#layout-groups .service:has(.service-container):not([data-name="Sonarr"]):not([data-name="Radarr"]) .service-description {
  display: none;
}

/* Statistics stay readable, without adding boxes to unrelated flex elements. */
#layout-groups .service-container:has(> .service-block) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(3rem, 1fr));
  gap: 0.25rem;
  padding: 0.125rem 0;
}

#layout-groups .service-block {
  margin: 0;
  padding: 0.125rem;
  border-radius: 0.25rem;
  background: rgb(148 163 184 / 7%);
  box-shadow: none;
}

#layout-groups .service-block .font-thin {
  font-size: 0.8125rem;
  line-height: 1.2;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

#layout-groups .service-block .font-bold {
  font-size: 0.5625rem;
  line-height: 1.25;
  font-weight: 500;
  letter-spacing: 0;
  word-break: normal;
}

/* Only the two completed-download lists use these native Custom API rows. */
#layout-groups .service:is([data-name="Sonarr"], [data-name="Radarr"]) .flex-col.w-full > .items-center {
  flex: none;
  gap: 0.5rem;
  margin: 0.125rem;
  padding: 0.25rem;
  font-size: 0.6875rem;
  line-height: 1.35;
  background: rgb(148 163 184 / 7%);
}

#layout-groups .service:is([data-name="Sonarr"], [data-name="Radarr"]) .flex-col.w-full > .items-center > .font-thin {
  min-width: 0;
  padding-left: 0;
  font-weight: 400;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

#layout-groups .service:is([data-name="Sonarr"], [data-name="Radarr"]) .flex-col.w-full > .items-center > .text-right {
  flex: 0 0 5.25rem;
  font-size: 0.5625rem;
  font-variant-numeric: tabular-nums;
}

#layout-groups .service:is([data-name="Sonarr"], [data-name="Radarr"]) .flex-col.w-full > .items-center > .text-right > div {
  margin-right: 0;
  font-weight: 400;
}

/* The agenda uses the entire mobile row; desktop has three wide library cards. */
#layout-groups .service[data-name="Release Calendar"] { grid-column: 1 / -1; }

#layout-groups .bookmark-group li {
  margin: 0;
  border: 1px solid var(--dashboard-border);
  border-radius: 0.375rem;
  background: var(--dashboard-card);
  box-shadow: none;
}

#layout-groups .bookmark-group a { min-height: 2rem; font-size: 0.75rem; }

/* Keep refresh/settings controls usable instead of hiding the whole footer. */
#footer { padding: 0.375rem 0.75rem; }

#layout-groups a:focus-visible,
#layout-groups button:focus-visible {
  outline: 2px solid rgb(125 211 252);
  outline-offset: 2px;
}

@container (max-width: 15rem) {
  #layout-groups .service-container:has(> .service-block) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #layout-groups .service:is([data-name="Sonarr"], [data-name="Radarr"]) .flex-col.w-full > .items-center {
    flex-direction: column;
    align-items: stretch;
    gap: 0.125rem;
  }

  #layout-groups .service:is([data-name="Sonarr"], [data-name="Radarr"]) .flex-col.w-full > .items-center > .text-right {
    flex-basis: auto;
    justify-content: flex-start;
    text-align: left;
  }
}

@media (min-width: 36rem) {
  #layout-groups :is(.services-list, .bookmark-group ul) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

}

@media (max-width: 63.999rem) {
  #layout-groups .services-list:has(> .service[data-name="Release Calendar"]) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 35.999rem) {
  /* An odd final tile fills the row instead of leaving an empty half-column. */
  #layout-groups .services-list > .service:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

@media (min-width: 64rem) {
  /* Empty tracks collapse: at most six cards, but no unused right-hand columns. */
  #layout-groups :is(.services-list, .bookmark-group ul) {
    grid-template-columns: repeat(auto-fit, minmax(calc((100% - 5 * var(--dashboard-gap)) / 6), 1fr));
  }

  #information-widgets-right { flex-wrap: nowrap; }
  #information-widgets .information-widget-search { max-width: 15rem; }
  #layout-groups .service-title { min-height: 2rem; }
  #layout-groups .service[data-name="Release Calendar"] { grid-column: auto; }

  #layout-groups .service:not([data-name="Sonarr"]):not([data-name="Radarr"]) .service-description { display: none; }
  #layout-groups .service-container:has(> .service-block) { padding-top: 0; }
  #layout-groups .service:is([data-name="Sonarr"], [data-name="Radarr"]) .flex-col.w-full > .items-center > .font-thin {
    -webkit-line-clamp: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  #layout-groups .service-card { transition: none; }
}