/* layout-claude.css: Claude web rearrange answer (owner 12-11), DEV TRIAL ONLY. Remove this file's <link> in index.html to drop it. */
/* ==========================================================================
   PeopleSense Retail – layout tightening (MOVE / ALIGN / TIGHTEN ONLY)
   Append as ONE style block just before the closing body tag.
   Nothing is hidden, removed, recoloured or restyled. No rule touches
   #p-search (Advanced search) or #p-staff-today / #s-attendance (Attendance).
   ========================================================================== */

/* ---------- 1. Cameras & areas / Camera health (all widths) ----------------
   "Checked 21:27 IST" sits at the end of the status-pill row instead of
   taking a line of its own. */
html.v7 #v7app #v7main #p-camera-setup .p82-camrec > .p82-fine{
  flex:0 0 auto; width:auto; margin-left:auto;
}

/* ============================ PC (from 1024 px) ============================ */
@media (min-width:1024px){

  /* ---------- 2. Live occupancy ------------------------------------------
     Title + "Inside now" chip + staff summary share ONE row (were 3 rows).
     Search box + "Inside now ×" chip share ONE row (were 2 rows). */
  html.v7 #v7app #v7main #s-people #p-who-is-here,
  html.v7 #v7app #v7main #s-floor  #p-who-is-here{
    flex-direction:row; flex-wrap:wrap; align-items:center;
  }
  html.v7 #v7app #v7main #s-people #p-who-is-here > *,
  html.v7 #v7app #v7main #s-floor  #p-who-is-here > *{
    flex:0 0 100%; min-width:0; max-width:100%;
  }
  html.v7 #v7app #v7main #s-people #p-who-is-here > .ph,
  html.v7 #v7app #v7main #s-floor  #p-who-is-here > .ph,
  html.v7 #v7app #v7main #s-people #p-who-is-here > .bar,
  html.v7 #v7app #v7main #s-floor  #p-who-is-here > .bar{
    flex:0 0 auto;
  }
  html.v7 #v7app #v7main #s-people #p-who-is-here > .sum{
    flex:1 1 0; margin:0; text-align:right;
  }
  html.v7 #v7app #v7main #s-people #p-who-is-here > .v7-tabs + div:not([hidden]){
    display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px;
  }
  html.v7 #v7app #v7main #s-people #p-who-is-here > .v7-tabs + div > *{
    flex:0 0 100%; min-width:0; max-width:100%;
  }
  html.v7 #v7app #v7main #s-people #p-who-is-here > .v7-tabs + div > .fbar{
    flex:0 0 320px;
  }
  html.v7 #v7app #v7main #s-people #p-who-is-here > .v7-tabs + div > .zchips{
    flex:1 1 0; margin:0;
  }

  /* ---------- 3. Title row takes the search box ---------------------------
     Live cameras, Staff list, Alert history, Area activity:
     title · search (or floor picker) · action buttons on ONE row (were 2). */
  html.v7 #v7app #v7main #p-live,
  html.v7 #v7app #v7main #p-staff-list,
  html.v7 #v7app #v7main #p-security,
  html.v7 #v7app #v7main #p-popular-areas{
    flex-direction:row; flex-wrap:wrap; align-items:center;
  }
  html.v7 #v7app #v7main #p-live > *,
  html.v7 #v7app #v7main #p-staff-list > *,
  html.v7 #v7app #v7main #p-security > *,
  html.v7 #v7app #v7main #p-popular-areas > *{
    flex:0 0 100%; min-width:0; max-width:100%;
  }
  html.v7 #v7app #v7main #p-live > .ph,
  html.v7 #v7app #v7main #p-staff-list > .ph,
  html.v7 #v7app #v7main #p-security > .ph,
  html.v7 #v7app #v7main #p-popular-areas > .ph{
    display:contents;
  }
  html.v7 #v7app #v7main #p-live > .ph > div:first-child,
  html.v7 #v7app #v7main #p-staff-list > .ph > div:first-child,
  html.v7 #v7app #v7main #p-security > .ph > div:first-child,
  html.v7 #v7app #v7main #p-popular-areas > .ph > div:first-child{
    flex:0 0 auto; order:-3; margin-right:8px;
  }
  html.v7 #v7app #v7main #p-live > .fbar,
  html.v7 #v7app #v7main #p-staff-list > .fbar,
  html.v7 #v7app #v7main #p-security > .fbar{
    flex:0 1 320px; order:-2;
  }
  html.v7 #v7app #v7main #p-popular-areas > .fbar{
    flex:0 0 auto; order:-2;
  }
  html.v7 #v7app #v7main #p-live > .ph > .acts,
  html.v7 #v7app #v7main #p-staff-list > .ph > .acts,
  html.v7 #v7app #v7main #p-security > .ph > .acts,
  html.v7 #v7app #v7main #p-popular-areas > .ph > .acts{
    flex:0 0 auto; order:-1; margin-left:auto;
  }
  html.v7 #v7app #v7main #p-staff-list > .fbar + div{
    margin-top:0;
  }

  /* ---------- 4. Alerts ---------------------------------------------------
     Search box + status chips share ONE row (were 2). */
  html.v7 #v7app #v7main #p-alerts{
    flex-direction:row; flex-wrap:wrap; align-items:center;
  }
  html.v7 #v7app #v7main #p-alerts > *{
    flex:0 0 100%; min-width:0; max-width:100%;
  }
  html.v7 #v7app #v7main #p-alerts > .fbar{
    flex:0 0 320px;
  }
  html.v7 #v7app #v7main #p-alerts > .al-chips{
    flex:1 1 0;
  }

  /* ---------- 5. Camera health --------------------------------------------
     Status chips + search box share ONE row (were 2). */
  html.v7 #v7app #v7main #p-camera-setup{
    flex-direction:row; flex-wrap:wrap; align-items:center;
  }
  html.v7 #v7app #v7main #p-camera-setup > *{
    flex:0 0 100%; min-width:0; max-width:100%;
  }
  html.v7 #v7app #v7main #p-camera-setup > .chips{
    flex:1 1 0;
  }
  html.v7 #v7app #v7main #p-camera-setup > .chips + .fbar{
    flex:0 0 320px;
  }

  /* ---------- 6. Sales & counters -----------------------------------------
     Store / date / "Saved …" line moves up beside the Sales | Counters
     switch (was a row of its own); block spacing 14 px -> 10 px. */
  html.v7 #v7app #v7main #s-sales > .v5-views{
    float:left; margin-bottom:10px;
  }
  html.v7 #v7app #v7main #s-sales > .v5-ctx{
    min-height:44px; align-items:center; justify-content:flex-end; margin-bottom:10px;
  }
  html.v7 #v7app #v7main #s-sales > .v5-head{
    clear:both; margin-bottom:10px;
  }
  html.v7 #v7app #v7main #s-sales > .v5x-zero-box,
  html.v7 #v7app #v7main #s-sales > .v5-kwrap{
    margin-bottom:10px;
  }

  /* ---------- 7. Today ----------------------------------------------------
     Same blocks, same order; only the air between the numbered sections. */
  html.v7 #v7app #v7main #s-overview #ps81-home{
    gap:10px;
  }
  html.v7 #v7app #v7main #s-overview #ps81-home .p82-sec > .p81-sh{
    min-height:36px; margin-top:0;
  }
  html.v7 #v7app #v7main #s-overview #ps81-home .p82-sec > .p82-secb{
    margin-top:8px;
  }
}

/* ============================ PC (from 1200 px) ============================
   8. All pages: the group cards are packed top-to-bottom in the same five
   columns, so a short card no longer stretches to the height of the tallest
   card in its row. Card width, padding, colours and links unchanged.
   (This is the only block where a card's HEIGHT follows its content –
   delete this @media block if you want the stretched heights back.)        */
@media (min-width:1200px){
  html.v7 #v7app #v7main #s-v7more #ps82-dir{
    display:block; columns:5; column-gap:14px; margin-bottom:-14px;
  }
  html.v7 #v7app #v7main #s-v7more #ps82-dir > .p81-ex{
    break-inside:avoid; margin:0 0 14px;
  }
}

/* ============================ Phone (up to 767 px) ========================== */
@media (max-width:767px){
  /* ---------- 9. Camera health --------------------------------------------
     Check · Live · Detection log sit side by side in each camera card
     (were three stacked full-width buttons). Same height, same colours. */
  html.v7 #v7app #v7main #p-camera-setup .hgrid .hcard > .bar{
    flex-wrap:nowrap;
  }
  html.v7 #v7app #v7main #p-camera-setup .hgrid .hcard > .bar > .btn{
    flex:1 1 0; width:auto; min-width:0;
  }
}