/*
 * Staging visual parity layer.
 * These values mirror the current flarocity.net owner-dashboard shell while
 * leaving Laravel data, tracking, commands, and map marker rendering untouched.
 */
/* Use the exact same header geometry as the staging homepage. */
.watchtower-dashboard header.site-top .shell.nav{
  width:min(1920px,99vw)!important;
  max-width:none!important;
  min-height:76px!important;
  padding:4px 18px 4px 0!important;
  display:grid!important;
  grid-template-columns:minmax(330px,410px) minmax(0,1fr)!important;
  align-items:center!important;
  gap:4px!important;
}
.watchtower-dashboard header.site-top .brand.brand-banner{
  justify-self:start!important;
}
.watchtower-dashboard header.site-top .brand.brand-banner img{
  width:430px!important;
  min-width:430px!important;
  max-width:430px!important;
  height:auto!important;
  max-height:96px!important;
  object-fit:contain!important;
  filter:drop-shadow(0 0 16px rgba(208,44,255,.48))!important;
}
.watchtower-dashboard header.site-top .nav-image-links{
  min-width:0!important;
  width:100%!important;
  max-width:1244px!important;
  margin-left:auto!important;
  margin-right:0!important;
  justify-content:center!important;
  align-items:center!important;
  gap:16px!important;
  column-gap:16px!important;
  row-gap:8px!important;
  flex-wrap:nowrap!important;
  overflow:visible!important;
}
.watchtower-dashboard header.site-top .nav-image-links .image-btn.has-image{
  width:clamp(184px,9.5vw,210px)!important;
  min-width:clamp(184px,9.5vw,210px)!important;
  max-width:210px!important;
  height:58px!important;
  min-height:58px!important;
  max-height:58px!important;
  flex:0 0 clamp(184px,9.5vw,210px)!important;
}
.watchtower-dashboard header.site-top .nav-image-links .image-btn.has-image img{
  width:100%!important;
  height:100%!important;
  max-height:58px!important;
  object-fit:contain!important;
}
.watchtower-dashboard header.site-top .nav-image-links .nav-dropdown{
  width:clamp(184px,9.5vw,210px)!important;
  min-width:clamp(184px,9.5vw,210px)!important;
  max-width:210px!important;
  height:58px!important;
  min-height:58px!important;
  max-height:58px!important;
  flex:0 0 clamp(184px,9.5vw,210px)!important;
}
.watchtower-dashboard main.dashboard.shell{
  width:min(1900px,calc(100vw - 48px))!important;
  max-width:1900px!important;
  padding-top:8px!important;
  padding-bottom:42px!important;
}
.watchtower-dashboard main.dashboard > .hero{
  width:100%!important;
  max-width:100%!important;
  height:444px!important;
  min-height:444px!important;
  max-height:444px!important;
  padding:30px 50px 30px 154px!important;
  overflow:hidden!important;
  background:
    linear-gradient(90deg,rgba(0,0,0,.97) 0%,rgba(0,0,0,.91) 36%,rgba(2,1,20,.62) 60%,rgba(2,1,20,.16) 100%),
    url('/assets/flarocity/hero/hero-universal-cat-city-wide.webp') right center / auto 100% no-repeat!important;
}
.watchtower-dashboard main.dashboard > .hero:before,
.watchtower-dashboard main.dashboard > .hero:after{
  content:none!important;
  display:none!important;
}
.watchtower-dashboard main.dashboard > .hero h1{
  max-width:690px!important;
  margin:14px 0 18px!important;
  font-size:clamp(48px,4.6vw,78px)!important;
}
.watchtower-dashboard main.dashboard > .hero .lead{
  max-width:760px!important;
  font-size:15px!important;
}
html body.watchtower-dashboard main.dashboard.shell > section.hero > .actions.overview-hero-actions{
  display:flex!important;
  flex-direction:row!important;
  align-items:center!important;
  justify-content:flex-start!important;
  flex-wrap:nowrap!important;
  width:1120px!important;
  max-width:none!important;
  gap:48px!important;
  margin-top:24px!important;
}
html body.watchtower-dashboard main.dashboard.shell > section.hero > .actions.overview-hero-actions > .image-btn.has-image{
  flex:0 0 214px!important;
  width:214px!important;
  min-width:214px!important;
  max-width:214px!important;
  height:64px!important;
  min-height:64px!important;
  max-height:64px!important;
}
html body.watchtower-dashboard main.dashboard.shell > section.hero > .actions.overview-hero-actions > .image-btn.has-image > img{
  width:214px!important;
  min-width:214px!important;
  max-width:214px!important;
  height:64px!important;
  min-height:64px!important;
  max-height:64px!important;
  aspect-ratio:auto!important;
  object-fit:fill!important;
}
.watchtower-dashboard main.dashboard .overview-kpis{
  gap:12px!important;
}
.watchtower-dashboard main.dashboard .overview-kpi{
  min-height:112px!important;
  padding:16px 18px!important;
}
.watchtower-dashboard main.dashboard .overview-kpi b{
  font-size:31px!important;
}
.watchtower-dashboard main.dashboard .feature-module-actions{
  gap:14px!important;
}
.watchtower-dashboard main.dashboard .feature-module-actions .image-btn.has-image{
  width:154px!important;
  min-width:154px!important;
  max-width:154px!important;
  height:42px!important;
  min-height:42px!important;
  max-height:42px!important;
}
/* Keep checkbox/radio controls compact and attached to their labels. */
.watchtower-dashboard main.dashboard .v2-form label:has(> input[type="checkbox"]),
.watchtower-dashboard main.dashboard .v2-form label:has(> input[type="radio"]){
  display:inline-flex!important;
  flex-direction:row!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:10px!important;
  width:max-content!important;
  max-width:100%!important;
  min-height:28px!important;
  cursor:pointer!important;
}
.watchtower-dashboard main.dashboard .v2-form input[type="checkbox"],
.watchtower-dashboard main.dashboard .v2-form input[type="radio"]{
  appearance:auto!important;
  -webkit-appearance:auto!important;
  display:inline-block!important;
  flex:0 0 20px!important;
  width:20px!important;
  min-width:20px!important;
  max-width:20px!important;
  height:20px!important;
  min-height:20px!important;
  max-height:20px!important;
  margin:0!important;
  padding:0!important;
  accent-color:var(--green)!important;
  vertical-align:middle!important;
}
.watchtower-dashboard main.dashboard #access-gate .v2-form > button.btn.primary{
  justify-self:start!important;
  width:auto!important;
  min-width:220px!important;
  max-width:100%!important;
  min-height:46px!important;
  padding:0 28px!important;
}
.watchtower-dashboard main.dashboard .overview-locations .location-grid{
  grid-template-columns:repeat(5,minmax(0,1fr))!important;
  gap:14px!important;
}
.watchtower-dashboard main.dashboard .overview-locations .location-card{
  padding:15px!important;
}
.watchtower-dashboard main.dashboard .overview-locations .location-card .image-btn.has-image{
  width:154px!important;
  max-width:154px!important;
  height:40px!important;
  min-height:40px!important;
}
.watchtower-dashboard main.dashboard .wt-fixed-map-grid,
.watchtower-dashboard main.dashboard .wt-location-map-grid{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:16px!important;
  width:100%!important;
  min-width:0!important;
}
.watchtower-dashboard main.dashboard .wt-fixed-map-card{
  min-width:0!important;
  width:100%!important;
}
.watchtower-dashboard main.dashboard .wt-fixed-map-tile{
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  aspect-ratio:1/1!important;
}
.watchtower-dashboard main.dashboard .wt-fixed-map-tile img{
  max-width:none!important;
}

