/* Dedicated staff entry only. Customer/Admin entry and open workspaces keep their own styles. */
html[data-staff-login] body.locked { margin:0; min-width:0; min-height:100%; background:#fff; }
html[data-staff-login] body.locked #loginScreen {
  --staff-height:100vh;
  --staff-gap:clamp(10px, 1.7vh, 16px);
  --staff-control:52px;
  --staff-emblem:clamp(110px, calc(45vh - 206px), 190px);
  box-sizing:border-box;
  position:relative;
  isolation:isolate;
  display:flex !important;
  align-items:center;
  justify-content:center;
  width:100%;
  min-width:0;
  max-width:none;
  min-height:var(--staff-height);
  height:auto;
  max-height:none;
  margin:0;
  padding:max(20px, env(safe-area-inset-top, 0px)) max(24px, env(safe-area-inset-right, 0px)) max(20px, env(safe-area-inset-bottom, 0px)) max(24px, env(safe-area-inset-left, 0px));
  overflow:visible;
  background:#fff;
  color:#080d36;
}
@supports (height:100svh) { html[data-staff-login] body.locked #loginScreen { --staff-height:100svh; } }
@supports (height:100dvh) { html[data-staff-login] body.locked #loginScreen { --staff-height:100dvh; } }
html[data-staff-login] body.crm-startup-pending::before { background:#fff; }
body:not(.locked) #loginScreen.staff-login-layout { display:none !important; }
html[data-staff-login] body.locked #loginScreen::before,
html[data-staff-login] body.locked #loginScreen::after { display:none !important; }
html[data-staff-login] #loginScreen .staff-login-decorations { position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:-1; }
html[data-staff-login] #loginScreen .staff-login-decorations svg { position:absolute; display:block; pointer-events:none; }
html[data-staff-login] #loginScreen .staff-login-ribbon-top { top:0; right:0; width:min(54%, 540px); height:min(42%, 650px); }
html[data-staff-login] #loginScreen .staff-login-ribbon-bottom { bottom:0; left:0; width:min(76%, 760px); height:min(22%, 300px); }
html[data-staff-login] #loginScreen .staff-login-content { box-sizing:border-box; display:grid; grid-template-columns:minmax(0, 1fr); justify-items:center; gap:clamp(16px, 3vh, 28px); width:min(100%, 430px); min-width:0; }
html[data-staff-login] #loginScreen .staff-login-brand { display:flex; flex-direction:column; align-items:center; gap:0; width:100%; min-width:0; }
html[data-staff-login] #loginScreen .staff-login-brand img { display:block; object-fit:contain; object-position:center; max-width:100%; flex:none; }
html[data-staff-login] #loginScreen .staff-login-emblem { width:auto; height:var(--staff-emblem); aspect-ratio:518 / 1024; }
html[data-staff-login] #loginScreen .staff-login-wordmark { width:min(88%, 310px); height:auto; aspect-ratio:2606 / 422; }
html[data-staff-login] body.locked #loginScreen .login-card {
  box-sizing:border-box; display:grid; grid-template-columns:minmax(0, 1fr); gap:var(--staff-gap); width:100%; min-width:0; max-width:none;
  height:auto; min-height:0; max-height:none; margin:0; padding:0; border:0; border-radius:0; background:transparent; box-shadow:none; overflow:visible;
}
html[data-staff-login] #loginScreen > .customer-login-brand-header,
html[data-staff-login] #loginScreen > .customer-login-road-hero,
html[data-staff-login] #loginScreen > .customer-login-public-links,
html[data-staff-login] #loginScreen > .login-mobile-hero,
html[data-staff-login] #loginScreen .login-card > .brand,
html[data-staff-login] #loginScreen .login-mobile-welcome,
html[data-staff-login] #loginScreen #loginRoleGroup,
html[data-staff-login] #loginScreen #loginRoleLinks,
html[data-staff-login] #loginScreen #customerRegisterToggleBtn,
html[data-staff-login] #loginScreen #resetCustomerPinToggleBtn,
html[data-staff-login] #loginScreen .customer-login-divider,
html[data-staff-login] #loginScreen .customer-login-phone-overlay { display:none !important; }
html[data-staff-login] #loginScreen .login-intro-copy { display:grid; gap:9px; text-align:center; margin:0; padding:0; }
html[data-staff-login] #loginScreen #loginTitle { margin:0; color:#080d36; font-size:32px; line-height:1.12; font-weight:750; letter-spacing:-.035em; }
html[data-staff-login] #loginScreen #loginIntro { margin:0; color:#748096; font-size:15px; line-height:1.4; }
html[data-staff-login] #loginScreen #loginForm { display:grid; grid-template-columns:minmax(0, 1fr); gap:12px; width:100%; min-width:0; margin:0; padding:0; }
html[data-staff-login] #loginScreen .login-field { display:grid; min-width:0; margin:0; gap:0; }
html[data-staff-login] #loginScreen .login-field > span:first-child:not(.login-field-control) { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
html[data-staff-login] #loginScreen .login-field-control { position:relative; box-sizing:border-box; width:100%; min-width:0; height:var(--staff-control); min-height:44px; border:0; background:transparent; }
html[data-staff-login] #loginScreen .login-field-control input { box-sizing:border-box; width:100%; min-width:0; height:var(--staff-control); min-height:44px; margin:0; padding:0 50px 0 47px; border:1px solid #d9e1ee; border-radius:15px; background:#fff; box-shadow:0 7px 18px rgb(19 67 127 / 5%); color:#080d36; font-size:16px; font-weight:500; line-height:1.3; }
html[data-staff-login] #loginScreen .login-field-control input::placeholder { color:#8a96aa; opacity:1; font-size:16px; font-weight:400; }
html[data-staff-login] #loginScreen .login-field-icon { left:15px; width:21px; height:24px; color:#005cd4; }
html[data-staff-login] #loginScreen .login-field-id input { padding-right:16px; }
html[data-staff-login] #loginScreen .staff-login-password-toggle { box-sizing:border-box; position:absolute; right:3px; top:50%; transform:translateY(-50%); display:grid; place-items:center; width:44px; height:44px; min-width:44px; padding:10px; border:0; border-radius:10px; background:transparent; color:#728199; cursor:pointer; }
html[data-staff-login] #loginScreen .staff-login-password-toggle svg { width:24px; height:24px; }
html[data-staff-login] #loginScreen #loginSubmitBtn { box-sizing:border-box; display:flex; align-items:center; justify-content:center; gap:10px; width:100%; min-height:44px; height:var(--staff-control); margin:6px 0 0; padding:8px 16px; border:1px solid #1674f0; border-radius:15px; background:linear-gradient(165deg, #0871ef, #0055d4); box-shadow:0 8px 18px rgb(9 108 226 / 16%), inset 0 1px 0 rgb(255 255 255 / 15%); color:#fff; font-size:18px; line-height:1.2; font-weight:700; }
html[data-staff-login] #loginScreen #loginSubmitBtn svg { width:22px; height:22px; }
html[data-staff-login] #loginScreen .staff-login-feedback { min-height:36px; margin:0; }
html[data-staff-login] #loginScreen #loginMessage { display:block !important; margin:0; padding:0; color:#b32f44; font-size:14px; line-height:18px; overflow-wrap:anywhere; text-align:center; }
html[data-staff-login] #loginScreen .login-progress { margin:0; padding:0; border:0; border-radius:0; background:transparent; }
html[data-staff-login] #loginScreen .login-progress-head { display:none; }
html[data-staff-login] #loginScreen .login-progress-detail { margin-top:4px; color:#65728a; font-size:14px; line-height:18px; text-align:center; }
html[data-staff-login] #loginScreen .login-progress-track { height:3px; }
html[data-staff-login] #loginScreen .login-passkey-optional { display:block !important; max-width:100%; margin:0 auto; }
html[data-staff-login] #loginScreen .login-passkey-optional > summary { box-sizing:border-box; display:flex; align-items:center; justify-content:center; min-height:44px; gap:8px; padding:0 8px; color:#005ad5; font-size:14px; line-height:1.3; cursor:pointer; }
html[data-staff-login] #loginScreen .login-passkey-optional .btn { max-width:100%; white-space:normal; }
html[data-staff-login] #loginScreen .staff-login-support { margin:0; color:#748096; font-size:14px; line-height:1.4; text-align:center; }
html[data-staff-login] #loginScreen .login-field-control input:focus-visible,
html[data-staff-login] #loginScreen button:focus-visible,
html[data-staff-login] #loginScreen summary:focus-visible,
html[data-staff-login] #loginScreen a:focus-visible { outline:3px solid #77b2ff; outline-offset:3px; }
html[data-staff-login] #loginScreen [hidden] { display:none !important; }
@media (max-width:359px) { html[data-staff-login] body.locked #loginScreen { padding-left:max(16px, env(safe-area-inset-left, 0px)); padding-right:max(16px, env(safe-area-inset-right, 0px)); } }
@media (max-height:740px) {
  html[data-staff-login] body.locked #loginScreen { --staff-emblem:104px; --staff-gap:10px; --staff-control:48px; padding-top:max(16px, env(safe-area-inset-top, 0px)); padding-bottom:max(16px, env(safe-area-inset-bottom, 0px)); }
  html[data-staff-login] #loginScreen #loginTitle { font-size:28px; }
  html[data-staff-login] #loginScreen .staff-login-wordmark { width:min(88%, 280px); }
  html[data-staff-login] #loginScreen .staff-login-content { gap:var(--staff-gap); }
  html[data-staff-login] #loginScreen .login-intro-copy { gap:6px; }
  html[data-staff-login] #loginScreen #loginForm { gap:10px; }
  html[data-staff-login] #loginScreen #loginSubmitBtn { margin-top:0; }
}
@media (max-height:620px) {
  html[data-staff-login] body.locked #loginScreen { --staff-emblem:76px; --staff-gap:8px; --staff-control:46px; padding-top:max(12px, env(safe-area-inset-top, 0px)); padding-bottom:max(12px, env(safe-area-inset-bottom, 0px)); }
  html[data-staff-login] #loginScreen .staff-login-brand { gap:0; }
  html[data-staff-login] #loginScreen .staff-login-wordmark { width:min(88%, 260px); }
  html[data-staff-login] #loginScreen .staff-login-support { display:none; }
  html[data-staff-login] #loginScreen #loginIntro { font-size:14px; }
}
@media (max-height:520px) {
  html[data-staff-login] body.locked #loginScreen { --staff-emblem:56px; --staff-control:44px; --staff-gap:6px; }
  html[data-staff-login] #loginScreen #loginTitle { font-size:24px; line-height:1.15; }
  html[data-staff-login] #loginScreen #loginIntro { display:none; }
  html[data-staff-login] #loginScreen #loginForm { gap:6px; }
}
@media (min-width:580px) and (max-height:560px) {
  html[data-staff-login] body.locked #loginScreen { --staff-emblem:120px; --staff-control:46px; --staff-gap:8px; }
  html[data-staff-login] #loginScreen .staff-login-content { width:min(100%, 840px); grid-template-columns:minmax(150px, .7fr) minmax(0, 1fr); align-items:center; column-gap:clamp(24px, 5vw, 60px); }
  html[data-staff-login] #loginScreen .staff-login-wordmark { width:100%; }
  html[data-staff-login] #loginScreen .staff-login-brand { gap:6px; }
}
html[data-staff-login] body.locked #loginScreen.staff-login-keyboard { --staff-emblem:40px; --staff-control:44px; --staff-gap:6px; min-height:var(--staff-viewport-height, var(--staff-height)); margin-top:var(--staff-viewport-top, 0px); align-items:flex-start; padding-top:max(8px, env(safe-area-inset-top, 0px)); padding-bottom:max(8px, env(safe-area-inset-bottom, 0px)); scroll-padding:12px; }
html[data-staff-login] #loginScreen.staff-login-keyboard .staff-login-brand { flex-direction:row; justify-content:center; gap:12px; }
html[data-staff-login] #loginScreen.staff-login-keyboard .staff-login-wordmark { width:min(65%, 240px); }
html[data-staff-login] #loginScreen.staff-login-keyboard .staff-login-content { gap:var(--staff-gap); }
html[data-staff-login] #loginScreen.staff-login-keyboard #loginForm { gap:6px; }
html[data-staff-login] #loginScreen.staff-login-keyboard #loginSubmitBtn { margin-top:0; }
html[data-staff-login] #loginScreen.staff-login-keyboard .login-intro-copy,
html[data-staff-login] #loginScreen.staff-login-keyboard .staff-login-support { display:none; }