/* the requests: the folding columns of the boards, the colours of the phases in the filter, the filters of the list */
/* One file for one part of the application: a change of that part touches only this file. */

/* a column of a board folds (as the cards in Finance): the heading is the summary, the arrow shows open or closed; folded it is only the heading */
details.col-fold > summary {
  list-style: none;
  cursor: pointer;
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 8px;
  align-items: center;
  min-height: 44px;
  padding: 2px 4px 6px;
  border-bottom: 3px solid var(--stage, var(--muted));
}
details.col-fold > summary::-webkit-details-marker {
  display: none;
}
details.col-fold > summary::before {
  content: '▸';
  grid-row: 1 / span 2;
  align-self: start;
  padding-top: 3px;
  color: var(--accent);
  font-size: 16px;
}
details.col-fold[open] > summary::before {
  content: '▾';
}
details.col-fold > summary b {
  font-size: 15px;
}
details.col-fold > summary .muted {
  grid-column: 2;
  font-size: 12.5px;
  color: var(--muted);
}
details.col-fold > summary:focus-visible {
  outline: 3px solid #f59331;
  outline-offset: 2px;
  border-radius: 6px;
}
html[data-theme='dark'] details.col-fold > summary::before {
  color: var(--link, var(--accent));
}
.contact-people .head {
  justify-content: flex-start;
}

/* a phase of the requests has its own colour in the filter too: a tinted pill, the chosen one is filled */
.chip[class*='status-'] {
  background: color-mix(in srgb, var(--stage) 14%, var(--card));
  border-color: color-mix(in srgb, var(--stage) 45%, transparent);
}
.chip[class*='status-'].on {
  background: var(--stage);
  border-color: var(--stage);
  color: #fff;
}
html.glass .chip[class*='status-'] {
  background: color-mix(in srgb, var(--stage) 16%, var(--g-pill));
  border-color: color-mix(in srgb, var(--stage) 45%, transparent);
}
html.glass .chip[class*='status-'].on {
  background: var(--stage);
  border-color: var(--stage);
  color: #fff;
}

.f[hidden] {
  display: none;
}

table.cards td.nowrap {
  white-space: nowrap;
}

/* the filters of the list of requests: the fields stand in a row, the search takes the rest */
.filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px 12px;
  margin: 12px 0;
}
.filters .f {
  min-width: 150px;
}
.filters .f.grow {
  flex: 1;
  min-width: 200px;
}
.filters .btn {
  align-self: flex-end;
}

/* the card of a request has always the same lines (an empty one is a dash), so that the cards stand side by side line to line and the buttons are on one axis */
.req-card .deal-title {
  min-height: 2.8em;
}
.req-card .req-line {
  min-height: 1.4em;
}
.req-card .deal-meta {
  min-height: 1.6em;
}
.req-card .deal-actions {
  flex-direction: column;
  align-items: stretch;
  margin-top: auto;
  padding-top: 6px;
}
.req-card .deal-actions .req-move select,
.req-card .deal-actions form .btn {
  width: 100%;
}
.req-card .deal-slot {
  display: none;
}
@media (min-width: 861px) {
  .req-card .deal-slot {
    display: block;
    min-height: 34px;
  }
}

/* on a phone every field of the filter is as wide as the card, the button too */
@media (max-width: 640px) {
  .filters .f,
  .filters .f.grow {
    flex: 1 1 100%;
    min-width: 0;
  }
  .filters .f select,
  .filters .f input {
    width: 100%;
  }
  .filters .btn {
    flex: 1 1 100%;
  }
}

/* the title of a card with the small eye in line with it; the button to the next phase fills the card's width */
.req-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.req-head .deal-title {
  flex: 1;
  min-width: 0;
}
.req-head .req-eye {
  flex: none;
}
.req-card .deal-actions .req-next {
  margin: 0;
}
.req-card .deal-actions .req-next .btn {
  width: 100%;
  white-space: nowrap;
}
.req-files {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.req-files li {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
}

/* the list of the requests has many columns: a little less room inside the cells, so that the buttons stay whole */
.tablewrap table.cards th,
.tablewrap table.cards td {
  padding-left: 6px;
  padding-right: 6px;
}

/* the alert of the requests past their day: a short list under the heading */
.req-alert ul {
  margin: 6px 0 0;
  padding-left: 20px;
}
.req-alert li {
  margin: 2px 0;
}