/* ==========================================================================
   Sign-in screens - login, forgot password, reset and confirm.

   These four pages are the only thing that loads this file, and they load
   nothing else. The old sign-in screens extended layout.app and inherited
   style.css, so every change to the ERP chrome could move the login box.

   The look is a factory office after dark, not a product landing page: solid
   panel, square fields, signage type for the company name, and through the
   window a sewing line still running. No glass, no glow rings, no drifting
   particles - everything that moves is a machine doing its job.

   Height is a hard constraint: the whole login page has to sit inside a
   1366x768 laptop screen without scrolling, so the panel is measured, not
   padded out. Sizes below are deliberate - do not loosen them one at a time.
   ========================================================================== */

:root {
    --sa-ink: #e9edf3;
    --sa-ink-2: #aab4c2;
    --sa-muted: #7d8794;
    --sa-faint: #666f7c;

    --sa-panel: #11151b;
    --sa-edge: rgba(255, 255, 255, .075);
    --sa-edge-2: rgba(255, 255, 255, .13);

    --sa-ember: #e2600f;
    --sa-ember-hi: #f4760f;
    --sa-ember-dim: #b8560f;

    --sa-danger: #e26060;
    --sa-success: #4caf82;

    --sa-t: .14s ease;
}

*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

body.sa {
    margin: 0;
    min-height: 100%;
    font-family: "Inter", "Hind Siliguri", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--sa-ink);
    background: #080b0f;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

/* --------------------------------------------------------------------------
   The room: a cold window high on the right, a furnace door open low on the
   left, brushed metal, film grain, and the corners falling away.
   -------------------------------------------------------------------------- */

.sa-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    background: linear-gradient(176deg, #0f141a 0%, #0b0f14 52%, #07090d 100%);
}

/* The one moving thing on the screen. It breathes the way a furnace does:
   slowly, and not quite the same twice. */
.sa-bg__glow {
    position: absolute;
    inset: -12%;
    background:
        radial-gradient(48% 42% at 14% 88%, rgba(206, 88, 20, .30) 0%, rgba(206, 88, 20, 0) 68%),
        radial-gradient(38% 34% at 6% 96%, rgba(240, 132, 44, .16) 0%, rgba(240, 132, 44, 0) 70%),
        radial-gradient(52% 44% at 88% 6%, rgba(96, 124, 166, .16) 0%, rgba(96, 124, 166, 0) 66%);
    animation: saBreathe 19s ease-in-out infinite alternate;
}

@keyframes saBreathe {
    from { opacity: .78; transform: translate3d(0, 0, 0) scale(1); }
    to   { opacity: 1; transform: translate3d(-10px, -14px, 0) scale(1.035); }
}

/* --------------------------------------------------------------------------
   The sewing line along the floor: cloth fed in from the right, three machine
   heads over it, and the seam the middle one has already laid down. Low
   contrast on purpose - it should read as the room the panel is standing in,
   not as an illustration.

   One number sets every speed here: a stitch is 16 view units long and the
   line runs four stitches a second, so the cloth travels 64 units a second.
   The needle makes one stitch in .25s, the cloth moves one stitch in the same
   .25s, and the seam's dash pattern (9 on, 7 off) is that same 16 units, so
   the dashes travel with the cloth rather than sliding along it. Change one
   and the rest have to follow, or the needle will look like it is sewing in
   the wrong place.
   -------------------------------------------------------------------------- */

.sa-bg__line {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: auto;
    opacity: .72;
}

/* The cloth: 1440 wide over a 1200 box, so a 240-unit step (15 stitches,
   3.75s) returns it to where it started and the loop never shows. */
.sa-line__feed { animation: saFeed 3.75s linear infinite; }

@keyframes saFeed { to { transform: translateX(-240px); } }

/* The seam travels with the cloth: one dash cycle is one stitch. */
.sa-line__seam { animation: saSeam .25s linear infinite; }

@keyframes saSeam { to { stroke-dashoffset: -16; } }

/* The needle: down through the cloth and back up, once per stitch. Held at
   the top for part of the beat, the way a real bar dwells while the feed
   dog moves the work on. */
.sa-line__needle {
    transform-box: fill-box;
    transform-origin: center top;
    animation: saStitch .25s ease-in-out infinite;
}

@keyframes saStitch {
    0%, 100% { transform: translateY(0); }
    45%      { transform: translateY(22px); }
}

