/* ============================================================================
 * LOGIN THEME  --  MIDNIGHT                                     (26 Aug 2026)
 * ============================================================================
 *
 * The sign-in page for a workspace that has NO PICTURE -- which on this
 * installation means Edisky, whose artwork has never been chosen. Frosted
 * Glass is built around a photograph; without one it falls back to a flat
 * colour and a pane of glass frosting nothing, which reads as a page that
 * failed to load rather than one that was designed.
 *
 * So this theme is built the other way round: the page IS the design. A deep
 * gradient ground, the form centred on it, and no image anywhere.
 *
 * >>> IT IGNORES `login_image` ON PURPOSE. <<< A workspace that has a picture
 * and picks Midnight gets Midnight, not a compromise between the two. The
 * view only emits the background-image rule for themes whose `needsPicture`
 * says they are built around it -- see auth/login.php -- so this file does not
 * have to fight an inline style with !important to get a clean ground.
 *
 * >>> WHAT IT SHARES WITH GLASS, IT SHARES ON PURPOSE. <<< The corner radius
 * taken from --lets-radius-s, the wordmark treatment and the reduced-motion
 * rule are all deliberately the same: these are two looks for one product, not
 * two products.
 *
 * What differs is the ground, the pane, where the form sits -- and THE COLOUR
 * OF THE PANEL. Glass accents in lagoon; Midnight accents in the application's
 * own Ember orange, every edge and every button, so the sign-in page for a
 * workspace already looks like the workspace behind it. The lagoon survives
 * here only in the GROUND, which is why the two themes still read as siblings
 * rather than as strangers. Reasoning at the accent block below.
 *
 * Structure follows glass.css section for section, so the two can be read
 * side by side.
 * ========================================================================== */

/* ---- the ground: no photograph, just depth ---------------------------- */
body.lets-signin {
    /*
     * Three layers. The two radial pools are what stop a flat dark rectangle
     * looking like a page that failed to paint: one cool pool behind the form,
     * one warmer and dimmer bottom-left, so the ground has a direction to it.
     * The linear gradient underneath carries the overall descent.
     */
    background-color: #0d1b2a;
    background-image:
        radial-gradient(90rem 60rem at 78% 32%, rgba(43, 127, 143, .30) 0%, rgba(43, 127, 143, 0) 62%),
        radial-gradient(70rem 50rem at 12% 88%, rgba(56, 78, 104, .32) 0%, rgba(56, 78, 104, 0) 60%),
        linear-gradient(168deg, #16283a 0%, #0f1e2c 46%, #0a141f 100%);
    background-attachment: fixed;
}

/*
 * The scrim `body.lets-signin::before` exists in both themes because the
 * element is drawn by the shared view, not by a theme. Glass needs it to make
 * white type readable over an arbitrary photograph. Here there is no
 * photograph and the ground is already dark, so it does one small job instead:
 * a very faint vignette, which keeps the corners from reading as lighter than
 * the middle on a wide monitor.
 */
body.lets-signin::before {
    content: '';
    position: fixed;
    inset: 0;
    background: radial-gradient(120% 100% at 50% 45%,
        rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, .38) 100%);
    pointer-events: none;
}

/* ---- the stage: one column, CENTRED ----------------------------------- */
/*
 * Glass puts the form hard right because the left of the page is carrying a
 * photograph. Nothing is carrying anything here, so an off-centre form would
 * just look off-centre.
 */
.signin-stage {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px clamp(16px, 6vw, 90px);
    box-sizing: border-box;
}

/* ---- the panel -------------------------------------------------------- */
.signin-stage .login-box {
    flex: 0 0 auto;
    width: 400px;
    max-width: 100%;
    margin: 0;
}

/*
 * SOLID, NOT GLASS -- there is nothing behind it to show through, and a
 * translucent panel over a gradient is just a slightly different gradient.
 * The hairline and the inner highlight are what lift it off the ground.
 */
