/*
 * Autopilot-styled auth pages (login, complete registration, password reset).
 *
 * Loaded ONLY by the auth templates in common/templates/common/auth/ that
 * link it explicitly — NOT by base_login.html itself, which is also extended
 * by project_folders.html and the maintenance page. Selectors here are
 * page-scoped by virtue of that.
 *
 * Palette mirrors the autopilot chat panel
 * (common/front_end/projects/autopilot/src/components/AgentBubble.jsx):
 *   page        #1A2026
 *   surface     rgba(255,255,255,0.05) + 1px rgba(255,255,255,0.08), 12/12/12/2 radius
 *   text        rgba(255,255,255,0.88), Lato 13px / 1.65
 *   accent      cornflower rgba(100,149,237,x) / #a8c7fa
 *   error       rgba(224,112,112,x)
 */

body {
    background-color: #1A2026;
}

.container-full {
    /* !important beats the login page's inline background-color:#fafafa */
    background-color: #1A2026 !important;
    box-shadow: none !important;
    min-height: 100vh;
}

.nav-container {
    background: #151C22;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

/* Centered card layout */

.rb-auth-shell {
    display: flex;
    justify-content: center;
    padding: 120px 24px 60px;
    font-family: 'Lato', sans-serif;
}

.rb-auth-card {
    width: 100%;
    max-width: 440px;
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px 12px 12px 2px;
    padding: 28px 32px 32px;
    color: rgba(255, 255, 255, 0.88);
    font-size: 13px;
    line-height: 1.65;
}

.rb-auth-title {
    margin: 0 0 4px;
    font-family: 'Lato', sans-serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.92);
}

.rb-auth-subtitle {
    margin: 0 0 22px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.55);
}

/* Instruction / info callout — the user-bubble cornflower tint */
.rb-auth-note {
    background-color: rgba(100, 149, 237, 0.10);
    border: 1px solid rgba(100, 149, 237, 0.25);
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 20px;
    color: rgba(255, 255, 255, 0.8);
    font-size: 13px;
    line-height: 1.65;
}

.rb-auth-note p {
    margin: 0 0 8px;
}

.rb-auth-note p:last-child {
    margin-bottom: 0;
}

.rb-auth-label {
    display: block;
    margin: 0 0 6px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.2px;
    color: rgba(255, 255, 255, 0.6);
}

.rb-auth-input {
    display: block;
    width: 100%;
    height: 42px;
    padding: 10px 12px;
    margin-bottom: 16px;
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.88);
    font-family: 'Lato', sans-serif;
    font-size: 13px;
    line-height: 1.5;
    box-sizing: border-box;
    outline: none;
    box-shadow: none;
    transition: border-color 0.15s, background-color 0.15s;
}

.rb-auth-input::placeholder {
    color: rgba(255, 255, 255, 0.35);
}

.rb-auth-input:hover {
    border-color: rgba(255, 255, 255, 0.18);
}

.rb-auth-input:focus {
    border-color: rgba(100, 149, 237, 0.55);
    background-color: rgba(100, 149, 237, 0.08);
    color: #ffffff;
}

/* Chrome autofill paints its own light background; keep it on-theme */
.rb-auth-input:-webkit-autofill,
.rb-auth-input:-webkit-autofill:hover,
.rb-auth-input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px #232B33 inset;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.88);
    caret-color: rgba(255, 255, 255, 0.88);
    transition: background-color 9999s ease-in-out 0s;
}

.rb-auth-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 42px;
    padding: 8px 16px;
    margin-top: 6px;
    background-color: rgba(100, 149, 237, 0.18);
    border: 1px solid rgba(100, 149, 237, 0.35);
    border-radius: 8px;
    color: #a8c7fa;
    font-family: 'Lato', sans-serif;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.rb-auth-button:hover {
    background-color: rgba(100, 149, 237, 0.28);
    border-color: rgba(100, 149, 237, 0.5);
    color: #c4d9ff;
}

.rb-auth-button:focus-visible {
    outline: 2px solid rgba(100, 149, 237, 0.6);
    outline-offset: 2px;
}

.rb-auth-link {
    color: #a8c7fa;
    font-size: 12.5px;
    text-decoration: none;
}

.rb-auth-link:hover {
    color: #c4d9ff;
    text-decoration: underline;
}

.rb-auth-meta {
    margin: -4px 0 14px;
}

/* Error alerts — both in-card ones and Django's bootstrap .alert-danger */
.rb-auth-shell .alert,
.rb-auth-shell .alert-danger {
    background-color: rgba(224, 112, 112, 0.12);
    background-image: none;
    border: 1px solid rgba(224, 112, 112, 0.4);
    border-radius: 8px;
    color: #f0b9b9;
    padding: 10px 14px;
    margin-bottom: 16px;
    font-size: 13px;
    line-height: 1.65;
    text-shadow: none;
    box-shadow: none;
}

/* Form errors rendered by base.html's error_messages block (direct child of
   .container-full, above the content card — e.g. password mismatch on the
   reset-confirm page). Recolor and pull it in line with the card column. */
.container-full > #error-messages .alert-danger {
    background-color: rgba(224, 112, 112, 0.12);
    background-image: none;
    border: 1px solid rgba(224, 112, 112, 0.4);
    border-radius: 8px;
    color: #f0b9b9;
    font-family: 'Lato', sans-serif;
    font-size: 13px;
    line-height: 1.65;
    text-shadow: none;
    box-shadow: none;
    max-width: 440px;
    margin: 84px auto -90px;
}