/*
 * Fimboson Android Pass 1
 * Global mobile/WebView authority layer.
 * Scope: layout, scrolling, touch targets, forms, tables and overlays only.
 * No database, permissions or business rules are changed here.
 */

:root{
  --bc-mobile-safe-top:env(safe-area-inset-top,0px);
  --bc-mobile-safe-right:env(safe-area-inset-right,0px);
  --bc-mobile-safe-bottom:env(safe-area-inset-bottom,0px);
  --bc-mobile-safe-left:env(safe-area-inset-left,0px);
  --bc-mobile-touch:46px;
}

html{
  min-height:100%;
  width:100%;
  overflow-x:hidden;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  scroll-behavior:auto;
}

body.bc-live-shell{
  width:100%;
  min-width:0;
  min-height:100%;
  overflow-x:hidden!important;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-x pan-y;
}

body.bc-live-shell:not(.bc-create-overlay-open):not(.bc-role-overlay-open):not(.bc-recipe-modal-open):not(.bc-numbering-modal-open):not(.bc-system-item-picker-open):not(.bc-top-overlay-open){
  overflow-y:auto!important;
  overscroll-behavior-y:auto!important;
}

body.bc-live-shell .app-shell,
body.bc-live-shell .main-shell,
body.bc-live-shell .content-wrap,
body.bc-live-shell .grid,
body.bc-live-shell .card,
body.bc-live-shell form,
body.bc-live-shell fieldset{
  min-width:0!important;
  max-width:100%;
}

body.bc-live-shell img,
body.bc-live-shell svg,
body.bc-live-shell video,
body.bc-live-shell canvas{
  max-width:100%;
}

body.bc-live-shell input,
body.bc-live-shell select,
body.bc-live-shell textarea,
body.bc-live-shell button{
  font-size:16px;
}

body.bc-live-shell :where(.btn,.pill,.icon-btn,button,input[type="button"],input[type="submit"],input[type="reset"]){
  min-height:var(--bc-mobile-touch);
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}

body.bc-live-shell :where(input,select,textarea,button,a){
  scroll-margin-top:92px;
}

/* Any table not already inside the old table wrapper is wrapped by Android Pass 1 JS. */
body.bc-live-shell :where(.table-scroll,.bc-mobile-table-scroll){
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  overflow-x:auto!important;
  overflow-y:visible!important;
  -webkit-overflow-scrolling:touch!important;
  overscroll-behavior-x:contain!important;
  touch-action:pan-x pan-y!important;
  scrollbar-gutter:stable;
}

body.bc-live-shell :where(.table-scroll,.bc-mobile-table-scroll) > table{
  width:max(100%,760px)!important;
  max-width:none!important;
}

