/* VersaPoint system-wide responsive stability patch - 2026-06-13 */
:root{
  --vp-system-max:1440px;
  --vp-system-gap:clamp(12px,1.4vw,22px);
  --vp-system-radius:clamp(18px,1.6vw,28px);
}
html,body{max-width:100%;overflow-x:hidden!important;}
body{min-width:320px;}
*,*::before,*::after{box-sizing:border-box;}
main,section,article,aside,header,footer,nav,form,fieldset,div{min-width:0;}
img,video,canvas,iframe{display:block;max-width:100%;height:auto;}
svg{max-width:100%;}
button,input,select,textarea,a{max-width:100%;}
h1,h2,h3,h4,p,strong,span,b,small,label{overflow-wrap:break-word;word-break:normal;}

/* Keep all decorative artwork inside its own section. */
.section-frame,
#home,#about,#why,#pricing,#contact,
.admin-overview-hero,.vp-hero,.vp-page-head,.vp-card{
  position:relative;
  isolation:isolate;
}
.section-frame,#home,#about,#why,#pricing,#contact,.admin-overview-hero,.vp-hero,.vp-page-head{overflow:hidden!important;}
.section-frame > .pointer-events-none,
#home > .pointer-events-none,
#pricing > .pointer-events-none{
  inset:0!important;
  width:100%!important;
  max-width:100%!important;
  overflow:hidden!important;
  pointer-events:none!important;
}

/* Public header: prevent nav, logo and action buttons from colliding at browser zoom. */
.site-header{
  width:min(100%,var(--vp-system-max))!important;
  min-height:72px;
  gap:clamp(10px,1vw,18px)!important;
}
.site-header>*{min-width:0;}
.site-header>nav{flex:1 1 auto;justify-content:center;min-width:0;}
.site-header>nav a{flex:0 0 auto;white-space:nowrap!important;}
.site-header>div{flex:0 0 auto;}
.site-header details>div{max-width:calc(100vw - 24px)!important;}
@media(max-width:1279px){
  .site-header>nav{display:none!important;}
  .site-header>details{display:block!important;}
}
@media(min-width:1280px){
  .site-header>details{display:none!important;}
}
@media(max-width:760px){
  .site-header{padding-inline:12px!important;}
  .site-header>div{display:none!important;}
}

/* Home page fallback and containment. This also protects the page if Tailwind loads slowly. */
#home>.mx-auto.grid{
  width:100%!important;
  max-width:var(--vp-system-max)!important;
  grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr)!important;
  align-items:center!important;
}
#home>.mx-auto.grid>div{min-width:0;width:100%;}
#home .vp-home-dashboard-frame,
#home .vp-home-dashboard-shell,
#home .vp-home-dashboard-main{width:100%;max-width:100%;min-width:0;}
#home .vp-home-dashboard-shell>*{min-width:0;}
#home .vp-home-dashboard-frame svg{display:block;width:100%;max-width:100%;}
#home .vp-home-metric-card strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;}
@media(max-width:1180px){
  #home>.mx-auto.grid{grid-template-columns:1fr!important;min-height:auto!important;padding-top:24px!important;}
  #home>.mx-auto.grid>div{max-width:760px;margin-inline:auto;}
}
@media(max-width:640px){
  #home .vp-home-dashboard-shell{display:block!important;}
  #home .vp-home-dashboard-main{padding:14px!important;}
}

