/* Albright Labs Accounts — public auth + dashboard styles.
   Mirrors the visual system used by saasbase's branded login pages in the
   four product apps so the suite feels coherent. */

/* Albright Labs palette, replacing the stock Bootstrap 4 defaults this file
   shipped with (#007bff primary, #212529 text, #ced4da borders). Values come
   from the company theme's token block, newsite.tailwind.config.js:48-65.

   --abl-primary is the blue used for links and focus rings. The primary
   button is gold with navy text, which is the brand's conversion colour, so
   it has its own variables rather than reusing the link blue. */
:root {
    --input-padding-x: .75rem;
    --input-padding-y: .75rem;

    --abl-navy: #0C2A43;
    --abl-navy-deep: #061826;   /* brand deep navy, matching albright.link --navy-deep */
    --abl-primary: #0879D0;
    --abl-primary-hover: #066BBF;
    --abl-primary-active: #0A6BB5;
    --abl-gold: #FDCB6E;
    --abl-gold-hover: #EFBC51;
    --abl-text: #0C2A43;
    --abl-muted: #52617A;
    --abl-bg: #F4F6F8;
    --abl-surface: #FAFBFC;
    --abl-border: #D6DCE3;
    --abl-border-soft: #E5E9EE;
}

body {
    font-family: 'Montserrat', system-ui, -apple-system, sans-serif;
    margin: 0;
    padding: 0;
    color: var(--abl-text);
}

/* ── Auth shell ───────────────────────────────────────────────────────────
   Ported from albrightlabs.com's client-portal login
   (themes/albright/partials/forms/auth.htm): one centred card, deep-blue brand
   panel beside the form.

   Written by hand rather than by copying that theme's compiled newsite.min.css.
   That file is a full Tailwind build including preflight, and dropping it next
   to the Bootstrap 4 this page still needs would start a reset fight on the
   signup markup. The card is small enough to express directly. */

/* svh, not vh: on mobile browsers 100vh includes the strip behind the address
   bar, so a vh-tall page always scrolls by the height of that strip. The
   height lives here, on the column, so the shell and the footer share one
   viewport between them instead of each claiming a full one. */
.auth-body {
    background: var(--abl-bg);
    min-height: 100svh;
    display: flex;
    flex-direction: column;
}

.auth-shell {
    flex: 1 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    /* No min-height here. flex:1 0 auto already takes every row the footer
       does not, so giving the shell its own viewport height pushed the
       copyright line permanently below the fold. */
    padding: 24px 20px;
    /* No opacity:0 here. The old shell started hidden and was faded in by a
       jQuery call in the layout; a sign-in page should not need JavaScript to
       become visible, and that script went away with the old markup. */
}

/* min-height keeps the short forms honest: /forgot is a single field, and
   without a floor the card collapses to a letterbox next to the brand panel.
   The tallest form still grows past it. */
.auth-card {
    width: 100%;
    max-width: 56rem;
    min-height: 30rem;
    background: #fff;
    border: 1px solid var(--abl-border-soft);
    border-radius: 16px;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr 1fr;
}

/* Brand panel. The star field is the same two-tile drift the company site
   uses on every dark surface; it replaces the random picsum.photos photo that
   used to fill this column. */
.auth-brand {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: var(--abl-navy-deep);
    color: #fff;
    padding: 36px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 40px;
}

/* The star field is built by the script at the foot of the auth layout, which
   replaced two repeating SVG tiles (star-tile.svg / star-tile-b.svg, now
   unused). The tiles drifted as one sheet on a fixed 720px grid; these are
   individual elements, so each star twinkles on its own phase and the count
   follows the panel's measured area — the panel is a tall column on desktop and
   a short band on a phone. The mask thins the field toward the bottom, where
   the footer sits. */
.login-stars { position: relative; overflow: hidden; isolation: isolate; }

