/* Let & Rent — Operations staff auth styles.
   PORTED from docs/design/project/web/auth/auth.css (prototype). Self-contained,
   served raw by Propshaft. Dark staff sign-in via the .dark-auth body class. */

/* Let & Rent — shared auth flow styles */
:root{
  --green-900:#003F2D; --green-700:#0a5c41; --green-500:#0f7a55;
  --green-tint:#e7f1ec; --green-50:#f0f6f3;
  --paper:#f6f5f1; --paper-2:#efece3; --paper-3:#e9e5da;
  --white:#ffffff;
  --ink-900:#141414; --ink-700:#3a3a3a; --ink-500:#6b6b6b; --ink-400:#8a8780;
  --border:#e3dfd4; --border-2:#d8d3c6;
  --paid-bg:#dcefe5; --paid-fg:#0a5c41;
  --due-bg:#fbeec9; --due-fg:#92600e;
  --over-bg:#f8dcd6; --over-fg:#a3331f;
  --danger:#c0392b;
  --shadow-sm:0 1px 2px rgba(20,30,20,.05), 0 4px 14px rgba(20,30,20,.05);
  --shadow-md:0 4px 12px rgba(20,30,20,.06), 0 24px 60px rgba(20,30,20,.10);
  --mono:'JetBrains Mono', ui-monospace, 'SF Mono', monospace;
}
*,*::before,*::after{box-sizing:border-box;}
html,body{margin:0; height:100%;}
body{
  background:var(--paper); color:var(--ink-900);
  font-family:'Manrope', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing:antialiased; line-height:1.5;
}
a{color:inherit; text-decoration:none;}
img{display:block; max-width:100%;}
::selection{background:var(--green-900); color:#fff;}
.mono{font-family:var(--mono); font-variant-numeric:tabular-nums;}

/* ---------- Buttons ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:9px; font-family:inherit; font-weight:600; font-size:15px; border-radius:12px; cursor:pointer; border:1px solid transparent; transition:transform .12s ease, background .15s, box-shadow .15s, border-color .15s; white-space:nowrap; width:100%; height:52px;}
.btn:active{transform:translateY(1px);}
.btn-primary{background:var(--green-900); color:#fff; box-shadow:0 1px 2px rgba(0,63,45,.28);}
.btn-primary:hover{background:var(--green-700);}
.btn-line{background:var(--white); color:var(--ink-900); border-color:var(--border-2);}
.btn-line:hover{border-color:var(--ink-400);}
.btn-auto{width:auto; padding:0 20px; height:44px; font-size:14.5px;}
.btn-arrow svg{transition:transform .15s;}
.btn-arrow:hover svg{transform:translateX(3px);}

/* ---------- Split shell ---------- */
.shell{display:grid; grid-template-columns:minmax(0,46%) 1fr; min-height:100vh;}
.brand-panel{
  position:relative; overflow:hidden; color:#fff;
  background:radial-gradient(130% 120% at 100% 0%, #0a5c41 0%, #003F2D 58%);
  padding:44px 52px; display:flex; flex-direction:column;
}
.brand-panel .bp-key{position:absolute; right:-90px; bottom:-120px; width:420px; opacity:.09;}
.brand-top{display:flex; align-items:center; gap:11px; position:relative; z-index:2;}
.brand-top img{width:34px; height:34px; border-radius:9px;}
.brand-top .word{font-weight:800; font-size:22px; letter-spacing:-.03em;}
.brand-top .word .amp{color:#7fc3a6; margin:0 3px;}
.bp-body{margin-top:auto; position:relative; z-index:2;}
.bp-eyebrow{font-family:var(--mono); font-size:12px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:#7fc3a6;}
.bp-head{font-size:34px; line-height:1.1; letter-spacing:-.025em; font-weight:800; margin:18px 0 0; max-width:420px;}
.bp-sub{font-size:16px; line-height:1.6; color:rgba(255,255,255,.78); margin:18px 0 0; max-width:400px;}
.bp-roles{display:flex; gap:8px; margin-top:30px; flex-wrap:wrap;}
.bp-roles span{font-size:12.5px; font-weight:600; padding:7px 14px; border-radius:999px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.16);}
.bp-foot{margin-top:34px; display:flex; align-items:center; gap:12px; color:rgba(255,255,255,.7); font-size:13.5px; position:relative; z-index:2;}
.bp-foot .av{display:flex;}
.bp-foot .av i{width:28px;height:28px;border-radius:50%; border:2px solid var(--green-900); margin-left:-8px; display:flex;align-items:center;justify-content:center; font-size:10px; font-weight:700; color:#fff;}

/* ---------- Form side ---------- */
.main-panel{display:flex; flex-direction:column; padding:28px 40px;}
.main-top{display:flex; align-items:center; justify-content:space-between;}
.back-link{display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:600; color:var(--ink-500); padding:8px 12px; border-radius:9px; transition:background .15s,color .15s;}
.back-link:hover{background:var(--paper-3); color:var(--ink-900);}
.top-alt{font-size:14px; color:var(--ink-500);}
.top-alt a{font-weight:700; color:var(--green-700);}
.form-wrap{flex:1; display:flex; flex-direction:column; justify-content:center; align-items:center; padding:32px 0;}
.form-card{width:100%; max-width:420px;}
.form-h{font-size:30px; font-weight:800; letter-spacing:-.025em; margin:0;}
.form-sub{font-size:15.5px; color:var(--ink-500); margin:12px 0 0; line-height:1.55;}
.form-body{margin-top:32px; display:flex; flex-direction:column; gap:18px;}

/* fields */
.field{display:flex; flex-direction:column; gap:7px;}
.field > label{font-size:13.5px; font-weight:600; color:var(--ink-700);}
.field .lab-row{display:flex; justify-content:space-between; align-items:center;}
.field .lab-row a{font-size:13px; font-weight:600; color:var(--green-700);}
.inp{
  height:52px; background:var(--white); border:1px solid var(--border-2); border-radius:12px;
  padding:0 15px; font-size:15.5px; font-family:inherit; color:var(--ink-900);
  display:flex; align-items:center; gap:10px; transition:border-color .15s, box-shadow .15s;
}
.inp:focus-within{border-color:var(--green-500); box-shadow:0 0 0 3px rgba(15,122,85,.13);}
.inp input{flex:1; min-width:0; border:none; outline:none; background:transparent; font-family:inherit; font-size:15.5px; color:var(--ink-900);}
.inp input::placeholder{color:var(--ink-400);}
.inp .lead{color:var(--ink-400); flex-shrink:0; display:flex;}
.inp .cc{font-size:15px; font-weight:600; color:var(--ink-700); padding-right:10px; border-right:1px solid var(--border); display:flex; align-items:center; gap:7px; flex-shrink:0;}
.inp .toggle{flex-shrink:0; background:none; border:none; cursor:pointer; color:var(--ink-400); padding:4px; display:flex; font-family:inherit; font-size:12.5px; font-weight:600;}
.inp .toggle:hover{color:var(--ink-700);}
.hint{font-size:12.5px; color:var(--ink-500);}

/* role multi-select (signup) */
.role-pick{display:flex; flex-direction:column; gap:9px;}
.role-opt{display:flex; align-items:center; gap:13px; border:1px solid var(--border-2); border-radius:13px; padding:13px 14px; cursor:pointer; background:var(--white); transition:border-color .15s, background .15s;}
.role-opt:hover{border-color:var(--ink-400);}
.role-opt.on{border-color:var(--green-500); background:var(--green-50);}
.role-opt .ic{width:38px;height:38px;border-radius:10px; background:var(--green-tint); color:var(--green-700); display:flex;align-items:center;justify-content:center; flex-shrink:0;}
.role-opt .ro-t{font-size:14.5px; font-weight:700;}
.role-opt .ro-s{font-size:12.5px; color:var(--ink-500); margin-top:1px;}
.role-opt .chk{margin-left:auto; width:22px;height:22px;border-radius:7px; border:1.5px solid var(--border-2); display:flex;align-items:center;justify-content:center; color:#fff; flex-shrink:0; transition:background .15s, border-color .15s;}
.role-opt.on .chk{background:var(--green-500); border-color:var(--green-500);}
.role-opt.on .chk svg{display:block;}
.role-opt .chk svg{display:none;}

/* checkbox row */
.check-row{display:flex; align-items:center; gap:10px; cursor:pointer; user-select:none;}
.check-row .box{width:20px;height:20px;border-radius:6px; border:1.5px solid var(--border-2); display:flex;align-items:center;justify-content:center; color:#fff; flex-shrink:0; transition:background .15s,border-color .15s;}
.check-row.on .box{background:var(--green-500); border-color:var(--green-500);}
.check-row .box svg{display:none;} .check-row.on .box svg{display:block;}
.check-row span{font-size:13.5px; color:var(--ink-700);}

.form-foot{margin-top:26px; text-align:center; font-size:14.5px; color:var(--ink-500);}
.form-foot a{font-weight:700; color:var(--green-700);}
.legal{margin-top:22px; font-size:12px; color:var(--ink-400); text-align:center; line-height:1.5;}
.legal a{color:var(--ink-500); text-decoration:underline; text-underline-offset:2px;}
.divider{display:flex; align-items:center; gap:14px; margin:22px 0; color:var(--ink-400); font-size:12.5px; font-weight:600;}
.divider::before,.divider::after{content:''; flex:1; height:1px; background:var(--border);}

/* alert / success block */
.note{display:flex; gap:12px; padding:14px 16px; border-radius:12px; font-size:13.5px; line-height:1.5;}
.note.info{background:var(--green-50); border:1px solid var(--green-tint); color:var(--green-700);}
.note.warn{background:var(--due-bg); color:var(--due-fg);}
.note svg{flex-shrink:0; margin-top:1px;}

/* centered single-column layouts (holding / picker) */
.center-page{min-height:100vh; display:flex; flex-direction:column;}
.center-nav{height:76px; display:flex; align-items:center; padding:0 40px;}
.center-nav .brand-top .word{color:var(--ink-900);} .center-nav .brand-top .word .amp{color:var(--green-700);}
.center-body{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:24px 24px 64px; text-align:center;}

/* ---------- Entrance animation (transform-only so content is never invisible) ---------- */
@keyframes authUp{from{transform:translateY(16px);} to{transform:none;}}
.form-card{animation:authUp .5s cubic-bezier(.2,.7,.2,1) both;}
@media (prefers-reduced-motion:reduce){.form-card{animation:none;}}

/* ---------- Brand panel extras (injected by auth.js) ---------- */
.bp-glimpse{margin-top:30px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14); border-radius:16px; padding:18px; position:relative; z-index:2; backdrop-filter:blur(2px);}
.bp-glimpse .gl-l{font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#7fc3a6;}
.bp-glimpse .gl-amt{font-family:var(--mono); font-size:30px; font-weight:600; letter-spacing:-.02em; margin-top:6px;}
.bp-glimpse .gl-amt .cur{font-size:15px; color:rgba(255,255,255,.55); margin-right:5px;}
.bp-glimpse .gl-row{display:flex; gap:18px; margin-top:14px;}
.bp-glimpse .gl-row .gi .v{font-family:var(--mono); font-size:16px; font-weight:600;}
.bp-glimpse .gl-row .gi .k{font-size:11px; color:rgba(255,255,255,.6); margin-top:1px;}
.bp-quote{margin-top:26px; position:relative; z-index:2;}
.bp-quote p{font-size:15px; line-height:1.55; color:rgba(255,255,255,.9); margin:0; font-weight:500;}
.bp-quote .qa{display:flex; align-items:center; gap:10px; margin-top:14px;}
.bp-quote .qa .qav{width:34px;height:34px;border-radius:50%; background:rgba(255,255,255,.16); display:flex;align-items:center;justify-content:center; font-size:12px; font-weight:700;}
.bp-quote .qa .qn{font-size:13px; font-weight:700;}
.bp-quote .qa .qr{font-size:11.5px; color:rgba(255,255,255,.6);}

/* ---------- Password strength meter ---------- */
.strength{margin-top:8px;}
.strength .bars{display:flex; gap:5px;}
.strength .bars i{flex:1; height:5px; border-radius:3px; background:var(--border-2); transition:background .2s;}
.strength.s1 .bars i:nth-child(-n+1){background:#c0392b;}
.strength.s2 .bars i:nth-child(-n+2){background:#d9a226;}
.strength.s3 .bars i:nth-child(-n+3){background:#5a9b81;}
.strength.s4 .bars i{background:var(--green-500);}
.strength .lab{font-size:12px; margin-top:6px; color:var(--ink-500); font-weight:600;}

/* ---------- OTP / two-factor ---------- */
.otp{display:flex; gap:10px; justify-content:center; margin:6px 0;}
.otp input{width:54px; height:64px; text-align:center; font-family:var(--mono); font-size:26px; font-weight:600; color:var(--ink-900); background:var(--white); border:1.5px solid var(--border-2); border-radius:13px; outline:none; transition:border-color .15s, box-shadow .15s;}
.otp input:focus{border-color:var(--green-500); box-shadow:0 0 0 3px rgba(15,122,85,.13);}
.otp input.filled{border-color:var(--green-500); background:var(--green-50);}
.otp-resend{text-align:center; font-size:13.5px; color:var(--ink-500); margin-top:18px;}
.otp-resend a{font-weight:700; color:var(--green-700);}

/* ---------- SSO / alt sign-in ---------- */
.sso{display:flex; flex-direction:column; gap:10px;}
.btn-sso{display:inline-flex; align-items:center; justify-content:center; gap:10px; height:50px; border-radius:12px; background:var(--white); border:1px solid var(--border-2); font-weight:600; font-size:14.5px; cursor:pointer; font-family:inherit; transition:border-color .15s;}
.btn-sso:hover{border-color:var(--ink-400);}

/* ---------- Dark (ops staff) variant ---------- */
.dark-auth{background:#0a130f; color:#e7efea;}
.dark-auth .main-panel{background:#0a130f;}
.dark-auth .brand-panel{background:radial-gradient(130% 120% at 100% 0%, #11352a 0%, #060c09 60%); border-right:1px solid #1b2a22;}
.dark-auth .form-h{color:#fff;}
.dark-auth .form-sub{color:#8da99b;}
.dark-auth .field > label{color:#a6bcb1;}
.dark-auth .inp{background:#0f1a15; border-color:#22332b; color:#fff;}
.dark-auth .inp input{color:#fff;}
.dark-auth .inp input::placeholder{color:#5a7568;}
.dark-auth .inp .lead{color:#5a7568;}
.dark-auth .inp:focus-within{border-color:#34d399; box-shadow:0 0 0 3px rgba(52,211,153,.14);}
.dark-auth .inp .toggle{color:#7d9788;}
.dark-auth .back-link{color:#7d9788;} .dark-auth .back-link:hover{background:#13211b; color:#fff;}
.dark-auth .btn-primary{background:#0f7a55;} .dark-auth .btn-primary:hover{background:#13946a;}
.dark-auth .form-foot{color:#8da99b;} .dark-auth .legal{color:#5a7568;}
.dark-auth .check-row span{color:#a6bcb1;}
.dark-auth .ops-tag{display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:.06em; color:#9fe0c4; background:rgba(95,191,149,.1); border:1px solid rgba(95,191,149,.22); padding:6px 11px; border-radius:8px; margin-bottom:22px;}
.dark-auth .ops-tag .d{width:7px;height:7px;border-radius:50%; background:#34d399; box-shadow:0 0 0 3px rgba(52,211,153,.18);}
.dark-auth .note.warn{background:#3a2a08; color:#fbcf6a; border:none;}

/* responsive */
@media (max-width:920px){
  .shell{grid-template-columns:1fr;}
  .brand-panel{display:none;}
  .main-panel{padding:20px 22px;}
}
@media (max-width:520px){
  .form-h{font-size:26px;}
  .main-panel{padding:16px;}
  .center-nav{padding:0 20px;}
  .otp input{width:44px; height:54px; font-size:22px;}
}