/**
 * BrighterTrading design system -- auth/public-page styles
 *
 * Consolidated <style> blocks from the auth + public-marketing pages.
 * Each of these templates owns its own <head> (they're not /app shell
 * partials) and previously embedded a 50-150 line <style> block with
 * the same Bootstrap-overlay dark-gradient look. This file is the
 * single source of truth for that look.
 *
 * Loaded by:
 *   - templates/login_page.html       (/login)
 *   - templates/sign_up.html          (/signup)
 *   - templates/forgot_password.html  (/forgot-password)
 *   - templates/reset_password.html   (/reset-password)
 *   - templates/signup_success.html   (/signup-success)
 *   - templates/welcome.html          (/)
 *   - templates/index.html            (/app -- for the in-app
 *                                      login_popup partial in
 *                                      login.html)
 *
 * Conventions match ui/components.css: tokens.css is the only source
 * of colors / spacing / radii. Bootstrap defaults are mapped to the
 * same bt-* tokens so saved user themes affect these standalone pages.
 *
 * Phase 3.4 lane A consolidation. Replaces 8 embedded <style> blocks
 * across 7 templates.
 */

/* ============================================================ */
/* Shared auth/public page chrome                               */
/* ============================================================ */
/* The Bootstrap-overlay auth pages (login, signup, forgot,
   reset, signup_success) all share this base body + bg-animation
   shell.
   Pinned to the same navy + cyan/green branded look as welcome.html
   on purpose: the unauthenticated flow (welcome -> login -> signup
   -> forgot -> reset) should feel like one product. Theme tokens
   only start mattering once the user is inside /app, where their
   saved theme prefs are loaded. */

body.bt-auth-page {
    font-family: 'Roboto', sans-serif;
    /* ``background`` shorthand wipes any inherited gradient image
       from base.css's body rule. ``!important`` is needed to beat
       Bootstrap's ``.bg-dark`` legacy class on the same templates. */
    background: #1a1a2e !important;
    color: #fff;
    position: relative;
    overflow-x: hidden;
    padding-top: 80px;
}

/* Linear-gradient variant of the bg animation. Used by login_page,
   forgot_password, reset_password. */
.bt-auth-page .bg-animation {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    z-index: -1;
}

/* Image-backed variant. Used by sign_up, signup_success.
   Layers the optional ``--bt-auth-bg-image`` over the navy gradient
   so the page still looks branded if the image is missing or 404s
   (e.g. ``trading-bg.jpg`` not bundled in dev). */
.bt-auth-page.bt-auth-page-image-bg .bg-animation {
    background:
        var(--bt-auth-bg-image, none) no-repeat center center fixed,
        linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    background-size: cover;
}

/* Glass-card panel used by all five Bootstrap auth pages. */
.bt-auth-page .card {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
    color: #fff;
}

.bt-auth-page .card-body,
.bt-auth-page .card-title,
.bt-auth-page label,
.bt-auth-page .form-label {
    color: #fff;
}

/* Bootstrap input-group prefix icon (lock, envelope, user). */
.bt-auth-page .input-group-text {
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #a0a0a0;
}

.bt-auth-page .form-control {
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
}

.bt-auth-page .form-control:focus {
    background-color: rgba(255, 255, 255, 0.08);
    border-color: #00d4ff;
    color: #fff;
    box-shadow: 0 0 0 0.2rem rgba(0, 212, 255, 0.25);
}

.bt-auth-page .form-control::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.bt-auth-page .btn-primary {
    background: linear-gradient(135deg, #00d4ff 0%, #00ff88 100%);
    border: none;
    color: #1a1a2e;
    font-weight: 600;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.bt-auth-page .btn-primary:hover,
.bt-auth-page .btn-primary:focus {
    background: linear-gradient(135deg, #00d4ff 0%, #00ff88 100%);
    color: #1a1a2e;
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(0, 212, 255, 0.35);
}

/* Used by sign_up; harmless on other pages. */
.bt-auth-page .btn-primary.bt-auth-btn-tall {
    height: 40px;
}

/* Disabled state used on reset_password (password mismatch). */
.bt-auth-page .btn-primary:disabled {
    background: rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.5);
    cursor: not-allowed;
}

/* Bootstrap outline-secondary -- used by reset_password's password-
   reveal eye button. Tightened to match the dark surface. */
.bt-auth-page .btn-outline-secondary {
    background-color: transparent;
    border-color: rgba(255, 255, 255, 0.3);
    color: rgba(255, 255, 255, 0.7);
}

.bt-auth-page .btn-outline-secondary:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.5);
    color: #fff;
}

/* Outline-light social buttons (Google / GitHub). */
.bt-auth-page .btn-outline-light {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.3);
    background-color: transparent;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.bt-auth-page .btn-outline-light:hover {
    background-color: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.5);
    color: #fff;
}

.bt-auth-page .logo {
    display: block;
    margin: 0 auto;
    max-height: 100px;
}

/* sign_up + signup_success use a slightly bigger top margin. */
.bt-auth-page .logo.bt-auth-logo-spaced {
    margin-top: 20px;
}

.bt-auth-page a.text-primary {
    color: #00d4ff !important;
}

.bt-auth-page a.text-primary:hover {
    color: #00ff88 !important;
}

.bt-auth-page a.text-muted {
    color: rgba(255, 255, 255, 0.5) !important;
    text-decoration: none;
}

.bt-auth-page a.text-muted:hover {
    color: rgba(255, 255, 255, 0.8) !important;
}

/* Bootstrap ``.text-muted`` defaults to ``#6c757d`` (dark grey) which
   disappears on the navy auth-page background. Override to readable
   light grey, but only on this page. Leave ``a.text-muted`` (above)
   slightly muted so the links read as secondary. */
