/* YABOX global responsive certification layer.
   UI/layout only: no RBAC, Brand, API or business-rule selectors. */

:root{
  --y-rsp-gap:clamp(10px,1.4vw,18px);
  --y-rsp-page-pad:clamp(10px,2vw,28px);
  --y-rsp-touch:44px;
  --y-rsp-modal-gap:clamp(8px,2vw,24px);
}

/* Explicitly undo legacy global clipping. Real component overflow must remain
   measurable; only tables/tab bars receive local horizontal scrolling below. */
html,body{width:100%;max-width:100%;min-width:0;overflow-x:visible!important}
#app,.app-shell,.shell,.yabox-shell,.main-area,.main-content,#main,.app-main,.yabox-main,
.content,#cnt,.tab-content,.module-content,.page-content,.module-shell,.yabox-page,.module-page{
  min-width:0;
  max-width:100%;
}

img,svg,video,canvas{max-width:100%;height:auto}
iframe{max-width:100%}
fieldset{min-width:0;max-width:100%}
input,select,textarea{max-width:100%;min-width:0}

.card,.panel,.box,.cbox,.yabox-card,.data-card,.kpi-card,.kpi,.metric-card,.stat-card,
.agent-card,.order-card,.product-card,.claim-card,.alert-card,.modal-card,.dialog-card{
  min-width:0;
  max-width:100%;
  overflow-wrap:anywhere;
}

.filter-bar,.filters-row,.toolbar,.actionbar,.actions,.topbar-actions,.module-actions,
.header-actions,.modal-actions,.modal-footer,.mfooter{
  min-width:0;
  max-width:100%;
  flex-wrap:wrap;
}

.table-wrap,.table-responsive,.yabox-table-wrap,.data-table-wrap,.smart-table-wrap,
.orders-table-wrap,.dc-table-wrap,.stock-table-wrap,.finance-table-wrap{
  width:100%;
  max-width:100%;
  min-width:0;
  overflow-x:auto;
  overflow-y:visible;
  overscroll-behavior-inline:contain;
  -webkit-overflow-scrolling:touch;
}

.table-wrap table,.table-responsive table,.yabox-table-wrap table,.data-table-wrap table,
.smart-table-wrap table,.orders-table-wrap table,.dc-table-wrap table,.stock-table-wrap table,
.finance-table-wrap table{margin:0;max-width:none}

.tabs,.tab-list,.status-tabs,.local-tabs,.chip-row,.category-tabs{
  min-width:0;
  max-width:100%;
  overflow-x:auto;
  overflow-y:hidden;
  overscroll-behavior-inline:contain;
  scrollbar-width:thin;
}

.toast,.notification-toast,[role="status"].toast{
  max-width:calc(100vw - 24px)!important;
  overflow-wrap:anywhere;
}

.dropdown,.dropdown-menu,[role="menu"],.date-picker,.datepicker,.flatpickr-calendar{
  max-width:calc(100vw - 16px);
}

#ov,.modal-overlay,.dialog-overlay,[role="dialog"]{
  max-width:100vw;
}

#mbox,.modal,.modal-box,.dialog,.dialog-box,[role="dialog"] > .modal-card{
  width:min(var(--modal-width,920px),calc(100vw - (2 * var(--y-rsp-modal-gap))));
  max-width:calc(100vw - (2 * var(--y-rsp-modal-gap)));
  max-height:calc(100dvh - (2 * var(--y-rsp-modal-gap)));
  min-width:0;
}

.modal-body,.mbody,.dialog-body,.modal-scroll{
  min-width:0;
  max-width:100%;
  overflow-y:auto;
  overscroll-behavior:contain;
}

.timeline,.tracking-timeline,.event-timeline{min-width:0;max-width:100%}
.timeline *, .tracking-timeline *, .event-timeline *{overflow-wrap:anywhere}