@media(max-width:1550px){
  .watchtower-dashboard header.site-top .shell.nav{
    grid-template-columns:1fr!important;
    justify-items:center!important;
    gap:8px!important;
    padding:4px 16px!important;
  }
  .watchtower-dashboard header.site-top .brand.brand-banner{
    justify-self:center!important;
  }
  .watchtower-dashboard header.site-top .brand.brand-banner img{
    width:min(430px,74vw)!important;
    min-width:0!important;
    max-width:430px!important;
  }
  .watchtower-dashboard header.site-top .nav-image-links{
    max-width:1180px!important;
    margin:0 auto!important;
    justify-content:center!important;
    flex-wrap:wrap!important;
    gap:10px 16px!important;
  }
  .watchtower-dashboard main.dashboard .overview-locations .location-grid{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }
  .watchtower-dashboard main.dashboard .wt-fixed-map-grid,
  .watchtower-dashboard main.dashboard .wt-location-map-grid{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
  }
}
@media(max-width:1180px){
  .watchtower-dashboard main.dashboard > .hero{
    padding-left:56px!important;
  }
  html body.watchtower-dashboard main.dashboard.shell > section.hero > .actions.overview-hero-actions{
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    width:100%!important;
    gap:18px!important;
  }
  html body.watchtower-dashboard main.dashboard.shell > section.hero > .actions.overview-hero-actions > .image-btn.has-image{
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    height:48px!important;
    min-height:48px!important;
    max-height:48px!important;
  }
  html body.watchtower-dashboard main.dashboard.shell > section.hero > .actions.overview-hero-actions > .image-btn.has-image > img{
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    height:48px!important;
    min-height:48px!important;
    max-height:48px!important;
  }
  .watchtower-dashboard main.dashboard .overview-locations .location-grid,
  .watchtower-dashboard main.dashboard .wt-fixed-map-grid,
  .watchtower-dashboard main.dashboard .wt-location-map-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}
