/* v7 glue: loads after v7-base.css (the prototype design system, copied verbatim from apps/redesign/assets/base.css).
   The classic console CSS sits in @layer legacy (v7-shell.js), so these unlayered rules win. */
@layer legacy, v7reset;

/* classic frame stays in the DOM for its code, never on screen */
html.v7 #app.v7-classic{display:none!important}
html.v7 #mobtabs{display:none!important}
html.v7 .screen{display:none}
html.v7 .screen.on{display:block}
html.v7 #v7main>.screen.on>.page{display:flex}

/* legacy element rules (h1, table, button, input ...) must not reach v7 pages; embedded classic widgets opt out with .v7-legacy */
@layer v7reset{
  html.v7 :is(#v7app, .sheet.v7),
  html.v7 :is(#v7app, .sheet.v7) *:not(svg *, .v7-legacy, .v7-legacy *){all:revert}
}
}

/* top bar store / date pickers (the console's own selects) */
.v7-scope{display:inline-flex;gap:6px}
.v7-scope select{height:30px;border:1px solid var(--line-2);border-radius:8px;background:var(--surface);font-size:var(--fs-sm);padding:0 8px;max-width:160px}
.v7-scope select.hide{display:none}
/* phones: the same two pickers in a row above the page (v7-shell placeScope) */
.v7-scope-m{display:none}
@media (max-width:767px){.v7-scope-m{display:flex;gap:8px;padding:10px 16px 0}.v7-scope-m select{flex:1;min-width:0;height:40px;border:1px solid var(--line-2);border-radius:10px;background:var(--surface);color:var(--ink);font-size:16px;padding:0 10px}.v7-scope-m select.hide{display:none}}

/* photo cells: the console's <img>/initials inside prototype .ph-img boxes */
.ph-img>img,.ph-img>.av,.ph-img>.facebox{width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block}
.v7p .ph-img.has{background:none}

/* embedded classic widgets (tracker, site map, detection-log table, live video) keep their own sizing */
.v7p .v7-legacy{min-width:0}

/* loading / empty states inside v7 cards */
.v7p .v7-wait{color:var(--ink-3);font-size:var(--fs-sm);padding:10px 0}

/* hidden attribute always wins over component display rules */
html.v7 [hidden],html.v7 .v7app .hide{display:none!important}

/* embedded classic widgets keep their own button / input fonts and colours (v7-base sets font/color:inherit) */
.v7-legacy :is(button,input,select,textarea){font:revert-layer;color:revert-layer}

/* owner rule: never cut text off. Sub-lines and row details wrap instead of ending in "…" */
.v7p :is(.kpi .s, .row .t span, .row .t b, .card-h h2){white-space:normal;overflow:visible;text-overflow:clip}

/* a summary figure that opens nothing does not look clickable */
.v7p .kpi.static{cursor:default}
.v7p .kpi.static:hover{box-shadow:none;transform:none}

/* a figure with its unit ("1 of 13 staff") wraps inside its card instead of running out of it */
.v7p .kpi .v{flex-wrap:wrap;min-width:0;overflow-wrap:anywhere}
.v7p .kpi .v small{white-space:normal}

/* live tile status ("Connecting…", "Tap to retry") sits in the middle band, never over the camera name and counts */
.v7p .cam .stream-err{inset:auto 0;top:34%;padding:4px 10px;background:rgba(11,18,17,.55);border-radius:6px;margin:0 18%}

/* ---- Today review fixes (owner 28-10) ---- */
/* page background behind everything, in both themes (no dark band under short pages) */
html.v7{background:var(--bg)}
html.v7 body{min-height:100%}
/* Night: the console's Day / Night choice (html[data-theme=night]) applies to the new design too */
html.v7[data-theme="night"],html.v7[data-theme="night"] body{
  --bg:#0f1615;--surface:#17201e;--sunk:#111a18;--line:#26332f;--line-2:#34443f;
  --ink:#e6efed;--ink-2:#bccac6;--ink-3:#8d9d99;--brand:#1f8a72;--brand-2:#173a33;--brand-ink:#fff;
  --ok:#52c48f;--ok-bg:#14382a;--warn:#e3a84e;--warn-bg:#3a2c12;--bad:#f07267;--bad-bg:#3e1d1a;--info:#79a7ea;--info-bg:#17263d;
  color-scheme:dark}
html.v7[data-theme="night"] body{background:var(--bg);color:var(--ink)}
/* card titles: icon and words side by side with a gap */
.v7p .card-h h2,.v7p .card>h2{display:flex;align-items:center;gap:6px;min-width:0}
/* the big green card: its smaller words readable on green */
.v7p .kpi.hero .v small{color:rgba(255,255,255,.88)}
/* cards keep their own height (no stretched empty space beside a taller neighbour) */
.v7p .grid2,.v7p .grid3{align-items:start}
/* side panels use the full height on tablet / desktop */
@media (min-width:768px){.sheet.v7{max-height:none;height:100%}}
/* "may be an employee" note: the new look, small, above the bottom bar on phones, below open panels */
html.v7 #ssPop.sspop{background:var(--surface);color:var(--ink);border:1px solid var(--line-2);border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.18);z-index:45;max-width:300px;padding:12px 14px;font:var(--fs)/1.4 var(--f)}
html.v7 #ssPop.sspop b{color:var(--ink);font-size:var(--fs-md)}
html.v7 #ssPop.sspop span{color:var(--ink-3);font-size:var(--fs-sm)}
html.v7 #ssPop .btn{height:30px;padding:0 10px;border-radius:8px;border:1px solid var(--line-2);background:var(--surface);color:var(--ink);font-size:var(--fs-sm)}
html.v7 #ssPop .btn.pri{background:var(--brand);border-color:var(--brand);color:#fff}
@media (max-width:767px){html.v7 #ssPop.sspop{left:12px;right:12px;bottom:calc(76px + env(safe-area-inset-bottom,0px));max-width:none}}

/* the row whose person card is open: marked in the page colours (night mode too), text stays readable */
.v7p tr.v6-open-row>td{background:var(--brand-2);color:var(--ink)}

/* ---- Live cameras review fixes (owner 28-10) ---- */
/* wall: 2 per row on phone, 3 on tablet, 4 on desktop (160 px tiles were too small to see anything) */
.v7p .cams.wall{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:768px){.v7p .cams.wall{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1200px){.v7p .cams.wall{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* the picture fills its tile (no black side bars) */
.v7p .cam video,.v7p .cam img.snap{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* names and counts stay readable over a bright picture */
.v7p .cam::after{content:"";position:absolute;left:0;right:0;bottom:0;height:46%;background:linear-gradient(to top,rgba(0,0,0,.72),rgba(0,0,0,0));pointer-events:none;z-index:1}
.v7p .cam .bl,.v7p .cam .br,.v7p .cam .q,.v7p .cam .tl,.v7p .cam .tr{z-index:2;text-shadow:0 1px 2px rgba(0,0,0,.6)}

/* phone: the staff note is one compact strip above the bottom bar (title + buttons on one row, no long sentence) */
@media (max-width:767px){
  html.v7 #ssPop.sspop{display:none;padding:8px 10px;border-radius:10px}
  html.v7 #ssPop.sspop.on{display:flex;align-items:center;gap:8px}
  html.v7 #ssPop.sspop b{flex:1;min-width:0;font-size:var(--fs);margin:0}
  html.v7 #ssPop.sspop span{display:none}
  html.v7 #ssPop.sspop>div{display:flex;gap:6px;flex:none}
}

/* every face picture in a v7 list: the portrait crop the store system sends (51 x 68, as the classic console showed it),
   whole picture visible, never squeezed into a small circle (owner 28-10) */
html.v7 #v7main .v7p :is(td.c-img,.row,.ptile,.pcard,.wl) > :is(.ph-img:not(.snap.wide),.phw,.phi,.av,.wlph,.cuph),html.v7 #v7main .v7p :is(td.c-img,.row,.ptile,.pcard,.wl) > :is(.ph-img,.phw,.av,.wlph,.cuph) img,html.v7 #v7main .v7p td.c-img img{width:51px!important;height:68px!important;border-radius:8px!important;flex:none}
html.v7 #v7main .v7p :is(td.c-img,.row,.ptile,.pcard,.wl) img{object-fit:contain!important;background:var(--sunk)}
html.v7 #v7main .v7p :is(td.c-img,.row) > :is(.ph-img,.cuph,.av){display:grid;place-items:center;position:relative;overflow:hidden;font-size:var(--fs-sm);color:var(--ink-3);background:var(--sunk)}
html.v7 #v7main .v7p :is(td.c-img,.row) > :is(.ph-img,.cuph,.av) img{position:absolute;inset:0}
html.v7 #v7main .v7p td.c-img{width:62px}

/* a phone-only detail inside a name cell stays off on tablet / desktop (the table has that column) */
@media (min-width:768px){.v7p .who .only-m{display:none!important}}

/* late-figures / cameras-offline: one small chip in the top bar (owner 28-10), never a long banner in the page */
html.v7 .v5x-late{display:none!important}
.v7warn{display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:999px;border:1px solid var(--warn);background:var(--warn-bg);color:var(--warn);font:600 var(--fs-xs)/1 var(--f);white-space:nowrap;cursor:pointer}
@media (max-width:767px){.v7warn{height:24px;padding:0 8px}}

/* owner 28-10: no descriptions or explanations on the pages - page titles stand alone, notes and help lines go
   (the words that change a number's meaning stay in the labels themselves) */
.v7p .ph > div:first-child > p{display:none}
.v7p p.note,.v7p .note:not(.keep),.v7p p.muted.help,.v7p .card > p.muted:not(.keep){display:none}

/* iPhone 28-10: something off-screen (a closed drawer, toast or live region) widened the page to 414 on a 390 screen
   and WKWebView let it pan sideways; the page never scrolls sideways on phones and tablets */
@media (max-width:1023px){
  html.v7{overflow-x:hidden}
  html.v7, html.v7 body{overflow-x:clip;max-width:100%}
}

/* Movement Tracker: the replay fills the map box (its engine stylesheet is unlayered and beat the box's own
   position:absolute, so the plan was drawn in a 180 px strip); phones get a taller box (owner 28-10) */
html.v7 .mh-app #mhStage{position:absolute!important;inset:0!important;height:auto!important}
@media (max-width:767px){html.v7 .mh-app .mh-map{height:58vh!important;min-height:340px}}

/* plain words: the staff note is just its title and two buttons */
html.v7 #ssPop.sspop span{display:none!important}

/* the sign-in card and the loading screen stand alone: the v7 frame hides behind them (iPhone 28-10: the card showed
   on top of a working dashboard) */
html.v7 body:has(#authwrap:not(.hide)) #v7app,html.v7 body:has(#boot:not(.hide)) #v7app{display:none!important}
/* phone top bar never runs off the right edge: the store name shortens, the warning chip is icon + number */
#v7app .top .site{min-width:0;flex:1 1 auto;overflow:hidden}
#v7app .top .site b,#v7app .top .site span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#v7app .top>.icon-btn,#v7app .top>.v7warn{flex:none}
#v7app>.top{min-width:0;max-width:100%}
@media (max-width:400px){#v7app .top{gap:6px;padding:8px 10px}#v7app .top>.icon-btn{width:32px;height:32px}#v7app .top .grow{display:none}}
#v7main{min-width:0;max-width:100vw}
@media (max-width:767px){#v7app{max-width:100vw;overflow-x:clip}}
/* Loss prevention in the v7 frame (owner 29-10: restyle to the new design, ChatGPT reference loss_prevention_current/).
   The classic screen keeps its markup and actions (.v7-legacy lets loss-prevention.css apply); this layer gives it the
   v7 look: no context line or subtitle, one short not-ready banner, the same tabs, filters and buttons as the other pages, v7 cards and chips. */
html.v7 #s-loss .v5-ctx,html.v7 #s-loss .v5-head p{display:none!important}
html.v7 #s-loss .v5-head h1{font-size:24px;font-weight:700;letter-spacing:-.01em;margin:4px 0 12px}
html.v7 #s-loss .lp-shell{max-width:none}
html.v7 #s-loss .lp-banner.lp-nr{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:14px 16px;border-radius:12px;border:1px solid #f0d9a8;background:var(--warn-bg,#fbf0dc)}
html.v7 #s-loss .lp-nr b{color:var(--warn,#a8670f);font-size:14px}
html.v7 #s-loss .lp-nr-chips{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 2px}
html.v7 #s-loss .lp-nr-chips span{font-size:12px;font-weight:600;color:var(--warn,#a8670f);background:#fff;border:1px solid #f0d9a8;border-radius:8px;padding:4px 8px}
html.v7 #s-loss .lp-next{margin:6px 0 0!important;font-size:12px;font-weight:700;color:var(--warn,#a8670f)}
html.v7 #s-loss .lp-nr .btn{flex:none;min-height:36px;border-radius:10px;background:var(--surface);border:1px solid var(--line-2)}
/* filters and buttons exactly as the other v7 pages (owner 29-10: "icons tabs are not uniform like other pages") */
html.v7 #s-loss .v6-frow select{font-size:13px!important;height:34px!important;min-height:0!important;border:1px solid var(--line-2)!important;border-radius:10px!important;background:var(--surface)!important;padding:0 8px!important;color:var(--ink)!important;width:auto!important;max-width:200px}
html.v7 #s-loss .lp-shell .btn,html.v7 #s-loss .v6-fbtn{height:34px!important;min-height:0!important;border:1px solid var(--line-2)!important;border-radius:10px!important;background:var(--surface)!important;color:var(--ink)!important;font-size:13px!important;font-weight:500!important;padding:0 12px!important;box-shadow:none!important;display:inline-flex;align-items:center;gap:6px}
html.v7 #s-loss .md-panel,html.v7 #s-loss .lp-camera,html.v7 #s-loss .lp-status{border:1px solid var(--line);border-radius:12px;background:var(--surface);box-shadow:none}
html.v7 #s-loss .lp-role-checks{display:flex;flex-wrap:wrap;gap:6px}
html.v7 #s-loss .lp-role-checks label{border:1px solid var(--line-2);border-radius:8px;padding:6px 10px;font-size:13px;min-height:36px;display:inline-flex;align-items:center;gap:6px}
html.v7 #s-loss .lp-modes label,html.v7 #s-loss .lp-modes>*{border-radius:12px}
@media (max-width:767px){
  html.v7 #s-loss .lp-banner.lp-nr{flex-direction:column}
  html.v7 #s-loss .lp-nr .btn{align-self:stretch;min-height:44px}
  html.v7 #s-loss .lp-status-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}

/* owner 29-10: Search joins the phone bottom bar - as many equal columns as there are visible buttons (was 5 fixed) */
#v7app .bnav{grid-template-columns:none!important;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}
#v7app .bnav button{min-width:0}
#v7app .bnav button .ic-wrap{width:min(52px,100%)}

/* owner 29-10: the top store / day pickers smaller (were 34 px, the page filters' size) */
#v7scope .sel,#v7scopem .sel{height:28px!important;font-size:12px!important;padding:0 6px!important;border-radius:8px!important}
@media (max-width:767px){#v7scopem .sel{height:32px!important;font-size:16px!important}}
/* owner 05-11: best picture per camera under each visit path (Visits > Paths) */
#v7app .vbp{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
#v7app .vbp .ph-img{position:relative;width:64px;height:72px;overflow:hidden;border-radius:6px}
#v7app .vbp .ph-img img{width:100%;height:100%;object-fit:cover}
#v7app .vbp em{position:absolute;left:0;right:0;bottom:0;font:500 10px/1.3 inherit;font-style:normal;color:#fff;background:rgba(0,0,0,.55);padding:1px 3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}