.staff-page{padding:110px 0 60px;background:#f8fafc;min-height:100vh}.staff-preview-bar{margin:0 0 16px;padding:10px 14px;border:1px solid #bfeaf8;border-radius:12px;background:#effbff;color:#007fa8;font-weight:800;font-size:.82rem}.staff-user{display:flex;align-items:center;gap:10px}.staff-avatar{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:linear-gradient(135deg,#00aeef,#007fa8);color:#fff;font-weight:900}.staff-signout{width:100%;min-width:0;margin-top:14px}.staff-welcome{display:flex;align-items:center;justify-content:space-between;gap:18px;background:linear-gradient(135deg,#effcff,#fff)}.staff-day-summary{display:grid;place-items:center;min-width:110px;padding:14px;border-radius:16px;background:#0b1120;color:#fff}.staff-day-summary strong{font-size:1.7rem;line-height:1}.staff-day-summary span{font-size:.72rem;font-weight:700;margin-top:4px}.staff-job-list{display:grid;gap:10px}.staff-job-card{display:grid;grid-template-columns:86px 1fr auto;align-items:center;gap:14px;width:100%;padding:15px;border:1px solid #dce7ef;border-radius:14px;background:#fff;text-align:left;font:inherit;cursor:pointer}.staff-job-card:hover,.staff-job-card.active{border-color:#00aeef;background:#effbff}.staff-job-time{font-weight:900;color:#007fa8}.staff-job-card strong,.staff-job-card small{display:block}.staff-job-card small{margin-top:3px;color:#64748b;font-size:.76rem;font-weight:600}.staff-job-card em{padding:5px 9px;border-radius:999px;background:#e9f9ef;color:#16864b;font-size:.7rem;font-style:normal;font-weight:800}.staff-job-heading{display:flex;justify-content:space-between;gap:14px;align-items:flex-start}.staff-job-heading p{color:#64748b;font-weight:600}.staff-job-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:18px}.staff-job-meta div{padding:12px;border-radius:12px;background:#f8fafc}.staff-job-meta span,.staff-job-meta strong{display:block}.staff-job-meta span{color:#64748b;font-size:.68rem;font-weight:800;text-transform:uppercase}.staff-job-meta strong{margin-top:3px;font-size:.8rem}.staff-task-list{display:grid;gap:9px}.staff-task-list label{display:flex;gap:10px;align-items:flex-start;padding:13px;border:1px solid #dce7ef;border-radius:12px;font-weight:700;cursor:pointer}.staff-task-list input{width:20px;height:20px;accent-color:#00aeef}.staff-progress{display:flex;align-items:center;gap:12px;margin:16px 0}.staff-progress>div{height:10px;flex:1;overflow:hidden;border-radius:999px;background:#e2e8f0}.staff-progress>div span{display:block;width:0;height:100%;background:#00aeef;transition:width .2s}.staff-progress strong{font-size:.78rem}.staff-photo-locations{display:grid;gap:10px}.staff-photo-location{overflow:hidden;border:1px solid #dce7ef;border-radius:14px}.staff-photo-location summary{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;background:#f8fbfd;cursor:pointer;font-weight:900}.staff-photo-location summary span{display:flex;align-items:center;gap:10px}.staff-photo-location summary i{color:#00aeef}.staff-photo-location summary small{color:#64748b}.staff-upload-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;padding:14px}.staff-upload-card{position:relative;overflow:hidden;min-height:220px;border:2px dashed #b8dbe8;border-radius:14px;background:#f8fafc;cursor:pointer}.staff-upload-card input{position:absolute;opacity:0;pointer-events:none}.staff-upload-preview{display:grid;place-items:center;align-content:center;gap:7px;min-height:220px;padding:12px;color:#64748b;text-align:center}.staff-upload-preview>i{font-size:1.8rem;color:#00aeef}.staff-upload-preview img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.staff-photo-stage{position:absolute;left:10px;bottom:10px;padding:5px 9px;border-radius:999px;background:#0b1120;color:#fff;font-size:.7rem;font-weight:900;text-transform:capitalize}@media(max-width:680px){.staff-page{padding-top:82px}.staff-welcome,.staff-job-heading{align-items:flex-start;flex-direction:column}.staff-job-card{grid-template-columns:70px 1fr}.staff-job-card em{grid-column:2}.staff-job-meta,.staff-upload-grid{grid-template-columns:1fr}}
.staff-quote-row label{display:block;margin-top:10px;font-size:.8rem;font-weight:700}.staff-quote-row label input{display:block;width:100%;min-width:0;margin-top:5px}.staff-quote-row [data-lead-warning]{display:block;color:#a43b16;font-weight:700;margin-top:10px}.staff-quote-row [data-lead-warning]:empty{display:none}

.staff-job-card.gr-row{grid-template-columns:70px minmax(0,1fr)}.gr-row>.gr-side{grid-column:2;display:flex;flex-wrap:wrap;gap:8px;align-items:center}.gr-side select{font:inherit;padding:6px;border:1px solid #cbd8e6;border-radius:8px;max-width:100%}
/* Upload opened from an onboarding email link */
.staff-photo-location.ob-highlight { box-shadow: 0 0 0 3px #00AEEF; transition: box-shadow .3s; }
/* Sidebar sections: Settings and Log out sit at the bottom */
.portal-nav-footer { margin-top: 10px; padding-top: 10px; border-top: 1px solid #e2e8f0; }
.portal-nav-footer .staff-signout { width: 100%; margin-top: 8px; }
/* Settings shortcuts */
.settings-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.settings-link { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border: 1px solid #d7eef3; border-radius: 14px; background: #fff; text-align: left; cursor: pointer; font: inherit; color: #0B1120; }
.settings-link:hover { border-color: #00AEEF; background: #f0fbff; }
.settings-link i { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: #effbff; color: #007fa8; flex-shrink: 0; }
.settings-link span { display: grid; gap: 2px; }
.settings-link small { color: #64748b; font-size: .8rem; }
.settings-target { box-shadow: 0 0 0 3px #00AEEF !important; transition: box-shadow .3s; }
/* Jumped-to cards stop below the fixed site header */
.staff-page .dash-card, .staff-page .portal-card, .staff-page [data-staff-panel] { scroll-margin-top: 96px; }

/* Compact staff menu: everything fits on screen; section names stand out in blue. */
.staff-layout .portal-sidebar { padding: 12px 10px; }
.staff-layout .portal-user { padding: 6px 8px 10px; margin-bottom: 4px; }
.staff-layout .portal-nav button { padding: 7px 10px; font-size: .86rem; border-radius: 10px; gap: 9px; border: 1px solid transparent; }
.staff-layout .portal-nav button i { width: 18px; font-size: .9rem; }
.staff-layout .portal-nav-group { margin-top: 8px; padding-top: 8px; }
.staff-layout .portal-nav-heading { display: flex; align-items: center; gap: 6px; margin: 0 0 4px; padding: 5px 10px; border-radius: 8px; background: #e5f8ff; color: #007fa8; font-size: .7rem; font-weight: 900; letter-spacing: .09em; }
.staff-layout .portal-nav-heading::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #00AEEF; }
.staff-layout .portal-nav-footer { margin-top: 8px; padding-top: 8px; }
.staff-layout .portal-nav-footer .staff-signout { margin-top: 4px; padding: 8px 10px; }

/* Assigned Jobs: the job in progress sits on top as the current job; Current Job opens from a job. */
.staff-job-group{margin:6px 0 0;font-size:.78rem;font-weight:900;letter-spacing:.04em;text-transform:uppercase;color:#64748b}.staff-job-card.is-current{border:2px solid #00aeef;background:#effbff}.staff-job-card.is-current em{background:#00aeef;color:#fff}.staff-job-back{margin:0 0 14px;min-width:0}

/* Staff portal on phones: the sidebar becomes a slide-out drawer from the right (js/staff-mobile-nav.js).
   Desktop and tablet keep the normal sidebar; the drawer head and backdrop only exist on phones. */
.staff-drawer-head, .staff-drawer-backdrop { display: none; }
@media (max-width: 680px) {
  .staff-drawer {
    position: fixed !important; top: 0; right: 0; bottom: 0; z-index: 10060;
    width: min(88vw, 420px); margin: 0; padding: 0 12px 20px; border-radius: 18px 0 0 18px;
    overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
    transform: translateX(105%); transition: transform .25s ease; box-shadow: -18px 0 50px rgba(4, 22, 42, .28);
  }
  body.staff-drawer-open .staff-drawer { transform: none; }
  .staff-drawer-backdrop { display: block; position: fixed; inset: 0; z-index: 10055; background: rgba(4, 22, 42, .5); opacity: 0; transition: opacity .25s ease; }
  .staff-drawer-backdrop[hidden] { display: none; }
  body.staff-drawer-open .staff-drawer-backdrop { opacity: 1; }
  body.staff-drawer-open { overflow: hidden; }
  .staff-drawer-head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; margin: 0 -12px 4px; padding: 10px 12px 10px 18px; background: #fff; border-bottom: 1px solid #eef2f6; }
  .staff-drawer-head strong { font-size: 1rem; }
  .staff-drawer-close { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 12px; background: #f1f5f9; color: #0b1120; font-size: 1.15rem; cursor: pointer; }
  /* Compact one-column rows. */
  .staff-drawer .portal-user { padding: 10px 6px 12px; }
  .staff-drawer .portal-nav-group { margin: 0; padding: 6px 0; border: 0; }
  .staff-drawer .portal-nav-heading { margin: 6px 0 2px; padding: 0 6px; background: none; color: #64748b; font-size: .68rem; letter-spacing: .08em; }
  .staff-drawer .portal-nav { display: block !important; margin: 0; }
  .staff-drawer .portal-nav li { margin: 0; }
  .staff-drawer .portal-nav button { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; margin: 1px 0; padding: 10px 12px; border-radius: 10px; font-size: .95rem; }
  .staff-drawer .portal-nav button i { width: 20px; text-align: center; }
  .staff-drawer .portal-nav button.active { background: #e6f7ff; color: #007fa8; box-shadow: none; }
  .staff-drawer .staff-signout { min-height: 48px; margin-top: 10px; }
  @media (prefers-reduced-motion: reduce) { .staff-drawer, .staff-drawer-backdrop { transition: none; } }
}