/* r63j — client shell guard.
   Scope: only client routes from bottom navigation.
   Goal: one stable width/safe-area baseline for #services, #myorders, #messages, #cabinet, #parts, #masters.
   No API/DB/JS logic changes. */

:root{
  --k-client-shell-phone: 430px;
  --k-client-shell-tablet: 760px;
  --k-client-shell-desktop: 1120px;
  --k-client-bottom-safe: calc(var(--bottom-nav-h,72px) + env(safe-area-inset-bottom,0px) + 14px);
}

/* Normalize app root overflow for SPA pages. */
html,
body{
  overflow-x:hidden !important;
}

body #app{
  width:100% !important;
  min-width:0 !important;
  overflow-x:hidden !important;
}

/* Common client pages. */
body #app .services-app-page--reference-r62u,
body #app .myorders-ref-r62z,
body #app .orders-page-r62z,
body #app [data-page="myorders"],
body #app #myorders-page,
body #app .messages-reference-r58,
body #app .messages-ref-page-r63f,
body #app .cabinet-profile-page-r62u,
body #app .cabinet-level-page-r62v,
body #app .parts-page,
body #app .parts-reference-r61,
body #app .masters-page,
body #app .masters-reference-r59{
  width:100% !important;
  min-width:0 !important;
  max-width:var(--k-client-shell-phone) !important;
  margin-left:auto !important;
  margin-right:auto !important;
  padding-left:12px !important;
  padding-right:12px !important;
  padding-bottom:var(--k-client-bottom-safe) !important;
  box-sizing:border-box !important;
  overflow-x:hidden !important;
  transform:none !important;
  zoom:1 !important;
}

body #app .services-app-page--reference-r62u *,
body #app .myorders-ref-r62z *,
body #app .orders-page-r62z *,
body #app [data-page="myorders"] *,
body #app #myorders-page *,
body #app .messages-reference-r58 *,
body #app .messages-ref-page-r63f *,
body #app .cabinet-profile-page-r62u *,
body #app .cabinet-level-page-r62v *,
body #app .parts-page *,
body #app .parts-reference-r61 *,
body #app .masters-page *,
body #app .masters-reference-r59 *{
  box-sizing:border-box !important;
}

/* Bottom nav stable size and safe area. */
body #bottom-nav,
body .bottom-nav,
body .bnav{
  left:50% !important;
  right:auto !important;
  width:100% !important;
  max-width:var(--k-client-shell-phone) !important;
  transform:translateX(-50%) !important;
  min-height:70px !important;
  padding-bottom:max(6px, env(safe-area-inset-bottom,0px)) !important;
  box-sizing:border-box !important;
  z-index:900 !important;
}

body #bottom-nav *,
body .bottom-nav *,
body .bnav *{
  box-sizing:border-box !important;
}

/* Any fixed/floating client action must not exceed shell. */
body .floating-action,
body .client-floating-action,
body .mobile-tools-icon-row,
body .catalog-tools,
body .masters-sticky-tools,
body .msng-sticky-tools{
  max-width:var(--k-client-shell-phone) !important;
}

/* Phone: one column, compact, no side panels. */
@media (max-width:767px){
  body #app .services-app-page--reference-r62u,
  body #app .myorders-ref-r62z,
  body #app .orders-page-r62z,
  body #app [data-page="myorders"],
  body #app #myorders-page,
  body #app .messages-reference-r58,
  body #app .messages-ref-page-r63f,
  body #app .cabinet-profile-page-r62u,
  body #app .cabinet-level-page-r62v,
  body #app .parts-page,
  body #app .parts-reference-r61,
  body #app .masters-page,
  body #app .masters-reference-r59{
    max-width:var(--k-client-shell-phone) !important;
    padding-left:12px !important;
    padding-right:12px !important;
    padding-top:12px !important;
  }

  body #app .orders-detail-r62z,
  body #app .orders-side-r62z,
  body #app .desktop-only,
  body #app .tablet-desktop-only{
    display:none !important;
  }

  body #bottom-nav,
  body .bottom-nav,
  body .bnav{
    max-width:100% !important;
    border-radius:0 !important;
  }

  body .bottom-nav__item,
  body .bnav-item{
    min-width:0 !important;
  }
}

