/* ==========================================================================
   The global catalogue of stakeholders — the people and organizations a project links when it says who it answers to.

   It is a catalogue screen of the shell, the third of the family that Suppliers and Cost Centers opened: one page
   head, one collection the person reads as cards or as a table, two dialogs, and no project context at all. Every
   value here is a token of `tokens.css`; the sheet declares no literal of its own and no rule that belongs to a
   shared piece.

   The two class families it owns:
     .global-stakeholders…          the page: its summary, its status line and the way out of a failed read
     .global-stakeholder-card…      one person, as the Cards view draws them
     .global-stakeholder-table…     the same catalogue as the Table view
     .global-stakeholder-dialog…    the create and edit form
   ========================================================================== */

.global-stakeholders {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  min-width: 0;
}

.global-stakeholders__summary {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

/* What just happened, said once: an addition, an update or a removal. It is a status and not an alert, so it uses
   the success role of the palette instead of the attention one. */
.global-stakeholders__status {
  margin: 0;
  padding: var(--space-xs) var(--space-sm);
  background: var(--color-success-soft);
  border: var(--border-width) solid var(--color-success-border);
  border-radius: var(--radius-sm);
  color: var(--color-text);
}

.global-stakeholders__recovery,
.global-stakeholder-card__actions,
.global-stakeholder-table__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-xs);
}

/* ---- Cards ------------------------------------------------------------- */

.global-stakeholder-cards {
  /* La fila de cuatro es el patron compartido: `.collection-cards`. */
}

.global-stakeholder-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  min-width: 0;
  padding: var(--space-md);
  background: var(--color-surface);
  border: var(--border-default);
  border-radius: var(--radius-lg);
}

/* Ordinary cards are separated by their border; the shadow appears only while the card is the region the pointer or
   the keyboard is in, which is the one elevation the palette allows. */
.global-stakeholder-card:hover,
.global-stakeholder-card:focus-within {
  border-color: var(--color-primary-border);
  box-shadow: var(--shadow-md);
}

.global-stakeholder-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-sm);
  min-width: 0;
}

.global-stakeholder-card__title {
  margin: 0;
  font-size: var(--font-size-lg);
  /* The title step, declared: it is an `<h2>`, and a heading left to the browser is bold (700) while the title of a
     collection card is 600. */
  font-weight: var(--font-weight-semibold);
  overflow-wrap: anywhere;
}

.global-stakeholder-card__organization {
  margin: var(--space-2xs) 0 0;
  color: var(--color-text-muted);
  overflow-wrap: anywhere;
}

/* How many projects already link this person: the fact that decides whether the row can be removed at all. */
.global-stakeholder-card__projects {
  flex: none;
  padding: var(--space-2xs) var(--space-xs);
  background: var(--color-surface-muted);
  border: var(--border-default);
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  white-space: nowrap;
}

.global-stakeholder-card__facts {
  display: grid;
  gap: var(--space-2xs);
  margin: 0;
}

.global-stakeholder-card__facts > div {
  display: flex;
  gap: var(--space-xs);
  min-width: 0;
}

.global-stakeholder-card__facts dt {
  flex: none;
  min-width: 5.5rem;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.global-stakeholder-card__facts dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.global-stakeholder-card__actions {
  margin-top: auto;
  padding-top: var(--space-sm);
  border-top: var(--border-default);
}

/* ---- Table ------------------------------------------------------------- */

.global-stakeholder-table__wrapper {
  overflow-x: auto;
  background: var(--color-surface);
  border: var(--border-default);
  border-radius: var(--radius-lg);
}

.global-stakeholder-table {
  width: 100%;
  min-width: 840px;
  border-collapse: collapse;
}

/* The line above the table that says what is listed and in which order — the same caption the per-project table of
   stakeholders carries (`collections.css`, `.stakeholder-table__caption`), because it is the same fact above the
   same table shape. */
.global-stakeholder-table__caption {
  padding: var(--space-sm) var(--space-md);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  text-align: left;
}

.global-stakeholder-table th,
.global-stakeholder-table td {
  padding: var(--space-sm) var(--space-md);
  border-bottom: var(--border-default);
  text-align: left;
  vertical-align: top;
}

.global-stakeholder-table thead th {
  background: var(--color-surface-muted);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  white-space: nowrap;
}

.global-stakeholder-table tbody tr:last-child > * {
  border-bottom: 0;
}

.global-stakeholder-table tbody tr:hover {
  background: var(--color-primary-soft);
}

.global-stakeholder-table__email {
  overflow-wrap: anywhere;
}

.global-stakeholder-table__actions {
  flex-wrap: nowrap;
}

/* ---- Dialogs ----------------------------------------------------------- */

/* Two short columns on a laptop and one on a phone, which is the layout of every catalogue form of the product. */
.global-stakeholder-dialog__fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-md);
}

/* The sentence that explains why the server will refuse the removal. It is not an error of the operation — it is a
   rule of the catalogue — so it uses the attention role and never the danger one, which is reserved for a failure
   that has already happened. */
.global-stakeholder-delete__in-use {
  margin: 0;
  padding: var(--space-xs) var(--space-sm);
  background: var(--color-accent-soft);
  border: var(--border-width) solid var(--color-accent-border);
  border-radius: var(--radius-sm);
  color: var(--color-text);
}

@media (max-width: 640px) {
  .global-stakeholder-dialog__fields {
    grid-template-columns: 1fr;
  }

  .global-stakeholder-card__actions > .button,
  .global-stakeholders__recovery > .button {
    flex: 1 1 auto;
  }
}