@media(max-width:1120px){
  .watchtower-dashboard header.site-top .shell.nav{
    grid-template-columns:1fr!important;
    justify-items:center!important;
    gap:8px!important;
    padding:8px 16px!important;
  }
  .watchtower-dashboard header.site-top .brand.brand-banner{
    justify-self:center!important;
  }
  .watchtower-dashboard header.site-top .brand.brand-banner img{
    width:min(360px,72vw)!important;
    min-width:0!important;
    max-width:430px!important;
  }
  .watchtower-dashboard header.site-top .nav-image-links{
    width:100%!important;
    justify-content:center!important;
    flex-wrap:wrap!important;
    gap:9px 14px!important;
  }
  .watchtower-dashboard header.site-top .nav-image-links .image-btn.has-image{
    width:170px!important;
    min-width:170px!important;
    max-width:190px!important;
    height:52px!important;
    min-height:52px!important;
    max-height:52px!important;
    flex:1 1 170px!important;
  }
}
@media(max-width:700px){
  .watchtower-dashboard main.dashboard.shell{
    width:calc(100vw - 24px)!important;
  }
  .watchtower-dashboard main.dashboard > .hero{
    height:auto!important;
    min-height:auto!important;
    max-height:none!important;
    padding:26px 18px 26px 24px!important;
  }
  .watchtower-dashboard header.site-top .nav-image-links .image-btn.has-image{
    width:calc(50% - 7px)!important;
    min-width:138px!important;
    max-width:none!important;
    height:48px!important;
    min-height:48px!important;
    max-height:48px!important;
    flex:1 1 calc(50% - 7px)!important;
  }
  html body.watchtower-dashboard main.dashboard.shell > section.hero > .actions.overview-hero-actions{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  html body.watchtower-dashboard main.dashboard.shell > section.hero > .actions.overview-hero-actions > .image-btn.has-image{
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
  }
  .watchtower-dashboard main.dashboard .overview-locations .location-grid,
  .watchtower-dashboard main.dashboard .wt-fixed-map-grid,
  .watchtower-dashboard main.dashboard .wt-location-map-grid{
    grid-template-columns:1fr!important;
  }
  .watchtower-dashboard main.dashboard .wt-fixed-map-card{
    max-width:460px!important;
    margin:0 auto!important;
  }
}