/* Truezor Billing - sign-in screens. Brand colour comes from the theme
   (--brand-primary); everything else here is fixed so the page looks the
   same for every business. */
.auth-page{--ink:color-mix(in srgb,var(--brand-primary,#3949ab) 28%,#0c0e1d);--paper:#f6f5f1;--line:#e2e0d8;
  font-family:'DM Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;background:var(--paper);color:#1d1f2b}
.auth-page h1,.auth-page h2,.auth-page h3,.auth-page h4,.auth-page .auth-display{font-family:'Bricolage Grotesque','DM Sans',system-ui,sans-serif;letter-spacing:-.02em}

/* ---- split layout (login) ---- */
.auth-split{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);min-height:100vh;min-height:100dvh}
.auth-story{position:relative;overflow:hidden;background:var(--ink);color:#e9eaf5;padding:clamp(1.5rem,4vw,3.5rem);display:flex;flex-direction:column;justify-content:space-between;gap:2rem}
/* knitted-fabric texture: fine diagonal threads, a nod to Tirupur's knitwear trade */
.auth-story::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:repeating-linear-gradient(60deg,rgba(255,255,255,.045) 0 1px,transparent 1px 7px),
             repeating-linear-gradient(-60deg,rgba(255,255,255,.045) 0 1px,transparent 1px 7px)}
.auth-story::after{content:"";position:absolute;width:38rem;height:38rem;right:-14rem;bottom:-16rem;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--brand-primary,#3949ab) 70%,transparent),transparent)}
.auth-story>*{position:relative;z-index:1}
.auth-mark{display:flex;align-items:center;gap:.65rem;font-weight:700;font-size:1.15rem;color:#fff;text-decoration:none}
.auth-logo{display:inline-flex;align-items:center;background:#fff;border-radius:.7rem;padding:0;overflow:hidden;box-shadow:0 1px 6px rgba(0,0,0,.18)}
.auth-logo img{height:2.8rem;width:auto;max-width:10rem;object-fit:contain;display:block}
.auth-mark-name{line-height:1.15}
.auth-mark i{display:grid;place-items:center;width:2.2rem;height:2.2rem;border-radius:.6rem;background:var(--brand-primary,#3949ab);color:#fff;font-size:1rem;box-shadow:0 0 0 1px rgba(255,255,255,.18) inset}
.auth-headline{font-size:clamp(1.9rem,3.4vw,3rem);line-height:1.08;font-weight:700;color:#fff;max-width:15ch;margin:0 0 .9rem}
.auth-sub{max-width:38ch;color:#b9bcd6;line-height:1.6;margin:0}

/* the invoice that writes itself - the one moving thing on the page */
.auth-invoice{background:#fbfaf6;color:#22242f;border-radius:.9rem;padding:1.15rem 1.25rem 1rem;max-width:25rem;
  box-shadow:0 30px 60px -22px rgba(0,0,0,.65),0 0 0 1px rgba(255,255,255,.08);transform:rotate(-1.4deg);font-size:.82rem}
.auth-invoice .inv-head{display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px dashed #cfcbbd;padding-bottom:.55rem;margin-bottom:.45rem}
.auth-invoice .inv-head b{font-family:'Bricolage Grotesque',sans-serif;font-size:.95rem}
.auth-invoice .inv-head span{color:#7a7867;font-size:.74rem}
.auth-invoice .inv-to{color:#5d5b4d;margin-bottom:.4rem}
.inv-row{display:flex;justify-content:space-between;gap:1rem;padding:.28rem 0;opacity:0;animation:invIn .5s ease forwards}
.inv-row span:last-child,.inv-total b,.inv-sum span:last-child{font-variant-numeric:tabular-nums;white-space:nowrap}
.inv-row:nth-of-type(1){animation-delay:.5s}.inv-row:nth-of-type(2){animation-delay:1.1s}.inv-row:nth-of-type(3){animation-delay:1.7s}
.inv-sum{display:flex;justify-content:space-between;color:#5d5b4d;padding:.25rem 0;border-top:1px solid #e6e3d6;opacity:0;animation:invIn .5s ease 2.3s forwards}
.inv-sum+.inv-sum{border-top:0;animation-delay:2.7s}
.inv-total{display:flex;justify-content:space-between;align-items:baseline;margin-top:.35rem;padding-top:.55rem;border-top:2px solid #22242f;opacity:0;animation:invIn .5s ease 3.1s forwards}
.inv-total b{font-family:'Bricolage Grotesque',sans-serif;font-size:1.35rem}
.inv-paid{display:inline-block;margin-top:.5rem;padding:.12rem .55rem;border:1.5px solid #1f8a4c;color:#1f8a4c;border-radius:.3rem;font-weight:700;font-size:.72rem;transform:rotate(-4deg) scale(1.6);opacity:0;animation:stamp .35s cubic-bezier(.2,.9,.3,1.2) 3.8s forwards}
@keyframes invIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes stamp{to{opacity:1;transform:rotate(-4deg) scale(1)}}
.auth-foot{font-size:.8rem;color:#8d90b1;margin:0}

/* ---- form side ---- */
.auth-main{display:flex;align-items:center;justify-content:center;padding:clamp(1.25rem,4vw,3rem)}
.auth-panel{width:100%;max-width:25rem}
.auth-panel .auth-mark-sm{display:none}
.auth-panel h1{font-size:1.9rem;font-weight:700;margin:0 0 .35rem}
.auth-panel .lead-sm{color:#6a6c7c;margin-bottom:1.6rem}
.auth-field{position:relative;margin-bottom:1rem}
.auth-field label{display:block;font-size:.85rem;font-weight:600;margin-bottom:.35rem}
.auth-field .ico{position:absolute;left:.95rem;bottom:.8rem;color:#9a9caa;pointer-events:none}
.auth-field .form-control{height:3rem;padding-left:2.6rem;border-radius:.7rem;border:1.5px solid var(--line);background:#fff;box-shadow:none}
.auth-field .form-control:focus{border-color:var(--brand-primary,#3949ab);box-shadow:0 0 0 .22rem rgba(var(--brand-primary-rgb,57,73,171),.18)}
.auth-field .reveal{position:absolute;right:.35rem;bottom:.35rem;width:2.3rem;height:2.3rem;border:0;background:transparent;color:#7a7c8c;border-radius:.5rem}
.auth-field .reveal:hover{color:#1d1f2b;background:#f0efe9}
.auth-field .reveal:focus-visible,.auth-btn:focus-visible{outline:3px solid rgba(var(--brand-primary-rgb,57,73,171),.45);outline-offset:2px}
.auth-field.has-reveal .form-control{padding-right:2.9rem}
.auth-btn{width:100%;height:3rem;border:0;border-radius:.7rem;font-weight:700;color:#fff;background:var(--brand-primary,#3949ab);
  transition:background .15s,transform .1s}
.auth-btn:hover{background:var(--brand-primary-dark,#2c3a8c);color:#fff}.auth-btn:active{transform:translateY(1px)}
.auth-btn.busy{opacity:.75;pointer-events:none}
.auth-links{display:flex;justify-content:space-between;align-items:center;margin:.25rem 0 1.25rem;font-size:.88rem}
.auth-links a,.auth-switch a{color:var(--brand-primary,#3949ab);font-weight:600;text-decoration:none}
.auth-links a:hover,.auth-switch a:hover{text-decoration:underline}
.auth-switch{text-align:center;margin-top:1.4rem;padding-top:1.2rem;border-top:1px solid var(--line);color:#6a6c7c;font-size:.92rem}
.auth-panel .alert{border-radius:.7rem;font-size:.9rem}

/* ---- other auth pages keep their single card, restyled to match ---- */
.auth-page:not(.auth-login) .card{border:1px solid var(--line);border-radius:1rem;box-shadow:0 18px 40px -24px rgba(20,23,46,.35)!important}
.auth-page:not(.auth-login) .form-control{border-radius:.6rem;border:1.5px solid var(--line)}
.auth-page:not(.auth-login) .btn{border-radius:.6rem;font-weight:600}
.auth-page:not(.auth-login) h4{font-weight:700}

@media (max-width:991.98px){
  .auth-split{grid-template-columns:1fr}
  .auth-story{display:none}
  .auth-main{align-items:flex-start;padding-top:max(2.5rem,env(safe-area-inset-top))}
  .auth-panel .auth-mark-sm{display:flex;margin-bottom:1.6rem;color:var(--ink)}
}
@media (max-height:700px) and (min-width:992px){.auth-invoice{display:none}}
@media (prefers-reduced-motion:reduce){.inv-row,.inv-sum,.inv-total,.inv-paid{animation:none;opacity:1;transform:none}.inv-paid{transform:rotate(-4deg)}}
@media (prefers-color-scheme:dark){
  /* the app has its own dark mode switch; keep the sign-in light unless the theme says dark */
}
[data-bs-theme=dark] .auth-page{--paper:#12131c;--line:#2b2d3d;color:#e6e7ef}
[data-bs-theme=dark] .auth-field .form-control{background:#1a1c28;color:#e6e7ef}
[data-bs-theme=dark] .auth-panel .lead-sm,[data-bs-theme=dark] .auth-switch{color:#9a9db3}
[data-bs-theme=dark] .auth-panel .auth-mark-sm{color:#fff}

/* ---- SuperAdmin sign-in: same frame, console motif instead of the invoice ---- */
.auth-tenants{display:grid;grid-template-columns:repeat(10,1fr);gap:.4rem;max-width:23rem}
.auth-tenants i{aspect-ratio:1;border-radius:.3rem;background:rgba(255,255,255,.07);box-shadow:0 0 0 1px rgba(255,255,255,.06) inset;animation:tenantLit 6s ease-in-out infinite;animation-delay:calc(var(--d) * .13s)}
@keyframes tenantLit{0%,12%,100%{background:rgba(255,255,255,.07)}5%{background:var(--brand-primary)}}
.auth-points{list-style:none;padding:0;margin:1.25rem 0 0;display:grid;gap:.55rem;color:#b9bcd6}
.auth-points li{display:flex;gap:.65rem;align-items:center}
.auth-points i{width:1.6rem;text-align:center;color:#fff}
.auth-secure{display:flex;gap:.6rem;align-items:flex-start;font-size:.82rem;color:#6a6c7c;margin-top:1.25rem}
@media (prefers-reduced-motion:reduce){.auth-tenants i{animation:none}}

/* ---- sign-up page ---- */
.auth-panel-wide{max-width:30rem}
.auth-chip{display:inline-flex;align-items:center;font-size:.8rem;font-weight:600;padding:.28rem .7rem;border-radius:999px;margin-bottom:.9rem;
  color:var(--brand-primary,#3949ab);background:rgba(var(--brand-primary-rgb,57,73,171),.1)}
.auth-row{display:grid;grid-template-columns:1fr 1fr;gap:0 .8rem}
@media (max-width:575.98px){.auth-row{grid-template-columns:1fr}}
.auth-field .form-control.is-invalid{border-color:#dc3545;background-image:none}
.auth-field .form-control.is-invalid:focus{box-shadow:0 0 0 .22rem rgba(220,53,69,.18)}
.pw-extra{margin:.5rem 0 1rem}
.pw-meter{display:grid;grid-template-columns:repeat(4,1fr);gap:.3rem}
.pw-meter i{height:.28rem;border-radius:999px;background:var(--line);transition:background .2s}
.pw-meter.s1 i:nth-child(-n+1){background:#dc3545}
.pw-meter.s2 i:nth-child(-n+2){background:#e8a317}
.pw-meter.s3 i:nth-child(-n+3){background:#7bb241}
.pw-meter.s4 i{background:#1f8a4c}
.pw-hint{font-size:.78rem;color:#6a6c7c;margin-top:.3rem}
.auth-promo{margin:.2rem 0 .4rem;font-size:.88rem}
.auth-promo summary{cursor:pointer;color:var(--brand-primary,#3949ab);font-weight:600;list-style:none}
.auth-promo summary::-webkit-details-marker{display:none}
.auth-promo summary::before{content:"+";display:inline-block;width:1.1rem;font-weight:700}
.auth-promo[open] summary::before{content:"\2212"}
.auth-terms{font-size:.76rem;color:#8a8c9b;margin:.8rem 0 0;line-height:1.5}
.auth-steps{gap:.9rem;margin-top:1.6rem}
.auth-steps li{align-items:flex-start;line-height:1.45}
.auth-steps b{color:#fff;font-weight:600}
.auth-steps i{margin-top:.15rem;opacity:.9}
[data-bs-theme=dark] .pw-hint,[data-bs-theme=dark] .auth-terms{color:#9a9db3}