/* Customer portal: stable grid, equal cards, protected icons and readable text. */
.vp-customer-app{
  width:100%!important;
  max-width:100%!important;
  grid-template-columns:minmax(0,1fr) clamp(270px,20vw,310px)!important;
  gap:var(--vp-system-gap)!important;
  align-items:start!important;
  overflow-x:hidden!important;
}
.vp-customer-main{width:100%;max-width:100%;min-width:0!important;overflow:visible!important;}
.vp-customer-sidebar{width:100%!important;max-width:310px!important;min-width:0!important;}
.vp-customer-topbar,.vp-top-user,.vp-bell-wrap{min-width:0;}
.vp-top-user strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.vp-hero{
  width:100%!important;
  grid-template-columns:minmax(76px,96px) minmax(0,1fr) minmax(220px,280px)!important;
  gap:clamp(18px,2vw,34px)!important;
  align-items:center!important;
}
.vp-hero>*{min-width:0;}
.vp-hero-art,.vp-icon-box,.vp-kpi-icon,.vp-side-icon{
  flex:0 0 auto!important;
  position:relative!important;
  z-index:1!important;
}
.vp-hero h1,.vp-page-head h1{font-size:clamp(28px,3vw,48px)!important;line-height:1.2!important;}
.vp-hero p,.vp-page-head p{line-height:1.75!important;}
.vp-hero-status{min-width:0!important;max-width:100%!important;}
.vp-hero-status strong{white-space:normal!important;}
.vp-action-grid,.vp-subscriber-grid,.vp-upgrade-grid{
  width:100%!important;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr))!important;
  gap:var(--vp-system-gap)!important;
  align-items:stretch!important;
}
.vp-card,.vp-start-card,.vp-reports-card,.vp-demo-card,.vp-upgrade-choice{
  min-width:0!important;
  height:100%!important;
}
.vp-card,.vp-start-card,.vp-reports-card,.vp-demo-card{
  display:flex!important;
  flex-direction:column!important;
}
.vp-card-head{
  display:flex!important;
  align-items:flex-start!important;
  justify-content:flex-start!important;
  gap:14px!important;
  min-width:0!important;
}
.vp-card-head>*{min-width:0;}
.vp-card-head .vp-icon-box{flex:0 0 auto!important;}
.vp-card-head h2{margin:0!important;line-height:1.3!important;font-size:clamp(20px,1.8vw,30px)!important;}
.vp-erp-visual,.vp-payment-visual,.vp-report-visual{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  overflow:hidden!important;
  flex:0 0 auto!important;
}
.vp-card .vp-btn,.vp-start-card .vp-btn,.vp-reports-card .vp-btn,.vp-demo-card .vp-btn{
  width:100%!important;
  min-height:48px!important;
  margin-top:auto!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
  white-space:normal!important;
  line-height:1.35!important;
}
.vp-price-grid,.vp-mini-grid,.vp-kpi-row,.vp-reports-strip,.vp-renewal-main,.vp-current-layout{
  width:100%!important;
  min-width:0!important;
}
.vp-kpi-row article,.vp-price-grid>*,.vp-mini-grid>*{min-width:0!important;}
.vp-kpi-row strong,.vp-price-grid strong,.vp-mini-grid strong,.vp-selected-total{
  max-width:100%!important;
  font-size:clamp(15px,1.35vw,24px)!important;
  line-height:1.25!important;
  overflow-wrap:anywhere!important;
}
.vp-bell-menu{
  position:fixed!important;
  top:92px!important;
  left:clamp(10px,1.5vw,22px)!important;
  right:auto!important;
  width:min(420px,calc(100vw - 20px))!important;
  max-height:calc(100vh - 112px)!important;
  overflow:auto!important;
  overscroll-behavior:contain;
  z-index:2147483000!important;
}
@media(max-width:1280px){
  .vp-customer-app{grid-template-columns:1fr!important;grid-template-areas:"sidebar" "main"!important;}
  .vp-customer-sidebar{position:relative!important;top:auto!important;max-width:none!important;height:auto!important;}
}
@media(max-width:900px){
  .vp-hero{grid-template-columns:1fr!important;text-align:center!important;padding:24px!important;}
  .vp-hero-art{margin-inline:auto!important;}
  .vp-hero-status{margin-inline:auto!important;width:min(100%,440px)!important;}
  .vp-kpi-row,.vp-reports-strip,.vp-renewal-main,.vp-current-layout{grid-template-columns:1fr!important;}
}
@media(max-width:640px){
  .vp-customer-app{padding:8px!important;}
  .vp-customer-topbar{padding:10px 12px!important;}
  .vp-card,.vp-start-card,.vp-reports-card,.vp-demo-card{padding:16px!important;border-radius:22px!important;}
  .vp-card-head{gap:10px!important;}
  .vp-bell-menu{top:76px!important;left:8px!important;width:calc(100vw - 16px)!important;}
}

