/* KARETA UI-r55 — final mobile/tablet/pc smoke guards.
   Scope: client app reference pass r52-r54.
   Purpose: final visual guards against text overlaps, horizontal overflow and dock/content collisions.
   Visual-only layer. */

:root{
  --r55-bg:#eef0f2;
  --r55-page:#fff;
  --r55-line:#e7e8eb;
  --r55-text:#090b10;
  --r55-muted:#707782;
  --r55-orange:#ffb000;
}

/* Global overflow containment */
html,
body{
  max-width:100%;
  overflow-x:hidden;
}
#app,
.page,
.container,
.services-app-page,
.services-app-phone{
  min-width:0;
  max-width:100%;
}

/* Hard text wrapping after all app-card passes */
:where(.services-app-page,#myorders,#messages,#masters,#cabinet,#parts,.cab-pane,.order-detail,.chat-detail,.vehicle-detail,.notification-detail)
:where(h1,h2,h3,h4,p,span,small,b,strong,a,button,label,div,input,textarea,select){
  min-width:0 !important;
  max-width:100% !important;
  overflow-wrap:anywhere !important;
  word-break:normal !important;
}

/* Prevent buttons and cards from forcing horizontal scroll */
:where(.btn,.button,button,.action-btn,.bnav-item,.services-app-tile,.services-app-list-card,.services-app-shop-card,.order-card,.myorder-card,.mo-card,.chat-card,.message-card,.master-card,.fav-card,.favorite-card,.cab-card,.ccab-card,.detail-card,.order-detail-card,.chat-thread-card,.review-card,.vehicle-card,.notification-card){
  min-width:0 !important;
  max-width:100% !important;
  overflow:hidden !important;
}

/* Icons should never overlap labels */
:where(.bnav-icon-wrap,.services-app-tile-ico,.services-app-tile-icon,.ico,.icon,.row-icon,.ccab-ico,.ccab-stat-ico,.notify-icon,.notification-icon){
  flex:0 0 auto !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
}
:where(.bnav-label,.services-app-tile-title,.card-title,.row-title,.ccab-title,.detail-title){
  min-width:0 !important;
  overflow:hidden !important;
  text-overflow:ellipsis;
}

/* Mobile final pass */
@media (max-width:430px){
  body{
    background:#fff !important;
  }
  .services-app-phone,
  body[data-role="client"] :where(#myorders,#messages,#masters,#cabinet,#parts).page > .container,
  body[data-role="client"] :where(.cab-pane) > .container{
    padding-left:14px !important;
    padding-right:14px !important;
  }
  .services-app-title{
    font-size:clamp(34px,11vw,42px) !important;
    letter-spacing:-.065em !important;
  }
  .services-app-search{
    grid-template-columns:minmax(0,1fr) 44px !important;
  }
  .services-app-tile-grid,
  .services-app-categories,
  .services-app-home-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:9px !important;
  }
  .services-app-tile,
  .services-app-cat-card,
  .services-app-category-card{
    min-height:96px !important;
    padding:10px !important;
  }
  .services-app-tile-title,
  .services-app-tile b,
  .services-app-cat-title{
    font-size:13px !important;
    line-height:1.16 !important;
    display:-webkit-box !important;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden !important;
  }
  #bottom-nav{
    width:calc(100vw - 18px) !important;
    bottom:8px !important;
  }
  #bottom-nav .bnav-inner{
    height:68px !important;
    min-height:68px !important;
    padding:7px 8px !important;
    border-radius:16px !important;
  }
  #bottom-nav .bnav-label{
    font-size:9.6px !important;
  }
}

/* Tablet portrait final pass */
@media (min-width:768px) and (max-width:1023px){
  .services-app-phone,
  body[data-role="client"] :where(#myorders,#messages,#masters,#cabinet,#parts).page > .container,
  body[data-role="client"] :where(.cab-pane) > .container{
    max-width:900px !important;
  }
  .services-app-home-head{
    grid-template-columns:minmax(260px,.9fr) minmax(330px,1.1fr) !important;
    gap:28px !important;
  }
  .services-app-title{
    font-size:clamp(48px,6vw,60px) !important;
  }
  #bottom-nav{
    width:min(calc(100vw - 56px),720px) !important;
  }
  #bottom-nav .bnav-inner{
    padding-left:24px !important;
    padding-right:24px !important;
  }
}

/* Tablet landscape / low height */
@media (min-width:768px) and (max-height:760px){
  .services-app-page,
  body[data-role="client"] :where(#myorders,#messages,#masters,#cabinet,#parts).page{
    padding-top:14px !important;
    padding-bottom:96px !important;
  }
  .services-app-phone,
  body[data-role="client"] :where(#myorders,#messages,#masters,#cabinet,#parts).page > .container,
  body[data-role="client"] :where(.cab-pane) > .container{
    min-height:auto !important;
    padding-top:22px !important;
    padding-bottom:22px !important;
  }
  .services-app-title{
    font-size:46px !important;
  }
  .services-app-home-head{
    gap:22px !important;
  }
  #bottom-nav{
    bottom:12px !important;
  }
  #bottom-nav .bnav-inner{
    height:68px !important;
    min-height:68px !important;
  }
}

/* Desktop preview */
@media (min-width:1200px){
  .services-app-phone,
  body[data-role="client"] :where(#myorders,#messages,#masters,#cabinet,#parts).page > .container,
  body[data-role="client"] :where(.cab-pane) > .container{
    max-width:1180px !important;
  }
  .services-app-phone{
    min-height:680px !important;
  }
  #bottom-nav{
    width:min(56vw,860px) !important;
  }
}

/* Keep dock above content but below modals */
#bottom-nav{
  z-index:80 !important;
}
:where(.modal,.modal-overlay,.cmodal-overlay,.ui-modal-overlay,.services-app-sheet,.drawer){
  z-index:120 !important;
}

/* Final app padding so floating dock does not cover content */
#app,
.page,
.services-app-page{
  padding-bottom:calc(112px + env(safe-area-inset-bottom,0px)) !important;
}
@media (min-width:768px){
  #app,
  .page,
  .services-app-page{
    padding-bottom:calc(128px + env(safe-area-inset-bottom,0px)) !important;
  }
}