.ns-starfield {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
    -webkit-mask: linear-gradient(180deg, #000 0%, #000 26%, rgba(0, 0, 0, .62) 58%, rgba(0, 0, 0, .26) 80%, transparent 97%);
            mask: linear-gradient(180deg, #000 0%, #000 26%, rgba(0, 0, 0, .62) 58%, rgba(0, 0, 0, .26) 80%, transparent 97%);
}

/* Double height holding two identical copies: the track slides up by half its
   height and restarts, so the loop has no seam. */
.ns-starfield-track {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 200%;
    animation: ns-star-drift 150s linear infinite;
}

.ns-starfield-layer { position: absolute; left: 0; right: 0; height: 50%; }
.ns-starfield-layer:first-child { top: 0; }
.ns-starfield-layer:last-child { top: 50%; }

.ns-starfield-star {
    position: absolute;
    width: var(--size, 2px);
    height: var(--size, 2px);
    border-radius: 50%;
    background: var(--hue, #fff);
    opacity: var(--low, .3);
    animation: ns-star-twinkle var(--dur, 4s) ease-in-out var(--delay, 0s) infinite;
}

/* On a product gradient the gold and light blue go muddy, so those panels take
   white stars only. Size, base opacity and twinkle phase still vary per star —
   only the colour is pinned.

   This overrides `background` rather than `--hue`: the script writes --hue into
   each star's inline style, and an inline custom property beats a stylesheet
   rule, so redeclaring the variable here does nothing. */
.auth-brand.is-app .ns-starfield-star { background: #FFFFFF; }

@keyframes ns-star-drift {
    from { transform: translate3d(0, -50%, 0); }
    to   { transform: translate3d(0, 0, 0); }
}

@keyframes ns-star-twinkle {
    0%   { opacity: var(--low, .3); transform: scale(1); }
    70%  { opacity: 1; transform: scale(1.35); }
    100% { opacity: var(--low, .3); transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .ns-starfield-track { animation: none; transform: translate3d(0, -50%, 0); }
    .ns-starfield-star { animation: none; opacity: .6; }
}

.auth-brand-mark { position: relative; display: inline-block; flex-shrink: 0; }
.auth-brand-mark img { height: 80px; width: auto; }

/* Product-branded panel. The accent comes from the app's own palette via an
   inline custom property, so adding a product is a config entry rather than a
   stylesheet change. Only the background shifts: the layout, the type and the
   form beside it stay identical, because the point is continuity of brand,
   not a different page per product. */
.auth-brand.is-app {
    background: linear-gradient(160deg, var(--auth-accent) 0%, var(--auth-accent-dark) 100%);
}
.auth-brand.is-app .auth-brand-app-logo {
    height: 64px;
    width: auto;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .25));
}
.auth-brand.is-app .auth-brand-foot { opacity: .85; }

.auth-brand-copy { position: relative; }

.auth-greeting {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.3;
    margin: 0;
    letter-spacing: -0.02em;
}

.auth-blurb {
    margin: 12px 0 0;
    font-size: 14px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.65);
    max-width: 22rem;
}

/* Two stacked parts rather than one run-on line: the product is the name on
   the page, and the company sits under it the way it does in each product
   site's own header. One part on the hub, where the company is the name. */
.auth-brand-foot {
    position: relative;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
}

.auth-brand-foot-name { color: rgba(255, 255, 255, 0.85); }

.auth-brand-foot-by {
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.55);
}

/* Form panel — holds {% page %}, i.e. the plugin's component markup. */
.auth-form {
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.auth-footer {
    flex-shrink: 0;
    padding: 20px;
    text-align: center;
}

.auth-footer p {
    margin: 0;
    font-size: 13px;
    color: var(--abl-muted);
}

.auth-footer a { color: var(--abl-muted); text-decoration: underline; }
.auth-footer a:hover { color: var(--abl-primary); }

/* On a phone the panel becomes a band above the form rather than disappearing,
   so it still reads as ours. The greeting and blurb drop: that vertical space
   is the difference between the password field being reachable and being below
   the fold, and the brand is the part that has to survive. */
@media (max-width: 767px) {
    /* One column on a phone: the floor would only add dead space below the
       form, and vertical room is the scarce thing here. */
    .auth-card { grid-template-columns: 1fr; min-height: 0; }

    .auth-brand {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        padding: 16px 20px;
    }

    .auth-brand-mark img { height: 44px; }
    .auth-brand-copy { display: none; }
    .auth-form { padding: 28px 24px; }
}

/* ── Bootstrap form overrides ─────────────────────────────────────────────
   The markup inside {% page %} is Bootstrap 4 and stays that way; these pull
   its look onto the brand. Radii are 6px per the brand's button spec, not the
   flat 0 this file used to force. */

/* Form heading and its subline. The gap between them was a single Bootstrap
   step, which read as one wrapped sentence rather than a title and a line
   under it. */
#login .auth-form-title {
    margin: 0 0 12px;
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--abl-navy);
}