.badge,.status-badge,.chip,.tag{max-width:100%;overflow-wrap:anywhere}
.sidebar-toggle,.topbar-btn{white-space:nowrap;overflow-wrap:normal}
.topbar-btn{overflow:hidden;text-overflow:ellipsis}
#page-title,.page-title,.topbar-title{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

@media(max-width:1023px){
  [style*="grid-template-columns:repeat(5"],[style*="grid-template-columns: repeat(5"],
  [style*="grid-template-columns:repeat(4"],[style*="grid-template-columns: repeat(4"],
  [style*="grid-template-columns:repeat(3"],[style*="grid-template-columns: repeat(3"]{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}

@media(max-width:767px){
  #app,.app-shell,.shell,.yabox-shell,.main-area,.main-content,#main,.app-main,.yabox-main,
  .content,#cnt,.tab-content,.module-content,.page-content{
    width:100%;
    max-width:100%;
    min-width:0;
  }

  #app,.main-area,.content{
    height:auto!important;
    min-height:0!important;
    overflow:visible!important;
  }

  #app{min-height:100dvh!important}
  .content{padding-bottom:calc(var(--mobile-bottom-nav-h,64px) + env(safe-area-inset-bottom,0px) + 18px)!important}

  .topbar,.app-header,.page-header,#topbar{
    min-width:0;
    max-width:100%;
  }

  .module-header,.section-header,.page-header-row{
    min-width:0;
    max-width:100%;
    flex-wrap:wrap;
  }

  .tracking-timeline,.event-timeline{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:10px;
  }

  .tracking-timeline > *,.event-timeline > *{
    width:100%;
    min-width:0;
    max-width:100%;
  }

  .filter-bar,.filters-row,.toolbar,.actionbar,.actions,.topbar-actions,.module-actions,
  .header-actions,.modal-actions,.modal-footer,.mfooter{
    gap:10px;
  }

  .filter-bar > *,.filters-row > *{flex:1 1 min(100%,220px);max-width:100%}

  button,.btn,.yabox-btn,.obtn,.action-button,[role="button"],
  input:not([type="checkbox"]):not([type="radio"]),select,textarea{
    min-height:var(--y-rsp-touch);
  }

  input,select,textarea{font-size:max(16px,1em)}

  #mbox,.modal,.modal-box,.dialog,.dialog-box,[role="dialog"] > .modal-card{
    width:calc(100vw - 16px)!important;
    max-width:calc(100vw - 16px)!important;
    max-height:calc(100dvh - 16px)!important;
    margin:8px!important;
  }

  .modal-footer,.mfooter{
    position:sticky;
    bottom:0;
    z-index:3;
    padding-bottom:max(10px,env(safe-area-inset-bottom,0px));
  }

  .modal-footer > button,.mfooter > button,.modal-actions > button{
    flex:1 1 140px;
  }

  [style*="grid-template-columns:repeat(5"],[style*="grid-template-columns: repeat(5"],
  [style*="grid-template-columns:repeat(4"],[style*="grid-template-columns: repeat(4"],
  [style*="grid-template-columns:repeat(3"],[style*="grid-template-columns: repeat(3"],
  [style*="grid-template-columns:repeat(2"],[style*="grid-template-columns: repeat(2"]{
    grid-template-columns:1fr!important;
  }

  .toast,.notification-toast,[role="status"].toast{
    left:12px!important;
    right:12px!important;
    width:auto!important;
  }
}

@media(max-width:430px){
  .kpi-grid,.module-kpis,.db-kpi-grid,.stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}

@media(max-width:359px){
  .kpi-grid,.module-kpis,.db-kpi-grid,.stats-grid{grid-template-columns:1fr!important}
  .filter-bar > *,.filters-row > *,.toolbar > *,.actionbar > *{flex-basis:100%}
}

@supports(padding:max(0px)){
  #sidebar,.sidebar,.yabox-sidebar{padding-left:env(safe-area-inset-left,0px)}
  #bottom-nav,.bottom-nav{padding-bottom:env(safe-area-inset-bottom,0px)}
}