/*
    Shared chrome for the two public account pages: Login (mockup screen 2) and Sign up
    (mockup screens 3 and 4).

    Why this file exists. Both pages render their fields through a Serenity PropertyGrid, which
    emits the ADMIN theme's editor markup - <input class="editor s-StringEditor"> at 13px with 3px
    of padding, a hairline border and square corners, computing to about 24px tall. The public
    warranty forms next door use plain Bootstrap .form-control at about 38px. Standing side by side
    the account pages read as broken rather than merely different.

    The fix restyles the editors the PropertyGrid produces rather than replacing the PropertyGrid
    with hand-written inputs, because the grid carries the validation and entity binding that the
    signup and account-claim flow depend on.

    Tokens are taken from the customer portal (Modules/Portal/MyFleet/_MyFleetLayout.cshtml) so
    these pages match the portal rather than inventing a third visual language. The signup page's
    earlier blue accent is overridden here for the same reason.

    Everything is scoped under .ct-auth and this file is only linked from those two views, so
    nothing here can reach an admin grid or dialog.
*/

.ct-auth {
    --ct-accent: #e8862a;
    --ct-accent-dark: #cf7420;
    --ct-accent-tint: #fdf1e5;
    --ct-accent-ink: #9a5410;
    --ct-ink: #1f2733;
    --ct-muted: #6b7684;
    --ct-line: #d8dee6;
    --ct-line-hover: #bcc7d3;
    --ct-panel: #f4f6f8;
    --ct-danger: #d14343;
}

/* ---------- card ---------- */

.ct-auth .s-Panel {
    background: #fff;
    border: 1px solid var(--ct-line);
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}

/* ---------- type ---------- */

.ct-auth h2 {
    font-size: 22px;
    color: var(--ct-ink);
    margin: 0;
}

.ct-auth p {
    color: var(--ct-muted);
    font-size: 13.5px;
}

/* ---------- fields ----------

   .editor is the input element itself, not a wrapper. Serenity lays .field out as a flex row with
   the label beside the editor; the mockup stacks the label above a full-width input, so the axis
   has to change here or a 100%-wide label squeezes the input down to a few pixels.
*/

.ct-auth .field {
    display: block;
    margin-bottom: 14px;
}

.ct-auth .field > label.caption {
    display: block;
    float: none;
    width: 100%;
    text-align: left;
    font-size: 13px;
    font-weight: 600;
    color: var(--ct-ink);
    margin-bottom: 6px;
}

/* Serenity gives the required marker vertical-align:top, which lifts it clear of the line box and
   makes it read as a stray asterisk on its own line above the label. Put it back on the baseline so
   it sits immediately before the label text. */
.ct-auth .field > label.caption sup {
    color: var(--ct-danger);
    font-size: 12px;
    margin-right: 3px;
    vertical-align: baseline;
    top: 0;
}

.ct-auth input.editor,
.ct-auth select.editor,
.ct-auth textarea.editor {
    display: block;
    box-sizing: border-box;
    width: 100%;
    float: none;
    min-height: 40px;
    padding: 9px 12px;
    font-size: 14px;
    line-height: 20px;
    color: var(--ct-ink);
    background: #fff;
    border: 1px solid var(--ct-line);
    border-radius: 8px;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.ct-auth textarea.editor {
    min-height: 88px;
}

.ct-auth input.editor::placeholder,
.ct-auth textarea.editor::placeholder {
    color: #9aa4b0;
}

.ct-auth input.editor:hover,
.ct-auth select.editor:hover,
.ct-auth textarea.editor:hover {
    border-color: var(--ct-line-hover);
}

.ct-auth input.editor:focus,
.ct-auth select.editor:focus,
.ct-auth textarea.editor:focus {
    outline: none;
    border-color: var(--ct-accent);
    box-shadow: 0 0 0 3px rgba(232, 134, 42, .15);
}

.ct-auth input.editor[readonly],
.ct-auth input.editor:disabled,
.ct-auth select.editor:disabled {
    background: var(--ct-panel);
    color: var(--ct-muted);
}

/* Validation. jQuery validate marks the offending input and Serenity renders the message into
   the .vx element that follows it. */
.ct-auth input.editor.error,
.ct-auth select.editor.error,
.ct-auth textarea.editor.error {
    border-color: var(--ct-danger);
}

.ct-auth input.editor.error:focus {
    box-shadow: 0 0 0 3px rgba(209, 67, 67, .15);
}

.ct-auth .vx .error,
.ct-auth label.error {
    display: block;
    color: var(--ct-danger);
    font-size: 12.5px;
    margin-top: 4px;
}

/* Serenity renders an empty .vx under every field to hold a future validation message. Left alone it
   reserves 22px of dead space below each input, which on a short form reads as an accidental gap
   above the button. It reappears as soon as it has a message to show. */
.ct-auth .field .vx:empty {
    display: none;
}

/* ---------- buttons ---------- */

.ct-auth .btn {
    border-radius: 8px;
    padding: 9px 16px;
    font-size: 14px;
    font-weight: 600;
}

.ct-auth .btn-primary {
    background: var(--ct-accent);
    border-color: var(--ct-accent);
    color: #fff;
}

.ct-auth .btn-primary:hover,
.ct-auth .btn-primary:active {
    background: var(--ct-accent-dark);
    border-color: var(--ct-accent-dark);
    color: #fff;
}

.ct-auth .btn-primary:focus-visible {
    box-shadow: 0 0 0 3px rgba(232, 134, 42, .25);
}

/* A tinted-orange disabled state left white text on a pale background, which was hard to read.
   Neutral reads unambiguously as "not available yet" and keeps the label legible. */
.ct-auth .btn-primary:disabled,
.ct-auth .btn-primary.disabled {
    background: var(--ct-panel);
    border-color: var(--ct-line);
    color: #9aa4b0;
    opacity: 1;
}

.ct-auth .btn-outline-secondary {
    background: #fff;
    border-color: var(--ct-line);
    color: var(--ct-ink);
}

.ct-auth .btn-outline-secondary:hover {
    background: var(--ct-panel);
    border-color: var(--ct-line-hover);
    color: var(--ct-ink);
}

/* ---------- links ---------- */

.ct-auth a {
    color: var(--ct-accent-ink);
    text-decoration: none;
}

.ct-auth a:hover {
    text-decoration: underline;
}

/* ---------- signup: role choice cards and step badge ----------

   Overrides the blue accent these carried before, so step 1 matches the portal.
*/

.ct-auth .choice-card {
    border: 1.5px solid var(--ct-line);
    border-radius: 10px;
    background: #fff;
}

.ct-auth .choice-card:hover {
    border-color: var(--ct-line-hover);
}

.ct-auth .choice-card.sel {
    border-color: var(--ct-accent);
    box-shadow: 0 0 0 3px rgba(232, 134, 42, .12);
}

.ct-auth .choice-card h4 {
    color: var(--ct-ink);
}

.ct-auth .signup-badge {
    display: inline-block;
    background: var(--ct-accent-tint);
    color: var(--ct-accent-ink);
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .6px;
    padding: 3px 9px;
    border-radius: 999px;
}