/* Khalid Networks v12.14 — mobile-first collector portal */

/* One clean brand mark only */
.staff-app-brand::before{display:none!important;content:none!important}
.staff-app-brand img{display:block!important;width:170px!important;height:48px!important;object-fit:contain!important;object-position:left center!important}

/* Keep desktop polished but reduce unnecessary height */
.staff-app-body{overflow-x:hidden!important}
.staff-app-shell{width:min(1180px,100%)!important}
.staff-app-card{min-width:0!important}
.staff-app-head,.staff-app-head>div{min-width:0!important}
.staff-app-head p,#staff-areas{overflow-wrap:anywhere!important}
.duty-details,.staff-status-card,.privacy-note,#staff-work,.workflow-card{min-width:0!important}
#staff-work .toolbar{-webkit-overflow-scrolling:touch}

/* Collector tablet */
@media(max-width:760px){
  html,body{max-width:100%;overflow-x:hidden!important}
  .staff-app-body{display:block!important;min-height:100dvh!important;padding:0!important;background:#f4f7fb!important}
  .staff-app-shell{width:100%!important;max-width:none!important;margin:0!important;padding:0!important}
  .staff-app-card{width:100%!important;min-height:100dvh!important;margin:0!important;padding:16px!important;border:0!important;border-radius:0!important;box-shadow:none!important;background:#f7f9fd!important;overflow:visible!important}

  .staff-app-brand{position:sticky!important;top:0!important;z-index:30!important;margin:-16px -16px 0!important;padding:10px 16px!important;min-height:66px!important;background:rgba(255,255,255,.96)!important;backdrop-filter:blur(12px)!important;border-bottom:1px solid #e5eaf3!important;box-shadow:0 4px 16px rgba(30,48,84,.06)!important}
  .staff-app-brand img{width:145px!important;height:44px!important}

  .staff-app-head{grid-template-columns:58px minmax(0,1fr)!important;gap:12px!important;padding:18px 2px 10px!important;margin:0!important}
  .staff-hero-avatar{width:56px!important;height:56px!important;border-radius:16px!important;font-size:21px!important}
  .staff-app-head .eyebrow{font-size:9px!important;letter-spacing:1.4px!important}
  .staff-app-head h1{font-size:23px!important;line-height:1.15!important;margin:3px 0 5px!important}
  .staff-app-head p{font-size:13px!important;line-height:1.45!important;margin:0!important}

  .staff-message{margin:8px 0 12px!important;padding:11px 12px!important;font-size:12px!important;line-height:1.45!important;border-radius:11px!important}
  .staff-session-bar{margin:10px 0!important;padding:0 2px!important;gap:10px!important}
  .staff-session-bar span{font-size:11px!important}
  .staff-session-bar button{min-height:38px!important;padding:8px 12px!important}

  .duty-details{padding:0!important;margin:0 0 14px!important;border:1px solid #dfe6f2!important;border-radius:15px!important;background:#fff!important;overflow:hidden!important;box-shadow:0 8px 22px rgba(30,48,84,.05)!important}
  .duty-details>summary{padding:14px 14px!important;font-size:14px!important;color:#263451!important;background:#fbfcff!important;list-style-position:inside!important}
  .duty-details[open]>summary{border-bottom:1px solid #e8edf5!important}
  .duty-details>*:not(summary){margin-left:12px!important;margin-right:12px!important}
  .staff-status-card{display:grid!important;grid-template-columns:1fr!important;gap:6px!important;align-items:start!important;margin:12px!important;padding:12px!important}
  .staff-status-card small{font-size:11px!important;line-height:1.4!important}
  .privacy-note{margin:0 12px 12px!important;padding:12px!important;border-radius:11px!important;font-size:11px!important;line-height:1.45!important}
  .privacy-note p{margin:6px 0 0!important;font-size:11px!important;line-height:1.5!important}
  .staff-actions{display:grid!important;grid-template-columns:1fr!important;gap:9px!important;margin:0 12px 12px!important}
  .staff-actions button,.staff-actions .quiet-button{grid-column:auto!important;width:100%!important;min-height:48px!important;font-size:14px!important;border-radius:12px!important}

  .workspace-stats{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important;margin:14px 0!important}
  .workspace-stats>div{padding:14px!important;min-height:92px!important;border-radius:14px!important}
  .workspace-stats small{font-size:10px!important;line-height:1.35!important}
  .workspace-stats strong{font-size:20px!important;margin-top:5px!important}

  #staff-work h2{font-size:20px!important;margin:18px 0 9px!important}
  #staff-work .toolbar{position:sticky!important;top:66px!important;z-index:24!important;display:flex!important;flex-wrap:nowrap!important;gap:6px!important;width:calc(100% + 32px)!important;max-width:none!important;margin:0 -16px 12px!important;padding:9px 16px!important;overflow-x:auto!important;overflow-y:hidden!important;background:rgba(247,249,253,.97)!important;backdrop-filter:blur(10px)!important;border-top:1px solid #e8edf5!important;border-bottom:1px solid #e3e9f3!important;border-radius:0!important;scrollbar-width:none!important;box-shadow:0 6px 15px rgba(30,48,84,.04)!important}
  #staff-work .toolbar::-webkit-scrollbar{display:none!important}
  #staff-work .toolbar button{flex:0 0 auto!important;min-height:42px!important;padding:9px 13px!important;font-size:12px!important;white-space:nowrap!important;border-radius:10px!important}
  #staff-work .toolbar button.primary{color:#fff!important;background:linear-gradient(135deg,#3158e7,#6c55f5)!important}
  #staff-work-message{font-size:12px!important;line-height:1.45!important;margin:8px 0!important}

  #staff-work-content{min-width:0!important}
  #staff-work .workflow-card{padding:15px!important;border-radius:15px!important;margin:10px 0!important;box-shadow:0 8px 20px rgba(30,48,84,.05)!important}
  #staff-work .workflow-card h3{font-size:16px!important;line-height:1.3!important;overflow-wrap:anywhere!important}
  #staff-work .workflow-card p,#staff-work .workflow-card small{font-size:12px!important;line-height:1.5!important;overflow-wrap:anywhere!important}

  .workflow-filters{display:grid!important;grid-template-columns:1fr!important;gap:8px!important;padding:8px 0 2px!important}
  .workflow-filters>*{width:100%!important;max-width:none!important;min-width:0!important;min-height:46px!important;font-size:14px!important}
  #staff-work .form-grid{display:grid!important;grid-template-columns:1fr!important;gap:10px!important}
  #staff-work label{font-size:12px!important}
  #staff-work input,#staff-work select,#staff-work textarea{width:100%!important;max-width:none!important;min-width:0!important;min-height:46px!important;font-size:16px!important;border-radius:11px!important;box-sizing:border-box!important}
  #staff-work textarea{min-height:100px!important}
  #staff-work form>button.primary,#staff-work details form>button.primary{width:100%!important;min-height:48px!important;margin-top:10px!important;border-radius:12px!important;font-size:14px!important}
  .bill-card details{margin-top:11px!important}
  .bill-card summary{padding:10px 0!important;font-size:13px!important}

  .staff-profile-card{grid-template-columns:1fr!important;gap:12px!important;text-align:left!important}
  .staff-profile-card>div:first-child{display:flex!important;align-items:center!important;gap:12px!important}
  .staff-profile-photo{flex:0 0 72px!important;width:72px!important;height:72px!important;border-radius:18px!important;font-size:23px!important}
  .staff-photo-actions{margin:0!important;display:grid!important;grid-template-columns:1fr!important;gap:7px!important;flex:1!important}
  .staff-photo-actions label,.staff-photo-actions button{width:100%!important;min-height:38px!important;justify-content:center!important;text-align:center!important}
  .staff-profile-meta-grid{grid-template-columns:1fr!important;gap:7px!important}
  .staff-profile-meta-grid div{padding:10px!important}

  .workflow-empty{padding:28px 14px!important;text-align:center!important;font-size:13px!important;line-height:1.5!important}
  .staff-app-footer{padding:18px 6px 24px!important;font-size:10px!important;line-height:1.5!important}
}

/* Narrow phones */
@media(max-width:420px){
  .staff-app-card{padding:12px!important}
  .staff-app-brand{margin:-12px -12px 0!important;padding:9px 12px!important;min-height:60px!important}
  .staff-app-brand img{width:132px!important;height:40px!important}
  .staff-app-head{grid-template-columns:52px minmax(0,1fr)!important;gap:10px!important;padding-top:14px!important}
  .staff-hero-avatar{width:50px!important;height:50px!important;border-radius:15px!important}
  .staff-app-head h1{font-size:21px!important}
  .staff-app-head p{font-size:12px!important}
  #staff-work .toolbar{top:60px!important;width:calc(100% + 24px)!important;margin-left:-12px!important;margin-right:-12px!important;padding-left:12px!important;padding-right:12px!important}
  .workspace-stats{gap:8px!important}
  .workspace-stats>div{padding:12px!important;min-height:86px!important}
  .workspace-stats strong{font-size:18px!important}
}