.signin-stage .login-box-body {
    border-radius: 14px;
    padding: 26px 26px 22px;
    background: linear-gradient(180deg, #1b2f42 0%, #162736 100%);
    border: 1px solid rgba(255, 255, 255, .10);
    box-shadow: 0 26px 70px rgba(0, 0, 0, .55),
                inset 0 1px 0 rgba(255, 255, 255, .10);
    color: #fff;
}

/* ---- the interior: type ------------------------------------------------ */
.signin-stage .login-box-msg        { color: rgba(255, 255, 255, .92); }
.signin-stage .login-box-body label { color: #fff; }
.signin-stage .checkbox label       { color: rgba(255, 255, 255, .92); font-weight: 400; }
.signin-stage .help-block           { color: rgba(255, 255, 255, .70); }

.signin-stage .login-box-body a       { color: rgba(255, 255, 255, .92); }
.signin-stage .login-box-body a:hover,
.signin-stage .login-box-body a:focus { color: #fff; text-decoration: underline; }

/* ---- the accent -------------------------------------------------------- */
/*
 * TWO ACCENTS, AND THEY ARE DOING DIFFERENT JOBS.
 *
 * ONE ACCENT NOW, IN TWO WEIGHTS -- the lagoon has left the panel. It survives
 * only in the GROUND, where the radial pools are still a cool blue-green; that
 * is a backdrop nothing is read against, and a warm panel on a cool ground is
 * the contrast this theme is built on. Everything ON the panel is Ember.
 *
 * Neither of `--signin-pick` / `--signin-pick-deep` is declared any more.
 * glass.css keeps its own pair and is untouched -- a workspace is using it and
 * it has been signed off -- but here nothing would read them, and a token
 * nothing reads is a token that quietly goes stale.
 *
 * `--signin-go-deep` takes every LETTERED surface: the Sign in button, and
 * whichever half of Internal/External is chosen.
 *
 * `--signin-go` is the neon one and takes every EDGE: the focused field's
 * border and ring, the tick box, the button's focus outline, the rule under
 * the wordmark. It is only ever a line, a glow or a fill behind a tick -- never
 * a surface with words on it, for the arithmetic below.
 *
 * >>> THE VALUES ARE COPIED FROM `.theme-ember`, NOT REFERENCED. <<< They are
 * literals because this page CANNOT read `--th-accent`: a skin belongs to a
 * user, and on a sign-in page there is no user yet. That is written out in
 * full in Config/LoginThemes.php, and it is why every login theme names its
 * own colours. If Ember is ever re-mixed, these two move BY HAND -- and so
 * does the `accent` swatch in that same config, which paints the picker's
 * miniature of this button.
 *
 * WHICH OF THE TWO CARRIES TEXT is measured, not chosen: white on #f2683c is
 * 3.08:1, short of AA, and white on #c8461f is 4.83:1. That single number is
 * the whole rule -- deep under words, neon everywhere else. The tick box is
 * the edge case and it passes: a checkmark is a graphic, not text, so its 3:1
 * bar is met by the 3.08:1 the neon tone gives.
 */
.signin-stage {
    --signin-go:      #f2683c;   /* Ember --th-accent      -- edges, glow, tick */
    --signin-go-deep: #c8461f;   /* Ember --th-accent-deep -- lettered surfaces */
}

/* ---- the two doors ----------------------------------------------------- */
.signin-stage .btn-group .btn-default {
    background: rgba(255, 255, 255, .07);
    border-color: rgba(255, 255, 255, .16);
    color: rgba(255, 255, 255, .88);
    text-shadow: none;
}
.signin-stage .btn-group .btn-default:hover,
.signin-stage .btn-group .btn-default:focus {
    background: rgba(255, 255, 255, .14);
    color: #fff;
}
/* The chosen half is a button that has been pressed, so it takes the orange
   like every other pressed thing on the panel -- not the lagoon, which would
   have made "selected" and "focused" two different colours saying one thing. */
.signin-stage .btn-group .btn-default.active,
.signin-stage .btn-group .btn-default.active:hover,
.signin-stage .btn-group .btn-default.active:focus {
    background: var(--signin-go-deep);
    border-color: var(--signin-go-deep);
    color: #fff;
    box-shadow: none;
}
/* Outer corners only -- the seam stays square so the two halves read as one
   control. Same radius as the fields and the button. */
.signin-stage .btn-group .btn-default:first-child {
    border-radius: var(--lets-radius-s, 8px) 0 0 var(--lets-radius-s, 8px);
}
.signin-stage .btn-group .btn-default:last-child {
    border-radius: 0 var(--lets-radius-s, 8px) var(--lets-radius-s, 8px) 0;
}

/* ---- the fields -------------------------------------------------------- */
.signin-stage .form-control {
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .16);
    color: #fff;
    box-shadow: none;
}
/*
 * The ring is written out as an rgba longhand rather than through the token,
 * because a custom property holds a COLOUR, not the four numbers rgba() wants
 * -- there is no way to spend `--signin-go` at 28% here without color-mix(),
 * which is newer than this page's floor. If the Ember orange is ever re-mixed,
 * THIS LINE MOVES TOO. It is the one place in the file where that is true.
 *
 * .28 rather than the .22 the lagoon ring used: the same alpha reads weaker in
 * orange against this ground, so the number went up to keep the ring as
 * visible as it was, not to make it louder.
 */
.signin-stage .form-control:focus {
    background: rgba(255, 255, 255, .11);
    border-color: var(--signin-go);
    box-shadow: 0 0 0 3px rgba(242, 104, 60, .28);
}
/* Separate rules, NOT one selector list: a browser that does not know one of
   these pseudo-elements throws away the whole rule it appears in. */
.signin-stage .form-control::placeholder { color: rgba(255, 255, 255, .55); }
.signin-stage .form-control::-webkit-input-placeholder { color: rgba(255, 255, 255, .55); }
.signin-stage .form-control-feedback { color: rgba(255, 255, 255, .60); }
/* `accent-color` fills the box and the browser draws a white tick on it. That
   tick is a graphic, so 3:1 is the bar and the neon tone's 3.08:1 clears it. */
.signin-stage .checkbox input[type="checkbox"] { accent-color: var(--signin-go); }

/*
 * AUTOFILL. Chrome repaints a remembered field solid white with near-black
 * type. On a dark panel that is a white brick, and it is the one state you
 * never see while designing the page. There is no property that turns it off;
 * an inset shadow 1000px deep paints over it, and the absurd transition delay
 * stops the white flashing through on the way in.
 */
.signin-stage .form-control:-webkit-autofill,
.signin-stage .form-control:-webkit-autofill:hover,
.signin-stage .form-control:-webkit-autofill:focus {
    -webkit-text-fill-color: #fff;
    -webkit-box-shadow: 0 0 0 1000px #22384c inset;
    caret-color: #fff;
    transition: background-color 9999s ease-out 0s;
}

/* ---- the button -------------------------------------------------------- */
/*
 * The gradient runs from the deep tone DOWNWARDS, never up into the bright
 * one, so the whole face stays at or above the 4.83:1 the deep tone measures
 * -- a gradient is only as readable as its lightest end.
 *
 * Hover goes darker rather than lighter, which is what the lagoon pair did and
 * for the same reason: on a dark panel a button that brightens on hover reads
 * as a button that is already pressed.
 */
.signin-stage .btn-primary {
    background: linear-gradient(135deg, var(--signin-go-deep), #a83a15);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 3px 12px -3px rgba(0, 0, 0, .7);
    border-radius: var(--lets-radius-s, 8px);
}
.signin-stage .btn-primary:hover,
.signin-stage .btn-primary:focus,
.signin-stage .btn-primary:active {
    background: linear-gradient(135deg, #b43e1a, #96330f);
    border-color: transparent;
    color: #fff;
}
/*
 * Tabbing to this button used to look EXACTLY like hovering it -- `:focus` sat
 * in the rule above with `:hover`, so a keyboard user got a darkening they
 * could not tell apart from the mouse state, on the one control that submits
 * the form. The ring is the bright Ember tone, which is the job it is kept
 * for: it lies OUTSIDE the button, so nothing is ever read against it, and at
 * 4.45:1 against the panel it clears the 3:1 a non-text indicator is asked for.
 *
 * `outline` rather than a box-shadow ring, so the button keeps the drop shadow
 * it already has instead of having to restate it -- and `outline-offset` is
 * what separates the ring from the orange face, which a flush one would blend
 * straight into.
 *
 * `:focus-visible`, so it appears for the keyboard and not after a click.
 */
.signin-stage .btn-primary:focus-visible {
    outline: 3px solid var(--signin-go);
    outline-offset: 2px;
}

/* ---- errors and flash messages ---------------------------------------- */
/*
 * Solid, like the rest of the application. AdminLTE sets `.alert-danger` with
 * !important, so a translucent one loses silently anyway -- and an error on a
 * sign-in page is the one thing here that should be loud.
 */
.signin-stage .has-error .form-control          { border-color: #ffab9b; }
.signin-stage .has-error .help-block,
.signin-stage .has-error .control-label,
.signin-stage .has-error .form-control-feedback { color: #ffc0b4; }

.signin-stage .alert {
    border: 1px solid rgba(255, 255, 255, .22);
    color: #fff;
    text-shadow: none;
}

/* ---- the wordmark above the panel -------------------------------------- */
/*
 * KINDLE. The name starts as a cold ember, catches to full Ember orange, and
 * cools to white -- the only moment on this page where the brand colour passes
 * THROUGH the name rather than sitting beside it. Chosen from five studies.
 *
 * The type treatment is still the glass theme's -- wide tracking, the rule
 * beneath, arriving once on load -- because the name should not wear a
 * different FACE on each theme. Only the way it arrives differs, which is the
 * same licence Midnight already takes with the ground and the panel.
 *
 * >>> IT DOES NOT MOVE. <<< The old animation slid the name down and collapsed
 * its tracking; this one holds it perfectly still and changes only colour. On
 * a page whose whole job is a 4-letter word above a form, a wordmark that
 * arrives without moving reads as more certain, not less.
 *
 * `text-indent` puts back the half-space tracking adds after the last letter,
 * which otherwise pushes a centred line visibly off-centre. `clamp` because
 * the name is per workspace and a long one must not wrap on a phone.
 */
.signin-stage .login-logo { margin-bottom: 20px; }
.signin-stage .login-logo a {
    display: inline-block;
    color: #fff;
    font-size: clamp(30px, 3.4vw, 42px);
    line-height: 1.1;
    letter-spacing: .2em;
    text-indent: .2em;
    text-shadow: 0 2px 24px rgba(0, 0, 0, .8),
                 0 0 40px rgba(242, 104, 60, .28);
    animation: letsKindle 1.15s cubic-bezier(.4, 0, .2, 1) both;
}
.signin-stage .login-logo a b { font-weight: 300; }

.signin-stage .login-logo a::after {
    content: '';
    display: block;
    height: 2px;
    width: 82%;
    margin: 12px auto 0;
    background: linear-gradient(90deg, transparent, var(--signin-go), transparent);
    /*
     * `both` is NOT decoration here. Its `backwards` half is what holds the
     * rule at opacity 0 through the 450ms delay -- without it the rule paints
     * solid, sits there for half a second, then fades in from nothing, which
     * is the one glitch you would never catch while writing the keyframes.
     */
    animation: letsKindleRule .7s .45s ease both;
}

/*
 * >>> BOTH OF THESE STOP AT 50%, ON PURPOSE. <<<
 *
 * An omitted `to` frame is not an unfinished animation: the browser builds one
 * from the element's OWN declared values, so each of these lands exactly on
 * the `color`, `text-shadow` and `width` set above and cannot drift from them.
 *
 * Writing the end state out longhand would have been a second copy of the
 * wordmark's resting look, and the next person to adjust the glow would have
 * changed one of the two and left the animation quietly overriding it.
 *
 * Named for what they do rather than reusing glass.css's `letsMarkIn` /
 * `letsMarkRule`: only one theme's stylesheet is ever linked (see login.php),
 * so the names cannot collide -- but two DIFFERENT animations under one name
 * across two files is a trap for whoever reads them side by side.
 */
@keyframes letsKindle {
    0%  { color: #532418; text-shadow: 0 0 0    rgba(242, 104, 60, 0);  }
    50% { color: #f2683c; text-shadow: 0 0 36px rgba(242, 104, 60, .9); }
}
@keyframes letsKindleRule { from { opacity: 0; } }

/*
 * Somebody who has asked for less motion gets the END STATE, not a blank space
 * -- calming an animation must never delete part of the design.
 *
 * This used to need a patch: the rule was declared at `width: 0` and drew
 * itself open, so turning the animation off left a rule that was never there,
 * and the width had to be put back by hand right here. Kindle inverted that.
 * Both keyframe sets now stop at 50% and inherit their finish from the
 * element's own declarations, so the resting look IS the declared look, and
 * `animation: none` lands on it with nothing to restore.
 *
 * Which means this block can no longer fall out of step with the design above
 * -- the failure it used to be one edit away from.
 */
@media (prefers-reduced-motion: reduce) {
    .signin-stage .login-logo a,
    .signin-stage .login-logo a::after { animation: none; }
}

.signin-stage .login-logo p { color: rgba(255, 255, 255, .85) !important; }
.signin-stage .signin-foot  { color: rgba(255, 255, 255, .60) !important; }

/* ---- the phone breakpoint ---------------------------------------------- */
/*
 * Less to do than the glass theme's: this form is already centred, so only the
 * padding and the panel width need to give.
 */
@media (max-width: 991px) {
    .signin-stage { padding: 20px 16px; }
    .signin-stage .login-box { width: 100%; max-width: 400px; }
}