/* ── Existing mobile base styles ────────────────────────────────────────────── */

body.bz-device-mobile .bz-view-login{
  align-items:flex-start;
  justify-content:center;
  padding-top:18px;
}
body.bz-device-mobile .bz-view-dashboard .bz-kpis{
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
}
body.bz-device-mobile .bz-header{
  padding:8px 10px;
}
body.bz-device-mobile .bz-header__desktop{
  display:none;
}
body.bz-device-mobile .bz-header__mobile{
  display:flex;
}
/* hide hamburger — bottom nav "More" handles it */
body.bz-device-mobile #mobileMenuBtn{
  display:none;
}
body.bz-device-mobile .bz-layout{
  grid-template-columns:1fr !important;
  padding:10px 10px calc(68px + env(safe-area-inset-bottom,0px)) 10px;
  max-width:none;
  width:100%;
}
body.bz-device-mobile .bz-main{
  min-height:auto;
  width:100%;
}
body.bz-device-mobile .bz-sidebar{
  position:fixed;
  top:58px;
  left:0;
  bottom:0;
  width:82vw;
  max-width:320px;
  z-index:1050;
  transform:translateX(-105%);
  transition:transform .2s ease;
  overflow:auto;
  min-height:auto;
  padding-bottom:env(safe-area-inset-bottom,0px);
}
body.bz-device-mobile.bz-menu-open .bz-sidebar{
  transform:translateX(0);
}
body.bz-device-mobile .bz-mobileNotif{
  display:block;
  position:fixed;
  top:58px;
  right:0;
  bottom:0;
  width:82vw;
  max-width:320px;
  z-index:1050;
  transform:translateX(105%);
  transition:transform .2s ease;
}
body.bz-device-mobile .bz-mobileNotif .bz-rightCard{
  height:100%;
  border-radius:0;
  box-shadow:none;
  position:static;
}
body.bz-device-mobile.bz-notif-open .bz-mobileNotif{
  transform:translateX(0);
}
body.bz-device-mobile .bz-userMenu{
  position:fixed;
  top:58px;
  right:10px;
  z-index:1055;
  width:200px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:12px;
  box-shadow:var(--shadow);
  padding:10px;
}
body.bz-device-mobile .bz-userMenu__name{
  font-size:12px;
  color:var(--muted);
  margin-bottom:8px;
}
body.bz-device-mobile.bz-user-open .bz-userMenu{
  display:block;
}
body.bz-device-mobile .bz-overlay{
  position:fixed;
  inset:58px 0 0 0;
  background:rgba(11,18,32,.32);
  z-index:1040;
}
body.bz-device-mobile.bz-menu-open .bz-overlay,
body.bz-device-mobile.bz-notif-open .bz-overlay,
body.bz-device-mobile.bz-user-open .bz-overlay{
  display:block;
}
body.bz-device-mobile .bz-grid{
  grid-template-columns:1fr;
}
body.bz-device-mobile input[type="date"],
body.bz-device-mobile .bz-input[type="date"]{
  width:100% !important;max-width:100% !important;min-width:0 !important;
  display:block;font-size:16px;
}
body.bz-device-mobile input[type="month"],
body.bz-device-mobile .bz-input[type="month"]{
  width:100% !important;max-width:100% !important;min-width:0 !important;
  display:block;font-size:16px;
}
body.bz-device-mobile input[type="time"],
body.bz-device-mobile .bz-input[type="time"]{
  width:100% !important;max-width:100% !important;min-width:0 !important;
  box-sizing:border-box !important;display:block;font-size:16px;
}
body.bz-device-mobile .bz-field{ min-width:0; }
body.bz-device-mobile .bz-row{ align-items:stretch; }
body.bz-device-mobile .bz-row > *{ min-width:0; }
body.bz-device-mobile .bz-view-documents .bz-grid,
body.bz-device-mobile .bz-view-employees .bz-grid,
body.bz-device-mobile .bz-view-customers .bz-grid{
  grid-template-columns:1fr !important;
}
body.bz-device-mobile .bz-no-notif-route #mobileBellBtn,
body.bz-device-mobile.bz-no-notif-route #mobileBellBtn{
  display:none;
}

