/* ---------------------------------------------------------------------------
   SAAR — the sign-in screen. One look, seven products.

   COPY THIS FILE INTO EACH PRODUCT'S OWN STATIC DIRECTORY. Do not link it
   across domains: a login page that fetches its stylesheet from another host
   is a login page that looks broken the day that host is slow. Each product
   serves its own copy; this directory is the master.

   Products differ in template engine (Django 1.11, Django 5.2, Blade,
   CodeIgniter) so they cannot share a template. They can share the class
   names below, which is what makes the screens identical.

   MARKUP CONTRACT — produce exactly this shape, whatever the engine:

     <div class="sl">
       <div class="sl__panel">                 left: brand + one sentence
         <img class="sl__logo" src="...">
         <h1 class="sl__title">…</h1>
         <p class="sl__sub">…</p>
       </div>
       <div class="sl__form">                  right: the form
         <div class="sl__card">
           <h2 class="sl__h">Sign in</h2>
           <p class="sl__hint">…</p>
           <form>
             <div class="sl__field">
               <label class="sl__label">Username</label>
               <input class="sl__input">
               <p class="sl__err">…</p>        only when there is an error
             </div>
             <button class="sl__btn">Sign in</button>
           </form>
           <a class="sl__link">Forgotten your password?</a>
         </div>
         <p class="sl__foot">© 2026 SAAR Solutions</p>
       </div>
     </div>

   The brand name, logo and tagline are VALUES, not markup. They come from each
   product's own branding source. Never type a product name into this file or
   into the template.
--------------------------------------------------------------------------- */
:root {
    --sl-brand:      #3b82f6;
    --sl-brand-deep: #1d4ed8;
    --sl-violet:     #8b5cf6;
    --sl-ink:        #0f172a;
    --sl-ink-600:    #475569;
    --sl-ink-400:    #94a3b8;
    --sl-line:       #e2e8f0;
    --sl-wash:       #f8fafc;
    --sl-err:        #b91c1c;
    --sl-err-bg:     #fef2f2;
}

.sl, .sl * { box-sizing: border-box; }
.sl {
    min-height: 100vh;
    min-height: 100dvh;
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    color: var(--sl-ink);
    background: #fff;
    -webkit-font-smoothing: antialiased;
}

/* left — the brand half */
.sl__panel {
    position: relative;
    overflow: hidden;
    padding: 56px 56px 48px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 18px;
    color: #fff;
    background: linear-gradient(140deg, #0b2a6b 0%, #143b8f 48%, #2b1f78 100%);
}
.sl__panel::after {
    content: "";
    position: absolute;
    right: -140px;
    bottom: -220px;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(139,92,246,.45), transparent 66%);
    pointer-events: none;
}
.sl__logo {
    position: relative;
    z-index: 1;
    height: 44px;
    width: auto;
    background: #fff;
    border-radius: 10px;
    padding: 8px 12px;
    align-self: flex-start;
}
.sl__title {
    position: relative;
    z-index: 1;
    margin: 6px 0 0;
    font-size: clamp(28px, 3.2vw, 40px);
    line-height: 1.12;
    letter-spacing: -1.4px;
    font-weight: 800;
}
.sl__sub {
    position: relative;
    z-index: 1;
    margin: 0;
    max-width: 420px;
    font-size: 15px;
    line-height: 1.7;
    color: #c7d5ee;
}

/* right — the form half */
.sl__form {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    padding: 48px 32px;
    background: var(--sl-wash);
}
.sl__card {
    width: 100%;
    max-width: 380px;
    background: #fff;
    border: 1px solid var(--sl-line);
    border-radius: 16px;
    padding: 32px 28px;
    box-shadow: 0 18px 44px rgba(15,23,42,.07);
}
.sl__h { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -.4px; }
.sl__hint { margin: 6px 0 22px; font-size: 13.5px; color: var(--sl-ink-600); }

.sl__field { margin-bottom: 16px; }
.sl__label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--sl-ink);
}
.sl__input {
    width: 100%;
    height: 44px;
    padding: 0 13px;
    font-size: 15px;
    font-family: inherit;
    color: var(--sl-ink);
    background: #fff;
    border: 1px solid var(--sl-line);
    border-radius: 9px;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}
.sl__input:focus {
    border-color: var(--sl-brand);
    box-shadow: 0 0 0 3px rgba(59,130,246,.16);
}
.sl__input[aria-invalid="true"] { border-color: var(--sl-err); }

/* Errors are announced, not just coloured: colour alone is not a message. */
.sl__err { margin: 6px 0 0; font-size: 13px; color: var(--sl-err); }
.sl__alert {
    margin: 0 0 18px;
    padding: 10px 12px;
    font-size: 13.5px;
    color: var(--sl-err);
    background: var(--sl-err-bg);
    border: 1px solid #fecaca;
    border-radius: 9px;
}

.sl__btn {
    width: 100%;
    height: 46px;
    margin-top: 6px;
    font-size: 15px;
    font-weight: 600;
    font-family: inherit;
    color: #fff;
    background: linear-gradient(100deg, var(--sl-brand), var(--sl-violet));
    border: 0;
    border-radius: 10px;
    cursor: pointer;
    transition: transform .15s, box-shadow .15s;
    box-shadow: 0 6px 18px rgba(59,130,246,.26);
}
.sl__btn:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(59,130,246,.32); }
.sl__btn:active { transform: none; }
.sl__btn:disabled { opacity: .6; cursor: default; transform: none; }

.sl__link {
    display: block;
    margin-top: 16px;
    text-align: center;
    font-size: 13.5px;
    color: var(--sl-ink-600);
    text-decoration: none;
}
.sl__link:hover { color: var(--sl-brand-deep); text-decoration: underline; }

.sl__foot { margin: 0; font-size: 12.5px; color: var(--sl-ink-400); }

/* The brand half is decoration. On a phone it costs a screenful before the
   thing the visitor came to do, so it goes; the logo moves into the card. */
@media (max-width: 900px) {
    .sl { grid-template-columns: 1fr; }
    .sl__panel { display: none; }
    .sl__form { padding: 32px 20px; min-height: 100vh; min-height: 100dvh; }
    .sl__card { padding: 28px 22px; }
    .sl__card .sl__logo {
        display: block;
        margin: 0 auto 20px;
        background: none;
        padding: 0;
        height: 40px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sl__btn, .sl__input { transition: none; }
    .sl__btn:hover { transform: none; }
}