/*
 * Apps — health check dashboard (specs/004-app-health-checks, contracts/ui-apps.md).
 * Cards at least 320px wide, as many per row as fit, so a big screen shows more cards
 * rather than bigger ones (DESIGN.md §8). Status colours per DESIGN.md "Status Badges":
 * green up, red down, orange pending; disabled is muted.
 */

/* .shell__main already gives the page its gutters. */
.apps {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* The title, then Create on the right (FR-006). */
.apps__header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.apps__header .apps__create {
  width: auto;
  flex-shrink: 0;
  margin-left: auto;
}

.apps__title {
  min-width: 0;
}

/* Cards in a row share its height (the tallest card's content), with their Guests and
   Services rows at the foot. `min()` keeps one card from overflowing a narrow phone. */
.apps__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
  gap: var(--space-4);
}

.apps__grid + turbo-frame {
  display: block;
  margin-top: var(--space-4);
}

.apps__loading {
  font-size: var(--text-md);
  color: var(--color-comment);
}

.apps__empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
}

.apps__empty-icon {
  color: var(--color-purple);
}

.apps__empty-title {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
}

/* The no-JavaScript form page. */
.apps__page-form {
  max-width: 560px;
  margin: var(--space-4) auto;
  background-color: var(--color-card);
  border-radius: var(--radius-comfortable);
}

/* ---- Card ---- */

.app-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
  padding: var(--space-4);
  background-color: var(--color-card);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-comfortable);
  box-shadow: var(--shadow-card);
  scroll-margin-top: var(--space-6);
}

/* The card's gap spaces its lines; drop the global paragraph margin (typography.css). */
.app-card p {
  margin: 0;
}

.app-card--unhealthy {
  border-color: rgba(255, 149, 128, 0.35);
}

.app-card--disabled {
  opacity: 0.6;
}

/* Opened from a notice (#app_12). */
.app-card:target {
  border-color: var(--color-purple);
  box-shadow: var(--glow-purple);
}

.app-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.app-card__header .app-card__edit {
  width: auto;
  min-height: 0;
  padding: var(--space-2);
  color: var(--color-comment);
}

.app-card__header .app-card__edit:hover {
  color: var(--color-foreground);
  background-color: var(--color-card-raised);
}

.app-card__state {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-0-5) var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  border-radius: var(--radius-subtle);
}

.app-card__dot {
  width: 8px;
  height: 8px;
  flex-shrink: 0;
  border-radius: var(--radius-circle);
  background-color: currentColor;
}

.app-card__state--healthy {
  color: var(--color-green);
  background-color: rgba(138, 255, 128, 0.1);
}

.app-card__state--healthy .app-card__dot {
  box-shadow: var(--glow-green);
}

.app-card__state--unhealthy {
  color: var(--color-red);
  background-color: rgba(255, 149, 128, 0.1);
}

.app-card__state--unhealthy .app-card__dot {
  box-shadow: var(--glow-red);
}

.app-card__state--pending {
  color: var(--color-orange);
  background-color: rgba(255, 202, 128, 0.1);
}

.app-card__state--disabled {
  color: var(--color-comment);
  background-color: var(--color-deep-night);
}

.app-card__name {
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  overflow-wrap: anywhere;
}

.app-card__host,
.app-card__checked {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-comment);
}

.app-card__host {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-card__reason {
  font-size: var(--text-md);
  color: var(--color-red);
  overflow-wrap: anywhere;
}

/* An open incident: the palette's warning yellow, like its calendar meeting. */
.app-card__incident {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  color: var(--color-yellow);
  background-color: rgba(255, 255, 128, 0.08);
  border-radius: var(--radius-standard);
}

.app-card__incident-icon {
  flex-shrink: 0;
}

.app-card__incident-text {
  flex: 1;
  min-width: 0;
  font-size: var(--text-md);
}

.app-card__resolve-form {
  margin: 0 0 0 auto;
}

.app-card__incident .app-card__resolve {
  width: auto;
  min-height: 32px;
  padding: var(--space-1) var(--space-3);
  color: var(--color-night);
  background-color: var(--color-yellow);
}

.app-card__incident .app-card__resolve:hover {
  filter: brightness(1.05);
}

/* Guests and Services: a row each at the foot of the card, collapsed until clicked. */
.app-card__sections {
  display: flex;
  flex-direction: column;
  margin-top: auto;
}

.app-card__section {
  border-top: 1px solid var(--color-border-subtle);
}

.app-card__summary {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  color: var(--color-comment);
  list-style: none;
  cursor: pointer;
}

.app-card__summary::-webkit-details-marker {
  display: none;
}

.app-card__summary:hover,
.app-card__section[open] > .app-card__summary {
  color: var(--color-foreground);
}

.app-card__summary:focus-visible {
  outline: 2px solid var(--color-purple);
  outline-offset: 2px;
  border-radius: var(--radius-subtle);
}

.app-card__count,
.app-card__off {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--weight-regular);
}

.app-card__off {
  color: var(--color-red);
}

.app-card__chevron {
  flex-shrink: 0;
  margin-left: auto;
  transition: transform 120ms ease;
}

.app-card__section[open] .app-card__chevron {
  transform: rotate(180deg);
}

/* A long list scrolls inside the card instead of stretching it. */
.app-card__guests,
.app-card__services {
  max-height: 168px;
  margin: 0;
  padding: 0 0 var(--space-2);
  overflow-y: auto;
  list-style: none;
}

.app-card__guests {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

/* The whole row opens the guest's profile drawer. */
.app-card__guest {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  padding: var(--space-1);
  font-size: var(--text-md);
  color: var(--color-foreground);
  text-decoration: none;
  border-radius: var(--radius-standard);
}

.app-card__guest:hover {
  background-color: var(--color-card-raised);
}

.app-card__guest-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-card__services {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: var(--space-1) var(--space-3);
}

.app-card__service {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-width: 0;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}

.app-card__service-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-card__service-dot {
  width: 8px;
  height: 8px;
  flex-shrink: 0;
  border-radius: var(--radius-circle);
  background-color: var(--color-comment);
}

.app-card__service--healthy .app-card__service-dot {
  background-color: var(--color-green);
  box-shadow: var(--glow-green);
}

.app-card__service--unhealthy {
  color: var(--color-red);
}

.app-card__service--unhealthy .app-card__service-dot {
  background-color: var(--color-red);
  box-shadow: var(--glow-red);
}

.app-card__service--unknown {
  color: var(--color-comment);
}

/* ---- Form (in #app_form_dialog) ---- */

/* Wider than the friends drawer; an id beats shared/dialog.css, which loads later. */
@media (min-width: 640px) {
  #app_form_dialog[open] {
    width: min(440px, 100vw);
  }
}

/* The frame between the dialog and the form passes the height on, so the body scrolls
   and Save stays in view. */
#app_form_dialog turbo-frame {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
}

.app-form {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
}

.app-form__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.app-form__description {
  resize: vertical;
}

/* Doubled class: shared/forms.css (.field, a column flexbox) loads after this file. */
.field.app-form__switch {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: var(--space-2);
  row-gap: var(--space-1);
}

.app-form__switch-label {
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  cursor: pointer;
}

.app-form__switch-hint {
  grid-column: 1 / -1;
}

.app-form__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
}

.app-form__actions .btn {
  width: auto;
}

/* Delete sits apart from Cancel and Save. */
.app-form__actions .app-form__delete {
  margin-right: auto;
}

.app-form__delete-form {
  display: none;
}