/* Lint lifting off the cloth where the needle works, and thinning out. */
.sa-line__lint {
    transform-box: fill-box;
    transform-origin: center;
    opacity: 0;
    animation: saLint 7.2s ease-out infinite;
    animation-delay: var(--d, 0s);
}

@keyframes saLint {
    0%   { opacity: 0; transform: translate(0, 0) scale(.4); }
    18%  { opacity: 1; }
    100% { opacity: 0; transform: translate(var(--dx, 30px), var(--dy, -50px)) scale(1.9); }
}

/* Brushed surface: hairlines too fine to read as a pattern, only as a surface. */
.sa-bg__brushed {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(0deg,
            rgba(255, 255, 255, .016) 0px,
            rgba(255, 255, 255, .016) 1px,
            transparent 1px,
            transparent 4px);
}

/* Grain, so the gradients stop looking like gradients. */
.sa-bg__grain {
    position: absolute;
    inset: 0;
    opacity: .32;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
}

.sa-bg__vignette {
    position: absolute;
    inset: 0;
    background: radial-gradient(78% 66% at 50% 42%, transparent 0%, rgba(0, 0, 0, .34) 72%, rgba(0, 0, 0, .62) 100%);
}

/* --------------------------------------------------------------------------
   Stage
   -------------------------------------------------------------------------- */

.sa-stage {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 28px 20px 38px;
}

.sa-shell { width: 100%; max-width: 384px; }

.sa-rise { animation: saRise .45s ease-out both; animation-delay: var(--d, 0s); }

@keyframes saRise {
    from { opacity: 0; transform: translate3d(0, 8px, 0); }
    to   { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   Panel
   -------------------------------------------------------------------------- */

.sa-card {
    padding: 26px 28px 24px;
    background: linear-gradient(180deg, #151b24 0%, #10151d 48%, #0d1219 100%);
    border: 1px solid var(--sa-edge);
    border-radius: 4px;
    /* A hairline of light along the top edge: it is what stops a dark panel
       reading as a hole cut in the page. */
    box-shadow:
        0 26px 60px -34px rgba(0, 0, 0, .95),
        inset 0 1px 0 rgba(255, 255, 255, .055);
}

/* --------------------------------------------------------------------------
   Company wordmark, on one line with the product name. The client's own logo
   when there is one, otherwise their name in signage type - never a generic
   icon in a rounded square.
   -------------------------------------------------------------------------- */

.sa-brand {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    padding-bottom: 13px;
    margin-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
}

.sa-brand__logo { display: block; max-width: 170px; max-height: 32px; object-fit: contain; }

.sa-brand__name {
    margin: 0;
    min-width: 0;
    font-family: "Oswald", "Hind Siliguri", "Inter", sans-serif;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: .045em;
    text-transform: uppercase;
    color: #f2f5f9;
}

.sa-brand__sub {
    margin: 0;
    flex: 0 0 auto;
    font-size: 10.5px;
    font-weight: 400;
    letter-spacing: .15em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--sa-faint);
}

/* --------------------------------------------------------------------------
   Heading
   -------------------------------------------------------------------------- */

.sa-head { margin-bottom: 18px; }

.sa-head h1 {
    margin: 0;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: -.005em;
    color: var(--sa-ink);
}

.sa-head p { margin: 5px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--sa-muted); }

/* --------------------------------------------------------------------------
   Fields. Square, the way every other form in this ERP is.
   -------------------------------------------------------------------------- */

.sa-field { margin-bottom: 13px; }

.sa-label {
    display: block;
    margin-bottom: 7px;
    font-size: 11.5px;
    font-weight: 400;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--sa-muted);
}

/* A label with something beside it - the recovery link next to Password. */
.sa-label--row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.sa-label--row label { cursor: pointer; }

.sa-control { position: relative; }

.sa-input {
    width: 100%;
    height: 42px;
    padding: 0 13px;
    font: inherit;
    font-size: 14px;
    color: var(--sa-ink);
    background: rgba(255, 255, 255, .028);
    border: 1px solid rgba(255, 255, 255, .115);
    border-radius: 0;
    outline: none;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .3);
    transition: border-color var(--sa-t), background var(--sa-t), box-shadow var(--sa-t);
}

.sa-input::placeholder { color: #5d6672; }

.sa-input:hover { border-color: rgba(255, 255, 255, .2); }

.sa-input:focus {
    background: rgba(255, 255, 255, .052);
    border-color: rgba(255, 255, 255, .24);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .3), inset 0 -2px 0 0 var(--sa-ember);
}