/* Admin portal: symmetric statistic cards, safe text and contained popups. */
body.admin-body .admin-layout,
body.admin-body .admin-workspace,
body.admin-body .admin-dashboard-exact{width:100%;max-width:100%;min-width:0!important;overflow-x:hidden;}
body.admin-body .admin-layout>.grid{
  grid-template-columns:clamp(280px,20vw,320px) minmax(0,1fr)!important;
  align-items:start!important;
}
body.admin-body .admin-side-panel{width:100%!important;max-width:320px!important;min-width:0!important;}
body.admin-body .admin-workspace{min-width:0!important;}
body.admin-body .admin-hero-bar,
body.admin-body .admin-top-actions,
body.admin-body .admin-page-title{min-width:0!important;}
body.admin-body .admin-page-title{line-height:1.25!important;overflow-wrap:anywhere;}
body.admin-body .admin-stat-row{
  width:100%!important;
  grid-template-columns:repeat(5,minmax(0,1fr))!important;
  gap:clamp(12px,1.2vw,18px)!important;
  align-items:stretch!important;
}
body.admin-body .admin-stat-card{min-width:0!important;height:100%!important;overflow:hidden!important;}
body.admin-body .admin-stat-card .stat-top{min-width:0!important;}
body.admin-body .admin-stat-card .stat-icon{flex:0 0 auto!important;}
body.admin-body .admin-stat-card p,
body.admin-body .admin-stat-card small{min-width:0!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;}
body.admin-body .admin-stat-card strong{
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  font-size:clamp(23px,2vw,36px)!important;
  line-height:1.12!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  word-break:normal!important;
  letter-spacing:-.025em!important;
}
body.admin-body .admin-overview-hero,
body.admin-body .dashboard-analytics-grid,
body.admin-body .dashboard-analytics-grid.secondary{
  width:100%!important;
  min-width:0!important;
}
body.admin-body .admin-overview-hero>*{min-width:0!important;}
body.admin-body .analytics-card svg,
body.admin-body .renewal-card svg,
body.admin-body .admin-overview-hero svg{display:block;max-width:100%!important;}
body.admin-body .table-wrap{width:100%!important;max-width:100%!important;overflow:auto!important;}
body.admin-body .notification-panel{
  position:fixed!important;
  top:92px!important;
  right:clamp(10px,1.5vw,24px)!important;
  left:auto!important;
  width:min(430px,calc(100vw - 20px))!important;
  max-height:calc(100vh - 112px)!important;
  overflow:auto!important;
  overscroll-behavior:contain;
  z-index:2147483000!important;
}
@media(max-width:1500px){
  body.admin-body .admin-stat-row{grid-template-columns:repeat(3,minmax(0,1fr))!important;}
}
@media(max-width:1180px){
  body.admin-body .admin-layout>.grid{grid-template-columns:1fr!important;}
  body.admin-body .admin-side-panel{display:none!important;}
  body.admin-body .admin-stat-row{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
}
@media(max-width:680px){
  body.admin-body .admin-workspace{padding:12px!important;}
  body.admin-body .admin-stat-row{grid-template-columns:1fr!important;}
  body.admin-body .admin-stat-card strong{font-size:clamp(24px,8vw,34px)!important;}
  body.admin-body .notification-panel{top:76px!important;right:8px!important;width:calc(100vw - 16px)!important;}
}

/* Forms and tables stay readable at zoom and small widths. */
.form-grid,.admin-grid,.vp-form,.vp-renewal-form{min-width:0!important;}
input,select,textarea{width:100%;min-width:0;}
.table-wrap{max-width:100%;overflow:auto;-webkit-overflow-scrolling:touch;}
.table-wrap table{max-width:none;}

/* Reduced motion keeps layout stable for users who zoom or use accessibility settings. */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important;}
}


/* Unified VersaPoint badge across the whole system. Square sizing keeps zoom and responsive scaling symmetrical. */
.brand-logo-link{
  flex:0 0 auto!important;
  width:auto!important;
  max-width:none!important;
  overflow:visible!important;
}
.brand-logo-shell,
.brand-logo-shell-light,
.brand-logo-shell-dark{
  display:grid!important;
  place-items:center!important;
  width:clamp(54px,4.8vw,72px)!important;
  height:clamp(54px,4.8vw,72px)!important;
  min-width:0!important;
  min-height:0!important;
  aspect-ratio:1!important;
  padding:0!important;
  overflow:hidden!important;
  border-radius:clamp(15px,1.5vw,22px)!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}
.brand-logo-img,
.brand-logo-img-light,
.brand-logo-img-dark{
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  max-height:none!important;
  aspect-ratio:1!important;
  object-fit:contain!important;
  object-position:center!important;
  border-radius:inherit!important;
  filter:drop-shadow(0 10px 20px rgba(2,11,29,.22))!important;
  transform:none!important;
}
.admin-side-panel .brand-logo-shell{width:76px!important;height:76px!important;border-radius:23px!important;}
.admin-hero-bar .brand-logo-shell{width:62px!important;height:62px!important;border-radius:19px!important;}
.auth-panel .brand-logo-shell{width:76px!important;height:76px!important;border-radius:23px!important;}
.auth-brand-shell{width:clamp(116px,13vw,168px)!important;aspect-ratio:1!important;height:auto!important;overflow:hidden!important;border-radius:clamp(28px,3vw,42px)!important;}
.auth-brand-image{display:block!important;width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;object-fit:contain!important;aspect-ratio:1!important;}
@media(max-width:640px){
  .brand-logo-shell,.brand-logo-shell-light,.brand-logo-shell-dark{width:52px!important;height:52px!important;border-radius:16px!important;}
  .admin-side-panel .brand-logo-shell,.admin-hero-bar .brand-logo-shell,.auth-panel .brand-logo-shell{width:56px!important;height:56px!important;border-radius:17px!important;}
}
.site-logo-preview img{
  width:120px!important;
  height:120px!important;
  max-width:120px!important;
  max-height:120px!important;
  aspect-ratio:1!important;
  object-fit:contain!important;
  border-radius:24px!important;
}