/* ============================================================================
   Desktop layout (≥ 992px) — a screen, not a phone stretched onto one.

   Loaded by login/toplinkmobile.php after style.css and mobile.css on every page except chat, which
   owns its own layout (body.chat-body and the conversation lists). Everything here is inside
   min-width media queries, so a phone and a tablet (< 992px) render exactly as before.

   Deliberately left alone: the bottom tab bar (.app-tabbar) and --app-tabbar-h (tests/13 relies on
   both), the sidebar width (--sb-w) and the save bar's left edge (mobile.css keeps it clear of the
   sidebar); the save bar only gets the content's width here.

   Opt-in utilities for pages:
     .sec-grid   on .wrap — sections flow into 2 columns (≥ 1200px), 3 with .sec-grid-3 (≥ 1600px);
                 anything that is not a section (page head, alerts, links) spans the whole row, and a
                 section marked .sec-wide does too
     .wrap-narrow on .wrap — a page that is one form keeps a readable 880px column
     .page-actions inside .page-head — the page's main buttons, placed to the right of the title
   ============================================================================ */

@media (min-width: 992px) {
    /* the content takes the room beside the sidebar, with real gutters */
    .wrap { max-width: 1400px; padding-left: 28px; padding-right: 28px; padding-top: 24px; }
    .wrap.wrap-narrow { max-width: 880px; }
    .action-bar-inner { max-width: 1344px; }   /* the wrap's width minus its gutters */

    /* the title on the left, the page's own actions on the right */
    .page-head:not(.has-back) { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; align-items: center; margin-bottom: 18px; }
    .page-head:not(.has-back) > * { grid-column: 1; }
    .page-head:not(.has-back) > .page-actions { grid-column: 2; grid-row: 1 / span 3; display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
    .page-head h1 { font-size: 24px; }
    .page-head + .admin-quicklinks { margin-top: -6px; }

    /* forms do not stretch a field across 1400px: a labelled field keeps a readable width and a
       bootstrap label/field row keeps its label close to its field */
    .wrap .form-group.row { max-width: 920px; }
    .wrap .sec-body > .form-group,
    .wrap .sec-body > form > .form-group,
    .wrap .sec-body > form > .form-control,
    .wrap form > label + .form-control,
    .wrap form > label + .form-control + small { max-width: 720px; }
    .wrap .sec-body textarea.form-control { max-width: 920px; }

    /* data tables: the header stays in view while a long table scrolls inside its frame, and rows
       are a little denser than on a phone */
    .table-wrap { max-height: calc(100vh - var(--app-tabbar-h, 61px) - 150px); overflow: auto; }
    .table-wrap > table th,
    .table-wrap > .table-lite th { position: sticky; top: 0; z-index: 2; background: var(--w-bg); }
    .table-wrap > .table th { background: var(--w-surface); box-shadow: inset 0 -1px 0 var(--w-border); }
    .table-lite { font-size: 14px; }
    .table-lite th { padding: 9px 12px; }
    .table-lite td { padding: 7px 12px; }
    .table-lite tr:hover td { background: rgba(var(--w-primary-rgb, 15, 107, 79), .035); }
    .table-scroll, .table-responsive { overflow-x: auto; }

    /* a section's own body has more room to breathe at this width */
    .sec-head { padding: 16px 20px 0; }
    .sec-body { padding: 14px 20px 18px; }
    .card-section { padding: 18px 20px; }
}

/* hubs: sections side by side instead of one long stack */
@media (min-width: 1200px) {
    .wrap.sec-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
    .wrap.sec-grid > * { grid-column: 1 / -1; }
    .wrap.sec-grid > .sec:not(.sec-wide),
    .wrap.sec-grid > .card-section:not(.sec-wide),
    .wrap.sec-grid > .m-card:not(.sec-wide) { grid-column: auto; margin-bottom: 0; }
    .wrap.sec-grid > .page-head, .wrap.sec-grid > .alert, .wrap.sec-grid > .admin-quicklinks { margin-bottom: 0; }
    /* bootstrap columns inside a half-width card count against the viewport, not the card: a
       col-md-4 would be a sliver there, so the card lays them out as if it were a narrower screen */
    .wrap.sec-grid > .sec:not(.sec-wide) .row > .col-md-8,
    .wrap.sec-grid > .sec:not(.sec-wide) .row > .col-md-6 { flex: 0 0 100%; max-width: 100%; }
    .wrap.sec-grid > .sec:not(.sec-wide) .row > .col-md-4,
    .wrap.sec-grid > .sec:not(.sec-wide) .row > .col-md-3 { flex: 0 0 50%; max-width: 50%; }
}
@media (min-width: 1600px) {
    .wrap.sec-grid.sec-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}