/* Homepage serves this file at /api/config/custom.css and links it from every
   page, so it is the supported place to restyle the built-in components — the
   `service`, `service-card` and `service-name` class names below are hooks
   upstream puts on the markup for exactly this.

   Everything here serves one thing: the Tenant x Environment matrix in
   services.yaml's `Tenants` group. See that file for why the cells are named
   the way they are. */

/* Brand teal, sampled from the logo mark in the source gradient. */
:root {
  --disrupt-teal: #0da4b7;
}

/* The row's first cell — the Tenant's name. It is the only card in the matrix
   with neither a ` · ` in its name nor a link, which is what picks it out here:
   the Environment cells all carry the separator, and every other card on the
   page is a link. Styled as a row header rather than a card, so the eye reads
   down the Tenant column and across the row it labels. */
.service:not([data-name*=" · "]):not(:has(a)) .service-card {
  background: rgb(var(--color-900) / 0.45);
  box-shadow: none;
  border-left: 2px solid var(--disrupt-teal);
  border-radius: 0.25rem;
}

.service:not([data-name*=" · "]):not(:has(a)) .service-name {
  font-weight: 600;
  color: rgb(var(--color-100));
}

/* A cell's name has to be unique inside the group, so it carries the Tenant as
   well as the Environment (`bh · dev`). The Tenant is already in the row's
   first cell, so on screen each cell shows only its Environment. The name text
   is zeroed rather than hidden: it stays in the DOM for the quick-launch
   search, which matches on the Tenant. */
.service[data-name*=" · "] .service-name {
  font-size: 0;
}

.service[data-name*=" · "] .service-name::before {
  font-size: 0.8125rem;
}

.service[data-name$=" · dev"] .service-name::before {
  content: "dev";
}

.service[data-name$=" · uat"] .service-name::before {
  content: "uat";
}

.service[data-name$=" · prod"] .service-name::before {
  content: "prod";
}

/* Not deployed to that Environment. The cell exists only to hold the column
   alignment, and carries no `href`, so Homepage renders it without an `<a>`.
   The row's first cell has no `href` either, but no ` · ` in its name, so it
   keeps full contrast and reads as the row's label. */
.service[data-name*=" · "]:not(:has(a)) .service-card {
  opacity: 0.2;
}

.service[data-name*=" · "]:not(:has(a)) .service-name::before {
  content: "·";
}

/* Homepage's grid for an eight-column group is `grid-cols-1 md:grid-cols-2
   lg:grid-cols-8`, so a window narrower than 1024px drops the matrix to one or
   two cells per row — every cell on its own line, which stops reading as a
   table at all. Narrower than that, fall back to the single four-column table
   the rows are built from: the two halves stack instead of sitting side by
   side, and each row still reads `tenant | dev | uat | prod`. */
@media (max-width: 1023px) {
  .services-list.grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}