/* ==========================================================================
   Styles for the Notification Items page. One file per page, mirroring the
   page's path, so this table can be adjusted without touching any other
   page's styles.
   ========================================================================== */

/* Fields table - the field name column holds to one line, the description
   absorbs the rest. */
.item-fields-table table {
  table-layout: fixed;
  width: 100%;
}

/* The theme puts min-width: 5rem on every th, which fights the narrow column. */
.item-fields-table table th {
  min-width: 0;
}

.item-fields-table table th:nth-child(1),
.item-fields-table table td:nth-child(1) {
  width: 9rem;
  white-space: nowrap;
}

/* Long descriptions make the rows tall, so anchor every cell to the top instead
   of letting the field name float in the middle of the row. */
.item-fields-table table td {
  vertical-align: top;
}

/* Type list - the icon stacked above the linked name, and what triggers that
   type. Same stacked treatment as the hover-actions table above. */
.type-list-table table {
  table-layout: fixed;
  width: 100%;
}

.type-list-table table th {
  min-width: 0;
}

.type-list-table table th:nth-child(1),
.type-list-table table td:nth-child(1) {
  width: 8rem;
  padding-left: 0.25rem;
  padding-right: 0.25rem;
  text-align: center;
}

/* Stack the icon on its own line, centred above the label. */
.type-list-table table td:nth-child(1) .twemoji {
  display: block;
  margin: 0 auto 0.15rem;
}

/* Brick icons in both themes: --q-brick resolves to the same accent under the
   light and the dark scheme, so one rule covers both modes. */
.type-list-table table td:nth-child(1) .twemoji svg {
  color: var(--q-brick);
  fill: var(--q-brick);
}

.type-list-table table td {
  vertical-align: middle;
}

/* Hover-actions table - the icon stacked above its label, narrow first column,
   description absorbs the rest. */
.hover-actions-table table {
  table-layout: fixed;
  width: 100%;
}

.hover-actions-table table th {
  min-width: 0;
}

.hover-actions-table table th:nth-child(1),
.hover-actions-table table td:nth-child(1) {
  width: 8rem;
  padding-left: 0.25rem;
  padding-right: 0.25rem;
  text-align: center;
}

/* Stack the icon on its own line, centred above the label. */
.hover-actions-table table td:nth-child(1) .twemoji {
  display: block;
  margin: 0 auto 0.15rem;
}

.hover-actions-table table td {
  vertical-align: middle;
}