/* ═══════════════════════════════════════════════
   TENANCE — AUTH & LANDING STYLES
   Landing page, login, signup, forgot password,
   reset-sent, and the setup wizard.
═══════════════════════════════════════════════ */

/* ── Google sign-in button ── */
.google-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; padding: 11px 0; border-radius: 10px;
  border: 1.5px solid var(--border); background: var(--card);
  font-size: 13px; font-weight: 600; color: var(--t1);
  cursor: pointer; transition: background .15s, border-color .15s;
}
.google-btn:hover { background: var(--card2); border-color: var(--border2); }
.google-btn svg   { width: 18px; height: 18px; flex-shrink: 0; }

/* ── Apple sign-in button ── */
.apple-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; padding: 11px 0; border-radius: 10px;
  border: 1.5px solid var(--border); background: var(--card);
  font-size: 13px; font-weight: 600; color: var(--t1);
  cursor: pointer; transition: background .15s, border-color .15s;
  margin-top: 8px;
}
.apple-btn:hover { background: var(--card2); border-color: var(--border2); }
.apple-btn svg   { width: 18px; height: 18px; flex-shrink: 0; }

/* ── Divider between email and Google ── */
.auth-divider {
  display: flex; align-items: center; gap: 10px;
  margin: 14px 0; color: var(--t3); font-size: 11px; font-weight: 500;
}
.auth-divider::before,
.auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }

