/* The supplier dossier's delivery and review (HEA-498): the supplier's upload
   page, backoffice's review rows in the dossier banner, and the lines of the
   external dashboard's Dossier card. */

/* The supplier's own upload rows (HEA-498, by analogy with
   HEA-236_aanvullingspagina.png). One grid template for every row, so each
   column starts at the same x down the list whatever a row carries: the
   document's name over what it asks for, its state pill, then the four
   controls -- choose the file, its name, the date the type asks for, the
   button. A row that is in order fills the first two columns only. The name
   column takes what is left and wraps before anything overlaps. */
.doc-checklist--delivery {
  /* One height for every control of a row, so their edges line up. */
  --delivery-control: 2rem;
}

.doc-checklist--delivery .doc-checklist__row {
  /* The name column keeps room for a waiting row's longest line on one line
     ("aangeleverd op ... · datum uittreksel ...", HEA-507): a line that wraps
     makes its row taller than the rest. The narrowest window that gets these
     six tracks is 1280 wide (see the media query below, which counts the
     window with its scrollbar); a scrollbar then leaves 1265 for the layout,
     and the line still fits. */
  grid-template-columns: minmax(0, 1fr) 9.5rem 8.5rem 6rem 15.5rem 6rem;
  min-height: 2.5rem;
}

.doc-checklist--delivery .doc-checklist__name {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

/* The row's slots are cells of the row's own grid; the wrapper stays for
   doc_upload.js, which finds a row's controls through it. */
.doc-checklist--delivery .doc-checklist__upload {
  display: contents;
}

.doc-checklist--delivery .doc-choice,
.doc-checklist--delivery .doc-checklist__dated input[type="date"],
.doc-checklist--delivery .doc-checklist__slot--end .btn {
  box-sizing: border-box;
  height: var(--delivery-control);
}

/* One option instead of the either/or group: the label is the button that
   opens the picker. */
.doc-choice--single .doc-choice__option--file {
  flex: 1;
  border-left: 0;
  font-size: 0.8125rem;
}

/* A date with its label before it, on the row's one line. */
.doc-checklist__dated {
  gap: 0.5rem;
}

.doc-checklist__dated label {
  flex: 0 0 6rem;
  margin: 0;
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--color-muted);
  text-align: right;
}

.doc-checklist__dated input[type="date"] {
  flex: 1;
  min-width: 0;
}

.doc-checklist--delivery .doc-checklist__slot--end .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  white-space: nowrap;
}

/* A field's error stands under that field: the file's under the file button,
   the date's under the date. */
.doc-checklist__error--file {
  grid-column: 3 / span 2;
}

.doc-checklist__error--date {
  grid-column: 5 / span 2;
  padding-left: 6.5rem;
}

/* A window under 1280 wide is narrower than the six tracks need beside the
   name's longest line, so a row stacks: the name and its pill on the first
   line, the controls on a line of their own under them. Narrower still, each
   control takes a line. The name is never squeezed. */
@media (max-width: 79.9375rem) {
  .doc-checklist--delivery .doc-checklist__row {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .doc-checklist--delivery .doc-checklist__upload {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: 8.5rem minmax(0, 1fr) 15.5rem 6.5rem;
    justify-content: stretch;
  }

  .doc-checklist__error--file {
    grid-column: 1 / span 2;
  }

  .doc-checklist__error--date {
    grid-column: 3 / span 2;
  }

  /* A row that is in order has no controls. It keeps the line they take on
     the other rows, so the stacked rows stand one height (HEA-507). */
  .doc-checklist--delivery div.doc-checklist__row::after {
    content: "";
    grid-column: 1 / -1;
    height: var(--delivery-control);
  }
}

@media (max-width: 44rem) {
  .doc-checklist--delivery .doc-checklist__upload {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 0.5rem;
  }

  /* One column: the rows differ by the controls they carry, so a row in
     order reserves none. */
  .doc-checklist--delivery div.doc-checklist__row::after {
    content: none;
  }

  .doc-checklist--delivery .doc-checklist__file:has(.doc-checklist__filename:empty),
  .doc-checklist--delivery .doc-checklist__dated:not(:has(input)) {
    display: none;
  }

  .doc-checklist__dated label {
    text-align: left;
  }

  .doc-checklist__error--file,
  .doc-checklist__error--date {
    grid-column: 1;
    padding-left: 0;
  }

  /* One column: each error directly under its own control, the button last. */
  .doc-checklist--delivery .doc-checklist__file,
  .doc-checklist__error--file {
    order: 1;
  }

  .doc-checklist--delivery .doc-checklist__dated {
    order: 2;
  }

  .doc-checklist__error--date {
    order: 3;
  }

  .doc-checklist--delivery .doc-checklist__slot--end {
    order: 4;
  }
}

/* Why backoffice rejected the last delivery, under the whole row. */
.doc-checklist .doc-checklist__reason {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--color-error);
}

/* A block that takes a banner's full width under its text and its actions
   (HEA-498: the documents to review in the dossier banner). The banner wraps
   so the block gets its own line. */
.info-banner:has(> .info-banner__section) {
  flex-wrap: wrap;
}

.info-banner__section {
  flex: 0 0 100%;
  margin-top: 0.5rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--color-border-strong);
}

/* Documents waiting for backoffice's review, one line each: what and who,
   Akkoord, the reason and Afkeuren. One grid for all rows, so the buttons and
   the reason fields stand in one column down the list. */
.review-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(16rem, 24rem);
  align-items: center;
  column-gap: 0.75rem;
}

.review-list__row {
  display: contents;
}

.review-list__row > * {
  min-height: 2.6rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
}

.review-list__name {
  min-width: 0;
  font-size: 0.875rem;
  font-weight: 600;
  white-space: nowrap;
}

.review-list__name a {
  color: var(--color-primary-hover);
}

.review-list__name .muted-inline {
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 400;
}

/* Akkoord, the reason and Afkeuren are one height, so their edges line up. */
.review-list__row .btn,
.review-list__row .btn-quiet,
.review-list__reject input[type="text"] {
  box-sizing: border-box;
  height: 2rem;
}

.review-list__row .btn,
.review-list__row .btn-quiet {
  display: inline-flex;
  align-items: center;
}

.review-list__reject input[type="text"] {
  flex: 1;
  min-width: 0;
  padding: 0 0.5rem;
}

/* The missing reason's error stands under the reason field. */
.review-list__row > .review-list__errors {
  grid-column: 3;
  min-height: 0;
  padding-bottom: 0.4rem;
}

/* The lines of a dashboard tile above its list: a pill, then what it means,
   each on its own line at one distance. */
.tile-notes {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  margin: 0 0 0.75rem;
}

.tile-notes > * {
  margin: 0;
}