/* BREKA global responsive pass — 2026-09-24
   Visual-only safety layer. No IDs, data attributes or JS flows are changed. */

html,body{max-width:100%;overflow-x:hidden}
img,svg,video,canvas{max-width:100%;height:auto}
button,input,select,textarea{max-width:100%}
.page,.panel,.stats article,.shortcut-section,.inventory-pane,.pos-catalog,.pos-cart-panel{min-width:0}
.page-title>*,.panel-head>*,.actions>*{min-width:0}

/* Initial loader: always centered inside the real viewport */
#loading.screen.center{
  position:fixed!important;
  inset:0!important;
  min-height:100dvh!important;
  width:100%!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:14px!important;
  padding:24px!important;
  text-align:center!important;
  background:#f5f7fa!important;
  color:#718096!important;
  z-index:9999!important;
}
#loading .spinner{
  margin:0!important;
  flex:0 0 auto!important;
  width:48px!important;
  height:48px!important;
}
#loading.screen.center.hidden{display:none!important}
#loading p{
  margin:0!important;
  max-width:min(360px,88vw)!important;
  font-size:15px!important;
  line-height:1.4!important;
  overflow-wrap:anywhere!important;
}

/* Universal wrapping safeguards */
.management-row b,.management-row small,
.doc-main b,.doc-main small,.simple-row div,
.panel,.notice,.message,.muted,.role-pill{
  overflow-wrap:anywhere;
  word-break:normal;
}

/* User management — stable desktop/tablet layout */
#page-users #usersList,
#page-users #invitesList{display:grid;gap:12px}
#page-users .management-row{
  display:grid!important;
  grid-template-columns:52px minmax(0,1fr) auto auto!important;
  align-items:center!important;
  gap:12px!important;
  min-width:0!important;
  padding:16px!important;
  border:1px solid var(--ep-border,#dfe7f0)!important;
  border-radius:14px!important;
  background:#fff!important;
}
#page-users .management-row>.member-avatar{
  width:48px!important;
  height:48px!important;
  flex:0 0 48px!important;
  display:grid!important;
  place-items:center!important;
  border-radius:14px!important;
  font-size:19px!important;
  font-weight:850!important;
}
#page-users .management-row>div:nth-child(2){
  min-width:0!important;
  display:grid!important;
  gap:3px!important;
}
#page-users .management-row>div:nth-child(2)>b{
  display:block!important;
  font-size:15px!important;
  line-height:1.3!important;
}
#page-users .management-row>div:nth-child(2)>small{
  display:block!important;
  line-height:1.4!important;
  color:#738096!important;
}
#page-users .role-pill{
  justify-self:start!important;
  white-space:nowrap!important;
}
#page-users .management-row>.actions{
  display:flex!important;
  justify-content:flex-end!important;
  align-items:center!important;
  gap:8px!important;
  min-width:0!important;
}
#page-users .management-row>.actions .btn{
  white-space:normal!important;
  text-align:center!important;
}

/* Panels, headers and toolbar controls should never force horizontal overflow */
.page-title,.panel-head,.actions,.product-toolbar,.pos-search-row,.history-head{
  max-width:100%;
}
.table-panel{max-width:100%}

/* Tablet */
@media (max-width:980px) and (min-width:761px){
  #page-users .management-row{
    grid-template-columns:48px minmax(0,1fr) auto!important;
  }
  #page-users .management-row>.actions{
    grid-column:2/-1!important;
    justify-content:flex-start!important;
  }
}

/* Mobile system pass */
@media(max-width:760px){
  body{width:100%;min-width:0}
  main{
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
    padding-left:12px!important;
    padding-right:12px!important;
  }
  .page{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
  }
  .page-title{
    width:100%!important;
    gap:10px!important;
  }
  .page-title h1{
    max-width:100%!important;
    line-height:1.12!important;
    overflow-wrap:anywhere!important;
  }
  .page-title>.actions{
    width:100%!important;
    justify-content:flex-start!important;
  }
  .page-title>.actions .btn{
    flex:1 1 140px!important;
  }

  .panel{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    padding:14px!important;
    overflow:hidden;
  }
  .panel-head{
    align-items:flex-start!important;
    flex-direction:column!important;
    gap:8px!important;
  }
  .panel-head>.actions,.panel-head>.btn{
    width:100%!important;
  }

  .form-grid{
    grid-template-columns:minmax(0,1fr)!important;
  }
  label,input,select,textarea{
    min-width:0!important;
  }

  /* User cards become readable stacked cards instead of narrow pseudo-columns */
  #page-users #usersList,
  #page-users #invitesList{gap:10px!important}
  #page-users .management-row{
    grid-template-columns:48px minmax(0,1fr) auto!important;
    gap:10px 12px!important;
    padding:14px!important;
    align-items:start!important;
  }
  #page-users .management-row>.member-avatar{
    width:44px!important;
    height:44px!important;
    flex-basis:44px!important;
    border-radius:13px!important;
    grid-row:1/3!important;
  }
  #page-users .management-row>div:nth-child(2){
    grid-column:2/3!important;
  }
  #page-users .management-row>div:nth-child(2)>b{
    font-size:16px!important;
  }
  #page-users .management-row>div:nth-child(2)>small{
    font-size:12px!important;
    white-space:normal!important;
  }
  #page-users .management-row>.role-pill{
    grid-column:3/4!important;
    align-self:start!important;
    max-width:100%!important;
    padding:5px 8px!important;
    font-size:11px!important;
  }
  #page-users .management-row>.actions{
    grid-column:2/-1!important;
    width:100%!important;
    justify-content:flex-start!important;
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  #page-users .management-row>.actions .btn{
    width:100%!important;
    min-width:0!important;
    padding:10px 9px!important;
    line-height:1.25!important;
  }
  #page-users .management-row>.actions .btn:only-child{
    grid-column:1/-1!important;
  }
  #page-users #invitesList .management-row>.btn{
    grid-column:2/-1!important;
    width:100%!important;
  }

  /* General action groups */
  .actions{
    justify-content:flex-start!important;
  }
  .actions .btn{
    min-width:0!important;
    max-width:100%!important;
  }

  /* Keep wide tabular datasets usable with horizontal scroll */
  .table-panel,
  .inventory-scroll,
  .request-items,
  .request-history{
    -webkit-overflow-scrolling:touch;
  }

  /* Modals: avoid clipped controls and text */
  .modal{
    max-width:100%!important;
    min-width:0!important;
  }
  .modal .actions{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    width:100%!important;
  }
  .modal .actions .btn{
    width:100%!important;
  }

  /* POS and split workspaces collapse safely */
  .pos-layout,.inventory-workspace,.qr-layout{
    grid-template-columns:minmax(0,1fr)!important;
  }

  /* Prevent long email/usernames from pushing cards */
  [id$="List"] small,[id$="List"] b,
  .management-row small,.management-row b{
    max-width:100%!important;
  }
}

/* Very narrow phones */
@media(max-width:390px){
  main{padding-left:10px!important;padding-right:10px!important}
  #page-users .management-row{
    grid-template-columns:42px minmax(0,1fr)!important;
  }
  #page-users .management-row>.member-avatar{
    width:40px!important;height:40px!important;flex-basis:40px!important;
  }
  #page-users .management-row>.role-pill{
    grid-column:2/3!important;
    justify-self:start!important;
  }
  #page-users .management-row>.actions{
    grid-column:1/-1!important;
    grid-template-columns:minmax(0,1fr)!important;
  }
  .stats{grid-template-columns:minmax(0,1fr)!important}
  .shortcut-grid{grid-template-columns:minmax(0,1fr)!important}
}