body.bc-live-shell .bc-mobile-table-scroll{
  position:relative;
  border:1px solid var(--line,var(--stroke-soft,#d7dce3));
  border-radius:16px;
  background:var(--surface-2,#fff);
}

body.bc-live-shell .bc-mobile-table-hint{
  display:none;
}

body.bc-live-shell .bc-form-step{
  position:relative;
}

body.bc-live-shell .bc-step-label{
  display:inline-flex;
  align-items:center;
  gap:7px;
  width:max-content;
  max-width:100%;
  margin:0 0 10px;
  color:var(--ink,var(--text-strong,#17202a));
  font-size:12px;
  font-weight:900;
  line-height:1;
}

body.bc-live-shell .bc-step-number{
  display:grid;
  place-items:center;
  width:25px;
  height:25px;
  flex:0 0 25px;
  border-radius:50%;
  background:var(--accent,#a6452d);
  color:#fff;
  font-size:12px;
  box-shadow:none;
}

body.bc-live-shell .bc-offline-banner{
  position:fixed;
  left:50%;
  bottom:calc(14px + var(--bc-mobile-safe-bottom));
  z-index:20000;
  transform:translateX(-50%) translateY(130%);
  width:min(560px,calc(100% - 28px));
  padding:11px 14px;
  border:1px solid #efc58a;
  border-radius:14px;
  background:#fff5dd;
  color:#5e3b08;
  font-size:13px;
  font-weight:800;
  text-align:center;
  box-shadow:0 16px 34px rgba(0,0,0,.22);
  opacity:0;
  pointer-events:none;
  transition:transform .18s ease,opacity .18s ease;
}

body.bc-live-shell .bc-offline-banner.is-visible{
  transform:translateX(-50%) translateY(0);
  opacity:1;
}

@media(max-width:980px){
  html,
  body.bc-live-shell{
    min-height:100%;
    min-height:100dvh;
  }

  body.bc-live-shell .app-shell,
  body.bc-live-shell .app-shell.bc-shared-shell-v4,
  body.bc-live-shell .app-shell.bc-shared-shell-v5,
  body.bc-live-shell .app-shell.bc-shared-shell-v6{
    display:block!important;
    width:100%!important;
    min-height:100%!important;
    min-height:100dvh!important;
    height:auto!important;
    max-height:none!important;
    overflow:visible!important;
  }

  body.bc-live-shell .bc-shell-header-row,
  body.bc-live-shell .app-shell .bc-shell-header-row{
    position:relative!important;
    inset:auto!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    overflow:visible!important;
  }

  body.bc-live-shell .topbar,
  body.bc-live-shell .topbar.bc-topbar-v10,
  body.bc-live-shell .topbar.bc-topbar-v16,
  body.bc-live-shell .app-shell .bc-shell-header-row .topbar{
    position:sticky!important;
    top:0!important;
    inset:auto!important;
    width:100%!important;
    min-width:0!important;
    height:auto!important;
    min-height:60px!important;
    max-height:none!important;
    padding-top:calc(8px + var(--bc-mobile-safe-top))!important;
    padding-right:calc(12px + var(--bc-mobile-safe-right))!important;
    padding-bottom:8px!important;
    padding-left:calc(12px + var(--bc-mobile-safe-left))!important;
    overflow:visible!important;
    z-index:9000!important;
  }

  body.bc-live-shell .topbar-main,
  body.bc-live-shell .bc-desktop-topbar-main{
    width:100%!important;
    min-width:0!important;
    height:auto!important;
    max-height:none!important;
  }

  body.bc-live-shell .sidebar,
  body.bc-live-shell aside.sidebar,
  body.bc-live-shell .app-shell .sidebar{
    position:fixed!important;
    inset:0 auto 0 0!important;
    width:min(88vw,330px)!important;
    height:100vh!important;
    height:100dvh!important;
    max-height:100vh!important;
    max-height:100dvh!important;
    padding-top:var(--bc-mobile-safe-top)!important;
    padding-bottom:var(--bc-mobile-safe-bottom)!important;
    overflow:hidden!important;
    overscroll-behavior:contain!important;
    transform:translate3d(-104%,0,0)!important;
    transition:transform .2s ease!important;
    z-index:10020!important;
  }

  body.bc-live-shell .sidebar.is-open,
  body.bc-live-shell .sidebar.sidebar-open,
  body.bc-live-shell.bc-sidebar-open .sidebar{
    transform:translate3d(0,0,0)!important;
  }

  body.bc-live-shell .sidebar .sidebar-head{
    flex:0 0 auto!important;
    max-height:none!important;
    overflow:visible!important;
  }

  body.bc-live-shell .sidebar :where(.grouped-nav,.nav-group){
    min-height:0!important;
    max-height:none!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    -webkit-overflow-scrolling:touch!important;
    overscroll-behavior:contain!important;
    padding-bottom:calc(28px + var(--bc-mobile-safe-bottom))!important;
  }

  body.bc-live-shell .sidebar-scrim{
    position:fixed!important;
    inset:0!important;
    z-index:10010!important;
  }

  body.bc-live-shell .main-shell,
  body.bc-live-shell main.main-shell,
  body.bc-live-shell .app-shell .main-shell{
    position:relative!important;
    inset:auto!important;
    display:block!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    min-height:0!important;
    height:auto!important;
    max-height:none!important;
    margin:0!important;
    padding:0!important;
    overflow:visible!important;
    overscroll-behavior:auto!important;
  }

  body.bc-live-shell .content-wrap{
    display:block!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    height:auto!important;
    min-height:calc(100dvh - 64px)!important;
    max-height:none!important;
    margin:0!important;
    padding-top:18px!important;
    padding-right:calc(14px + var(--bc-mobile-safe-right))!important;
    padding-bottom:calc(28px + var(--bc-mobile-safe-bottom))!important;
    padding-left:calc(14px + var(--bc-mobile-safe-left))!important;
    overflow:visible!important;
  }

  body.bc-live-shell .page-head{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    align-items:start!important;
    gap:12px!important;
    margin-bottom:16px!important;
  }

  body.bc-live-shell .page-head h1{
    font-size:clamp(23px,7vw,30px)!important;
    line-height:1.08!important;
    overflow-wrap:anywhere;
  }

  body.bc-live-shell .page-head p{
    max-width:100%!important;
    margin-top:6px!important;
    font-size:14px!important;
    line-height:1.5!important;
  }

  body.bc-live-shell .page-actions{
    display:flex!important;
    width:100%!important;
    gap:8px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    padding:2px 0 4px!important;
    -webkit-overflow-scrolling:touch!important;
    scrollbar-width:none!important;
  }

  body.bc-live-shell .page-actions::-webkit-scrollbar{display:none!important;}

  body.bc-live-shell .page-actions :where(.btn,.pill){
    flex:0 0 auto!important;
    width:auto!important;
    min-height:44px!important;
  }

  body.bc-live-shell :where(.grid-2,.grid-3,.grid-4,.form-grid,.layout-with-tray,.order-layout,.order-main-grid,.order-footer-grid){
    grid-template-columns:minmax(0,1fr)!important;
  }

  body.bc-live-shell :where(.form-grid .full,.order-main-grid .full){
    grid-column:1!important;
  }

  body.bc-live-shell .card{
    width:100%!important;
    min-width:0!important;
    padding:15px!important;
    border-radius:16px!important;
  }

  body.bc-live-shell :where(.field,input,select,textarea){
    min-width:0!important;
    max-width:100%!important;
  }

  body.bc-live-shell .field :where(input,select,textarea),
  body.bc-live-shell input:not([type="checkbox"]):not([type="radio"]),
  body.bc-live-shell select,
  body.bc-live-shell textarea{
    min-height:var(--bc-mobile-touch)!important;
    border-radius:12px!important;
  }

  body.bc-live-shell textarea{
    min-height:104px!important;
  }

  body.bc-live-shell :where(.table-scroll,.bc-mobile-table-scroll){
    margin-inline:0!important;
    border-radius:14px!important;
  }

  body.bc-live-shell :where(.table-scroll,.bc-mobile-table-scroll) > table{
    width:max(100%,720px)!important;
    min-width:720px!important;
  }

  body.bc-live-shell :where(.table-scroll,.bc-mobile-table-scroll)[data-bc-scrollable="1"] .bc-mobile-table-hint{
    position:sticky;
    left:10px;
    display:inline-flex;
    align-items:center;
    margin:8px 8px 0;
    padding:6px 9px;
    border:1px solid color-mix(in srgb,var(--accent,#a6452d) 32%,var(--line,#d7dce3));
    border-radius:999px;
    background:var(--surface-2,#fff);
    color:var(--muted,#65717c);
    font-size:11px;
    font-weight:850;
    line-height:1;
    pointer-events:none;
  }

  body.bc-live-shell :where(.table-scroll,.bc-mobile-table-scroll).has-user-scrolled .bc-mobile-table-hint{
    display:none!important;
  }

  body.bc-live-shell :where(th,td){
    padding:11px 12px!important;
  }

  body.bc-live-shell :where(.modal,.dialog,.overlay-panel,.bc-create-overlay-panel,.bc-role-overlay-panel,.recipe-modal-content,[role="dialog"]){
    max-width:calc(100vw - 20px)!important;
    max-height:calc(100dvh - 20px - var(--bc-mobile-safe-top) - var(--bc-mobile-safe-bottom))!important;
    overflow-y:auto!important;
    overscroll-behavior:contain!important;
    -webkit-overflow-scrolling:touch!important;
  }

  body.bc-live-shell .right-tray{
    position:static!important;
    width:100%!important;
  }
}

@media(max-width:560px){
  body.bc-live-shell .card{padding:13px!important;}
  body.bc-live-shell .content-wrap{
    padding-right:calc(10px + var(--bc-mobile-safe-right))!important;
    padding-left:calc(10px + var(--bc-mobile-safe-left))!important;
  }
  body.bc-live-shell :where(.btn,.pill){
    max-width:100%!important;
  }
}

@media(prefers-reduced-motion:reduce){
  body.bc-live-shell *,
  body.bc-live-shell *::before,
  body.bc-live-shell *::after{
    scroll-behavior:auto!important;
    transition-duration:.01ms!important;
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
  }
}