/* --- Marca -------------------------------------------------------------
   La cabecera de Gatus es logotipo + `<h1>` con el texto de `ui.header`. Como el
   logotipo de EnhancedIRL YA LLEVA el nombre escrito, el `<h1>` lo repetiría al
   lado. Se oculta.

   `ui.header` NO se puede dejar vacío para conseguir esto: Gatus sustituye la
   cadena vacía por su valor por defecto ("Gatus") al validar la configuración,
   así que quitarlo de ahí pondría la marca de Gatus en la página. Tiene que ser
   por CSS. */
header h1 { display: none; }

/* El `<img>` del logotipo vive en una caja de 48x48 con `object-contain`, donde un
   logotipo apaisado (742x155) queda como una tira ilegible. Se oculta la imagen y
   se pinta la misma caja de fondo, con su proporción real. */
header .w-12.h-12 > img { display: none; }
header .w-12.h-12 {
  width: 11.5rem;
  height: 2.4rem;
  background: center / contain no-repeat
    url("https://enhancedirl.com/images/logo/logo-dark.png");
}
/* Gatus arranca en modo oscuro pero respeta `prefers-color-scheme` y el conmutador
   del pie, y `ui.logo` sólo admite UNA imagen. El logotipo claro (texto oscuro) es
   ilegible sobre fondo oscuro y viceversa, así que el intercambio lo hace el CSS.
   Se usa `background-image` y no `content: url(...)` sobre el `<img>` a propósito:
   `content` sobre elementos reemplazados no es fiable en todos los navegadores. */
html:not(.dark) header .w-12.h-12 {
  background-image: url("https://enhancedirl.com/images/logo/logo.png");
}

/* --- Fuera la barra de filtros -----------------------------------------
   Buscador + "Filter by" + "Sort by", el bloque entero. En una página de estado
   con nueve monitores que caben de un vistazo no aportan nada, y un desplegable de
   orden sólo invita a deshacer la vista que la página se ha molestado en elegir.

   Se identifica por el buscador, que es el único elemento con `id` estable de todo
   el bloque; las clases van de refuerzo para no barrer de más si el DOM cambia.
   Ocultarla NO desactiva `default-sort-by`/`default-filter-by`: el componente se
   sigue montando y los aplica igual, sólo que sin pintarse. */
.bg-card.rounded-lg.border:has(#search-input) { display: none; }

/* El nombre de la sección, entero: se truncaba ("Ingest zon…") en las tarjetas
   estrechas. Que trunque el host, que importa menos. Con la lista plana esta línea
   es lo ÚNICO que dice a qué sección pertenece cada monitor, así que no se toca. */
.text-muted-foreground > span.truncate:first-child { overflow: visible; flex: 0 0 auto; }

/* --- Agrupado visual por sección ---------------------------------------
   Sin cabeceras de sección (ver el porqué en `default-sort-by`), pero al menos las
   tarjetas de una misma sección salen SEGUIDAS y en un orden fijo, en vez de
   mezcladas por orden alfabético ("Europe (South)" caía entre "Docs" y
   "Ingest — Asia", que no dice nada).

   Las tarjetas son hijas directas de un grid, así que `order` las recoloca. Se
   seleccionan por el `title` del `<span>` de la sección, que Gatus rellena con el
   `group` del monitor: es un selector por CONTENIDO REAL, no por posición, así que
   añadir o renombrar un monitor no lo rompe.

   Degradación amable: si un día deja de aplicar, las tarjetas vuelven al orden
   alfabético. Se pierde el agrupado, no la página. Al añadir una sección nueva,
   añádele aquí su `order` o se irá al principio (`order` por defecto = 0). */
.endpoint:has([title="App"])       { order: 1; }
.endpoint:has([title="Cloud OBS"]) { order: 2; }
.endpoint:has([title="Relays"])    { order: 3; }