/* ==========================================================================
   Command Force - 2026 theme, slimmed for auth screens (login, forgot).
   Layers on top of Bootstrap 5.3; retheming is done through Bootstrap's own
   component custom properties (--bs-btn-*, --bs-nav-pills-*) rather than by
   overriding its rules, so it survives Bootstrap patch upgrades.
   Everything is scoped to body.cf-auth.
   ========================================================================== */

.cf-auth {
    --cf-navy-900: #050d19;
    --cf-navy-800: #0a1628;
    --cf-navy-700: #0d1e35;
    --cf-blue: #1a6cf5;
    --cf-blue-dark: #0d55d0;
    --cf-blue-light: #4d92ff;
    --cf-ink: #0f172a;
    --cf-muted: #64748b;
    --cf-line: #e2e8f0;

    min-height: 100vh;
    margin: 0;
    font-family: Montserrat, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: #fff;
    background:
        radial-gradient(900px 500px at 50% -8%, rgba(26,108,245,.24), transparent 62%),
        linear-gradient(180deg, var(--cf-navy-800) 0%, var(--cf-navy-700) 100%);
    background-attachment: fixed;
}

/* Vertically centred column ------------------------------------------------ */

.cf-auth-shell {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
}

.cf-auth-inner {
    width: 100%;
    max-width: 470px;
}

/* Brand lockup ------------------------------------------------------------- */

.cf-auth-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    margin-bottom: 22px;
    color: #fff;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    text-decoration: none;
}
.cf-auth-brand:hover, .cf-auth-brand:focus { color: #fff; }
.cf-auth-brand-accent { color: var(--cf-blue-light); }

/* Card --------------------------------------------------------------------- */

.cf-auth-card {
    border: 0;
    border-radius: 12px;
    box-shadow: 0 28px 60px rgba(0,0,0,.42);
    color: var(--cf-ink);
}
.cf-auth-card .card-body { padding: 30px 30px 26px; }

.cf-auth-title {
    font-size: 19px;
    font-weight: 700;
    color: var(--cf-ink);
    text-align: center;
    margin: 0 0 20px;
}

/* Wider column, for screens that carry help text plus a form
   (technical-support.php) rather than a single stack of inputs. */

.cf-auth-inner-wide { max-width: 640px; }

.cf-auth-heading {
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--cf-ink);
    text-align: center;
    margin: 0 0 22px;
}

.cf-auth-who {
    text-align: center;
    font-size: 14px;
    color: var(--cf-muted);
    margin: -12px 0 20px;
}

/* Body copy inside the card. The card is white with dark ink, so links need
   the brand blue back - Bootstrap's default link colour reads purple-ish
   against this palette. */

.cf-auth-prose {
    font-size: 14.5px;
    line-height: 1.65;
    color: #334155;
}
.cf-auth-prose p { margin-bottom: 14px; }

/* :not(.nav-link) so an off-site tab rendered as an <a> (the Chat pill) keeps
   the nav-pills colours instead of the prose blue - .nav-link's own colour rule
   is one specificity point lower and would lose. */
/* Plain links only: a link styled as a .btn must keep its button text colour, or a
   white-on-blue button anchor (e.g. "Sign in" on the validated page) turns invisible. */
.cf-auth-card a:not(.nav-link):not(.btn) { color: var(--cf-blue); text-decoration: none; }
.cf-auth-card a:not(.nav-link):not(.btn):hover, .cf-auth-card a:not(.nav-link):not(.btn):focus { color: var(--cf-blue-dark); text-decoration: underline; }

.cf-auth-chars {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 13.5px;
    background: #f1f5f9;
    border: 1px solid var(--cf-line);
    border-radius: 6px;
    padding: 9px 12px;
}

/* Tabs - restyled through Bootstrap's nav-pills variables ------------------ */

.cf-auth .nav-pills {
    --bs-nav-pills-border-radius: 6px;
    --bs-nav-pills-link-active-bg: var(--cf-blue);
    --bs-nav-pills-link-active-color: #fff;
    --bs-nav-link-color: var(--cf-muted);
    --bs-nav-link-hover-color: var(--cf-blue);
    --bs-nav-link-font-weight: 600;
    gap: 4px;
}
.cf-auth .nav-pills .nav-link { font-size: 14.5px; padding: 8px 18px; }

/* Form controls ------------------------------------------------------------ */

