/* ===========================================================================
   The action centre's page (HEA-504): its layout, the "Gegevens opvragen" side
   column and the table of sent invitations. The task cards themselves (.task-*)
   are in 06-screens-contracts-compliance.css.
   =========================================================================== */

/* The page's grid. From 90rem the side column stands right, 325px wide as
   prototype/action-centre.png draws it, and the table sits under the task cards: the left column
   is then 1015px, or 998px when the window shows a classic scrollbar. Below 90rem everything is
   one column, in the order tasks, invitation cards, table.

   The second row takes the height the side column adds, so the task cards keep their own height
   and the table follows them directly. */
.action-centre {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start;
}

.action-centre__tasks {
  margin-top: 0;
}

.action-centre > * {
  min-width: 0;
}

.action-centre__empty {
  margin: 0;
}

.action-centre__sent > h2 {
  margin-top: 0;
}

/* The invitation cards under the tasks: four in a row, two below 70rem, one on a phone. */
.action-centre__aside .card-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 0;
}

.action-centre__aside > h2 {
  margin-top: 0;
}

/* Every field of an invitation card is the card's full width, so the form is one column: the
   twelve columns of .field-grid need 264px for their gaps alone, more than a narrow card has. */
.action-centre__aside .field-grid {
  grid-template-columns: minmax(0, 1fr);
}

.action-centre__aside .field-grid > * {
  grid-column: 1 / -1;
}

.action-centre__aside > .muted {
  margin-bottom: 1.25rem;
}

/* Two in a row are wide enough for the longest title on one line, so no card reserves a second
   title line there. */
@media (max-width: 70rem) {
  .action-centre__aside .card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .action-centre__aside .card-head--two-lines {
    min-height: 0;
  }
}

@media (max-width: 40rem) {
  .action-centre__aside .card-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (min-width: 90rem) {
  .action-centre--aside {
    grid-template-columns: minmax(0, 1fr) 20.3125rem;
    grid-template-rows: auto 1fr;
  }

  .action-centre--aside .action-centre__aside {
    grid-column: 2;
    grid-row: 1 / span 2;
  }

  .action-centre--aside .action-centre__sent {
    grid-column: 1;
    grid-row: 2;
  }

  /* With no task grid above it the table takes the first row, level with the side column. */
  .action-centre--aside .action-centre__sent--first {
    grid-row: 1;
  }

  .action-centre__aside .card-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  /* One above the other no card stands beside a longer title, so none reserves a second title
     line: every title starts at the same distance from its card's top. */
  .action-centre__aside .card-head--two-lines {
    min-height: 0;
  }
}

/* "Verstuurde uitvragen". The table needs 924px: that is what a 1024 window leaves it with a
   classic scrollbar counted, so its two row actions stand in view there. Narrower than that it
   scrolls inside its .table-scroll and the hint above it says so. */
.invitation-table {
  min-width: 57.75rem;
}

.invitation-table__hint {
  display: none;
}

/* 1004px: the 924px of the table plus the page's two gutters. */
@media (max-width: 62.75rem) {
  .invitation-table__hint {
    display: block;
  }
}

/* The shares of the seven columns: type, recipient, relation, sent, status, expires, actions.
   Sized on 998px, the left column in a 1440 window with a classic scrollbar; the recipient gets
   the room an ordinary address needs on one line. */
.invitation-table th:nth-child(1) {
  width: 14.38%;
}

.invitation-table th:nth-child(2) {
  width: 20.72%;
}

.invitation-table th:nth-child(3) {
  width: 15.9%;
}

.invitation-table th:nth-child(4) {
  width: 10.83%;
}

.invitation-table th:nth-child(5) {
  width: 15.5%;
}

.invitation-table th:nth-child(6) {
  width: 8.98%;
}

.invitation-table th:nth-child(7) {
  width: 13.69%;
}

/* Below 1096px the table is narrower than those 998px. Its text and its cell padding go one step
   smaller there, so an ordinary address still stands on one line, and the shares follow. */
@media (max-width: 68.49rem) {
  .invitation-table td {
    font-size: 0.8125rem;
  }

  .invitation-table th,
  .invitation-table td {
    padding-left: 0.4rem;
    padding-right: 0.4rem;
  }

  .invitation-table th:first-child,
  .invitation-table td:first-child {
    padding-left: 0.75rem;
  }

  .invitation-table th:nth-child(1) {
    width: 13.82%;
  }

  .invitation-table th:nth-child(2) {
    width: 20.35%;
  }

  .invitation-table th:nth-child(3) {
    width: 15.7%;
  }

  .invitation-table th:nth-child(4) {
    width: 11.48%;
  }

  .invitation-table th:nth-child(5) {
    width: 16.46%;
  }

  .invitation-table th:nth-child(6) {
    width: 8.98%;
  }

  .invitation-table th:nth-child(7) {
    width: 13.21%;
  }
}

/* The link at a task card's foot, to the list its tasks come from: under the
   last row, apart from it by the rows' own line. */
.task-panel__foot {
  margin: 0;
  padding-top: 0.5rem;
  border-top: 1px solid var(--color-bg-accent);
  font-size: 0.8125rem;
}