#login .auth-form-sub {
    margin: 0 0 1.5rem;
    font-size: 14px;
    line-height: 1.5;
    color: var(--abl-muted);
}

#login .btn { border-radius: 6px; font-weight: 600; }

/* btn-lg is Bootstrap's 1.25rem/1rem-padding button, which on a 14px form
   reads as a different component borrowed from a wider page. These bring it
   back to the scale of the fields it submits. Every auth form uses the same
   class, so sign-in, password reset and MFA move with it. */
#login .btn-lg {
    font-size: 15px;
    line-height: 1.5;
    padding: 11px 16px;
    border-radius: 8px;
}

/* The checkbox label is prose, not a control label, so Bootstrap leaves it at
   the 1rem body size — noticeably larger than the field labels above it and
   the sign-in line below. */
#login .custom-control-label {
    font-size: 14px;
    line-height: 1.5;
    color: var(--abl-navy);
}

/* The marker is positioned against Bootstrap's 1rem line box; at 14px it sits
   low without this. */
#login .custom-control-label::before,
#login .custom-control-label::after { top: .175rem; }

/* Primary is gold with navy text — the brand's conversion colour. */
#login .btn-primary {
    background-color: var(--abl-gold);
    border-color: var(--abl-gold);
    color: var(--abl-navy);
}

#login .btn-primary:hover,
#login .btn-primary:focus,
#login .btn-primary:not(:disabled):not(.disabled):active {
    background-color: var(--abl-gold-hover);
    border-color: var(--abl-gold-hover);
    color: var(--abl-navy);
}

#login .btn-primary:focus,
#login .btn-primary:not(:disabled):not(.disabled):active:focus {
    box-shadow: 0 0 0 3px rgba(8, 121, 208, 0.25);
}

#login .custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: none;
}

/* Stacked label + field, matching albrightlabs.com's client-portal login
   (themes/albright/partials/forms/login.htm): the label sits above the input
   rather than floating inside it.

   This replaced a Bootstrap floating-label block — label absolutely positioned
   over the field, placeholder forced transparent, both shrinking on input. It
   worked, but it read as a different form from the company's, which is the
   thing these two pages are meant to share. Two IE/EdgeHTML @supports blocks
   went with it; they existed only to switch the floating trick back off. */
#login .form-label-group {
    margin-bottom: 1.25rem;
}

#login .form-label-group > label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--abl-navy);
}

#login .form-label-group > input {
    width: 100%;
    height: auto;
    padding: 10px 14px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--abl-navy);
    background-color: #fff;
    border: 1px solid var(--abl-border-soft);
    border-radius: 8px;
    transition: border-color .15s ease, box-shadow .15s ease;
}

#login .form-label-group > input::placeholder { color: #8794A8; }

#login .form-label-group > input:focus {
    border-color: var(--abl-primary);
    box-shadow: 0 0 0 3px rgba(8, 121, 208, 0.15);
    outline: none;
}

.alert { border-radius: 8px; }

#login a { color: var(--abl-primary); }
#login a:hover { color: var(--abl-primary-hover); }

/* Trailing links under the button are centred, as on the company form. */
#login .form-foot {
    margin: 12px 0 0;
    font-size: 14px;
    text-align: center;
}

#login .form-foot a { font-weight: 600; }

/* The old full-viewport layout's rules lived here: an auth-page footer styled
   as footer.text-muted, and a mobile block collapsing #login .container,
   #login-form-form, .brand-lockup, .brand-name and .brand-attribution. None of
   those elements exist any more — the card carries its own responsive rules
   further up, and the footer is .auth-footer. */

/* The dark-mode overrides that used to sit here are gone. The brand is
   light-only (the company theme sets color-scheme:light outright), and this
   block was actively breaking the new card: it painted the body #0f0f10, the
   inputs #1f1f23, forced headings to #fafafa so they vanished against the
   white form panel, and overrode the gold primary button back to a light
   blue. Half of it also styled elements this layout no longer has —
   .brand-lockup, footer.text-muted, #loader. */

/* The .abl-* app-shell rules that used to fill the rest of this file are
   gone: ~250 lines styling a dashboard, launcher, settings cards and tables.
   Nothing referenced them. No markup in themes/ or plugins/ carries an abl-
   class, and this stylesheet only loads on the auth layout, so it could never
   have styled the app shell it described. The real post-login styles are in
   app.css. */