/* arrange.css (owner 12-11 "only rearrangement"): spacing + alignment only. Cards keep their designed size and shape.
   No element is hidden, no wording / font size changes. Advanced search (#p-search) and Attendance (#p-staff-today)
   are left exactly as they are live. Remove this file's <link> to roll back. */

/* page header, cards, tabs and content sit at the page's own 12px gap; stray child margins that doubled it are dropped */
html.v7 #v7app #v7main .page.on:not(#p-staff-today):not(#p-search) > *{margin-top:0;margin-bottom:0}

/* classic (v5) screens: 20px blocks -> 14px */
html.v7 #v7app #v7main > .screen.v7-legacy.on > :not(:last-child){margin-bottom:14px}
html.v7 #v7app #v7main > .screen.v7-legacy.on > * + *{margin-top:0}
html.v7 #v7app #v7main .v5-stack,
html.v7 #v7app #v7main .v5-cols{gap:14px}
html.v7 #v7app #v7main .v5-stack > .md-panel{margin-bottom:0}

/* Today home: 18px -> 14px between blocks */
html.v7 #v7app #v7main #ps81-home{gap:14px;margin-bottom:14px}

/* page header: title and its buttons on one line, vertically centred */
html.v7 #v7app #v7main .page.on:not(#p-staff-today):not(#p-search) > .ph{align-items:center}

/* empty-space trims found by the 12-11 phone/PC review (spacing only; tested on the snapshot) */
html.v7 #v7app #v7main #p-detection-log #v7dlCount:has(> #dlCount:empty){min-height:0;margin-top:-12px}
html.v7 #v7app #v7main #p-register-face [data-v7x=top]>.grid2{margin-block:0 !important}
html.v7 #v7app #v7main #p-settings .md-panel>.v5-seg:last-child{margin-bottom:0}
html.v7 #v7app #v7main #p-settings .v5x-fgrid{align-items:start}
html.v7 #v7app #v7main #p-settings .v5x-fgrid>:nth-child(-n+2){grid-row:span 2}
html.v7 #v7app #v7main #p-settings .v5x-roles{margin-top:0}
html.v7 #v7app #v7main #p-settings .v5x-fsum{margin-bottom:4px}
html.v7 #v7app #v7main #p-settings .md-panel-title{margin-bottom:6px}
html.v7 #v7app #v7main #p-stores .tbl-wrap .card-h{margin-bottom:4px}
@media (max-width:640px){
  html.v7 #v7app #v7main #ps81-home > details.p82-sec:not([open]) > summary.p81-sh{margin-top:0}
  html.v7 #v7app #v7main #ps81-home > details.p82-sec:not([open]) + details.p82-sec{margin-top:-10px}
}

/* owner 12-11 (phone, every page): smaller top of each page.
   1. the tab row under the top bar (e.g. Customers / Follow-ups) is a slim row
   2. the page's link buttons (e.g. Live occupancy) become small icon squares on the title line (name kept as the button's label)
   3. the small number cards (Customers, Stores, Alerts, Cameras, Area activity, Follow-ups ...) sit 3 to a row, tighter
   The big designed summary cards (Today, Store pages) are not touched. */
@media (max-width:767px){
  #ps81-gtabs{gap:6px!important;padding-top:6px!important;padding-bottom:4px!important}
  #ps81-gtabs button{min-height:30px!important;height:30px!important;padding:0 12px!important;font-size:13px!important}

  html.v7 #v7app #v7main .page.on:not(#p-search):not(#p-staff-today) > .ph{flex-wrap:nowrap!important;align-items:flex-start;gap:6px}
  html.v7 #v7app #v7main .page.on:not(#p-search):not(#p-staff-today) > .ph > div:first-child{flex:1 1 auto;min-width:0}
  html.v7 #v7app #v7main .page.on:not(#p-search):not(#p-staff-today) > .ph > .acts{flex:none;width:auto!important;margin:0!important;gap:6px;flex-wrap:nowrap}
  html.v7 #v7app #v7main .page.on:not(#p-search):not(#p-staff-today) > .ph > .acts > .btn:has(svg){font-size:0!important;width:36px;min-width:36px;height:36px;min-height:36px;padding:0!important;justify-content:center;gap:0}
  html.v7 #v7app #v7main .page.on:not(#p-search):not(#p-staff-today) > .ph > .acts > .btn:has(svg) svg{width:18px;height:18px;margin:0}

  html.v7 #v7app #v7main .page.on :is(.vsum,.kpis){grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:6px!important}
  html.v7 #v7app #v7main .page.on :is(.vsum,.kpis) > .kpi{padding:7px 8px;gap:0}
  html.v7 #v7app #v7main .page.on :is(.vsum,.kpis) > .kpi .l{font-size:11px;gap:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  html.v7 #v7app #v7main .page.on :is(.vsum,.kpis) > .kpi .l svg{width:13px;height:13px;flex:none}
  html.v7 #v7app #v7main .page.on :is(.vsum,.kpis) > .kpi .v{font-size:19px}
  html.v7 #v7app #v7main .page.on :is(.vsum,.kpis) > .kpi .v small{font-size:11px}
  html.v7 #v7app #v7main .page.on :is(.vsum,.kpis) > .kpi .s{font-size:11px}
}
/* owner 12-11 "scan all, full coverage" (phone, every page except Advanced search + Attendance) */
@media (max-width:767px){
  html.v7 #v7app #v7main .page.on:not(#p-search):not(#p-staff-today) > .ph > .acts > .btn:not(:has(svg)){min-height:34px;height:34px;padding:0 10px;font-size:13px}
  html.v7 #v7app #v7main .page.on:not(#p-search):not(#p-staff-today) :is(.tabs,.v7tabs) > button{min-height:34px!important;height:34px;padding:0 12px!important;font-size:13px!important}
  html.v7 #v7app #v7main .page.on:not(#p-search):not(#p-staff-today) :is(.chips,.al-chips,.zchips) > .chip{min-height:32px!important;padding:0 10px!important;font-size:12px!important}
  html.v7 #v7app #v7main .page.on:not(#p-search):not(#p-staff-today) :is(.vsum,.kpis) > .kpi{min-height:0!important}
}