/**
 * The sign-in screen's own rules. Everything else it uses — the type, the palette, the focus
 * treatment — comes from assets/css/app.css and the Tailwind config, the same as every page inside.
 *
 * There is no dark half here on purpose. The sign-in screen has ONE fixed appearance, so `html`
 * never carries the `dark` class and an `html.dark` rule in this file could never apply. The
 * reasoning, and the reasoning for the centred card, is at the top of views/login.php.
 */

/* ============================================================================================
   The ground
   ============================================================================================

   WHY THIS IS DRAWN IN CSS AND NOT A PICTURE

   A photograph or a rendered illustration behind a sign-in form has three costs and, here, no
   benefit: it is hundreds of kilobytes on the one page people hit before anything is cached, it
   needs a second version for every screen density, and it dates — a background chosen in 2026 looks
   like 2026 forever. Drawn in CSS it is about twenty lines, sharp at any density, and changes with
   the palette instead of against it.

   WHAT IT IS

   Ruled columns and rows: an accounting workpaper. That is the one image this system genuinely
   earns — it exists to count jobs and hours into days against a target, which is what a workpaper
   is for. Columns wider than rows, the way ruled paper actually is, rather than square graph paper.

   It is kept at the very edge of visible on purpose. A background on a page whose whole job is a
   six-field form should register as texture and never as a picture: you should notice the page has
   a surface without ever looking at it. */

.login-page {
    background: var(--vs-50);
}

/*
 * The ruling. Fixed rather than absolute so it stays put if the form ever grows tall enough to
 * scroll, and behind everything via a negative z-index on its own stacking context.
 */
.login-page::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    background-image:
        linear-gradient(to right, rgba(22, 29, 38, 0.05) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(22, 29, 38, 0.038) 1px, transparent 1px);
    background-size: 88px 36px;
    /*
     * Fades out towards the edges so the ruling has no hard boundary and the corners stay quiet.
     * Every browser this app runs in supports the unprefixed property; the -webkit- line is there
     * for older WebKit, and if both were ignored the ruling would simply cover the whole viewport,
     * which is a worse composition rather than a broken one.
     */
    -webkit-mask-image: radial-gradient(70% 60% at 50% 42%, #000 35%, transparent 100%);
    mask-image: radial-gradient(70% 60% at 50% 42%, #000 35%, transparent 100%);
}

/*
 * One soft pool of brand light behind the card, so the middle of the page is warmer than its edges
 * and the card has something to sit in. Low enough that it reads as depth, not as a gradient.
 */
.login-page::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background: radial-gradient(38rem 26rem at 50% 30%, rgba(128, 0, 32, 0.055), transparent 72%);
}

/*
 * The one hard piece of brand on the page. Every page behind this one wears a solid burgundy bar
 * across the top; this is that bar reduced to a line — enough to say which product this is without
 * a headline competing with the form for attention.
 */
.login-rule {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--vs-brand);
    z-index: 1;
}

/* ============================================================================================
   The wordmark
   ============================================================================================
   assets/images/vostro-wordmark.svg is inlined by views/login.php so its colour can be set here.
   It is the real VOSTRO Private Wealth mark; see the note inside that file about its own colour. */

.login-wordmark {
    color: var(--vs-brand);
    /*
     * The mark is now 115.2x20 rather than 156x20, so the old 190px would set the letters a third
     * larger. 182 is chosen against the descriptor beneath it: "OPERATIONS DASHBOARD" measures
     * 178px at its size and tracking, and a lockup reads wrong when the descriptor is wider than
     * the mark it describes. Matching their widths is the usual answer and it is the right one
     * here. Change one and re-measure the other.
     */
    width: 182px;
    height: auto;
    display: block;
}

/* ============================================================================================
   Form details
   ============================================================================================ */

/* Chrome paints its own background and text colour over an autofilled field, overriding the field's
   own styling mid-form. The only reliable answer is an inset shadow the size of the box. One
   declaration, because this page has one appearance. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px #FFFFFF inset;
    -webkit-text-fill-color: #161D26;
    caret-color: #161D26;
}

/* Kept from the original stylesheet: the eye icons never become the hover or event target, so the
   toggle behaves as one control however precisely the pointer lands. */
.password-toggle svg {
    pointer-events: none;
}