/* ── Touch targets & mobile sizing ───────────────────────────────────────── */
body.bz-device-mobile .bz-btn{
  min-height:44px;
  padding:10px 14px;
}
body.bz-device-mobile .bz-input,
body.bz-device-mobile .bz-select{
  min-height:44px;
  font-size:16px;
}
/* Tabs should NOT get the 44px min-height — they're compact by design */
body.bz-device-mobile .bz-tab{
  min-height:36px !important;
  padding:7px 10px;
  font-size:12px;
}
/* Time / date inputs in inline rows — reduce so they don't dominate */
body.bz-device-mobile input[type="time"]{
  min-height:40px;
  font-size:14px;
}
body.bz-device-mobile .bz-nav__item{
  min-height:44px;
  display:flex;
  align-items:center;
}
body.bz-device-mobile .bz-tableWrap .bz-btn{
  min-height:36px !important;
  padding:6px 10px;
  font-size:12px;
}
/* Header circle icon buttons — 28px on mobile, not 34px */
body.bz-device-mobile .bz-iconBtn--circle{
  width:28px;
  height:28px;
}
/* Bottom nav icon — slightly smaller */
.bz-bottom-nav__icon{
  font-size:18px;
  line-height:1;
}

/* ── Table card layout on mobile ─────────────────────────────────────────── */
body.bz-device-mobile .bz-tableWrap{
  border-radius:0;
  border-left:none;
  border-right:none;
  margin-left:-10px;
  margin-right:-10px;
}
body.bz-device-mobile .bz-table{
  min-width:0 !important;
}
body.bz-device-mobile .bz-table thead{
  position:absolute;
  opacity:0;
  pointer-events:none;
  width:1px;
  height:1px;
  overflow:hidden;
}
body.bz-device-mobile .bz-table tbody tr{
  display:block;
  border:none;
  border-bottom:1px solid var(--line);
  padding:10px 12px;
  background:#fff;
}
body.bz-device-mobile .bz-table tbody tr:last-child{
  border-bottom:none;
}
body.bz-device-mobile .bz-table td{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:5px 0;
  border:none;
  font-size:13px;
  gap:8px;
  min-height:30px;
  white-space:normal;
  word-break:break-word;
}
body.bz-device-mobile .bz-table td::before{
  content:attr(data-label);
  font-weight:700;
  font-size:11px;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:0.3px;
  flex:0 0 38%;
  max-width:38%;
}
body.bz-device-mobile .bz-table td:empty{
  display:none;
}
/* tables that must stay scrollable (complex inline editing) */
body.bz-device-mobile .bz-table--scroll{
  min-width:640px !important;
}
/* tables that must stay as rows (e.g. A-Z client modal) */
body.bz-device-mobile .bz-table--rows{
  min-width:600px !important;
}
body.bz-device-mobile .bz-table--rows thead{
  position:static;
  opacity:1;
  pointer-events:auto;
  width:auto;
  height:auto;
  overflow:visible;
}
body.bz-device-mobile .bz-table--rows tbody tr{
  display:table-row !important;
  padding:0;
  border-bottom:1px solid var(--line);
  background:transparent;
}
body.bz-device-mobile .bz-table--rows tbody tr:last-child{
  border-bottom:none;
}
body.bz-device-mobile .bz-table--rows td{
  display:table-cell !important;
  padding:7px 8px;
  border:none;
  font-size:12px;
  min-height:unset;
  white-space:normal;
  word-break:break-word;
  justify-content:unset;
  align-items:unset;
}
body.bz-device-mobile .bz-table--rows td::before{
  content:none;
}
body.bz-device-mobile .bz-tableWrap:has(.bz-table--scroll){
  border-radius:12px;
  border:1px solid var(--line);
  margin-left:0;
  margin-right:0;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
body.bz-device-mobile .bz-table--scroll thead{
  position:static;
  opacity:1;
  pointer-events:auto;
  width:auto;
  height:auto;
}
body.bz-device-mobile .bz-table--scroll tbody tr{
  display:table-row;
  border-bottom:none;
  padding:0;
}
body.bz-device-mobile .bz-table--scroll td{
  display:table-cell;
  padding:10px;
  border-bottom:1px solid var(--line);
  min-height:0;
  white-space:nowrap;
}
body.bz-device-mobile .bz-table--scroll td::before{
  display:none;
}

/* ── Bottom navigation ────────────────────────────────────────────────────── */
.bz-bottom-nav{
  display:none;
}
body.bz-device-mobile .bz-bottom-nav{
  display:flex;
  position:fixed;
  bottom:0;
  left:0;
  right:0;
  z-index:1045;
  background:#fff;
  border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom,0px);
  box-shadow:0 -4px 20px rgba(11,18,32,.08);
}
.bz-bottom-nav__item{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
  padding:8px 4px;
  min-height:56px;
  border:none;
  background:transparent;
  color:var(--muted);
  cursor:pointer;
  font-size:10px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.4px;
  transition:color .15s ease,background .15s ease;
  -webkit-tap-highlight-color:transparent;
  position:relative;
}
.bz-bottom-nav__item.is-active{
  color:var(--blue-2);
}
.bz-bottom-nav__item.is-active::after{
  content:'';
  position:absolute;
  top:0;left:50%;
  transform:translateX(-50%);
  width:28px;height:3px;
  background:var(--blue-2);
  border-radius:0 0 4px 4px;
}
.bz-bottom-nav__item:active{
  background:var(--blue-soft);
}
.bz-bottom-nav__icon{
  font-size:20px;
  line-height:1;
}

