/*
 * The screens of the portal itself: Audit, Users, Settings and "My account" (work package P8). Built from the
 * tokens of the design system; the components are the ui-* ones. One family of classes: pt-.
 */

/* The filters of a list, each under its own label, in a card above the table */

.pt-filters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12.5rem), 1fr));
  gap: var(--ui-space-3) var(--ui-space-4);
  padding: var(--ui-space-4) var(--ui-space-5) 0;
}

.pt-filters__field {
  min-width: 0;
}

.pt-filters__field .ui-popover,
.pt-filters__field .ui-popover__anchor {
  display: flex;
  width: 100%;
}

.pt-filters__field .ui-btn {
  width: 100%;
  justify-content: space-between;
}

.pt-filters__field .ui-btn__label {
  flex: 1;
  overflow: hidden;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pt-toolbar {
  padding: var(--ui-space-4) var(--ui-space-5) 0;
}

.pt-pages {
  flex: 1;
}

/* A cell that holds more than one line: the thing itself, and under it what explains it */

.pt-cell {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.125rem;
  min-width: 0;
}

.pt-cell__line {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--ui-space-1) var(--ui-space-2);
  min-width: 0;
}

.pt-cell__strong {
  color: var(--ui-text);
  font-weight: var(--ui-weight-semibold);
  overflow-wrap: anywhere;
}

.pt-cell__name {
  overflow-wrap: anywhere;
}

.pt-cell__sub {
  display: block;
  color: var(--ui-text-muted);
  font-size: var(--ui-text-sm);
  white-space: normal;
  overflow-wrap: anywhere;
}

/* A sentence keeps room for itself while the table is a table. */
@container (min-width: 34.01rem) {
  .pt-cell__sub--long {
    min-width: 14rem;
    max-width: 44rem;
  }
}

/* Where the table folds to cards (the room of a phone) the lines of a card read from the right, as its values do. */
@container (max-width: 34rem) {
  .ui-table__cell:not(:first-child) .pt-cell {
    align-items: flex-end;
    text-align: right;
  }

  .ui-table__cell:not(:first-child) .pt-cell__line {
    justify-content: flex-end;
  }
}

/* A part of a side panel under its own small heading */

.pt-part {
  display: flex;
  flex-direction: column;
  gap: var(--ui-space-3);
  min-width: 0;
}

/* Users and "My account" */

.pt-note {
  max-width: 62rem;
  margin: 0;
  color: var(--ui-text-muted);
  font-size: var(--ui-text-sm);
}

.pt-allows {
  display: flex;
  flex-direction: column;
  gap: var(--ui-space-2);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-md);
  padding: var(--ui-space-3) var(--ui-space-4);
  background: var(--ui-surface-sunken);
}

.pt-allows__list {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin: 0;
  padding-left: 1.125rem;
  list-style: disc;
  color: var(--ui-text);
  font-size: var(--ui-text-sm);
}

/* Why the button beside it cannot be pressed, in words */
.pt-why {
  flex: 1 1 12rem;
  margin: 0 auto 0 0;
  color: var(--ui-text-muted);
  font-size: var(--ui-text-sm);
}

.pt-why--start {
  flex-basis: 14rem;
}

/* What went wrong with an answer to a question, under the question */
.pt-ask-problem {
  margin-top: var(--ui-space-3);
}

/* Settings */

.pt-panel {
  gap: var(--ui-space-5);
  min-width: 0;
}

.pt-meaning {
  margin: 0;
  color: var(--ui-text);
  font-size: var(--ui-text-md);
}

.pt-meaning--problem {
  color: var(--ui-critical-text);
  overflow-wrap: anywhere;
}

.pt-you {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--ui-space-2);
  border-bottom: 1px solid var(--ui-border);
  padding: var(--ui-space-3) var(--ui-space-5);
  color: var(--ui-text-muted);
  font-size: var(--ui-text-sm);
}

.pt-you--box {
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-md);
  padding: var(--ui-space-2) var(--ui-space-3);
  background: var(--ui-surface-sunken);
  color: var(--ui-text);
}

.pt-you--box .ui-btn {
  margin-left: auto;
}