/* KARETA.KZ — r292 overflow / z-index / layers guard
   Purpose: stop UI blocks from leaving viewport and prevent decorative layers
   from intercepting controls. This file is a final guard layer; it does not
   change business logic or component rendering. */

:root{
  --ui-overflow-safe-width: 100%;
}

/* 1) Global safe sizing for application surfaces. */
html,
body,
#app,
.app,
.page,
.container,
.spa-page,
.spa-page-content,
.msng-page-content,
.news-page,
.parts-page,
.masters-page,
.myorders-page,
.admin-shop-page{
  max-width: var(--ui-overflow-safe-width);
  box-sizing: border-box;
}

*,
*::before,
*::after{
  box-sizing: border-box;
}

/* 2) Grid/flex children must be allowed to shrink. Without min-width:0,
   long text and buttons can push cards/tools outside the viewport. */
.spa-hero-layout,
.spa-hero-main,
.spa-hero-tools,
.spa-hero-tools-card,
.spa-hero-tools-body,
.catalog-tools,
.catalog-tools__inner,
.catalog-tools__actions,
.catalog-tools__search,
.catalog-tools__search-wrap,
.catalog-tool-btn,
.ui-card,
.mo-card,
.master-card,
.master-contact-row,
.parts-category-card,
.parts-card,
.part-card,
.msng-item,
.msng-item--v2,
.news-card,
.admin-card,
.cmodal-card,
.modal-dialog-v2,
.modal-panel-v2,
.mo-tools-sheet,
.mo-tools-sheet-card,
.news-modal-box,
.cab-pane-modal-card,
.bottom-nav,
.bnav-inner,
.nav-links,
.bnav-item{
  min-width: 0;
  max-width: 100%;
}

/* 3) Do not let tools and card action rows overflow horizontally. */
.catalog-tools__actions,
.mo-card-actions,
.ui-card__actions,
.msng-actions,
.nc-footer,
.master-card__footer,
.parts-card__actions,
.admin-card__actions{
  overflow: visible;
  min-width: 0;
  max-width: 100%;
}

.catalog-tool-btn,
.catalog-tools__search input,
.catalog-tools__search-input,
.mo-action-btn,
.msng-action-btn,
.parts-action-btn,
.master-action-btn,
.news-action-btn,
.admin-action-btn,
.btn,
.ui-btn{
  min-width: 0;
  max-width: 100%;
}

.catalog-tool-btn > *,
.mo-action-btn > *,
.msng-action-btn > *,
.parts-action-btn > *,
.master-action-btn > *,
.news-action-btn > *,
.admin-action-btn > *,
.btn > *,
.ui-btn > *{
  min-width: 0;
}

/* 4) Long titles/messages should not force overflow. */
.mo-card-title,
.mo-card h3,
.master-card__title,
.master-contact-row,
.parts-category-card h3,
.parts-category-card__title,
.msng-title,
.msng-name,
.msng-last,
.news-card h3,
.nc-title,
.admin-card h3,
.spa-hero-title,
.spa-hero-tools-title,
.spa-hero-tools-hint{
  max-width: 100%;
  overflow-wrap: anywhere;
}

.catalog-tool-btn span,
.catalog-tool-btn strong,
.bnav-item span,
.bnav-label,
.nav-links a,
.mo-action-btn span,
.msng-action-btn span,
.parts-action-btn span,
.master-action-btn span,
.news-action-btn span,
.admin-action-btn span{
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 5) Decorative layers must never cover real controls. */
.spa-hero::before,
.spa-hero::after,
.spa-hero-bg,
.hero-glow,
.hero-shard,
.shards-strip,
.home-hero::before,
.home-hero::after,
.spa-hero-tools-card::before,
.spa-hero-tools-card::after{
  pointer-events: none;
}

/* 6) Normalize layering for recurring app surfaces. */
header,
.site-header,
.navbar{
  z-index: var(--z-sticky, 50);
}

#bottom-nav,
.bottom-nav{
  z-index: var(--z-bottom-nav, 80);
}

.cmodal-overlay,
.modal-overlay-v2,
.news-modal-overlay,
.cab-pane-modal-overlay,
.mo-tools-sheet-overlay,
.auth-modal-overlay{
  z-index: var(--z-modal, 300);
}

.toast,
.toast-stack,
#toast,
#toasts,
.notify-stack{
  z-index: var(--z-toast, 500);
}

/* 7) Controls inside hero/tools must stay above decorative hero layers. */
.spa-hero-tools-card,
.spa-hero-tools-body,
.catalog-tools,
.catalog-tools__actions,
.catalog-tools__search,
.catalog-tool-btn{
  position: relative;
  z-index: var(--z-base, 1);
}

/* 8) Mobile viewport safety. */
@media (max-width: 640px){
  body,
  .page,
  .container,
  .spa-page,
  .spa-page-content,
  .msng-page-content{
    overflow-x: hidden;
  }

  /* Стандарт/без вертикального режима: полная ширина */
  html:not([data-tools-actions="left"]):not([data-tools-actions="right"]) .catalog-tools__actions,
  .mo-card-actions,
  .ui-card__actions,
  .msng-actions,
  .nc-footer,
  .master-card__footer,
  .parts-card__actions,
  .admin-card__actions{
    width: 100%;
  }

  .cmodal-card,
  .modal-dialog-v2,
  .modal-panel-v2,
  .mo-tools-sheet-card,
  .news-modal-box,
  .cab-pane-modal-card,
  .auth-modal{
    max-width: calc(100vw - var(--space-4, 16px));
  }
}

/* 9) UI-r4 — vertical actions safe-area / z-index / overflow guard.
   Дополнение к vertical_actions_mobile.css: явные ограничения для rail-режима. */
@media (max-width: 640px){
  /* Рейка не должна создавать горизонтальный скролл */
  html[data-tools-actions="left"] .catalog-tools,
  html[data-tools-actions="right"] .catalog-tools{
    contain: layout style;
  }

  /* Rail и search — строго в пределах карточки */
  html[data-tools-actions="left"] .catalog-tools__actions,
  html[data-tools-actions="right"] .catalog-tools__actions{
    max-width: clamp(58px, 21vw, 74px);
    flex-shrink: 0;
  }

  /* Кнопки внутри rail не должны перекрывать bottom-nav (z-index шкала) */
  html[data-tools-actions="left"] .catalog-tool-btn,
  html[data-tools-actions="right"] .catalog-tool-btn{
    z-index: var(--z-base, 1);
  }
}