/* ============================================================
   Tenant Login — "Executive Portal" dark-gold theme
   Scoped to /Account/Login (Views/Account/Login.cshtml).
   All direction-sensitive values use CSS logical properties so
   [dir="rtl"] mirrors correctly without overrides.
   --tl-accent / --tl-primary are tenant-overridable (injected by
   the view); everything else is a fixed executive palette.
   ============================================================ */

:root{
  /* tenant-overridable accent (default: warm gold) */
  --tl-accent: #C9A227;
  --tl-primary: #0B0E17;
  /* derived accent variants (resolve against whatever --tl-accent is) */
  --tl-accent-2: color-mix(in srgb, var(--tl-accent) 72%, #E5C158);
  --tl-accent-soft: color-mix(in srgb, var(--tl-accent) 20%, transparent);
  --tl-accent-glow: color-mix(in srgb, var(--tl-accent) 38%, transparent);
  --tl-accent-text: color-mix(in srgb, var(--tl-accent) 82%, #FFF6D6);
  --tl-accent-grad: linear-gradient(135deg, var(--tl-accent) 0%, var(--tl-accent-2) 100%);

  /* fixed executive palette */
  --tl-bg: #0B0E17;
  --tl-bg-2: #12141C;
  --tl-surface: #141823;
  --tl-surface-2: #1B2030;
  --tl-text: #F5F6FA;
  --tl-muted: #A9AEC4;
  --tl-muted-2: #8A90A6;
  --tl-line: rgba(255,255,255,0.10);
  --tl-line-soft: rgba(255,255,255,0.06);
  --tl-input-bg: rgba(255,255,255,0.04);
  --tl-error: #E0646A;
  --tl-error-bg: rgba(224,100,106,0.10);
  --tl-error-line: rgba(224,100,106,0.38);
  --tl-btn-ink: #0B0E17;

  /* fluid sizing */
  --tl-card-max: 920px;
  --tl-card-min-h: clamp(480px, 30rem + 4vw, 560px);
  --tl-radius: 22px;
  --tl-pad-y: clamp(30px, 1.6rem + 1.2vw, 46px);
  --tl-pad-x: clamp(24px, 1.3rem + 1vw, 42px);
  --tl-fs-title: clamp(24px, 1.3rem + 0.8vw, 32px);
  --tl-fs-h2: clamp(20px, 1.1rem + 0.6vw, 24px);
  --tl-fs-brand: clamp(15px, 0.85rem + 0.3vw, 18px);
  --tl-art-max: clamp(220px, 14rem + 5vw, 300px);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  color:var(--tl-text);
  background:
    radial-gradient(120% 90% at 50% -10%, #1a1f2e 0%, transparent 60%),
    linear-gradient(160deg, var(--tl-bg-2), var(--tl-bg) 55%);
  display:flex;align-items:center;justify-content:center;
  min-height:100vh;
  padding:clamp(16px, 1rem + 0.8vw, 32px);
  position:relative;overflow:hidden;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
[dir="rtl"] body{font-family:'Cairo','Inter',system-ui,sans-serif}

/* ---------- atmospheric background orbs ---------- */
.tl-bg-orbs{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.tl-orb{position:absolute;border-radius:50%;filter:blur(90px);opacity:.5}
.tl-orb-1{
  width:clamp(340px,34vw,560px);height:clamp(340px,34vw,560px);
  inset-inline-start:-160px;top:-180px;
  background:radial-gradient(circle, var(--tl-accent-glow), transparent 70%);
  animation:tlDrift1 20s ease-in-out infinite;
}
.tl-orb-2{
  width:clamp(300px,30vw,520px);height:clamp(300px,30vw,520px);
  inset-inline-end:-180px;bottom:-200px;
  background:radial-gradient(circle, color-mix(in srgb, var(--tl-primary) 60%, #2a3550), transparent 70%);
  opacity:.6;animation:tlDrift2 26s ease-in-out infinite;
}
.tl-orb-3{
  width:clamp(220px,22vw,360px);height:clamp(220px,22vw,360px);
  inset-inline-end:18%;top:12%;
  background:radial-gradient(circle, var(--tl-accent-soft), transparent 70%);
  opacity:.35;animation:tlDrift3 32s ease-in-out infinite;
}
@keyframes tlDrift1{0%,100%{transform:translate(0,0)}50%{transform:translate(50px,40px)}}
@keyframes tlDrift2{0%,100%{transform:translate(0,0)}50%{transform:translate(-45px,-55px)}}
@keyframes tlDrift3{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(30px,-30px) scale(1.1)}}

/* ---------- language toggle (fixed corner pill) ---------- */
.tl-lang{
  position:fixed;top:22px;inset-inline-end:22px;z-index:50;
  display:inline-flex;align-items:center;gap:7px;
  padding:9px 16px;border-radius:999px;
  background:rgba(20,24,35,.72);backdrop-filter:blur(12px);
  border:1px solid var(--tl-line);box-shadow:0 6px 22px rgba(0,0,0,.35);
  color:var(--tl-text);font-size:12px;font-weight:600;cursor:pointer;
  font-family:inherit;text-decoration:none;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.tl-lang:hover{border-color:var(--tl-accent-glow);box-shadow:0 10px 28px rgba(0,0,0,.45);transform:translateY(-2px)}
.tl-lang:active{transform:translateY(0)}
.tl-lang button{all:unset;display:inline-flex;align-items:center;gap:7px;cursor:pointer;font-family:inherit;font-size:12px;font-weight:600;color:inherit}
.tl-lang i{font-size:16px;color:var(--tl-accent-text)}
.tl-hidden{display:none !important}

/* ---------- card ---------- */
.tl-card{
  position:relative;z-index:1;
  width:100%;max-width:var(--tl-card-max);min-height:var(--tl-card-min-h);
  display:grid;grid-template-columns:1.05fr 1fr;
  border-radius:var(--tl-radius);overflow:hidden;
  background:linear-gradient(165deg, var(--tl-surface-2), var(--tl-surface) 60%);
  border:1px solid var(--tl-accent-glow);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.03) inset,
    0 30px 80px -24px rgba(0,0,0,.7),
    0 0 60px -20px var(--tl-accent-glow);
  animation:tlCardIn .7s cubic-bezier(.22,1,.36,1) both;
}
@keyframes tlCardIn{0%{opacity:0;transform:translateY(28px) scale(.97)}100%{opacity:1;transform:none}}

/* faint top hairline glow */
.tl-card::before{
  content:'';position:absolute;inset-inline:0;top:0;height:1px;
  background:linear-gradient(90deg, transparent, var(--tl-accent), transparent);
  opacity:.5;
}

/* ---------- split sides ---------- */
.tl-aside{
  position:relative;display:flex;flex-direction:column;
  padding:var(--tl-pad-y) var(--tl-pad-x);
  background:linear-gradient(155deg, var(--tl-bg-2), var(--tl-bg) 72%);
  border-inline-end:1px solid var(--tl-line-soft);
  overflow:hidden;
}
.tl-main{
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  padding:var(--tl-pad-y) var(--tl-pad-x);
  background:linear-gradient(165deg, var(--tl-surface-2), var(--tl-surface) 60%);
}
.tl-aside-foot{padding-top:clamp(16px,1rem+0.6vw,26px);display:flex;align-items:center;gap:8px;font-size:12px;color:var(--tl-muted-2)}
.tl-aside-foot i{font-size:14px;color:var(--tl-accent-text)}

/* ---------- brand mark ---------- */
.tl-brand{display:flex;align-items:center;gap:12px;margin-bottom:clamp(20px,1.2rem+0.6vw,28px)}
.tl-logo{
  width:clamp(44px,2.6rem+0.6vw,52px);height:clamp(44px,2.6rem+0.6vw,52px);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;overflow:hidden;position:relative;
  border:1.5px solid var(--tl-accent-glow);
  box-shadow:0 0 0 4px rgba(255,255,255,.03), 0 6px 18px rgba(0,0,0,.4);
  animation:tlLogoPulse 4.5s ease-in-out infinite;
}
@keyframes tlLogoPulse{0%,100%{box-shadow:0 0 0 4px rgba(255,255,255,.03),0 6px 18px rgba(0,0,0,.4)}50%{box-shadow:0 0 0 7px var(--tl-accent-soft),0 6px 22px rgba(0,0,0,.5)}}
.tl-logo img{width:100%;height:100%;object-fit:contain}
.tl-logo-fb{
  width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  background:var(--tl-accent-grad);color:var(--tl-btn-ink);
  font-size:clamp(16px,1rem+0.3vw,20px);font-weight:800;
}
.tl-brand-name{font-size:var(--tl-fs-brand);font-weight:700;letter-spacing:-.2px;color:var(--tl-text)}
.tl-brand-name span{display:block;font-size:11px;font-weight:500;color:var(--tl-muted-2);letter-spacing:.6px;text-transform:uppercase;margin-top:2px}

/* ---------- headline ---------- */
.tl-head{margin-bottom:clamp(18px,1.1rem+0.6vw,26px)}
.tl-head h1{font-size:var(--tl-fs-title);font-weight:800;line-height:1.15;letter-spacing:-.5px;color:var(--tl-text)}
.tl-head h1 em{font-style:normal;background:var(--tl-accent-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.tl-head p{margin-top:8px;font-size:14px;line-height:1.55;color:var(--tl-muted)}

/* ---------- illustration ---------- */
.tl-art-wrap{display:flex;align-items:center;justify-content:center;flex:1 1 auto;padding:clamp(10px,0.8rem+0.5vw,20px) 0}
.tl-art{width:100%;max-width:var(--tl-art-max);height:auto;display:block;overflow:visible}

/* form-side logo — small, subtle tenant mark at the top of the form column.
   Bounded + object-fit:contain so any uploaded aspect ratio is contained and
   never disrupts the form's alignment/spacing. onerror hides it cleanly so a
   broken URL falls back to the no-logo form (no blank hole, no layout shift).
   No surface card — the dark form bg gives light/white-background logos a
   natural edge, and the dark-logo variant (preferred by TenantBranding) handles
   dark-background logos. */
.tl-form-logo{display:flex;align-items:center;justify-content:flex-start;margin-bottom:18px;max-height:40px;max-width:140px;overflow:hidden}
.tl-form-logo img{max-height:40px;max-width:140px;width:auto;height:auto;object-fit:contain;display:block}
.tl-art .tl-stop-1{stop-color:var(--tl-accent)}
.tl-art .tl-stop-2{stop-color:var(--tl-accent-2)}
.tl-art .tl-stroke-gold{stroke:var(--tl-accent)}
.tl-art .tl-stroke-grad{stroke:url(#tlGold)}
.tl-art .tl-stroke-text{stroke:var(--tl-accent-text)}
.tl-art .tl-fill-surface{fill:var(--tl-surface)}
.tl-art .tl-fill-gold{fill:var(--tl-accent)}
/* living motion: gentle float on the whole graphic */
.tl-art .tl-hex{animation:tlArtFloat 5.5s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 50%}
@keyframes tlArtFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
/* orbit ring slow rotate around its own centre */
.tl-art .tl-orbit{animation:tlOrbit 42s linear infinite;transform-box:fill-box;transform-origin:50% 50%}
@keyframes tlOrbit{to{transform:rotate(360deg)}}
/* orbiting icons: staggered float + soft pulse */
.tl-art .tl-ico{transform-box:fill-box;transform-origin:50% 50%;animation:tlIcoFloat 4s ease-in-out infinite}
.tl-art .tl-ico-1{animation-delay:0s}
.tl-art .tl-ico-2{animation-delay:.6s}
.tl-art .tl-ico-3{animation-delay:1.2s}
.tl-art .tl-ico-4{animation-delay:1.8s}
@keyframes tlIcoFloat{0%,100%{transform:translateY(0);opacity:1}50%{transform:translateY(-3px);opacity:.85}}
/* gold linework shimmer */
.tl-art .tl-stroke-grad{animation:tlShimmer 4s ease-in-out infinite}
@keyframes tlShimmer{0%,100%{stroke-opacity:1}50%{stroke-opacity:.65}}

/* ---------- form ---------- */
.tl-form-inner{width:100%;max-width:380px}
.tl-form-inner > *{animation:tlUpIn .55s cubic-bezier(.22,1,.36,1) both}
.tl-form-inner > *:nth-child(1){animation-delay:.12s}
.tl-form-inner > *:nth-child(2){animation-delay:.2s}
.tl-form-inner > *:nth-child(3){animation-delay:.28s}
.tl-form-inner > *:nth-child(4){animation-delay:.36s}
.tl-form-inner > *:nth-child(5){animation-delay:.44s}
.tl-form-inner > *:nth-child(6){animation-delay:.52s}
.tl-form-inner > *:nth-child(7){animation-delay:.6s}
@keyframes tlUpIn{0%{opacity:0;transform:translateY(14px)}100%{opacity:1;transform:none}}

.tl-field{margin-bottom:18px}
.tl-label{display:block;font-size:13px;font-weight:600;color:var(--tl-muted);margin-bottom:8px;letter-spacing:.2px}
.tl-label .req{color:var(--tl-error);margin-inline-start:2px}
.tl-input{
  position:relative;display:flex;align-items:center;
  border:1.5px solid var(--tl-line);border-radius:13px;background:var(--tl-input-bg);
  transition:border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.tl-input:focus-within{border-color:var(--tl-accent);background:rgba(255,255,255,.06);box-shadow:0 0 0 4px var(--tl-accent-soft)}
.tl-input .tl-ico-lead{display:flex;align-items:center;justify-content:center;width:46px;flex-shrink:0;color:var(--tl-muted-2);font-size:18px;transition:color .2s ease}
.tl-input:focus-within .tl-ico-lead{color:var(--tl-accent-text)}
.tl-input input{
  flex:1;min-width:0;border:none;outline:none;background:transparent;
  padding:14px 14px 14px 0;font-size:14.5px;font-weight:500;color:var(--tl-text);
  font-family:inherit;width:100%;
}
.tl-input input::placeholder{color:var(--tl-muted-2);font-weight:400;font-size:13px}
.tl-input .tl-suffix{display:flex;align-items:center;padding:0 10px 0 4px;flex-shrink:0}
.tl-input .tl-suffix button{
  background:none;border:none;cursor:pointer;padding:7px;color:var(--tl-muted-2);
  font-size:18px;display:flex;align-items:center;justify-content:center;border-radius:8px;
  transition:color .15s ease, background .15s ease;line-height:1;
}
.tl-input .tl-suffix button:hover{background:rgba(255,255,255,.06);color:var(--tl-text)}

/* remember me */
.tl-options{display:flex;align-items:center;margin-bottom:22px}
.tl-remember{display:flex;align-items:center;gap:9px;cursor:pointer;font-size:13px;font-weight:500;color:var(--tl-muted);user-select:none;position:relative}
.tl-remember input[type=checkbox]{position:absolute;opacity:0;pointer-events:none}
.tl-cbx{width:18px;height:18px;border:1.5px solid var(--tl-line);border-radius:5px;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--tl-btn-ink);background:transparent;transition:background .2s ease, border-color .2s ease, box-shadow .2s ease}
.tl-cbx i{font-size:13px;opacity:0;transform:scale(.4);transition:opacity .18s ease, transform .18s ease}
.tl-remember input:checked + .tl-cbx{background:var(--tl-accent-grad);border-color:var(--tl-accent)}
.tl-remember input:checked + .tl-cbx i{opacity:1;transform:scale(1)}
.tl-remember input:focus-visible + .tl-cbx{box-shadow:0 0 0 4px var(--tl-accent-soft)}

/* primary button */
.tl-btn{
  width:100%;padding:15px 24px;border:none;border-radius:13px;
  background:var(--tl-accent-grad);color:var(--tl-btn-ink);
  font-size:15px;font-weight:700;cursor:pointer;font-family:inherit;
  display:flex;align-items:center;justify-content:center;gap:10px;
  position:relative;overflow:hidden;
  box-shadow:0 12px 28px -12px var(--tl-accent-glow);
  transition:transform .25s ease, box-shadow .25s ease, filter .25s ease;
}
.tl-btn::before{
  content:'';position:absolute;inset-block:0;inset-inline-start:-120%;width:55%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent);
  transition:inset-inline-start .65s ease;
}
.tl-btn:hover{transform:translateY(-2px);filter:brightness(1.05);box-shadow:0 18px 34px -12px var(--tl-accent-glow)}
.tl-btn:hover::before{inset-inline-start:120%}
.tl-btn:active{transform:translateY(0)}
.tl-btn:focus-visible{outline:2px solid var(--tl-accent);outline-offset:3px}
.tl-btn.loading{pointer-events:none;opacity:.9}
.tl-btn.loading .tl-btn-text{visibility:hidden}
.tl-btn.loading::after{content:'';position:absolute;width:20px;height:20px;border:2.5px solid rgba(11,14,23,.25);border-top-color:var(--tl-btn-ink);border-radius:50%;animation:tlSpin .6s linear infinite}
@keyframes tlSpin{to{transform:rotate(360deg)}}

/* error box */
.tl-error{display:flex;align-items:flex-start;gap:10px;padding:13px 15px;border-radius:13px;margin-bottom:18px;font-size:13px;line-height:1.5;background:var(--tl-error-bg);border:1px solid var(--tl-error-line);color:var(--tl-error);animation:tlShake .4s ease}
.tl-error i{font-size:16px;flex-shrink:0;margin-top:1px}
@keyframes tlShake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}

/* divider + portal link */
.tl-divider{display:flex;align-items:center;gap:12px;margin:22px 0;color:var(--tl-muted-2);font-size:12px;font-weight:500}
.tl-divider::before,.tl-divider::after{content:'';flex:1;height:1px;background:var(--tl-line)}
.tl-portal{
  display:flex;align-items:center;justify-content:center;gap:10px;
  padding:13px;border:1.5px solid var(--tl-line);border-radius:13px;
  color:var(--tl-muted);font-size:13px;font-weight:600;text-decoration:none;
  background:rgba(255,255,255,.02);
  transition:transform .2s ease, border-color .2s ease, color .2s ease, background .2s ease;
}
.tl-portal:hover{border-color:var(--tl-accent-glow);color:var(--tl-accent-text);background:var(--tl-accent-soft);transform:translateY(-2px)}
.tl-portal i{font-size:17px}

/* footer */
.tl-footer{margin-top:24px;display:flex;flex-direction:column;align-items:center;gap:10px}
.tl-secure{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;color:var(--tl-muted-2);background:rgba(255,255,255,.03);border:1px solid var(--tl-line-soft);padding:6px 12px;border-radius:999px}
.tl-secure i{font-size:14px;color:var(--tl-accent-text)}
.tl-footer .tl-copy{font-size:12px;color:var(--tl-muted-2)}

/* ---------- responsive ---------- */
@media (max-width:980px){
  :root{--tl-card-max:480px;--tl-card-min-h:auto}
  .tl-card{grid-template-columns:1fr}
  .tl-aside{border-inline-end:none;border-block-end:1px solid var(--tl-line-soft)}
  .tl-art-wrap{flex:0 0 auto}
}
@media (max-width:560px){
  :root{--tl-card-max:calc(100vw - 28px);--tl-pad-y:clamp(24px,1.4rem+1vw,32px);--tl-pad-x:clamp(18px,1rem+1vw,24px);--tl-art-max:clamp(180px,12rem+8vw,230px)}
  .tl-lang{top:14px;inset-inline-end:14px;padding:7px 13px;font-size:11px}
  .tl-art-wrap,.tl-aside-foot{display:none}
}
@media (max-width:380px){
  :root{--tl-pad-y:22px;--tl-pad-x:18px}
}
@media (min-width:1440px){:root{--tl-card-max:980px}}
@media (min-width:1920px){:root{--tl-card-max:1040px}}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
}