.sa-input.is-invalid { border-color: rgba(226, 96, 96, .6); }
.sa-input.is-invalid:focus { box-shadow: inset 0 1px 2px rgba(0, 0, 0, .3), inset 0 -2px 0 0 var(--sa-danger); }

.sa-input:-webkit-autofill,
.sa-input:-webkit-autofill:hover,
.sa-input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--sa-ink);
    -webkit-box-shadow: 0 0 0 60px #171c23 inset;
    caret-color: var(--sa-ink);
}

.sa-input[type="password"] { padding-right: 42px; }

.sa-reveal {
    position: absolute;
    top: 1px;
    right: 1px;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--sa-faint);
    font-size: 13px;
    cursor: pointer;
    transition: color var(--sa-t);
}

.sa-reveal:hover { color: var(--sa-ink-2); }

.sa-error { margin: 6px 0 0; font-size: 12px; color: var(--sa-danger); }

.sa-hint {
    display: none;
    align-items: center;
    gap: 7px;
    margin: 7px 0 0;
    font-size: 12px;
    color: var(--sa-ink-2);
}

.sa-hint.is-on { display: flex; }
.sa-hint i { color: var(--sa-ember-hi); font-size: 11px; }

/* --------------------------------------------------------------------------
   Password strength - reset screen only
   -------------------------------------------------------------------------- */

.sa-meter { margin-top: 9px; }

.sa-meter__track { display: flex; gap: 4px; }

.sa-meter__track span {
    flex: 1 1 0;
    height: 3px;
    background: rgba(255, 255, 255, .1);
    transition: background .25s ease;
}

.sa-meter__text { margin: 7px 0 0; font-size: 11.5px; color: var(--sa-faint); }

