/* Shared responsive behavior: desktop back office, mobile-first talent portal. */
.camp-assignment{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px;margin:16px 0;background:#fff8ee;border:1px solid #f1ddc9;border-radius:12px}
.camp-assignment b{display:block;font-size:13px}.camp-assignment p{font-size:12px;margin-top:5px}.camp-assignment button{flex:0 0 auto}
html{min-width:0}body{min-width:0;overflow-x:hidden}
main{max-width:none;width:calc(100% - 244px);min-width:0}
main>section{min-width:0;max-width:1680px;margin-inline:auto}
main>section .hero,main>section .topbar{min-width:0}
.cards,.content,.panel,.metric{min-width:0}
.metric .val,.portal-real-metrics strong{overflow-wrap:anywhere}
.table-wrap,.crm-table-wrap,.directory-table-wrap,.sale-table,.quote-table,.fin-table,.camp-table{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.modal-back,.camp-overlay,.sale-overlay,.quote-overlay,.fin-overlay{overscroll-behavior:contain}
@media(min-width:1600px){main{padding-left:clamp(38px,3vw,76px);padding-right:clamp(38px,3vw,76px)}.cards{gap:20px}.content{gap:22px}}
@media(max-width:1100px) and (min-width:781px){main{width:calc(100% - 244px)}.content{grid-template-columns:1fr}.panel{min-width:0}}
@media(max-width:780px){
  aside{position:relative;inset:auto;width:100%;max-width:100vw;overflow:hidden;padding:10px 14px 0}
  aside .nav-list{max-width:100%;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;overscroll-behavior-x:contain;padding-bottom:10px}
  aside .nav{min-height:44px;flex:0 0 auto}
  main{margin:0;width:100%;padding:20px 16px 46px}
  .topbar{margin-bottom:18px}.top-right{gap:8px;flex-wrap:wrap}.rolebox{min-width:0}.rolebox select{max-width:145px}
  .hero{flex-wrap:wrap;align-items:flex-start;gap:14px}.hero>div{min-width:0;flex:1 1 240px}.hero>.btn{min-height:44px}
  .panel-head,.crm-list-top,.directory-toolbar,.sale-toolbar,.quote-actions,.fin-toolbar,.camp-toolbar{flex-wrap:wrap}
  .panel-head>*{min-width:0}.table-wrap{width:100%}
  input,select,textarea{max-width:100%}
  .modal-back{padding:12px}.modal{max-height:calc(100dvh - 24px);overflow-y:auto}
  .camp-overlay{align-items:flex-start;padding:10px}.camp-editor,.camp-detail{max-height:calc(100dvh - 20px)}
  .sale-editor,.quote-editor,.crm-editor,.directory-editor{max-height:calc(100dvh - 20px)}
  .portal-real-hero{padding:24px 20px;margin-bottom:16px}
  .portal-real-metrics{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:16px}
  .portal-real-metrics article{min-width:0;padding:17px;gap:8px}
  .portal-real-metrics strong{font-size:clamp(20px,5vw,27px)}
  .portal-real-bar{align-items:stretch;gap:12px;flex-direction:column;margin:15px 0}
  .portal-real-bar>div{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .portal-real-bar button[data-portal-tab]{padding:12px 6px;min-height:44px;font-size:12px}
  #portalRefresh{align-self:flex-end;min-height:44px}
  .portal-admin-selector{padding:16px;max-width:100%}
  #portalTalentResults button{min-height:44px}
  .portal-real-table{background:transparent;border:0;overflow:visible}
  .portal-real-table table{min-width:0;width:100%;display:block}
  .portal-real-table thead{display:none}
  .portal-real-table tbody{display:grid;gap:11px}
  .portal-real-table tr{display:grid;grid-template-columns:1fr;gap:0;background:#fff;border:1px solid #e6e2d8;border-radius:13px;padding:13px 16px;min-width:0}
  .portal-real-table td{display:flex;justify-content:space-between;align-items:start;gap:15px;width:100%;min-width:0;border-bottom:1px solid #f1eee7;padding:10px 0;font-size:13px;text-align:right;overflow-wrap:anywhere}
  .portal-real-table td:first-child{display:block;text-align:left;font-size:15px;padding:4px 0 13px}
  .portal-real-table td:last-child{border-bottom:0}
  .portal-real-table td:not(:first-child)::before{content:attr(data-label);font-size:11px;font-weight:700;color:#85837d;text-align:left;flex:0 0 38%;text-transform:uppercase;letter-spacing:.02em}
  .portal-real-table tr:has(.portal-empty){display:block}.portal-real-table .portal-empty{text-align:center;display:block;padding:24px!important}
  .portal-real-table .portal-empty::before{display:none}
}
@media(max-width:520px){
  .camp-assignment{flex-direction:column;align-items:stretch}.camp-assignment button{width:100%}
  main{padding:17px 12px 38px}.cards{grid-template-columns:repeat(2,minmax(0,1fr))}.metric{padding:14px 12px}.metric .val{font-size:clamp(17px,5vw,22px)}
  .hero h1,h1{font-size:clamp(23px,6.5vw,29px);line-height:1.2}
  .portal-real-hero{padding:20px 16px}.portal-real-hero h1{font-size:25px;line-height:1.25}
  .portal-real-metrics article{padding:14px 12px}.portal-real-metrics strong{font-size:20px}
  .camp-fields,.sale-form-grid,.quote-editor-grid,.crm-editor-form,.directory-form,.directory-fields{grid-template-columns:1fr!important}
  .sale-toolbar input,.sale-toolbar select,.camp-toolbar input,.camp-toolbar select,.fin-toolbar input,.fin-toolbar select{min-width:0;max-width:100%;width:100%}
  .camp-toolbar .btn,.sale-toolbar .btn{width:100%}
  .camp-viewbar{flex-wrap:wrap;gap:12px}.camp-detail-stats{grid-template-columns:1fr}
  .modal-actions,.camp-editor footer{flex-wrap:wrap}.modal-actions button,.camp-editor footer button{min-height:44px}
  .portal-real-table td:not(:first-child)::before{flex-basis:40%}
}

/* Sidebar drawer for compact screens. Desktop retains the full Between wordmark and existing navigation. */
.mobile-nav-hamburger{display:none}
.mobile-nav-backdrop[hidden]{display:none!important}
@media(max-width:780px){
  #betweenSidebar{position:fixed;inset:0 auto 0 0;width:min(280px,84vw);max-width:none;height:100dvh;z-index:1100;display:flex;flex-direction:column;overflow-y:auto;padding:62px 16px 20px;transform:translateX(-105%);transition:transform .22s ease;box-shadow:12px 0 40px #14141419}
  .between-mobile-nav-open #betweenSidebar{transform:translateX(0)}
  #betweenSidebar .brand{padding:0 8px 15px}
  #betweenSidebar .brand img{max-width:185px;height:auto}
  #betweenSidebar .group-label{margin:20px 12px 10px}
  #betweenSidebar .nav-list{overflow:visible;display:flex;flex-direction:column;padding:0}
  #betweenSidebar .nav{width:100%;flex:0 0 auto;min-height:46px}
  #betweenSidebar .side-footer{display:none}
  .mobile-nav-hamburger{display:grid;place-items:center;flex:0 0 auto;width:42px;height:42px;background:#fff;border:1px solid #e9e5dd;border-radius:11px;color:#252320;font-size:25px;line-height:1}
  #mobileNavClose{position:absolute;top:14px;right:16px;background:#333;color:#fff;border-color:#515151}
  .mobile-nav-backdrop{display:block;position:fixed;inset:0;background:rgba(22,21,19,.52);z-index:1090}
  body.between-mobile-nav-open{overflow:hidden}
  main{margin-left:0;width:100%;padding:12px 16px 38px}
  .topbar{min-height:48px;gap:10px;align-items:center;margin-bottom:12px}
  .crumb{font-size:12px;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .top-right{margin-left:auto;flex-wrap:nowrap}
  .top-right>.pill{display:none}
  .rolebox{padding:5px 8px}
  .rolebox select{max-width:95px;font-size:12px}
}
@media(prefers-reduced-motion:reduce){#betweenSidebar{transition:none}}

/* Mobile-only two-card pagination; desktop always shows the complete table. */
.portal-mobile-pagination{display:none}
@media(max-width:780px){
  #betweenSidebar{overflow-x:visible}
  #betweenSidebar .brand.brand-between{box-sizing:border-box;overflow:visible;width:100%;height:auto;min-height:112px;margin:0;align-items:center;justify-content:center;padding:0 8px 14px}
  #betweenSidebar .brand.brand-between img{display:block;width:100%;max-width:208px;height:auto;max-height:none;object-fit:contain;object-position:center}
  #betweenSidebar .brand.brand-between small{position:static;display:block;margin:3px 0 0;letter-spacing:2.6px;font-size:8px;text-align:center}
  .portal-real-table tr.portal-mobile-hidden{display:none}
  .portal-mobile-pagination{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:14px 0 24px}
  .portal-mobile-pagination button{min-height:42px;padding:10px 14px;background:#fff;border:1px solid #e5ded3;border-radius:11px;color:#242321;font-size:13px;font-weight:700}
  .portal-mobile-pagination button:disabled{opacity:.4;cursor:not-allowed}
  .portal-mobile-pagination span{color:#77756f;font-size:12px;font-weight:700;text-align:center}
}