/* ============================================================
   Sign-in, register, 2FA and invite screens.
   Loaded only when nobody is signed in (see layout_portal.html.twig),
   and every rule is scoped under .sl-auth so the signed-in app is
   untouched by anything in here.
   ============================================================ */

.sl-auth{
  --a-blue:#3190E7;
  --a-blue-dk:#1F74C4;
  --a-green:#28CB75;
  --a-ink:#363B3F;
  --a-body:#808080;
  --a-line:#E5E8EC;
  --a-mist:#F3F5F7;
  --a-red:#E5603F;
  --a-ease:cubic-bezier(.4,.16,.2,1);
}

.sl-auth{
  margin:0;
  font-family:'PT Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:16px;
  color:var(--a-body);
  background:#fff;
}

/* ── Two-column shell: brand panel, then the form ── */
.sl-auth .sl-auth-wrap{
  min-height:100vh;
  display:grid;
  grid-template-columns:1.05fr .95fr;
  align-items:stretch;
  padding:0;
  background:#fff;
  max-width:none;
}

.sl-auth__panel{
  position:relative;
  overflow:hidden;
  padding:56px 60px;
  display:flex;
  flex-direction:column;
  color:#fff;
  background:
    radial-gradient(900px 520px at 78% 6%, rgba(40,203,117,.20), transparent 60%),
    radial-gradient(760px 600px at 6% 94%, rgba(49,144,231,.40), transparent 62%),
    linear-gradient(148deg,#1c2b38 0%,#20415e 45%,#1b3348 100%);
}
.sl-auth__panel::before{
  content:"";position:absolute;inset:0;opacity:.5;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 40% 40%,#000 30%,transparent 100%);
  mask-image:radial-gradient(ellipse 80% 70% at 40% 40%,#000 30%,transparent 100%);
}
.sl-auth__panel > *{position:relative;z-index:2}

.sl-auth__panel-brand{display:inline-flex;align-self:flex-start}
.sl-auth__panel-body{margin:auto 0}
.sl-auth__panel h2{
  font-family:'Lato',-apple-system,'Segoe UI',sans-serif;
  font-weight:900;letter-spacing:-.02em;line-height:1.22;
  font-size:clamp(26px,2.5vw,34px);color:#fff;margin:0;max-width:16ch;
}
.sl-auth__rule{border:0;border-top:2px solid var(--a-green);width:80px;margin:22px 0 26px}
.sl-auth__points{list-style:none;margin:0;padding:0;max-width:42ch}
.sl-auth__points li{
  display:flex;gap:12px;align-items:flex-start;
  font-size:15.5px;font-weight:300;color:rgba(255,255,255,.8);padding:9px 0;
}
.sl-auth__points svg{
  width:17px;height:17px;flex-shrink:0;margin-top:4px;
  stroke:var(--a-green);stroke-width:3;fill:none;
}
.sl-auth__panel-foot{
  margin:0;font-size:13.5px;color:rgba(255,255,255,.5);
}
.sl-auth__panel-foot a{color:rgba(255,255,255,.75);text-decoration:none}
.sl-auth__panel-foot a:hover{color:#fff}

/* ── Form column ── */
.sl-auth__form-col{
  display:flex;flex-direction:column;justify-content:center;
  padding:48px 60px;
}
.sl-auth .sl-auth-logo{
  display:none;                      /* the panel carries the brand on desktop */
  margin:0 0 28px;
}
.sl-auth .sl-auth-card{
  background:transparent;border:0;border-radius:0;box-shadow:none;
  padding:0;width:100%;max-width:26rem;margin:0 auto;
}
.sl-auth .sl-auth-card h1{
  font-family:'Lato',-apple-system,'Segoe UI',sans-serif;
  font-weight:900;letter-spacing:-.02em;font-size:29px;color:var(--a-ink);
  margin:0 0 8px;
}
.sl-auth .sl-auth-card > p:first-of-type{font-size:16px;font-weight:300;margin:0 0 28px}
.sl-auth .sl-muted{color:var(--a-body)}

/* ── Fields ── */
.sl-auth label{
  display:block;font-family:'Lato',sans-serif;font-size:13px;font-weight:700;
  letter-spacing:.02em;color:var(--a-ink);margin:0 0 7px;
}
.sl-auth input[type="text"],
.sl-auth input[type="email"],
.sl-auth input[type="password"],
.sl-auth input[type="tel"],
.sl-auth select{
  width:100%;max-width:none;box-sizing:border-box;
  font-family:inherit;font-size:16px;color:var(--a-ink);
  padding:12px 14px;margin:0 0 18px;
  background:#fff;border:1px solid var(--a-line);border-radius:4px;
  transition:border-color .2s var(--a-ease),box-shadow .2s var(--a-ease);
}
.sl-auth input:focus,.sl-auth select:focus{
  outline:none;border-color:var(--a-blue);
  box-shadow:0 0 0 3px rgba(49,144,231,.16);
}
.sl-auth input::placeholder{color:#aab2b9}

/* ── Buttons ── */
.sl-auth .sl-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  width:100%;box-sizing:border-box;
  font-family:'Lato',sans-serif;font-size:14px;font-weight:700;letter-spacing:.06em;
  padding:13px 24px;border-radius:4px;cursor:pointer;
  border:1px solid var(--a-blue);background:var(--a-blue);color:#fff;
  transition:all .3s ease-in-out;text-decoration:none;
}
.sl-auth .sl-btn:hover{background:#fff;color:var(--a-blue);border-color:var(--a-blue)}
.sl-auth .sl-btn-ghost,.sl-auth .sl-btn-secondary{
  background:transparent;border-color:var(--a-line);color:var(--a-ink);
}
.sl-auth .sl-btn-ghost:hover,.sl-auth .sl-btn-secondary:hover{
  background:var(--a-ink);border-color:var(--a-ink);color:#fff;
}
.sl-auth .sl-link{color:var(--a-blue);font-weight:700;text-decoration:none}
.sl-auth .sl-link:hover{color:var(--a-ink)}

.sl-auth :where(a,button,input,select,summary):focus-visible{
  outline:3px solid var(--a-blue);outline-offset:2px;border-radius:2px;
}

/* ── Flashes and errors ── */
.sl-auth .sl-flash{
  border-radius:4px;padding:12px 15px;font-size:14.5px;margin:0 0 20px;
  border:1px solid var(--a-line);background:var(--a-mist);color:var(--a-ink);
}
.sl-auth .sl-flash-error,.sl-auth .sl-flash-danger{
  background:rgba(229,96,63,.08);border-color:rgba(229,96,63,.4);color:#a8391c;
}
.sl-auth .sl-flash-success{
  background:rgba(40,203,117,.1);border-color:rgba(40,203,117,.4);color:#1a8b4e;
}
.sl-auth ul.error-list,.sl-auth .form-error-message{
  list-style:none;margin:-12px 0 16px;padding:0;color:var(--a-red);font-size:13.5px;
}

/* ── Secondary actions ── */
.sl-auth__alt{
  margin:20px 0 0;text-align:center;font-size:15px;font-weight:300;
}
.sl-auth__aside{
  margin-top:28px;padding-top:24px;border-top:1px solid var(--a-line);
}
.sl-auth__aside summary{
  cursor:pointer;list-style:none;
  font-family:'Lato',sans-serif;font-size:14px;font-weight:700;color:var(--a-ink);
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.sl-auth__aside summary::-webkit-details-marker{display:none}
.sl-auth__aside summary::after{
  content:"";width:9px;height:9px;flex-shrink:0;
  border-right:2px solid var(--a-blue);border-bottom:2px solid var(--a-blue);
  transform:rotate(45deg);transition:transform .3s var(--a-ease);
}
.sl-auth__aside[open] summary::after{transform:rotate(-135deg)}
.sl-auth__aside summary:hover{color:var(--a-blue)}
.sl-auth__aside-body{padding-top:16px}
.sl-auth__aside-body p{font-size:14.5px;font-weight:300;margin:0 0 14px}
.sl-auth .sl-auth-divider{border:0;border-top:1px solid var(--a-line);margin:26px 0}

@media (prefers-reduced-motion:reduce){
  .sl-auth *,.sl-auth *::before,.sl-auth *::after{
    transition-duration:.01ms!important;animation-duration:.01ms!important;
  }
}

/* ── Narrow: drop the panel, keep the form ── */
@media (max-width:900px){
  .sl-auth .sl-auth-wrap{grid-template-columns:1fr;min-height:100vh}
  .sl-auth__panel{display:none}
  .sl-auth .sl-auth-logo{display:flex}
  .sl-auth__form-col{padding:40px 24px;justify-content:flex-start}
  .sl-auth .sl-auth-card{max-width:26rem}
}
@media (max-width:1200px) and (min-width:901px){
  .sl-auth__panel{padding:44px 40px}
  .sl-auth__form-col{padding:40px}
}

/* Label with an inline action on the right (e.g. "Forgot password?") */
.sl-auth__label-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.sl-auth__label-row label{margin-bottom:7px}
.sl-auth__label-link{font-family:'Lato',sans-serif;font-size:12.5px;font-weight:700}

/* A submit button that reads as a link (used for CSRF-protected sign-out) */
.sl-auth__linkbutton{
  background:none;border:0;padding:0;cursor:pointer;
  font-family:'Lato',sans-serif;font-size:15px;font-weight:700;color:var(--a-blue);
}
.sl-auth__linkbutton:hover{color:var(--a-ink)}