.sa-meter[data-level="1"] .sa-meter__track span:nth-child(-n+1) { background: #c9563f; }
.sa-meter[data-level="2"] .sa-meter__track span:nth-child(-n+2) { background: #c98a3f; }
.sa-meter[data-level="3"] .sa-meter__track span:nth-child(-n+3) { background: #b3a13f; }
.sa-meter[data-level="4"] .sa-meter__track span { background: var(--sa-success); }

/* --------------------------------------------------------------------------
   Options row
   -------------------------------------------------------------------------- */

.sa-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 2px 0 16px;
    flex-wrap: wrap;
}

.sa-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: var(--sa-ink-2);
    cursor: pointer;
    user-select: none;
}

.sa-check input {
    appearance: none;
    -webkit-appearance: none;
    width: 15px;
    height: 15px;
    margin: 0;
    border: 1px solid var(--sa-edge-2);
    border-radius: 0;
    background: rgba(255, 255, 255, .032);
    cursor: pointer;
    transition: background var(--sa-t), border-color var(--sa-t);
}

.sa-check input:checked {
    border-color: var(--sa-ember);
    background: var(--sa-ember) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.5l3 3 6-6'/%3E%3C/svg%3E") center / 11px no-repeat;
}

.sa-check input:focus-visible { outline: 1px solid var(--sa-ember); outline-offset: 2px; }

.sa-link {
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: var(--sa-muted);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color var(--sa-t), border-color var(--sa-t);
}

.sa-link:hover { color: var(--sa-ink); border-bottom-color: var(--sa-ember); }

/* --------------------------------------------------------------------------
   Button. Solid paint, square, and it moves when you press it.
   -------------------------------------------------------------------------- */

.sa-btn {
    width: 100%;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 0;
    border-radius: 0;
    font-family: "Oswald", "Hind Siliguri", "Inter", sans-serif;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #fff;
    background: linear-gradient(180deg, #ed6a13 0%, #dc590c 54%, #c74e09 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .2),
        0 1px 2px rgba(0, 0, 0, .45);
    cursor: pointer;
    transition: background var(--sa-t), box-shadow var(--sa-t), transform var(--sa-t);
}

.sa-btn:hover { background: linear-gradient(180deg, #f87716 0%, #e8620e 54%, #d3550a 100%); }

.sa-btn:active {
    transform: translateY(1px);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, .35);
}
.sa-btn:focus-visible { outline: 1px solid var(--sa-ember-hi); outline-offset: 3px; }

.sa-btn.is-busy {
    pointer-events: none;
    background: var(--sa-ember-dim);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
}
.sa-btn.is-busy .sa-btn__label { opacity: .7; }

.sa-btn.is-busy::before {
    content: "";
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, .3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: saSpin .7s linear infinite;
}

@keyframes saSpin { to { transform: rotate(360deg); } }

/* --------------------------------------------------------------------------
   Messages
   -------------------------------------------------------------------------- */

.sa-alert {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-bottom: 14px;
    padding: 9px 12px;
    border-left: 2px solid transparent;
    font-size: 12.5px;
    line-height: 1.45;
}

.sa-alert i { margin-top: 2px; font-size: 12px; }

.sa-alert--danger {
    border-left-color: var(--sa-danger);
    background: rgba(226, 96, 96, .09);
    color: #efc4c4;
}

.sa-alert--danger i { color: var(--sa-danger); }

.sa-alert--success {
    border-left-color: var(--sa-success);
    background: rgba(76, 175, 130, .09);
    color: #bfe4d2;
}

.sa-alert--success i { color: var(--sa-success); }

.sa-alert ul { margin: 0; padding-left: 16px; }

/* --------------------------------------------------------------------------
   reCAPTCHA. The widget is a fixed 304x78 iframe, so it is scaled to fit the
   panel and the wrapper is given the scaled height - otherwise the untouched
   layout box leaves a band of dead space under it.
   -------------------------------------------------------------------------- */

.sa-captcha {
    display: flex;
    justify-content: center;
    height: 70px;
    margin: 0 0 14px;
    overflow: hidden;
}

.sa-captcha > div { transform: scale(.88); transform-origin: top center; }

/* --------------------------------------------------------------------------
   Panel foot
   -------------------------------------------------------------------------- */

.sa-card__foot {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--sa-edge);
    font-size: 12.5px;
    color: var(--sa-faint);
}

.sa-card__foot a {
    color: var(--sa-ink-2);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color var(--sa-t), border-color var(--sa-t);
}

.sa-card__foot a:hover { color: var(--sa-ink); border-bottom-color: var(--sa-ember); }

//* --------------------------------------------------------------------------
   Page foot: one line under the panel. The screen's secondary route - the
   employee portal on the login screen - sits in the same line as the build
   credit rather than in the panel, so the panel holds nothing but the form.
   -------------------------------------------------------------------------- */

.sa-foot {
    margin: 16px 0 0;
    text-align: center;
    font-size: 10px;
    font-weight: 400;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(170, 184, 204, .34);
}

.sa-foot a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color var(--sa-t), border-color var(--sa-t);
}

.sa-foot a:hover { color: rgba(170, 184, 204, .66); }

/* The one link here that is a way in, rather than a credit, so it carries
   a little more light than the rest of the line. */
.sa-foot__action { color: rgba(170, 184, 204, .52); }
.sa-foot__action:hover { color: rgba(233, 237, 243, .9); border-bottom-color: rgba(226, 96, 15, .5); }

.sa-foot__sep { margin: 0 7px; opacity: .45; }

/* --------------------------------------------------------------------------
   Back to sign in
   -------------------------------------------------------------------------- */

.sa-back {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 14px;
    font-size: 12px;
    letter-spacing: .03em;
    color: var(--sa-faint);
    text-decoration: none;
    transition: color var(--sa-t);
}

.sa-back i { font-size: 10px; }
.sa-back:hover { color: var(--sa-ink-2); }

/* --------------------------------------------------------------------------
   Narrow screens
   -------------------------------------------------------------------------- */

@media (max-width: 420px) {
    /* The whole line still fits across a phone, just small - dimmed further
       so it stays scenery rather than a picture under the panel. */
    .sa-bg__line { opacity: .5; }
    .sa-stage { padding: 22px 14px 32px; }
    .sa-card { padding: 20px 18px 18px; }
    .sa-brand { flex-wrap: wrap; gap: 4px 12px; }
    .sa-brand__name { font-size: 17px; }
}

/* A short laptop screen scrolls from the top rather than clipping the panel. */
@media (max-height: 620px) {
    .sa-stage { align-items: flex-start; }
}

/* --------------------------------------------------------------------------
   Reduced motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .sa-bg__glow,
    .sa-line__feed,
    .sa-line__seam,
    .sa-line__needle,
    .sa-line__lint,
    .sa-rise {
        animation: none !important;
    }

    .sa-rise { opacity: 1; transform: none; }
    .sa-btn:active { transform: none; }
}