/* Cloud Design v1.3.12 — mobile-first staff workspace
   Principle: desktop gets a stable app sidebar; mobile behaves like a native work app.
   The top mobile bar is NOT navigation: it exposes public site, notifications and profile.
   Primary staff navigation lives in one bottom bar. Secondary tools live in a bottom sheet. */

.staff-mobile-appbar{display:none}
.workspace-brand-home{display:flex;align-items:center;gap:10px;margin:0 0 12px;padding:10px 11px;border:1px solid rgba(255,255,255,.07);border-radius:15px;background:rgba(255,255,255,.025);color:var(--text);text-decoration:none;transition:.18s ease}
.workspace-brand-home:hover{background:rgba(130,94,236,.08);border-color:rgba(146,111,247,.2);transform:translateY(-1px)}
.workspace-brand-mark{width:36px;height:36px;flex:0 0 36px;display:grid;place-items:center;overflow:hidden;border-radius:11px;background:rgba(127,91,239,.1)}
.workspace-brand-mark img{display:block;width:100%;height:100%;object-fit:cover}
.workspace-brand-copy{min-width:0;flex:1}.workspace-brand-copy strong,.workspace-brand-copy small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.workspace-brand-copy strong{font-size:.88rem;letter-spacing:.01em}.workspace-brand-copy small{margin-top:1px;color:var(--muted);font-size:.68rem}
.workspace-brand-arrow{width:18px;height:18px;flex:0 0 18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;color:var(--muted)}
.workspace-sheet-handle{display:none}
.workspace-nav-icon svg,.mobile-tab-icon svg,.staff-mobile-icon-action svg{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* Desktop/laptop: keep sidebar viewport-bound and independently scrollable. */
@media (min-width:901px){
  .dashboard-shell .workspace-nav.workspace-drawer{position:sticky!important;top:calc(var(--header) + 12px)!important;max-height:calc(100dvh - var(--header) - 24px)!important;overflow-y:auto!important;overscroll-behavior:contain!important;padding-top:12px!important}
  .workspace-drawer-head{display:none!important}
}

@media (max-width:900px){
  :root{--staff-appbar-h:62px;--staff-bottom-h:74px}
  body.has-mobile-workspace .site-header,body.has-mobile-workspace .mobile-menu,body.has-mobile-workspace .mobile-workspace-topbar{display:none!important}
  body.has-mobile-workspace{padding-top:0!important;padding-bottom:calc(var(--staff-bottom-h) + env(safe-area-inset-bottom,0px))!important}
  body.has-mobile-workspace .scroll-progress{top:0!important}

  /* Compact app/status bar. It has no hamburger and therefore is not a second menu. */
  .staff-mobile-appbar{display:flex!important;align-items:center;gap:9px;position:sticky;top:0;z-index:4200;height:calc(var(--staff-appbar-h) + env(safe-area-inset-top,0px));padding:calc(8px + env(safe-area-inset-top,0px)) 10px 8px;background:rgba(9,11,20,.94);border-bottom:1px solid rgba(255,255,255,.07);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px)}
  .staff-mobile-brand{display:flex;align-items:center;gap:8px;min-width:0;max-width:48%;height:44px;padding:4px 7px 4px 5px;border-radius:13px;color:var(--text);text-decoration:none;background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.055)}
  .staff-mobile-brand:active{transform:scale(.98)}
  .staff-mobile-brand-mark{width:34px;height:34px;flex:0 0 34px;overflow:hidden;border-radius:10px}.staff-mobile-brand-mark img{display:block;width:100%;height:100%;object-fit:cover}
  .staff-mobile-brand-copy{min-width:0}.staff-mobile-brand-copy strong,.staff-mobile-brand-copy small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.staff-mobile-brand-copy strong{font-size:.78rem;line-height:1.05}.staff-mobile-brand-copy small{font-size:.61rem;color:#a89ccd;margin-top:2px;letter-spacing:.02em}
  .staff-mobile-brand-arrow{font-size:.8rem;color:#aa9ce0;margin-left:auto}
  .staff-mobile-section{min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#969bad;font-size:.72rem;text-align:center}
  .staff-mobile-app-actions{display:flex;align-items:center;gap:6px;flex:0 0 auto}
  .staff-mobile-icon-action,.staff-mobile-profile-action{position:relative;display:grid;place-items:center;width:42px;height:42px;min-height:42px;border-radius:13px;color:#dadceb;text-decoration:none;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.065)}
  .staff-mobile-icon-action svg{width:21px;height:21px}.staff-mobile-icon-action b{position:absolute;top:-3px;right:-3px;min-width:18px;height:18px;padding:0 4px;display:grid;place-items:center;border-radius:99px;background:#8c64ff;color:#fff;font-size:.58rem;box-shadow:0 0 0 2px #0b0d17}
  .staff-mobile-profile-action{overflow:hidden;background:linear-gradient(135deg,rgba(126,87,241,.25),rgba(164,118,255,.08));font-weight:800}.staff-mobile-profile-action img{width:100%;height:100%;object-fit:cover}.staff-mobile-profile-action span{font-size:.9rem}

  /* Mobile secondary navigation becomes a bottom sheet, reachable with one thumb. */
  body.has-mobile-workspace .workspace-nav.workspace-drawer{display:block!important;position:fixed!important;left:0!important;right:0!important;top:auto!important;bottom:0!important;width:100%!important;max-width:none!important;height:min(86dvh,760px)!important;max-height:calc(100dvh - 18px)!important;margin:0!important;padding:0 12px calc(18px + env(safe-area-inset-bottom,0px))!important;border:0!important;border-top:1px solid rgba(255,255,255,.09)!important;border-radius:25px 25px 0 0!important;background:linear-gradient(180deg,rgba(16,18,31,.997),rgba(8,10,18,.999))!important;box-shadow:0 -28px 80px rgba(0,0,0,.56)!important;overflow-y:auto!important;overflow-x:hidden!important;overscroll-behavior:contain!important;-webkit-overflow-scrolling:touch!important;z-index:5102!important;transform:translate3d(0,105%,0)!important;transition:transform .27s cubic-bezier(.2,.8,.2,1)!important;scrollbar-width:none!important}
  body.has-mobile-workspace .workspace-nav.workspace-drawer::-webkit-scrollbar{display:none!important}
  body.has-mobile-workspace .workspace-nav.workspace-drawer.is-open{transform:translate3d(0,0,0)!important}
  body.workspace-drawer-open{overflow:hidden!important;touch-action:none!important}

  .workspace-brand-home{display:none!important}
  .workspace-primary-nav{display:none!important} /* already permanently reachable in bottom navigation */
  .workspace-drawer-head{display:grid!important;grid-template-columns:1fr auto!important;align-items:center!important;gap:9px!important;position:sticky!important;top:0!important;z-index:4!important;margin:0 -12px 8px!important;padding:17px 12px 10px!important;background:linear-gradient(180deg,rgba(16,18,31,1) 82%,rgba(16,18,31,.0))!important}
  .workspace-sheet-handle{display:block!important;position:absolute!important;top:7px!important;left:50%!important;width:42px!important;height:4px!important;transform:translateX(-50%)!important;border-radius:99px!important;background:rgba(255,255,255,.18)!important}
  .workspace-drawer-user{display:flex!important;align-items:center!important;gap:10px!important;min-width:0!important}
  .workspace-drawer-avatar{display:grid!important;place-items:center!important;width:40px!important;height:40px!important;flex:0 0 40px!important;padding:0!important;border-radius:13px!important;overflow:hidden!important;background:linear-gradient(135deg,rgba(126,87,241,.28),rgba(166,123,255,.1))!important;border:1px solid rgba(160,123,255,.2)!important;color:#fff!important;text-decoration:none!important;font-weight:800!important}.workspace-drawer-avatar img{width:100%!important;height:100%!important;object-fit:cover!important}
  .workspace-drawer-user-copy{min-width:0!important}.workspace-drawer-user-copy strong,.workspace-drawer-user-copy span{display:block!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}.workspace-drawer-user-copy strong{font-size:.9rem!important}.workspace-drawer-user-copy span{margin-top:1px!important;color:var(--muted)!important;font-size:.72rem!important}
  .workspace-drawer-close{display:grid!important;place-items:center!important;width:40px!important;height:40px!important;min-height:40px!important;padding:0!important;border-radius:12px!important;border:1px solid rgba(255,255,255,.08)!important;background:rgba(255,255,255,.04)!important;color:#fff!important;font-size:1.35rem!important}
  .workspace-primary-action{display:flex!important;align-items:center!important;justify-content:center!important;gap:7px!important;min-height:48px!important;margin:6px 0 12px!important;border-radius:14px!important;background:linear-gradient(135deg,#7152df,#936cfa)!important;color:#fff!important;box-shadow:0 10px 28px rgba(111,74,230,.18)!important}
  .workspace-primary-icon{font-size:1.2rem!important}

  body.has-mobile-workspace .workspace-nav-section{display:grid!important;gap:3px!important;margin:0 0 9px!important;padding:0 0 9px!important;border-bottom:1px solid rgba(255,255,255,.055)!important}
  body.has-mobile-workspace .workspace-nav-section:last-child{border-bottom:0!important}
  body.has-mobile-workspace .workspace-nav-section>.nav-label{margin:4px 8px 3px!important;padding:0!important;color:#858b9f!important;font-size:.64rem!important;letter-spacing:.12em!important;text-transform:uppercase!important}
  body.has-mobile-workspace .workspace-nav.workspace-drawer a.workspace-menu-item,body.has-mobile-workspace .workspace-drawer-logout button{display:flex!important;align-items:center!important;gap:10px!important;width:100%!important;min-height:46px!important;margin:0!important;padding:7px 10px!important;border-radius:12px!important;border:1px solid transparent!important;background:transparent!important;color:#d7d9e5!important;text-decoration:none!important;font-size:.88rem!important;text-align:left!important}
  body.has-mobile-workspace .workspace-nav-icon{display:grid!important;place-items:center!important;width:30px!important;height:30px!important;flex:0 0 30px!important;border-radius:9px!important;background:rgba(255,255,255,.035)!important;color:#a9adbf!important}.workspace-nav-icon svg{width:18px!important;height:18px!important}
  body.has-mobile-workspace .workspace-menu-item.is-active{background:rgba(126,87,241,.13)!important;border-color:rgba(145,107,255,.2)!important;color:#fff!important}
  body.has-mobile-workspace .workspace-drawer-logout button{border-color:rgba(255,94,116,.12)!important;background:rgba(255,79,103,.04)!important;color:#ffb1bb!important}

  .mobile-workspace-overlay{display:block!important;position:fixed!important;inset:0!important;z-index:5101!important;background:rgba(2,3,8,.68)!important;backdrop-filter:blur(4px)!important;opacity:0!important;pointer-events:none!important;transition:opacity .2s ease!important}.mobile-workspace-overlay.is-open{opacity:1!important;pointer-events:auto!important}.mobile-workspace-overlay[hidden]{display:none!important}

  /* One and only one primary navigation menu on mobile. */
  body.has-mobile-workspace .mobile-admin-bottom-nav{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;position:fixed!important;left:7px!important;right:7px!important;bottom:calc(7px + env(safe-area-inset-bottom,0px))!important;z-index:5000!important;min-height:64px!important;padding:5px!important;gap:1px!important;border-radius:19px!important;background:rgba(12,14,24,.97)!important;border:1px solid rgba(255,255,255,.09)!important;box-shadow:0 16px 46px rgba(0,0,0,.48)!important;backdrop-filter:blur(22px)!important}
  body.has-mobile-workspace .mobile-admin-bottom-nav>a,body.has-mobile-workspace .mobile-admin-bottom-nav>button{position:relative!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:2px!important;min-width:0!important;min-height:52px!important;margin:0!important;padding:4px 1px!important;border:0!important;border-radius:14px!important;background:transparent!important;color:#979bad!important;text-decoration:none!important;font:inherit!important}
  body.has-mobile-workspace .mobile-admin-bottom-nav .mobile-tab-icon{display:grid!important;place-items:center!important;width:23px!important;height:23px!important}.mobile-tab-icon svg{width:20px!important;height:20px!important}
  body.has-mobile-workspace .mobile-admin-bottom-nav small{display:block!important;max-width:100%!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;font-size:.58rem!important;line-height:1.05!important}
  body.has-mobile-workspace .mobile-admin-bottom-nav>a.is-active{color:#fff!important;background:rgba(126,87,241,.14)!important}.mobile-admin-bottom-nav>a.is-active .mobile-tab-icon{color:#cdbfff!important}
  body.has-mobile-workspace .mobile-admin-bottom-nav>button[aria-expanded="true"]{color:#fff!important;background:rgba(126,87,241,.14)!important}
  .mobile-tab-with-badge b{position:absolute!important;top:2px!important;left:calc(50% + 7px)!important;min-width:17px!important;height:17px!important;padding:0 4px!important;display:grid!important;place-items:center!important;border-radius:99px!important;background:#8b61ff!important;color:#fff!important;font-size:.56rem!important;box-shadow:0 0 0 2px rgba(12,14,24,.97)!important}

  /* Mobile-first content ergonomics: less wasted space, larger touch targets, no desktop overflow. */
  body.has-mobile-workspace .dashboard-shell{padding-top:8px!important;padding-bottom:16px!important}
  body.has-mobile-workspace .dashboard-shell>.container{padding-left:10px!important;padding-right:10px!important}
  body.has-mobile-workspace .dashboard-grid{display:block!important}
  body.has-mobile-workspace .dashboard-main{width:100%!important;min-width:0!important}
  body.has-mobile-workspace .dashboard-head{display:grid!important;grid-template-columns:1fr!important;gap:9px!important;margin:8px 0 13px!important}
  body.has-mobile-workspace .dashboard-head h1{font-size:clamp(1.55rem,7vw,2.05rem)!important;line-height:1.06!important;overflow-wrap:anywhere!important}
  body.has-mobile-workspace .dashboard-head p{margin-top:4px!important;max-width:none!important;font-size:.88rem!important;line-height:1.5!important}
  body.has-mobile-workspace button,body.has-mobile-workspace .primary-btn,body.has-mobile-workspace .ghost-btn{min-height:44px}
  body.has-mobile-workspace input,body.has-mobile-workspace select,body.has-mobile-workspace textarea{font-size:16px!important;max-width:100%!important}
  body.has-mobile-workspace .dashboard-main>.card,body.has-mobile-workspace .dashboard-main .panel,body.has-mobile-workspace .settings-card,body.has-mobile-workspace .legal-settings-card,body.has-mobile-workspace .access-role-card{border-radius:16px!important;padding:14px!important}
  body.has-mobile-workspace .dashboard-head .inline-actions,body.has-mobile-workspace .messages-head-actions-v131{display:grid!important;grid-template-columns:1fr!important;gap:7px!important;width:100%!important}
  body.has-mobile-workspace .dashboard-head .inline-actions>*,body.has-mobile-workspace .messages-head-actions-v131>*{width:100%!important;justify-content:center!important}
  body.has-mobile-workspace .table-wrap{max-width:100%!important;overflow-x:auto!important;-webkit-overflow-scrolling:touch!important}
  body.has-mobile-workspace .project-savebar-final,body.has-mobile-workspace .mobile-sticky-save{bottom:calc(var(--staff-bottom-h) + 12px + env(safe-area-inset-bottom,0px))!important}
  body.has-mobile-workspace .chat-composer,body.has-mobile-workspace .composer-shell{margin-bottom:calc(var(--staff-bottom-h) + 6px)!important}
}

@media (max-width:390px){
  .staff-mobile-section{display:none!important}.staff-mobile-brand{max-width:none!important;flex:1!important}.staff-mobile-brand-copy strong{font-size:.76rem!important}
  body.has-mobile-workspace .mobile-admin-bottom-nav{left:4px!important;right:4px!important;bottom:calc(4px + env(safe-area-inset-bottom,0px))!important;padding:4px!important;border-radius:17px!important}
  body.has-mobile-workspace .mobile-admin-bottom-nav small{font-size:.54rem!important}
}