/* THE MDM ON A PHONE (owner 2026-10-05: "every strategic part of our mdm setup for mobile layout for my personal phone";
   5:09 PM: "i also want all the pills on top spread out in a more neat way i dont want horizantal scrolling anywhere").
   Phone width only; a computer screen is untouched. It only ADDS: every rule starts at body so it wins over a page's own
   rules without editing them. Loaded by the console page and by every page that lives in a frame inside it.
   THE LAW OF THIS FILE: at phone width NOTHING slides sideways - not the page, not the menu, not a table. */
@media(max-width:700px){
  /* the menu: every pill on screen at once, three to a row, the same size */
  body .sidebar{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;overflow:visible;position:static;background:white;padding:10px 12px;align-items:stretch}
  body .sidebar button,body .sidebar a{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;min-width:0;min-height:46px;margin:0;padding:6px 8px;font-size:13px;line-height:1.2;text-align:center;white-space:normal;border-radius:12px;background:#f2f5f3;color:#526b5b;text-decoration:none;box-sizing:border-box}
  body .sidebar button[aria-current=page]{background:#e4efe7;color:#17634e;font-weight:600}
  body .sidebar .count{margin-left:0;flex-shrink:0}
  body .sidebar .cj-nav-lanes,body .sidebar .nav-divider,body .sidebar .nav-label,body .sidebar .sidebar-foot,body .sidebar .nav-icon{display:none}
  body .sidebar .nav-bin{display:contents}
  /* thumbs: every press is at least 44 tall */
  body .btn,body .page button:not(.tx-row),body .page select,body .page input:not([type=checkbox]):not([type=radio]){min-height:44px}
  body .searchbox input{min-height:46px;font-size:16px}
  body .page input,body .page select,body .page textarea{font-size:16px}   /* under 16 an iPhone zooms the whole page on every tap */
  body .page-head{flex-wrap:wrap;gap:12px}
  /* a table becomes a list of cards: one row = one card, each value under its own column name (phone.js names them) */
  body table.ph-stack,body table.ph-stack tbody,body table.ph-stack tr,body table.ph-stack td,body table.ph-stack th{display:block;width:auto;min-width:0;max-width:100%;box-sizing:border-box}
  body table.ph-stack{width:100%;border-collapse:collapse}
  body table.ph-stack thead,body table.ph-stack colgroup{display:none}
  body table.ph-stack tr{padding:14px 16px;border-bottom:1px solid #dce5de}
  body table.ph-stack tr:last-child{border-bottom:0}
  body table.ph-stack td,body table.ph-stack tbody th{padding:4px 0;border:0;text-align:left;white-space:normal;overflow-wrap:anywhere;height:auto}
  body table.ph-stack td:empty{display:none}
  body table.ph-stack td[data-label]::before,body table.ph-stack tbody th[data-label]::before{content:attr(data-label);display:block;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#7d8c82;margin-top:6px}
  body .ph-nowide{overflow-x:visible;overflow-y:visible;max-width:100%;min-width:0}
  body .ph-nowide>*{min-width:0;max-width:100%}
}
/* THE GEAR (owner 2026-10-05 5:13 PM: "training references and recylce bin could be tuck in settings on the mobile layout
   somewhere else maybe on the top right to clear up some extra space"). Phone width only; on a computer both stay in the menu. */
.ph-gear,.ph-more,.ph-mode{display:none}
@media(max-width:700px){
  body .sidebar [data-view="crownjewel"],body .sidebar [data-staff-accounts],body .sidebar [data-view="reference"],body .sidebar [data-view="recycle"]{display:none}
  body .ph-mode{display:block;position:absolute;top:27px;right:72px;font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#7d8c82;white-space:nowrap}
  body .top{position:relative}
  /* the brand takes the whole first row, so the gear is alone at its right end in every browser */
  body .top .brand{flex-basis:100%;justify-content:flex-start;text-align:left;padding-right:170px}
  body .ph-gear{position:absolute;top:12px;right:16px;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid #dce5de;border-radius:12px;background:#f2f5f3;color:#526b5b;padding:0;flex-shrink:0}
  body .ph-gear[aria-expanded=true]{background:#e4efe7;color:#17634e}
  body .top .identity{margin-left:0}
  body .ph-more{position:absolute;top:66px;right:12px;z-index:60;flex-direction:column;gap:4px;min-width:210px;padding:8px;background:white;border:1px solid #dce5de;border-radius:12px;box-shadow:0 14px 35px #1c352c26}
  body .ph-more.open{display:flex}
  body .ph-more button{min-height:46px;border:0;border-radius:8px;background:white;color:#1c352c;font-size:15px;text-align:left;padding:10px 14px}
  body .ph-more button:active{background:#edf4ee}
}