body { min-height: 100vh; }
.list-group-item-action { cursor: pointer; }
.session-row { cursor: pointer; }
.form-note { color: var(--bs-secondary-color); font-size: 0.875rem; }
.filter-field { max-width: 200px; }

/* Gmail-style inbox rows: unread submissions are bright white with a bold
   title, read ones are dimmed to a light grey. Used on the forms inbox only
   (the .submission-unread/.submission-read classes come from
   SubmissionsHelper#submission_row_class). Setting --bs-table-bg keeps
   Bootstrap's cell background and hover styling working. Unread beats the
   spam tint; read spam rows keep .table-light. */
.submission-unread { --bs-table-bg: #ffffff; }
.submission-read { --bs-table-bg: #f2f2f2; }
.submission-title { font-weight: 400; }
.submission-unread .submission-title { font-weight: 700; }

/* Suggestions menu for the searchable filter dropdowns. Clamped to the
   viewport (there is no Popper collision handling here) and long values wrap
   so the menu never forces a horizontal page scroll on a phone. */
.filter-options-menu {
  min-width: 100%;
  width: max-content;
  max-width: min(20rem, calc(100vw - 1.5rem));
  max-height: 14rem;
  overflow-x: hidden;
  overflow-y: auto;
}
.filter-options-menu .dropdown-item { white-space: normal; overflow-wrap: anywhere; }
pre.raw-json { white-space: pre-wrap; word-break: break-word; max-height: 32rem; overflow-y: auto; }

/* Stack wide tables into labeled cards below the md breakpoint.
   Applied only where the markup opts in via the .table-reflow class. */
@media (max-width: 767.98px) {
  .table-reflow thead { display: none; }
  .table-reflow,
  .table-reflow tbody,
  .table-reflow tr,
  .table-reflow td { display: block; width: 100%; }
  .table-reflow tr {
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    margin-bottom: 0.75rem;
    padding: 0.25rem 0;
  }
  .table-reflow td {
    text-align: right;
    max-width: 100%;
    padding: 0.5rem 0.75rem;
    border: 0;
    overflow-wrap: anywhere;
  }
  .table-reflow td::before {
    content: attr(data-label);
    float: left;
    font-weight: 600;
    margin-right: 0.5rem;
  }
  .table-reflow td.text-nowrap { white-space: normal !important; }
}

/* Report card rows scroll sideways on phones, so a group of dimension tables
   is one swipeable strip instead of three screens of vertical scroll. One
   card at a time, with the next one peeking. Applied per row via .report-strip. */
@media (max-width: 767.98px) {
  .row.report-strip {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    margin-inline: 0;
    column-gap: var(--bs-gutter-x);
  }
  .row.report-strip > * {
    flex: 0 0 85%;
    padding-left: 0;
    padding-right: 0;
  }
}

/* KPI cards are smaller than a table row so two fit per phone row; from md
   up there is room for the original display size again. */
@media (min-width: 768px) {
  .kpi-card .kpi-value { font-size: 2rem; }
}