/* UMWE mobile application layout — phone-first refinement */
@media (max-width:760px){
  :root{--mobile-nav-h:74px}
  html,body,#root{min-height:100%;width:100%;overflow-x:hidden}
  body{padding-bottom:calc(var(--mobile-nav-h) + env(safe-area-inset-bottom));background:var(--bg)}
  .app{min-height:100svh;width:100%;overflow-x:hidden}

  /* Compact phone header */
  .topbar{height:64px;padding:8px 12px 8px 62px;gap:7px;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
  .menu-fab{position:fixed;left:12px;top:10px;width:42px;height:42px;border-radius:13px;z-index:60}
  .top-actions{margin-left:auto;gap:6px}
  .icon-btn{width:40px;height:40px;border-radius:50%;display:grid;place-items:center}
  .profile-chip{width:40px;height:40px;padding:3px;border-radius:50%;display:grid;place-items:center}
  .profile-chip>span,.profile-chip>.chev{display:none!important}
  .nav-back{padding:8px 9px;font-size:11px;white-space:nowrap}

  /* Main content */
  .page,.dashboard-page{padding:14px 14px 24px!important;max-width:none!important;width:100%;box-sizing:border-box}
  .page>header{align-items:flex-start;gap:9px;margin-bottom:14px}
  .page h1{font-size:27px;line-height:1.05}

  /* Dashboard hero becomes a clean phone welcome */
  .umwe-approved-top{display:block!important;min-height:0!important;margin:0 0 14px!important;padding:0!important}
  .umwe-approved-top>.dashboard-visual{display:none!important}
  .umwe-approved-copy{padding:0!important;min-height:0!important}
  .umwe-approved-brand{gap:9px!important;margin-bottom:12px!important}
  .umwe-approved-brand img{width:38px!important;height:38px!important}
  .umwe-approved-brand strong{font-size:19px!important}
  .umwe-approved-brand span{font-size:8px!important;letter-spacing:.22em!important;margin-top:2px!important}
  .umwe-approved-copy h1{font-size:27px!important;line-height:1.1!important;margin:6px 0!important}
  .umwe-approved-copy h1 b{font-size:31px!important}
  .umwe-approved-copy>p{font-size:12px!important;margin:0!important;opacity:.7}
  .umwe-approved-copy .quote,.quote{display:none!important}
  .welcome{display:block;margin:2px 0 14px}
  .welcome .eyebrow{font-size:9px;letter-spacing:2.5px}
  .welcome h1{font-size:27px;margin:6px 0 4px;line-height:1.08}
  .welcome h1 b{font-size:31px}
  .welcome p{font-size:12px;margin:0}

  /* KPI cards: two-column phone grid */
  .summary-cards,.summary-cards.admin,.umwe-approved-stats{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px!important;margin:12px 0 16px!important}
  .summary-card2,.umwe-approved-stat{min-height:88px!important;padding:12px!important;border-radius:16px!important;gap:8px!important;box-sizing:border-box}
  .summary-icon{width:34px!important;height:34px!important;border-radius:11px!important}
  .summary-card2 strong,.umwe-approved-stat strong{font-size:20px!important;line-height:1!important}
  .summary-card2 small,.umwe-approved-stat small{font-size:10px!important;line-height:1.25!important}

  /* Analytics stack naturally on phone */
  .dashboard-columns,.admin-dashboard-grid,.task-detail-grid,.settings-grid,.umwe-ops-grid,.umwe-people-grid{display:grid!important;grid-template-columns:1fr!important;gap:12px!important}
  .umwe-ops-grid>.panel,.umwe-people-grid>.panel{width:100%!important;min-width:0!important;height:auto!important}
  .panel{padding:13px!important;border-radius:16px!important;min-width:0}
  .panel h2,.panel h3{line-height:1.2}
  .dashboard-visual{height:155px;border-radius:17px}
  canvas,svg{max-width:100%}

  /* Tasks and cards */
  .task-grid{grid-template-columns:1fr!important;gap:10px!important}
  .task-card{border-radius:16px!important}
  .task-card,.submission-card,.payment-card{max-width:100%;box-sizing:border-box}

  /* Tables stay usable instead of crushing columns */
  .table-wrap,.users-table{overflow-x:auto!important;-webkit-overflow-scrolling:touch;max-width:100%}
  table{min-width:620px}

  /* Sidebar becomes the phone More drawer */
  .sidebar{position:fixed!important;left:10px!important;top:10px!important;bottom:calc(var(--mobile-nav-h) + 10px)!important;width:min(84vw,310px)!important;height:auto!important;border-radius:22px!important;z-index:100!important;box-shadow:0 22px 60px rgba(0,0,0,.28)!important;overflow-y:auto!important}
  .sidebar nav{padding-bottom:16px}

  /* Mobile overlays */
  .popover.notifications{position:fixed!important;left:10px!important;right:10px!important;top:62px!important;width:auto!important;max-height:72vh;overflow:auto;z-index:120}
  .popover.profile-menu{position:fixed!important;left:10px!important;right:10px!important;top:62px!important;width:auto!important;z-index:120}
  .modal,.modal-card{max-width:calc(100vw - 24px)!important;max-height:calc(100svh - 28px)!important;overflow:auto!important}

  /* Settings */
  .settings-nav{display:flex!important;overflow-x:auto;gap:7px;padding-bottom:3px;scrollbar-width:none}
  .settings-nav::-webkit-scrollbar{display:none}
  .settings-nav button{min-width:max-content}
  .settings-panel .professional-theme-options{grid-template-columns:1fr!important}

  /* Messages: list/chat become a single phone workspace */
  .umwe-messages{padding:10px 10px 18px!important}
  .msg-page-head{gap:8px!important;align-items:flex-start!important}
  .msg-page-head h1{font-size:27px!important}
  .msg-page-head p{font-size:11px!important}
  .msg-new{padding:9px 11px!important;font-size:11px!important;white-space:nowrap}
  .msg-shell{display:grid!important;grid-template-columns:1fr!important;min-height:calc(100svh - 190px)!important;border-radius:18px!important;overflow:hidden!important}
  .msg-list{width:100%!important;min-width:0!important;border-right:0!important}
  .msg-chat{width:100%!important;min-width:0!important}
  .msg-details{display:none!important}
  .msg-person{padding:12px!important}
  .msg-avatar{flex:0 0 auto}
  .msg-thread{padding:14px 10px!important}
  .msg-bubble{max-width:84%!important}
  .msg-compose{padding:10px!important}
  .msg-compose input{min-width:0}

  /* Login/access request */
  input,textarea,select{font-size:16px!important}
  .auth-shell{min-height:100svh;display:block!important}
  .auth-card{width:100%!important;min-height:100svh;padding:30px 20px!important;border-radius:0!important}
  .auth-hero{display:none!important}
  .request-card{width:calc(100% - 22px)!important;margin:11px auto!important;padding:20px!important}
}

@media (max-width:420px){
  .page,.dashboard-page{padding-left:12px!important;padding-right:12px!important}
  .summary-cards,.summary-cards.admin,.umwe-approved-stats{grid-template-columns:1fr 1fr!important;gap:8px!important}
  .summary-card2>svg{display:none}
  .summary-card2,.umwe-approved-stat{min-height:82px!important;padding:10px!important}
  .dashboard-visual{height:145px}
}