/* Staff shell v4: consistent desktop polish + global search + laptop/tablet/mobile navigation */
:root{--staff-sidebar:244px;--staff-topbar:68px;--staff-radius:16px;--staff-shadow:0 8px 28px rgba(5,36,99,.055)}
body{background:linear-gradient(180deg,#f7f9fc 0,#f3f6fa 260px,#f4f7fb 100%)}
.topbar{height:var(--staff-topbar);padding:0 24px;box-shadow:0 1px 0 rgba(5,36,99,.025);backdrop-filter:saturate(1.05);gap:18px}
.brand img{width:198px}.shell{grid-template-columns:var(--staff-sidebar) minmax(0,1fr);min-height:calc(100vh - var(--staff-topbar))}
.side{padding:20px 14px;box-shadow:inset -1px 0 rgba(255,255,255,.05)}
.nav-title{margin:6px 12px 12px}.nav a{min-height:43px;padding:10px 13px;border-radius:11px;margin-bottom:4px;font-weight:650;transition:background .14s ease,transform .14s ease}.nav a:hover{transform:translateX(2px)}.nav a.active{background:rgba(255,255,255,.15);color:#fff;box-shadow:inset 3px 0 #63b3ff}
.main{padding:28px 30px 44px;max-width:1540px;margin:0 auto}.card{border-radius:var(--staff-radius);box-shadow:var(--staff-shadow)}
.btn{transition:transform .12s ease,box-shadow .12s ease,background .12s ease}.btn:hover{transform:translateY(-1px)}.btn.primary:hover{box-shadow:0 6px 16px rgba(0,104,204,.18)}
.input,.select,.textarea{transition:border-color .12s ease,box-shadow .12s ease}.input:focus,.select:focus,.textarea:focus{outline:0;border-color:#7db7eb;box-shadow:0 0 0 3px rgba(0,104,204,.10)}
.table th{background:#fafbfd;position:relative}.table tbody tr{transition:background .12s ease}.table tbody tr:hover{background:#f8fbff}
.top-actions{flex-wrap:wrap;justify-content:flex-end;gap:8px}.nav-toggle{display:none;border:1px solid var(--line);background:#fff;color:var(--navy);border-radius:10px;padding:9px 11px;font-weight:800;cursor:pointer}.side-backdrop{display:none}
.staff-global-search{position:relative;display:flex;align-items:center;flex:1;max-width:430px;min-width:190px;margin-left:auto}.staff-global-search input{width:100%;height:39px;border:1px solid #d9e1eb;border-radius:11px;background:#f8fafc;padding:0 70px 0 13px;color:var(--ink);outline:0}.staff-global-search input:focus{background:#fff;border-color:#7db7eb;box-shadow:0 0 0 3px rgba(0,104,204,.09)}.staff-global-search button{position:absolute;right:4px;width:34px;height:31px;border:0;border-radius:8px;background:transparent;color:var(--navy);font-size:19px;cursor:pointer}.search-shortcut{position:absolute;right:39px;font-size:10px;color:#8290a5;border:1px solid #dce3ec;border-radius:5px;padding:2px 4px;background:#fff;pointer-events:none}.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* Laptop: preserve full portal but spend less space on chrome. */
@media(max-width:1280px){:root{--staff-sidebar:214px}.topbar{padding:0 18px}.brand img{width:184px}.top-actions{gap:5px}.top-actions .btn.small{padding:7px 8px;font-size:11px}.staff-global-search{max-width:310px}.main{padding:22px 22px 36px}.side{padding-left:10px;padding-right:10px}.nav a{padding-left:11px;padding-right:11px}.grid4{gap:12px}.card{padding:18px}}
@media(max-width:1080px){.top-actions .btn.small:nth-of-type(1),.top-actions .btn.small:nth-of-type(2){display:none}.staff-global-search{max-width:280px}.main{padding:20px}.grid4{grid-template-columns:repeat(2,minmax(0,1fr))}.form-grid{gap:11px}.hero-customer{gap:14px}.policy-card{min-width:760px}.policy-list{overflow-x:auto}}
/* Tablet/mobile uses a real drawer instead of crushing the work area. */
@media(max-width:950px){
  :root{--staff-topbar:64px}.topbar{height:var(--staff-topbar)}.brand img{width:180px}.nav-toggle{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-width:92px}.top-actions{display:none}.staff-global-search{max-width:none;margin-left:0}.search-shortcut{display:none}
  .shell{display:block;min-height:calc(100vh - var(--staff-topbar))}.side{display:block!important;position:fixed;left:0;top:var(--staff-topbar);bottom:0;width:min(300px,86vw);z-index:50;transform:translateX(-105%);transition:transform .18s ease;overflow-y:auto;box-shadow:18px 0 50px rgba(5,36,99,.18)}
  body.nav-open .side{transform:translateX(0)}.side-backdrop{display:block;position:fixed;inset:var(--staff-topbar) 0 0 0;background:rgba(5,22,55,.38);z-index:45;opacity:0;pointer-events:none;transition:opacity .18s ease}body.nav-open .side-backdrop{opacity:1;pointer-events:auto}body.nav-open{overflow:hidden}
  .main{padding:18px;max-width:none;margin:0}.table{min-width:720px}.card:has(>.table),.card:has(.preview-table),.preview-table-wrap{overflow-x:auto}.section-head{flex-wrap:wrap}.customer-actions{flex-wrap:wrap}
}
@media(max-width:700px){.grid4,.grid2,.form-grid{grid-template-columns:1fr}.form-grid .full{grid-column:auto}.kv{grid-template-columns:1fr;gap:3px}.kv div:nth-child(even){margin-bottom:9px}.section-head{display:block}.section-head>*+*{margin-top:10px}.customer-actions{justify-content:flex-start}.btn{min-height:40px}}
@media(max-width:600px){
  :root{--staff-topbar:60px}.topbar{height:var(--staff-topbar);padding:0 10px;gap:8px}.brand img{width:132px}.nav-toggle{min-width:42px;padding:8px}.nav-toggle .nav-toggle-label{display:none}.staff-global-search{min-width:0}.staff-global-search input{height:37px;padding-left:10px;padding-right:38px;font-size:13px}.main{padding:13px 12px 28px}h1{font-size:25px;line-height:1.12}.lead{margin-bottom:18px}.card{padding:15px;border-radius:14px}.tabs{overflow-x:auto;flex-wrap:nowrap;padding-bottom:5px;scrollbar-width:thin}.tabs a{white-space:nowrap}.row{align-items:flex-start;flex-wrap:wrap;gap:9px}.grid4{grid-template-columns:1fr}.stat .num{font-size:28px}.floating-idea-btn{right:14px;bottom:14px}.hero-customer{flex-direction:column}.customer-actions{width:100%}.customer-actions .btn,.customer-actions form{max-width:100%}
}
@media(prefers-reduced-motion:reduce){.side,.side-backdrop,.nav a,.btn{transition:none!important}}