/* users#index: initials + name + email in one cell */
.user-cell {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.user-cell__name {
  font-weight: var(--weight-medium);
}

/* Resend / deactivate buttons, side by side on the right */
.table .users-table__actions {
  white-space: nowrap;
  text-align: right;

  form {
    display: inline-block;
  }
}
.push-actions { justify-content: flex-start; }

/* A user's page: each permission with its explanation underneath */
.permission-group {
  gap: var(--space-2);

  .form-hint {
    display: block;
  }
}

/* The profile's notifications: a row per kind, a switch per channel, the switches centred under their heading */
.notification-table {
  /* Each kind labels its row: a plain cell, not a column heading (no caps or tint, and it wraps) */
  tbody th[scope="row"] {
    padding: var(--space-3) var(--space-4);
    background: none;
    border-bottom: var(--border);
    color: var(--color-text);
    font-size: var(--text-sm);
    font-weight: var(--weight-regular);
    text-transform: none;
    letter-spacing: normal;
    white-space: normal;
  }

  tbody tr:last-child th[scope="row"] {
    border-bottom: 0;
  }

  .notification-table__channel {
    padding-inline: var(--space-2);
  }

  .notification-table__channel {
    width: 4.5rem;
    text-align: center;
  }

  .switch {
    justify-content: center;
  }
}

/* A clinic's prices: the procedure on the left, its price on the right */
.price-row {
  display: grid;
  grid-template-columns: 1fr 9rem;
  align-items: center;
  gap: var(--space-3);
}

/* The profile's picture: the current one beside the field to change it */
.avatar-field {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);

  /* The field beside the picture takes what's left, and shrinks on a phone */
  > .stack {
    flex: 1;
    min-width: 0;
  }

  .file-input {
    max-width: 100%;
  }
}

/* The picture is the button that changes it (a label for the hidden file field): a photo icon on hover,
   the focus ring when the field is reached with the keyboard. "Quitar la foto" under it */
.avatar-picker {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

.avatar-picker__button {
  position: relative;
  display: block;
  border-radius: var(--radius-full);
  cursor: pointer;
}

.avatar-picker__overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: var(--radius-full);
  background: rgb(15 23 42 / 0.45);
  color: var(--white);
  opacity: 0;
  transition: opacity var(--duration-fast) var(--ease-out);

  svg {
    width: 1.75rem;
    height: 1.75rem;
  }
}

.avatar-picker__button:hover .avatar-picker__overlay,
.avatar-picker:has(input:focus-visible) .avatar-picker__overlay {
  opacity: 1;
}

.avatar-picker:has(input:focus-visible) .avatar-picker__button {
  box-shadow: var(--focus-ring);
}

/* /profile: the install card across the page, then two columns (one on narrower screens) */
.profile-layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  align-items: start;
}

/* Hidden (already installed, or the browser can't): no gap left above the columns */
.profile-install > .install-card {
  margin-bottom: var(--space-4);
}

.profile-layout--single {
  grid-template-columns: minmax(0, 40rem);
}

@media (max-width: 64rem) {
  .profile-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}