/* REZO LASH — responsive containment layer
   Focus: iPad/tablet, mobile and laptop without horizontal page overflow. */
:root{--rezo-page-gutter:clamp(10px,2.2vw,28px)}
html{max-width:100%;overflow-x:clip;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{max-width:100%;overflow-x:clip}
*,*::before,*::after{box-sizing:border-box}
img,video,svg,canvas{max-width:100%;height:auto}
main,section,article,aside,header,footer,nav,form,fieldset,div{min-width:0}
p,h1,h2,h3,h4,h5,h6,span,small,strong,b,a,label{overflow-wrap:break-word}
input,select,textarea,button{max-width:100%;font-family:inherit}
input,select,textarea{min-width:0}
table{max-width:none}

/* Fixed header: stay compact instead of growing into multiple crowded rows. */
.site-header{max-width:100vw!important}
.site-header .brand{min-width:0!important}
.site-header nav{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.site-header nav::-webkit-scrollbar{display:none}

/* Shared shells/cards */
.rezo-step-shell,.bookings-shell,.loyalty-shell,.customers-shell,.content-admin-shell,
.schedule-shell,.finance-report-shell,.security-shell,.reviews-admin,.admin-shell{
  width:min(100%,var(--rezo-shell-max,1540px));
  max-width:100%;
  margin-inline:auto;
  min-width:0;
}
.rezo-flow-card,.rezo-summary-card,.bookings-card,.panel,.customers-card,
.content-admin-card,.finance-report-card,.security-card,.review-admin-card{
  min-width:0;
  max-width:100%;
}
.rezo-form-grid>*,.rezo-options>*,.rezo-mode-grid>*,.rezo-slots>*,
.customer-stats>*,.booking-meta>*,.stats-grid>*,.customer-grid>*{min-width:0}

/* Tables: keep the page fixed and let only the table region scroll. */
.admin-table,.customers-card>div[style*="overflow"],.finance-report-table-wrap,
.table-scroll,.responsive-table{
  max-width:100%;
  overflow-x:auto!important;
  overscroll-behavior-inline:contain;
  -webkit-overflow-scrolling:touch;
}
.admin-table table,.customers-table{width:max-content;min-width:100%}

/* Tablet / iPad */
@media (max-width:1180px){
  :root{--rezo-page-gutter:clamp(12px,2vw,22px)}
  .site-header{padding-inline:var(--rezo-page-gutter)!important}
  .site-header nav{
    flex-wrap:nowrap!important;
    justify-content:flex-start!important;
    overflow-x:auto!important;
    padding:2px 2px 5px!important;
    gap:7px!important;
    scroll-snap-type:x proximity;
  }
  .site-header nav a,.site-header nav button{
    flex:0 0 auto!important;
    white-space:nowrap!important;
    scroll-snap-align:center;
  }
  .rezo-flow-grid{grid-template-columns:minmax(0,1fr) minmax(290px,34%)}
  .customer-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .booking-meta{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* iPad portrait and compact tablets */
@media (max-width:980px){
  .rezo-flow-grid{grid-template-columns:1fr!important}
  .rezo-summary-card{position:static!important;order:2}
  .rezo-flow-card{order:1}
  .rezo-form-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .rezo-options{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .rezo-mode-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .rezo-slots{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .bookings-hero-inner{grid-template-columns:1fr!important}
  .bookings-count-badge{width:100%!important;min-height:78px!important}
  .bookings-login{grid-template-columns:1fr 1fr!important}
  .bookings-login .primary{grid-column:1/-1}
  .loyalty-shell{grid-template-columns:1fr!important}
}

/* Phones */
@media (max-width:640px){
  :root{--rezo-page-gutter:10px}
  .site-header{
    padding:4px 8px 6px!important;
    min-height:76px!important;
  }
  .site-header nav{
    justify-content:flex-start!important;
    gap:6px!important;
    padding-bottom:4px!important;
  }
  .site-header nav a,.site-header nav button{
    font-size:11px!important;
    padding:6px 10px!important;
  }
  .brand-logo,.brand img{max-width:min(62vw,150px)!important}
  .rezo-step-page,.bookings-page,.loyalty-page,.customers-page,
  .schedule-page,.security-page,.finance-report-shell,.reviews-admin{
    padding-left:10px!important;
    padding-right:10px!important;
  }
  .rezo-flow-card,.rezo-summary-card,.bookings-card,.panel,.customers-card,
  .security-card,.review-admin-card{border-radius:22px!important}
  .rezo-form-grid,.rezo-options,.rezo-mode-grid,.customer-stats,
  .booking-meta,.stats-grid,.customer-grid{grid-template-columns:1fr!important}
  .rezo-slots{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .rezo-week,.rezo-days{gap:4px!important}
  .rezo-calendar-head{gap:7px!important}
  .rezo-calendar-nav{padding:8px 10px!important}
  .rezo-selection-banner{flex-direction:column!important;align-items:stretch!important}
  .rezo-selection-banner a{white-space:normal!important;text-align:center}
  .rezo-session-note{flex-direction:column!important;align-items:flex-start!important}
  .bookings-login{grid-template-columns:1fr!important}
  .bookings-login .primary{grid-column:auto}
  .booking-top,.stats-head,.bookings-list-head{flex-direction:column!important;align-items:stretch!important}
  .booking-card{padding:15px!important;border-radius:22px!important}
  .status-soft{align-self:flex-start}
  .customer-modal{padding:6px!important}
  .customer-modal-card{width:100%!important;max-width:100%!important;max-height:calc(100dvh - 12px)!important;border-radius:22px!important;padding:14px!important}
  .modal-head{border-radius:18px!important}
  .review-admin-actions{display:grid!important;grid-template-columns:1fr 1fr!important}
  .review-admin-actions button{width:100%}
}

/* Very small phones */
@media (max-width:380px){
  .rezo-slots{grid-template-columns:1fr 1fr!important}
  .rezo-day{font-size:11px!important}
  .review-admin-actions{grid-template-columns:1fr!important}
}

/* Customer mobile navigation: balanced links, quiet borders, easy touch targets. */
@media(max-width:720px){
  .site-header{
    padding:7px 12px 9px!important;
    gap:5px!important;
    border-radius:0 0 17px 17px!important;
    border-inline:0!important;
  }
  .site-header .brand{justify-content:center!important}
  .site-header nav{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    flex-wrap:wrap!important;
    width:100%!important;
    max-width:100%!important;
    gap:4px 6px!important;
    margin:0!important;
    padding:1px 0 3px!important;
    overflow:visible!important;
    scroll-snap-type:none!important;
  }
  .site-header nav>a{
    display:inline-flex!important;
    justify-content:center!important;
    align-items:center!important;
    flex:0 1 auto!important;
    min-height:37px!important;
    padding:7px 11px!important;
    font-size:12px!important;
    line-height:1.45!important;
    font-weight:800!important;
    white-space:nowrap!important;
    border:1px solid transparent!important;
    border-radius:11px!important;
    background:transparent!important;
    box-shadow:none!important;
    text-decoration:none!important;
  }
  .site-header nav>a.active,.site-header nav>a[aria-current="page"]{
    border-color:rgba(185,135,69,.25)!important;
    background:#fff4e9!important;
  }
  .site-header nav>a.active:after,.site-header nav>a[aria-current="page"]:after{display:none!important}
  .site-header nav>a:focus-visible,.site-header nav button:focus-visible{
    outline:2px solid #9d7666!important;
    outline-offset:2px!important;
  }
  .site-header nav .rezo-client-menu{flex:0 0 auto!important;margin-inline:2px}
  .site-header nav .rezo-menu-button{min-width:38px!important;min-height:38px!important}
}
@media(max-width:380px){
  .site-header nav{gap:3px 4px!important}
  .site-header nav>a{font-size:11.5px!important;padding:7px 8px!important}
}
@media(prefers-reduced-motion:reduce){
  .site-header nav>a{transition:none!important}
}