/* Narrow phone guard. */
@media (max-width:360px){
  body #app .services-app-page--reference-r62u,
  body #app .myorders-ref-r62z,
  body #app .orders-page-r62z,
  body #app [data-page="myorders"],
  body #app #myorders-page,
  body #app .messages-reference-r58,
  body #app .messages-ref-page-r63f,
  body #app .cabinet-profile-page-r62u,
  body #app .cabinet-level-page-r62v,
  body #app .parts-page,
  body #app .parts-reference-r61,
  body #app .masters-page,
  body #app .masters-reference-r59{
    padding-left:10px !important;
    padding-right:10px !important;
  }
}

/* Tablet: controlled centered layout; never full-bleed huge pages. */
@media (min-width:768px) and (max-width:1023px){
  body #app .services-app-page--reference-r62u,
  body #app .myorders-ref-r62z,
  body #app .orders-page-r62z,
  body #app [data-page="myorders"],
  body #app #myorders-page,
  body #app .messages-reference-r58,
  body #app .messages-ref-page-r63f,
  body #app .cabinet-profile-page-r62u,
  body #app .cabinet-level-page-r62v,
  body #app .parts-page,
  body #app .parts-reference-r61,
  body #app .masters-page,
  body #app .masters-reference-r59{
    max-width:var(--k-client-shell-tablet) !important;
    padding-left:14px !important;
    padding-right:14px !important;
    padding-top:14px !important;
    padding-bottom:calc(var(--bottom-nav-h,78px) + 16px) !important;
  }

  body #bottom-nav,
  body .bottom-nav,
  body .bnav{
    max-width:var(--k-client-shell-phone) !important;
  }

  body .floating-action,
  body .client-floating-action,
  body .mobile-tools-icon-row,
  body .catalog-tools,
  body .masters-sticky-tools,
  body .msng-sticky-tools{
    max-width:var(--k-client-shell-tablet) !important;
  }
}

/* Desktop: centered app canvas. Services can be wider through its own r63i rules;
   other bottom menu routes stay readable and do not stretch. */
@media (min-width:1024px){
  body #app .myorders-ref-r62z,
  body #app .orders-page-r62z,
  body #app [data-page="myorders"],
  body #app #myorders-page,
  body #app .messages-reference-r58,
  body #app .messages-ref-page-r63f,
  body #app .cabinet-profile-page-r62u,
  body #app .cabinet-level-page-r62v,
  body #app .parts-page,
  body #app .parts-reference-r61,
  body #app .masters-page,
  body #app .masters-reference-r59{
    max-width:var(--k-client-shell-desktop) !important;
    padding-left:18px !important;
    padding-right:18px !important;
    padding-top:18px !important;
    padding-bottom:28px !important;
  }

  body #app .services-app-page--reference-r62u{
    max-width:none !important;
    padding-left:12px !important;
    padding-right:12px !important;
  }

  body #bottom-nav,
  body .bottom-nav,
  body .bnav{
    max-width:var(--k-client-shell-phone) !important;
    border-radius:22px 22px 0 0 !important;
    box-shadow:0 -14px 32px rgba(15,23,42,.11) !important;
  }

  body .floating-action,
  body .client-floating-action,
  body .mobile-tools-icon-row,
  body .catalog-tools,
  body .masters-sticky-tools,
  body .msng-sticky-tools{
    max-width:var(--k-client-shell-desktop) !important;
  }
}

/* Very wide monitor guard. */
@media (min-width:1360px){
  body #app .myorders-ref-r62z,
  body #app .orders-page-r62z,
  body #app [data-page="myorders"],
  body #app #myorders-page,
  body #app .messages-reference-r58,
  body #app .messages-ref-page-r63f,
  body #app .cabinet-profile-page-r62u,
  body #app .cabinet-level-page-r62v,
  body #app .parts-page,
  body #app .parts-reference-r61,
  body #app .masters-page,
  body #app .masters-reference-r59{
    max-width:1120px !important;
  }
}