/* ==========================================================================
   GVS.Suite — page-specific responsive rules. LINK THIS LAST in index.html.
   --------------------------------------------------------------------------
   The shared chrome half of the design kit's mobile.css lives in the library
   (gvs-myhome.css, at the end) and covers the app bar, the drawer, dialogs,
   toolbars, touch targets, and the stacked-card table mechanism.

   What is left here is the part that genuinely belongs to a page: which cell of
   which table lands where once a row becomes a card, and the handful of dense
   panels each admin screen has. Because the tables are now one shared .gvs-dt,
   these rules scope by page root (.us-root, .lc-canvas, .au-canvas) instead of by
   a per-page table class.

   Nothing here changes desktop rendering.
   ========================================================================== */

@media (max-width: 700px) {
  /* ---------- Users -------------------------------------------------------
     Name, email and products each take a full row; status and Manage share a
     footer line. */
  .us-root .gvs-dt tbody td:nth-child(1),
  .us-root .gvs-dt tbody td:nth-child(2),
  .us-root .gvs-dt tbody td:nth-child(3) { grid-column: 1 / -1; }
  .us-root .gvs-dt tbody td:nth-child(4) { grid-column: 1; }
  .us-prodchips { max-width: none; flex-wrap: wrap; }
  .us-name .un-name { white-space: normal; }

  /* The access editor in the user dialogs is a four-column grid on desktop. */
  .us-addrow { grid-template-columns: 1fr; gap: 10px; }
  .us-access-row { grid-template-columns: 1fr; gap: 4px; }
  .us-access-head { display: none; }
  .us-grid2 { grid-template-columns: 1fr; }

  /* ---------- Licences ----------------------------------------------------
     Product, seats and key take full rows; name pairs with the edit button, and
     expiry pairs with status. */
  .lc-canvas .gvs-dt tbody td:nth-child(1),
  .lc-canvas .gvs-dt tbody td:nth-child(3),
  .lc-canvas .gvs-dt tbody td:nth-child(6) { grid-column: 1 / -1; }
  .lc-canvas .gvs-dt tbody td:nth-child(2) { grid-column: 1; grid-row: 2; }
  .lc-canvas .gvs-dt tbody td:nth-child(7) { grid-column: 2; grid-row: 2; justify-self: end; }
  .lc-canvas .gvs-dt tbody td:nth-child(4) { grid-column: 1; }
  .lc-canvas .gvs-dt tbody td:nth-child(5) { grid-column: 2; justify-self: end; }
  .lc-canvas .lc-bar { width: 100% !important; }
  .lc-tkey { word-break: break-all; }

  .lc-toolbar { gap: 8px; }
  .lc-spacer { display: none; }
  .lc-seg { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .lc-seg::-webkit-scrollbar { display: none; }
  .lc-seg button { min-height: 36px; white-space: nowrap; }
  .lc-card-body { grid-template-columns: 1fr; gap: 14px; }
  .lc-card-foot { gap: 10px; }
  .lc-summary { grid-template-columns: 1fr 1fr; }
  .lc-summary .lc-renew { grid-column: 1 / -1; }
  .lc-sum-ic { width: 38px; height: 38px; }
  .lc-sum { min-width: 0; }

  /* Activation bar: key field on one line, the action full width beneath. */
  .lc-add { height: auto; flex-wrap: wrap; row-gap: 10px; padding: 11px 14px; border-radius: var(--gvs-radius-lg); }
  .lc-add input { flex: 1 1 auto; min-width: 0; height: 30px; font-size: 14.5px; }
  .lc-add .lc-add-btn { flex: 1 0 100%; justify-content: center; height: 44px; }

  /* ---------- Automation -------------------------------------------------
     Rule and labels take full rows; owner pairs with the on/off switch, runs
     with updated. The trailing chevron cell goes — tapping the card opens the
     rule. */
  .au-canvas .gvs-dt tbody td:nth-child(1),
  .au-canvas .gvs-dt tbody td:nth-child(2) { grid-column: 1 / -1; }
  .au-canvas .gvs-dt tbody td:nth-child(3) { grid-column: 1; grid-row: 3; }
  .au-canvas .gvs-dt tbody td:nth-child(6) { grid-column: 2; grid-row: 3; justify-self: end; }
  .au-canvas .gvs-dt tbody td:nth-child(4) { grid-column: 1; grid-row: 4; }
  .au-canvas .gvs-dt tbody td:nth-child(5) { grid-column: 2; grid-row: 4; justify-self: end; }
  .au-canvas .gvs-dt tbody td:nth-child(7) { display: none; }
  .au-labels { flex-wrap: wrap; }

  .au-toolbar { gap: 8px; flex-wrap: wrap; }
  .au-spacer { display: none; }
  .au-tabs { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .au-tabs::-webkit-scrollbar { display: none; }
  .au-tabs .au-tab { white-space: nowrap; margin-right: 16px; }

  /* Rule builder: the flow stacks and the config panel becomes a bottom sheet. */
  .au-build-bar { height: auto; min-height: 56px; padding: 8px 10px; gap: 8px; flex-wrap: wrap; }
  .au-build-name { min-width: 0; flex: 1 1 120px; font-size: 15px; }
  .au-build-status { margin-right: 0; }
  .au-build-body { flex-direction: column; }
  .au-stage { padding: 20px 14px 200px; }
  .au-flow { width: 100%; min-width: 0; }
  .au-node, .au-trigger-empty { width: 100%; max-width: 340px; }
  .au-lanes { flex-direction: column; align-items: stretch; gap: 16px; padding-top: 20px; }
  .au-lanes::before, .au-lane::before { display: none; }
  .au-lane { align-items: stretch; }
  .au-config {
    position: fixed; left: 0; right: 0; bottom: 0; width: auto; z-index: 85;
    max-height: 70vh; border-left: none; border-top: 1px solid var(--gvs-border);
    border-radius: var(--gvs-radius-2xl) var(--gvs-radius-2xl) 0 0; box-shadow: var(--gvs-elev-5);
  }
  /* Nothing selected — keep the flow clear rather than showing an empty sheet. */
  .au-config:has(.au-config-empty) { display: none; }
  .au-config-head, .au-config-body { padding: 14px 16px; }
  .au-config-foot { padding: 12px 16px; }
  .au-config-foot .mh-btn { flex: 1; justify-content: center; }

  /* ---------- Role groups ------------------------------------------------
     A permission matrix cannot collapse into cards, so make it navigable
     instead: the role name stays pinned while the group columns scroll. */
  .rg-matrix-wrap { max-height: none; width: 100%; }
  .rg-corner, .rg-rowhead { min-width: 164px; width: 164px; padding: 10px 12px; }
  .rg-roledesc { display: none; }
  .rg-colhead { min-width: 124px; width: 124px; }
  .rg-addcol { display: none; }
  .rg-cell { height: 48px; }
  .rg-toolbar { gap: 8px; flex-wrap: wrap; }
  .rg-toolbar .mh-search { width: 100%; }
  .rg-spacer { display: none; }
  .rg-seg, .rg-products { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .rg-seg::-webkit-scrollbar, .rg-products::-webkit-scrollbar { display: none; }
  .rg-split > * { min-width: 0; }
  .rg-cmp-selects { grid-template-columns: 1fr; }

  /* ---------- Locations --------------------------------------------------
     Tree rows drop the secondary pills so the name has room. */
  .lo-toolbar { gap: 8px; flex-wrap: wrap; }
  .lo-toolbar .mh-search { width: 100%; }
  .lo-spacer { display: none; }
  .lo-work > * { min-width: 0; }
  .lo-row, .lo-row-meta { min-width: 0; }
  .lo-row-meta .lo-barcode, .lo-row-meta .lo-pill { display: none; }
  .lo-row-name .lo-nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .lo-tree-body { max-height: 60vh; }
  .lo-confirm-stats { grid-template-columns: 1fr; }
  .lo-col-item { min-width: 0; }
  .lo-map-table, .lo-preview-table { display: block; overflow-x: auto; }

  /* ---------- Operations ------------------------------------------------- */
  .op-toolbar { gap: 8px; flex-wrap: wrap; }
  .op-spacer { display: none; }
  .op-summary { grid-template-columns: 1fr 1fr; }
  .op-split > * { min-width: 0; }
  .op-list-row, .op-lr-body { min-width: 0; }
  .op-lr-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .op-seg { overflow-x: auto; flex-wrap: nowrap; }
  .op-seg button { min-height: 36px; white-space: nowrap; }
  /* The log stream keeps its own horizontal scroll — wrapping log lines is worse
     than scrolling them. */
  .op-log, .op-log-wrap { overflow-x: auto; }
  .op-log { font-size: 11.5px; }

  /* ---------- Radio ------------------------------------------------------
     The status card is a flex row of logo, name+pill, metrics and actions. Giving
     the body min-width:0 (so it could shrink) let it collapse to ~119px while
     .rd-vname stayed nowrap — so the connection pill overflowed its box and landed
     on top of the metrics. Each block now takes a full row instead, and the name
     line is allowed to wrap so the pill drops under a long vendor name. */
  .rd-status { flex-wrap: wrap; gap: 14px; padding: 16px; }
  .rd-status-body { flex: 1 1 100%; min-width: 0; }
  .rd-status-body .rd-vname { flex-wrap: wrap; row-gap: 8px; }
  .rd-conn { flex: none; }
  .rd-status-metrics { flex: 1 1 100%; gap: 20px; }
  .rd-status-actions { flex: 1 1 100%; flex-wrap: wrap; gap: 12px; }
  .rd-fieldgrid { grid-template-columns: 1fr; }
  .rd-tone-grid { grid-template-columns: 1fr; }
  .rd-labels-wrap > * { min-width: 0; }

  /* The sticky save bar is not a page toolbar, so the shared "primary takes its own
     row" rule does not reach it — and without this "Save & restart" pushed 36px past
     the right edge of a 390px viewport. */
  .rd-savebar { flex-wrap: wrap; row-gap: 10px; padding: 12px 14px; }
  .rd-savebar .rd-sb-spacer { display: none; }
  .rd-savebar .rd-dirty { flex: 1 0 100%; }
  .rd-savebar .mh-btn { flex: 1 1 auto; min-width: fit-content; justify-content: center; }
  .rd-savebar .mh-btn.primary { flex: 1 0 100%; }
}

@media (max-width: 560px) {
  /* The manage-user dialog has a fixed body height on desktop to stop the tabs
     jumping; as a bottom sheet it has to size to its content. */
  .us-manage-modal .mh-modal-body { height: auto; max-height: none; }

  .lc-summary { grid-template-columns: 1fr; }
  .op-summary { grid-template-columns: 1fr; }

  /* Touch targets on the page-local controls the library does not know about. */
  .lo-gen-btn, .lc-add-btn, .us-add-btn { min-height: 44px; }
  .lo-row { padding: 10px 8px; }
  .lo-col-item, .op-list-row { padding: 11px 10px; }
  .rg-tick { width: 34px; height: 34px; }
  .au-switch { transform: scale(1.1); transform-origin: center; }
}