.bt-auth-page .text-muted {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* Bootstrap utility classes used in markup -- override the white-on-
   white default Bootstrap leaves once .text-light is removed. */
.bt-auth-page .text-light {
    color: #fff !important;
}

.bt-auth-page hr,
.bt-auth-page .border-top {
    border-color: rgba(255, 255, 255, 0.1) !important;
}

/* Brand title on auth pages: same orange->blue gradient as welcome's
   auth-brand-title -- pulled in for visual continuity. */
.bt-auth-page .auth-brand-title {
    background: linear-gradient(90deg, #ff6b35, #004e92);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* AOS fade-up tightened (sign_up declared it; shared safely). */
.bt-auth-page [data-aos="fade-up"] {
    transform: translateY(20px);
}

.bt-auth-page [data-aos="fade-up"].aos-animate {
    transform: translateY(0);
}

/* Bootstrap container nudge applied by sign_up + signup_success. */
.bt-auth-page .container {
    margin-top: 50px;
}

/* Mobile padding tweaks (sign_up only -- doesn't affect others). */
@media (max-width: 576px) {
    .bt-auth-page .card-body {
        padding: 2rem;
    }

    .bt-auth-page .btn-primary {
        padding: 0.75rem;
    }

    .bt-auth-page .logo {
        max-height: 80px;
        margin-top: 10px;
    }
}

/* ============================================================ */
/* reset_password.html -- password match indicator              */
/* ============================================================ */

.bt-auth-page .form-text {
    font-size: 0.85em;
}

/* ============================================================ */
/* welcome.html -- public marketing page                        */
/* ============================================================ */
/* Pinned to the original branded look (navy gradient + cyan/green
   accent) on purpose: this is the public face of the site, not a
   themable surface. Even when the rest of the app loads light /
   dark / classic, the welcome page should always look the same. */

body.bt-welcome-page {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #fff;
}

body.bt-welcome-page * {
    box-sizing: border-box;
}

.bt-welcome-page .welcome-container {
    text-align: center;
    max-width: 800px;
    padding: 40px;
}

.bt-welcome-page .logo-container {
    margin-bottom: 40px;
}

.bt-welcome-page .logo-container img {
    width: 180px;
    height: auto;
    filter: drop-shadow(0 0 20px rgba(0, 212, 255, 0.3));
}

.bt-welcome-page h1 {
    font-size: 3rem;
    margin-bottom: 15px;
    background: linear-gradient(90deg, #00d4ff, #00ff88);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.bt-welcome-page .tagline {
    font-size: 1.2rem;
    color: #a0a0a0;
    margin-bottom: 50px;
}

.bt-welcome-page .buttons-container {
    display: flex;
    gap: 30px;
    justify-content: center;
    flex-wrap: wrap;
}

.bt-welcome-page .welcome-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 30px 50px;
    border-radius: 16px;
    text-decoration: none;
    transition: all 0.3s ease;
    min-width: 220px;
}

.bt-welcome-page .welcome-btn svg {
    width: 48px;
    height: 48px;
    margin-bottom: 15px;
}

.bt-welcome-page .welcome-btn span {
    font-size: 1.1rem;
    font-weight: 600;
}

.bt-welcome-page .btn-docs {
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.2);
    color: #fff;
}

.bt-welcome-page .btn-docs:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.4);
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.bt-welcome-page .btn-start {
    background: linear-gradient(135deg, #00d4ff 0%, #00ff88 100%);
    border: none;
    color: #1a1a2e;
}

.bt-welcome-page .btn-start:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(0, 212, 255, 0.4);
}

.bt-welcome-page .btn-description {
    font-size: 0.85rem;
    font-weight: 400;
    opacity: 0.8;
    margin-top: 8px;
}

.bt-welcome-page .footer-text {
    margin-top: 60px;
    color: #666;
    font-size: 0.9rem;
}

/* welcome.html footer auth links + flash toasts. */
.bt-welcome-page .auth-links {
    margin-top: 30px;
}

.bt-welcome-page .auth-link {
    color: #a0a0a0;
    text-decoration: none;
    font-size: 0.95rem;
    transition: color 0.2s ease;
}

.bt-welcome-page .auth-link:hover {
    color: #00d4ff;
}

.bt-welcome-page .auth-divider {
    color: #555;
    margin: 0 15px;
}

.bt-welcome-page .flash-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: var(--bt-z-toast);
}

.bt-welcome-page .flash-message {
    padding: 15px 25px;
    border-radius: 8px;
    margin-bottom: 10px;
    font-size: 0.95rem;
    animation: bt-welcome-slide-in 0.3s ease;
}

.bt-welcome-page .flash-success {
    background: var(--bt-success-soft);
    border: 1px solid var(--bt-success);
    color: var(--bt-success);
}

@keyframes bt-welcome-slide-in {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* ============================================================ */
/* login.html -- in-app login popup partial                     */
/* ============================================================ */
/* This template is included by index.html (the /app shell). The
   surrounding chrome (header buttons, the username display, the
   draggable popup) is partly defined here, partly in
   app-shell.css (.analyze-* etc.). Only the rules unique to
   the popup partial moved here; the analyze-dropdown rules stayed
   in app-shell.css. */

.app-hidden {
    display: none;
}

.app-header-btn-sm {
    font-size: 12px;
}

.login-popup-shell {
    border-radius: var(--bt-radius-lg);
    overflow: hidden;
}

.login-content-pad {
    padding: 15px;
}

.login-signup-link {
    text-align: center;
    margin-top: 15px;
}