/* ── FAB ──────────────────────────────────────────────────────────────────── */
.bz-fab-wrap{
  display:none;
}
body.bz-device-mobile .bz-fab-wrap{
  display:block;
  position:fixed;
  bottom:calc(64px + env(safe-area-inset-bottom,0px));
  right:16px;
  z-index:1060;
  width:52px;
  height:52px;
}
.bz-fab{
  position:absolute;
  right:0;
  bottom:0;
  width:52px;
  height:52px;
  border-radius:999px;
  border:none;
  background:linear-gradient(135deg,var(--blue),var(--blue-2));
  color:#fff;
  font-size:28px;
  font-weight:300;
  line-height:1;
  cursor:pointer;
  box-shadow:0 8px 24px rgba(31,119,229,.4);
  display:flex;
  align-items:center;
  justify-content:center;
  transition:transform .18s ease,box-shadow .18s ease;
  -webkit-tap-highlight-color:transparent;
  z-index:2;
}
.bz-fab.is-open{
  transform:rotate(45deg);
  box-shadow:0 12px 32px rgba(31,119,229,.5);
}
/* Arc menu — zero-size anchor at FAB's bottom-right corner */
.bz-fab-menu{
  position:absolute;
  right:0;
  bottom:0;
  width:0;
  height:0;
  pointer-events:none;
  z-index:1;
}
.bz-fab-menu.is-open{
  pointer-events:auto;
}
/* Each item starts collapsed at FAB corner, fans out on open */
.bz-fab-item{
  position:absolute;
  right:0;
  bottom:0;
  transform-origin:right bottom;
  transform:translate(0,0) scale(0);
  opacity:0;
  pointer-events:none;
  transition:transform .22s cubic-bezier(.34,1.56,.64,1),opacity .16s ease;
  padding:0 11px 0 9px;
  height:32px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:999px;
  font-weight:600;
  font-size:11px;
  color:var(--text);
  cursor:pointer;
  box-shadow:0 3px 12px rgba(11,18,32,.16);
  white-space:nowrap;
  display:flex;
  align-items:center;
  gap:5px;
  -webkit-tap-highlight-color:transparent;
}
.bz-fab-icon{
  display:flex;
  align-items:center;
  flex-shrink:0;
  line-height:1;
}
.bz-fab-icon svg{
  display:block;
}
.bz-fab-menu.is-open .bz-fab-item{
  opacity:1;
  pointer-events:auto;
}
/* Quarter-circle arc: item 1 = top, item 4 = left */
.bz-fab-menu.is-open .bz-fab-item:nth-child(1){
  transform:translate(-20px,-96px) scale(1);
  transition-delay:0ms;
}
.bz-fab-menu.is-open .bz-fab-item:nth-child(2){
  transform:translate(-70px,-74px) scale(1);
  transition-delay:40ms;
}
.bz-fab-menu.is-open .bz-fab-item:nth-child(3){
  transform:translate(-98px,-40px) scale(1);
  transition-delay:80ms;
}
.bz-fab-menu.is-open .bz-fab-item:nth-child(4){
  transform:translate(-112px,-6px) scale(1);
  transition-delay:120ms;
}
.bz-fab-item:active{
  background:var(--blue-soft);
}