/* ── Green variant button for tenant portal ── */
.abtn.green { background: linear-gradient(135deg, #3a7a44, #2d6035); }
.abtn.green:hover { background: linear-gradient(135deg, #448a50, #3a7a44); }

/* ── Password visibility toggle ── */
.pw-wrap { position: relative; }
.pw-wrap input { padding-right: 40px !important; }
.pw-eye {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  background: none; border: none; cursor: pointer; padding: 4px;
  color: var(--t3); transition: color .15s; line-height: 0;
}
.pw-eye:hover { color: var(--t1); }
.pw-eye svg { width: 16px; height: 16px; }

/* ── Password strength bar ── */
.str-wrap { display: flex; align-items: center; gap: 8px; margin-top: 7px; }
.str-segs { display: flex; gap: 4px; flex: 1; }
.str-seg { height: 3px; border-radius: 2px; flex: 1; background: rgba(255,255,255,.1); transition: background .25s; }
.str-lbl { font-size: 10px; font-weight: 700; color: var(--t3); min-width: 40px; text-align: right; transition: color .25s; }
/* ── Password requirements checklist ── */
.pw-reqs { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.preq { font-size: 10px; padding: 3px 8px; border-radius: 20px; background: rgba(255,255,255,.06); color: var(--t3); transition: all .2s; border: 1px solid rgba(255,255,255,.06); }
.preq.ok { background: rgba(90,200,106,.12); color: #5ac86a; border-color: rgba(90,200,106,.25); }

/* ── Wizard dot step progress ── */
.wdots { display: flex; align-items: flex-start; margin-bottom: 20px; width: 100%; }
.wdot-wrap { display: flex; flex-direction: column; align-items: center; gap: 5px; flex-shrink: 0; }
.wdot {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--card2); border: 2px solid var(--border2);
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 600; color: var(--t3);
  transition: all .25s;
}
.wdot::before { content: attr(data-n); }
.wdot.active { background: var(--gold); border-color: var(--gold); color: #1a0e00; }
.wdot.done { background: rgba(90,200,106,.15); border-color: #5ac86a; color: #5ac86a; }
.wdot.done::before { content: '✓'; }
.wdot-lbl { font-size: 9px; font-weight: 600; color: var(--t3); white-space: nowrap; }
.wdot-wrap:has(.wdot.active) .wdot-lbl { color: var(--goldd); }
.wdot-wrap:has(.wdot.done) .wdot-lbl { color: #5ac86a; }
.wline { flex: 1; height: 2px; background: var(--border2); margin: 12px 3px 0; transition: background .25s; }
.wdot-wrap:has(.wdot.done) + .wline { background: rgba(90,200,106,.5); }

/* ── LANDING ── */
#s-land {
  flex-direction: column; align-items: center; justify-content: center;
  background: radial-gradient(ellipse 120% 80% at 50% 0%, #2d5a3d 0%, #1d4734 50%, #111 100%);
  position: relative; overflow: hidden;
}
#s-land::before {
  content: '';
  position: absolute; inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.02'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") repeat;
  pointer-events: none;
}
.land-wrap { display: flex; flex-direction: column; align-items: center; max-width: 800px; padding: 0 24px; }
.land-logo { display: flex; align-items: center; gap: 12px; margin-bottom: 40px; }
.land-logo-ico { width: 56px; height: 56px; background: rgba(255,255,255,.15); border-radius: 14px; display: flex; align-items: center; justify-content: center; padding: 8px; backdrop-filter: blur(4px); }
.land-logo-name { font-size: 32px; font-weight: 700; color: #fff; letter-spacing: -0.5px; }
.land-h1 { font-size: 46px; font-weight: 700; color: #fff; text-align: center; line-height: 1.08; letter-spacing: -1.5px; margin-bottom: 14px; }
.land-h1 em { font-style: normal; color: var(--gold); }
.land-sub { font-size: 16px; color: var(--t2); text-align: center; max-width: 480px; line-height: 1.7; margin-bottom: 44px; }
.land-cards { display: flex; gap: 18px; margin-bottom: 40px; }
.lc {
  width: 270px; background: rgba(255,255,255,.06);
  border-radius: 20px; padding: 28px 24px;
  cursor: pointer; border: 1.5px solid var(--border2);
  transition: all .2s;
}
.lc:hover { border-color: var(--gold); transform: translateY(-4px); box-shadow: 0 24px 60px rgba(0,0,0,.4); }
.lc-ico { width: 46px; height: 46px; border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; font-size: 22px; }
.lc-t { font-size: 16px; font-weight: 700; color: #fff; margin-bottom: 7px; }
.lc-d { font-size: 12px; color: var(--t2); line-height: 1.65; margin-bottom: 16px; }
.lc-cta { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--gold); }
.land-demo { font-size: 13px; color: var(--t2); margin-top: 4px; }
.land-demo a { color: var(--gold); cursor: pointer; font-weight: 600; }

/* ── AUTH SCREENS (shared wrapper) ── */
#s-ll, #s-tl, #s-fp, #s-rs, #s-setup, #s-tsignup, #s-tfp, #s-trs, #s-agent-portal, #s-pending, #s-maint-worker-auth {
  flex-direction: column; align-items: center; justify-content: center;
  background: radial-gradient(ellipse 120% 80% at 50% 0%, #2d5a3d 0%, #1d4734 50%, #111 100%);
}
.abox {
  width: 420px;
  background: #191f1a;
  border-radius: 22px;
  padding: 36px;
  border: 1px solid var(--border2);
  box-shadow: 0 30px 80px rgba(0,0,0,.6);
  max-height: 90vh; overflow-y: auto;
}
.abox::-webkit-scrollbar { width: 3px; }

.a-back { display: flex; align-items: center; gap: 7px; color: var(--t2); font-size: 12px; cursor: pointer; margin-bottom: 24px; font-weight: 500; transition: color .15s; }
.a-back:hover { color: var(--t1); }
.a-brand { display: flex; align-items: center; gap: 9px; margin-bottom: 20px; }
.a-ico { width: 34px; height: 34px; background: #fff; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.a-bname { font-size: 18px; font-weight: 700; color: #fff; }
.a-badge {
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(224,155,107,.13); border: 1px solid rgba(224,155,107,.28);
  border-radius: 20px; padding: 4px 11px;
  font-size: 10px; font-weight: 700; color: var(--gold);
  letter-spacing: .05em; text-transform: uppercase; margin-bottom: 16px;
}
.a-title { font-size: 22px; font-weight: 700; color: #fff; margin-bottom: 5px; }
.a-sub { font-size: 12px; color: var(--t2); margin-bottom: 20px; line-height: 1.65; }

/* ── Form fields (auth) ── */
.fld { margin-bottom: 13px; }
.fld label { display: block; font-size: 9px; font-weight: 600; color: var(--t2); margin-bottom: 5px; text-transform: uppercase; letter-spacing: .06em; }
.fld input, .fld select, .fld textarea {
  width: 100%; background: #0f1410;
  border: 1.5px solid var(--border2);
  border-radius: 9px; padding: 11px 13px;
  font-size: 13px; color: var(--t1);
  outline: none; font-family: var(--font);
  transition: border-color .15s; -webkit-appearance: none;
}
.fld select { cursor: pointer; }
.fld input:focus, .fld select:focus, .fld textarea:focus { border-color: var(--gold); }
.fld input.bad { border-color: var(--err); }
.fld textarea { resize: vertical; min-height: 70px; }

.errtxt { font-size: 11px; color: var(--err); margin-top: 5px; display: none; }
.errtxt.on { display: block; }
.lock-msg {
  background: rgba(204,68,68,.1); border: 1px solid rgba(204,68,68,.25);
  border-radius: 9px; padding: 11px; font-size: 12px; color: #e07070;
  display: none; margin-bottom: 11px; line-height: 1.5;
}
.lock-msg.on { display: block; }

/* ── Auth buttons ── */
.abtn {
  width: 100%; background: var(--goldd); color: #1a0e00;
  border: none; border-radius: 9px; padding: 13px;
  font-size: 14px; font-weight: 600; cursor: pointer;
  font-family: var(--font); margin-top: 6px;
  transition: background .15s;
}
.abtn:hover { background: var(--gold); }
.abtn:disabled { opacity: .5; cursor: not-allowed; }
.abtn.green { background: #3a9a4a; color: #fff; }
.abtn.green:hover { background: #4ab85a; }
.alink { font-size: 12px; color: var(--t2); text-align: center; margin-top: 11px; }
.alink a { color: var(--gold); cursor: pointer; font-weight: 600; }

/* ── Success circle (reset sent) ── */
.ok-circle {
  width: 60px; height: 60px; border-radius: 50%;
  background: rgba(90,200,106,.12);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 16px;
}
.ok-circle svg { width: 26px; height: 26px; }

/* ── Setup wizard progress bar ── */
.wizard-steps { display: flex; align-items: center; gap: 8px; margin-bottom: 24px; }
.wstep { flex: 1; height: 3px; border-radius: 2px; background: var(--border2); transition: background .3s; }
.wstep.done { background: var(--gold); }
.wstep.active { background: var(--goldd); }