.cf-auth .form-control {
    padding: 12px 14px;
    border-color: var(--cf-line);
    border-radius: 7px;
    font-size: 15px;
}
.cf-auth .form-control:focus {
    border-color: var(--cf-blue);
    box-shadow: 0 0 0 3px rgba(26,108,245,.16);
}
.cf-auth .form-check-input:checked {
    background-color: var(--cf-blue);
    border-color: var(--cf-blue);
}
.cf-auth .form-check-input:focus {
    border-color: var(--cf-blue);
    box-shadow: 0 0 0 3px rgba(26,108,245,.16);
}
.cf-auth .form-check-label { font-size: 14.5px; color: #334155; }

.cf-auth .form-label {
    font-size: 13.5px;
    font-weight: 600;
    color: #334155;
    margin-bottom: 5px;
}

.cf-auth .form-select {
    padding: 12px 36px 12px 14px;
    border-color: var(--cf-line);
    border-radius: 7px;
    font-size: 15px;
}
.cf-auth .form-select:focus {
    border-color: var(--cf-blue);
    box-shadow: 0 0 0 3px rgba(26,108,245,.16);
}

.cf-auth textarea.form-control { min-height: 92px; }

/* Inline alert (technical-support.php). Toggled with slideDown/slideUp, so it
   must not carry .d-none - .hideme below holds the resting state. */
.cf-auth .alert {
    --bs-alert-border-radius: 7px;
    font-size: 14.5px;
    padding: 13px 44px 13px 15px;
}

/* Reveal/hide toggle under a password field (reset-password.php) */
.cf-auth .cf-auth-hidelink {
    display: inline-block;
    margin-top: 7px;
    font-size: 13px;
    color: var(--cf-muted);
    text-decoration: none;
}
.cf-auth .cf-auth-hidelink:hover, .cf-auth .cf-auth-hidelink:focus {
    color: var(--cf-blue);
    text-decoration: underline;
}

/* Primary button ----------------------------------------------------------- */

.cf-auth .btn-primary {
    --bs-btn-bg: var(--cf-blue);
    --bs-btn-border-color: var(--cf-blue);
    --bs-btn-hover-bg: var(--cf-blue-dark);
    --bs-btn-hover-border-color: var(--cf-blue-dark);
    --bs-btn-active-bg: var(--cf-blue-dark);
    --bs-btn-active-border-color: var(--cf-blue-dark);
    --bs-btn-focus-shadow-rgb: 26, 108, 245;
    --bs-btn-font-weight: 700;
    --bs-btn-padding-y: 13px;
    --bs-btn-font-size: 15.5px;
    --bs-btn-border-radius: 7px;
}

.cf-auth .btn-outline-primary {
    --bs-btn-color: var(--cf-blue);
    --bs-btn-border-color: var(--cf-blue);
    --bs-btn-hover-bg: var(--cf-blue);
    --bs-btn-hover-border-color: var(--cf-blue);
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--cf-blue-dark);
    --bs-btn-active-border-color: var(--cf-blue-dark);
    --bs-btn-focus-shadow-rgb: 26, 108, 245;
    --bs-btn-font-weight: 600;
    --bs-btn-padding-y: 11px;
    --bs-btn-font-size: 14.5px;
    --bs-btn-border-radius: 7px;
}
/* The prose link rule wins on specificity otherwise and would underline the button. */
.cf-auth .cf-auth-card a.btn:hover, .cf-auth .cf-auth-card a.btn:focus { text-decoration: none; }
.cf-auth .cf-auth-card a.btn-outline-primary:hover { color: #fff; }

/* Message page (CommandForce\Theme\MessagePage) ---------------------------- */

.cf-msg-icon {
    width: 52px;
    height: 52px;
    margin: 0 auto 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #eef4ff;
    color: var(--cf-blue);
}
.cf-msg-success .cf-msg-icon { background: #e8f7ee; color: #15803d; }
.cf-msg-error .cf-msg-icon { background: #fdecec; color: #b91c1c; }
.cf-msg-actions { display: grid; gap: 10px; margin-top: 22px; }
.cf-msg-actions .btn:disabled { opacity: .6; }
.cf-msg-note {
    margin: 18px 0 0;
    padding-top: 14px;
    border-top: 1px solid var(--cf-line);
    font-size: 13px;
    line-height: 1.6;
    color: var(--cf-muted);
    text-align: center;
}
.cf-msg-live:empty { display: none; }
.cf-msg-live { margin-top: 16px; }

/* Footer ------------------------------------------------------------------- */

.cf-auth-foot {
    margin: 22px 0 0;
    text-align: center;
    font-size: 13px;
    line-height: 1.7;
    color: rgba(226,236,250,.62);
}
.cf-auth-foot a { color: rgba(226,236,250,.82); text-decoration: none; }
.cf-auth-foot a:hover { color: #fff; text-decoration: underline; }
.cf-auth-foot .cf-auth-sep { opacity: .45; margin: 0 7px; }

@media (max-width: 480px) {
    .cf-auth-card .card-body { padding: 24px 20px 20px; }
    .cf-auth-brand { font-size: 19px; }
}

/* ── The in-flight spinner on the auth buttons ───────────────────────────────
   Hidden until cfBtnBusy() shows it. This one line is ALL that login.php,
   reset-password.php and technical-support.php ever used from
   dist/css/more.css - the Bootstrap 3 template's leftovers - so it moved here
   and login.php stopped loading that file (2026-09-19, D.113).

   IT HAS TO WIN ON LOAD ORDER. Bootstrap's .spinner-border sets
   display:inline-block at the same specificity as this class, so the sheet
   that comes LAST decides; this file is linked after bootstrap.min.css. The
   same argument used to be made in login.php's head about more.css versus
   Font Awesome's .fa, and it is the reason the order of these links matters.

   more.css also carried `.modal { overflow-y: auto }`. Bootstrap 5 already
   sets that on .modal itself, so it did not come with it. */
.loadingicon { display: none; }

/* The same story for .hideme, which technical-support.php uses for its resting
   alert box. slave-2026.css has it scoped to `.cf-admin` - the console shell
   class these auth pages do not carry - so it was coming from more.css, and
   now comes from here (2026-09-19, D.114). */
.hideme { display: none; }