/* ── Doc viewer: full-screen on mobile ────────────────────────────────────── */
body.bz-device-mobile #bzDocViewerOverlay{
  padding:0;
  align-items:stretch;
}
body.bz-device-mobile #bzDocViewerOverlay > div{
  border-radius:0;
  max-width:100%;
}

/* ── Modals: full-screen on mobile ────────────────────────────────────────── */
body.bz-device-mobile .bz-modal-fullscreen{
  border-radius:0 !important;
  width:100% !important;
  max-width:100% !important;
  height:100% !important;
  max-height:100% !important;
  margin:0 !important;
}

/* ── Tablet: sidebar collapse toggle ────────────────────────────────────── */
.bz-sidebar-toggle{
  display:none;
  align-items:center;
  justify-content:center;
  width:32px;
  height:32px;
  border:1px solid var(--line);
  background:#fff;
  border-radius:8px;
  cursor:pointer;
  font-size:16px;
  color:var(--muted);
  flex-shrink:0;
  transition:background .14s ease;
}
.bz-sidebar-toggle:hover{
  background:var(--blue-soft);
  color:var(--blue-2);
}
@media (min-width:821px) and (max-width:1100px){
  .bz-sidebar-toggle{
    display:flex;
  }
  .bz-layout.bz-sidebar-hidden{
    grid-template-columns:0 1fr !important;
    gap:0;
  }
  .bz-layout.bz-sidebar-hidden .bz-sidebar{
    overflow:hidden;
    padding:0;
    opacity:0;
    pointer-events:none;
    border-width:0;
  }
  .bz-sidebar,.bz-layout{
    transition:all .2s ease;
  }
}

/* ── Landscape phone ─────────────────────────────────────────────────────── */
@media (max-width:820px) and (orientation:landscape){
  body.bz-device-mobile .bz-bottom-nav{
    display:none;
  }
  body.bz-device-mobile #mobileMenuBtn{
    display:flex;
  }
  body.bz-device-mobile .bz-layout{
    padding-bottom:10px !important;
  }
  body.bz-device-mobile .bz-fab-wrap{
    bottom:16px;
  }
  body.bz-device-mobile .bz-sidebar{
    width:260px !important;
    max-width:none;
  }
}


/* ── Reduced motion ──────────────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  .bz-sidebar,
  .bz-mobileNotif,
  .bz-fab,
  .bz-fab-menu,
  .bz-skeleton,
  .bz-layout,
  .bz-bottom-nav__item{
    transition:none !important;
    animation:none !important;
  }
}
