/* Rad Build on a phone: a compact header, and tables that become cards.
 *
 * The shared table component is built for a desktop: fixed layout, pixel column
 * widths, drag handles. On a 390px screen that produces a ten-column grid you
 * scroll sideways through, which is not a list you can act on. Below 700px each
 * row becomes a card and each cell carries its column name, so the same markup
 * serves both without a second rendering path.
 *
 * Scoped to `.data-table-wrap.stackable` on purpose: this file is loaded by the
 * two Rad Build pages only. The shared component is symlinked into roughly
 * thirty apps and changing it here would change all of them at once.
 */
@media (max-width: 700px) {
  .data-table-wrap.stackable { overflow-x: visible; border: 0; }

  .data-table-wrap.stackable .data-table,
  .data-table-wrap.stackable .data-table tbody,
  .data-table-wrap.stackable .data-table tr,
  .data-table-wrap.stackable .data-table td {
    display: block;
    /* ResizableTable writes `width` AND `min-width` inline; clearing width alone
       leaves the min-width holding the table at its desktop size, which pushes
       every value off the right of the screen and leaves a column of labels. */
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
  }
  .data-table-wrap.stackable .data-table { table-layout: auto !important; }
  .data-table-wrap.stackable .data-table thead { display: none; }
  .data-table-wrap.stackable .rt-handle { display: none; }

  .data-table-wrap.stackable .data-table tr {
    background: var(--card, #fff);
    border: 1px solid var(--line, #E2E8F0);
    border-radius: 10px;
    padding: 10px 12px;
    margin-bottom: 10px;
    position: relative;
  }
  /* The card background above outranks the shared selected tint; put it back. */
  .data-table-wrap.stackable .data-table tr.tr-selected {
    background: var(--table-row-selected, #C7DBFD);
    box-shadow: inset 3px 0 0 var(--table-header-bg, #1E3A8A);
  }

  .data-table-wrap.stackable .data-table td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 14px;
    border: 0;
    padding: 4px 0;
    font-size: 15px;
    text-align: left !important;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }
  .data-table-wrap.stackable .data-table td::before {
    content: attr(data-label);
    flex: 0 0 auto;
    font-size: 13px;
    font-weight: 600;
    /* #475569 on #FFFFFF is 7.5:1. A label is not decoration; it is the only
       thing telling you what the value means once the header row is gone. */
    color: #475569;
  }
  /* An empty cell with only its label is noise on a small screen. */
  .data-table-wrap.stackable .data-table td.is-empty { display: none; }

  /* The selection checkbox keeps its place, top-right, without a label. */
  .data-table-wrap.stackable .data-table td.col-check {
    position: absolute; top: 8px; right: 10px; padding: 0; display: block;
  }
  .data-table-wrap.stackable .data-table td.col-check::before { content: none; }
  .data-table-wrap.stackable .data-table td:first-child + td { padding-right: 28px; }
}


/* The shared shell already stacks the rail above the content below 820px, but
   it keeps the full brand block, the tagline and the footer, which is most of a
   phone screen before the first request. Compacted here rather than in
   _shared/radtool-saas.css, which is symlinked into roughly thirty apps. */
@media (max-width: 700px) {
  .side { padding-top: 14px; padding-bottom: 8px; }
  .side-brand { padding: 0 16px 10px; }
  .side-brand .eyebrow, .side-brand .tag { display: none; }
  .side-brand .word { font-size: 20px; }
  /* Wraps rather than running off the screen: the staff console has five entries. */
  .side-nav { padding: 0 10px; gap: 6px; flex-wrap: wrap; }
  /* Section headings inside the rail are groupings for a vertical list; on one
     horizontal row they read as a squashed third button. */
  .side-nav .nav-label { display: none; }
  .side-nav .nav-item { flex: 1 1 0; padding: 8px 12px; min-height: 40px;
                        display: flex; align-items: center; justify-content: center; }
  .side-foot { padding: 8px 16px; font-size: 13px; display: flex; gap: 14px;
               align-items: center; flex-wrap: wrap; }
  .main { padding: 16px 14px 40px; }
  .rb-h { font-size: 20px; }
  .rb-actrow .btn { min-height: 40px; }
}