/*
 * SANITBOX auth funnel styling
 * -----------------------------
 * Unifies the look of every page under app/templates/app/registration/
 * (login, signup, activation, password reset/change, logged out,
 * terms/privacy) using the tokens defined in sanitbox-tokens.css.
 *
 * Scoping strategy:
 *  - Every selector here is rooted under `.sb-auth-page` (added to the
 *    <section class="main"> wrapper in registration_base.html), so
 *    nothing in this file can leak into the dashboard, map, admin, or
 *    other parts of the app.
 *  - This file only sets properties NOT already controlled by the
 *    admin-configurable theme (app/templates/app/theme.css / Setting
 *    model), e.g. spacing, radius, shadow, focus rings. It deliberately
 *    avoids setting `color`/`background-color` on shared Bootstrap
 *    classes such as .btn-primary/.alert/.form-control so that an
 *    administrator's theme customization keeps working unchanged.
 *  - Selectors are written with two class levels (".sb-auth-page
 *    .sb-auth-card ...") on purpose: this keeps their specificity ahead
 *    of single-class rules in main.scss/bootstrap/sb-admin-2.css
 *    regardless of stylesheet load order, without resorting to
 *    !important.
 */

/* Sticky footer. The previous rule used position:absolute + bottom:0,
   which anchors to the viewport rather than the document - it sat
   correctly on short pages but floated over the content on any page
   taller than the viewport (signup). Flexbox pins it to the bottom on
   short pages and pushes it below the content on tall ones.
   Scoped implicitly: this stylesheet only loads on registration/* pages. */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

body > footer {
    position: static;
    margin-top: auto;
}

.sb-auth-page {
    background: radial-gradient(ellipse at bottom, var(--sb-bg-gradient-start) 0%, var(--sb-bg-gradient-end) 100%);
    min-height: calc(100vh - 50px);
    font-family: var(--sb-font-family);
}

.sb-auth-page .sb-auth-wrap {
    max-width: 460px;
    float: none;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: var(--sb-space-xl);
}

/* Brand header, shown above every auth card */
.sb-auth-page .sb-auth-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sb-space-sm);
    margin: var(--sb-space-lg) 0 var(--sb-space-md);
    text-align: center;
}

.sb-auth-page .sb-auth-brand-link {
    display: inline-flex;
    align-items: center;
    gap: var(--sb-space-sm);
    text-decoration: none;
}

.sb-auth-page .sb-auth-brand-link:hover,
.sb-auth-page .sb-auth-brand-link:focus {
    text-decoration: none;
}

.sb-auth-page .sb-auth-brand-logo {
    width: 40px;
    height: 40px;
    border-radius: var(--sb-radius-sm);
    object-fit: contain;
    background-color: var(--sb-card);
}

.sb-auth-page .sb-auth-brand-name {
    font-size: var(--sb-font-size-h1);
    font-weight: 700;
    color: var(--sb-primary);
    letter-spacing: 0.2px;
}

/* Supporter/affiliation logos (AIT, Remote Sensing & GIS Lab), shown
   below the primary brand mark on auth pages */
.sb-auth-page .sb-auth-supporters {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sb-space-lg);
    margin: 0 0 var(--sb-space-lg);
    opacity: 0.9;
}

.sb-auth-page .sb-auth-supporters img {
    height: 32px;
    width: auto;
    object-fit: contain;
}

/* Card container that wraps the actual form/content of every auth page */
.sb-auth-page .sb-auth-card {
    background-color: var(--sb-card);
    border: 1px solid var(--sb-border);
    border-radius: var(--sb-radius);
    box-shadow: var(--sb-shadow);
    padding: var(--sb-space-xl) var(--sb-space-lg);
}

@media (max-width: 480px) {
    .sb-auth-page .sb-auth-card {
        padding: var(--sb-space-lg) var(--sb-space-md);
        border-radius: var(--sb-radius-sm);
    }
}

/* Typography inside the card */
.sb-auth-page .sb-auth-card h1,
.sb-auth-page .sb-auth-card h2,
.sb-auth-page .sb-auth-card h3 {
    color: var(--sb-text);
    font-weight: 600;
    font-size: var(--sb-font-size-h1);
    margin: 0 0 var(--sb-space-md);
    padding-top: 0;
}

.sb-auth-page .sb-auth-card p {
    color: var(--sb-muted);
    line-height: var(--sb-line-height);
    margin-bottom: var(--sb-space-md);
    font-size: var(--sb-font-size-base);
}

.sb-auth-page .sb-auth-card .text-info {
    color: var(--sb-info);
}

/* Forms */
.sb-auth-page .sb-auth-card .form-group {
    margin-bottom: var(--sb-space-md);
}

.sb-auth-page .sb-auth-card label,
.sb-auth-page .sb-auth-card .control-label {
    color: var(--sb-text);
    font-weight: 500;
    font-size: var(--sb-font-size-base);
}

.sb-auth-page .sb-auth-card .form-control {
    border-radius: var(--sb-radius-sm);
    padding: 10px 12px;
    height: auto;
    font-size: var(--sb-font-size-base);
    box-shadow: none;
    transition: box-shadow var(--sb-transition);
}

.sb-auth-page .sb-auth-card .form-control:focus {
    box-shadow: 0 0 0 3px var(--sb-primary-soft);
}

.sb-auth-page .sb-auth-card .has-error .form-control:focus {
    box-shadow: 0 0 0 3px rgba(185, 28, 28, 0.16);
}

.sb-auth-page .sb-auth-card .help-block {
    color: var(--sb-muted);
    font-size: var(--sb-font-size-sm);
}

.sb-auth-page .sb-auth-card .text-danger {
    color: var(--sb-danger);
}

.sb-auth-page .sb-auth-card .checkbox {
    font-size: var(--sb-font-size-base);
    color: var(--sb-text);
}

.sb-auth-page .sb-auth-card .checkbox label {
    font-weight: 400;
}

/* Buttons - intentionally does not set color/background so the
   admin-configurable button theme (btn-primary/btn-default/...) keeps
   full control of the palette. */
.sb-auth-page .sb-auth-card .btn {
    border-radius: var(--sb-radius-sm);
    padding: 10px 22px;
    font-weight: 500;
    font-size: var(--sb-font-size-base);
    transition: box-shadow var(--sb-transition), transform var(--sb-transition);
}

.sb-auth-page .sb-auth-card .btn:active {
    transform: translateY(1px);
}

/* Alerts / messages (including the JS-driven #signupMessage banner in
   signup.html - register.js only ever toggles the alert/alert-* classes
   and text content, so styling it here by ancestor selector keeps
   working no matter what register.js sets). Colors are left to the
   existing .alert / .alert-* rules (Bootstrap defaults, overridden by
   the admin theme where configured); only spacing/shape/icon are added
   here. */
.sb-auth-page .sb-auth-card .alert {
    border-radius: var(--sb-radius-sm);
    padding: var(--sb-space-md) var(--sb-space-md) var(--sb-space-md) 44px;
    margin-bottom: var(--sb-space-md);
    font-size: var(--sb-font-size-base);
    position: relative;
}

.sb-auth-page .sb-auth-card .alert::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
    line-height: 1;
}

.sb-auth-page .sb-auth-card .alert-warning::before {
    content: "\f071"; /* exclamation-triangle */
    color: var(--sb-warning);
}

.sb-auth-page .sb-auth-card .alert-danger::before {
    content: "\f057"; /* times-circle */
    color: var(--sb-danger);
}

.sb-auth-page .sb-auth-card .alert-success::before {
    content: "\f058"; /* check-circle */
    color: var(--sb-secondary);
}

.sb-auth-page .sb-auth-card .alert-info::before {
    content: "\f05a"; /* info-circle */
    color: var(--sb-info);
}

.sb-auth-page .sb-auth-card .alert .close {
    top: -2px;
}

/* Links below the form (forgot password, sign up, back to login, ...) */
.sb-auth-page .sb-auth-card .top-buffer p {
    margin-bottom: var(--sb-space-xs);
    color: var(--sb-text);
    font-size: var(--sb-font-size-base);
}

/* Legacy look (bg-fields.jpg photo background + white rounded card),
   carried over from the previous production site (sanitbox.geopro.asia,
   pre-migration; reference: webodm-custom-sanitbox repo). Opt in
   per-page via {% block registration_page_class %}sb-auth-legacy{% endblock %}
   in registration_base.html - currently used by login + password reset
   only, so signup/activation/terms keep the newer blue/white tokens.

   Matches the reference exactly: the photo is shown PLAIN (the old
   site's `background-image: url(...)` replaced its gradient, so there
   was never a dark overlay); the gradient survives only as a fallback
   background-color for while the photo loads. */
.sb-auth-page.sb-auth-legacy {
    background: linear-gradient(to bottom right, #1a6148, #114d74);
    background-image: url("../img/sanitbox/bg-fields.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    font-family: 'Segoe UI', var(--sb-font-family), sans-serif;
}

/* The reference shows only the AIT + RSGIS logos above the box (no
   separate SANITBOX wordmark - the title lives inside the card). */
.sb-auth-page.sb-auth-legacy .sb-auth-brand {
    display: none;
}

.sb-auth-page.sb-auth-legacy .sb-auth-supporters {
    opacity: 1;
    margin: 60px 0 1rem;
}

.sb-auth-page.sb-auth-legacy .sb-auth-supporters img {
    height: 40px;
}

/* Single affiliation caption under the logos, replacing the long
   SETTINGS.app_name wordmark. Sits directly on the photo, so it needs a
   shadow to stay legible over the lighter parts of the image. */
.sb-auth-page.sb-auth-legacy .sb-auth-legacy-affiliation {
    text-align: center;
    color: #ffffff;
    font-weight: 500;
    margin: 0 0 1.25rem;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
}

/* White rounded box, as .login-box in the reference */
.sb-auth-page.sb-auth-legacy .sb-auth-wrap {
    max-width: 420px;
}

.sb-auth-page.sb-auth-legacy .sb-auth-card {
    border-radius: 20px;
    border: none;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    padding: 2rem;
}

/* In-card title + subtitle lines, all centered like the reference */
.sb-auth-page.sb-auth-legacy .sb-auth-card .sb-auth-legacy-title {
    text-align: center;
    font-weight: 600;
    color: #2d594a;
    font-size: 1.8rem;
    margin: 0 0 0.5rem;
}

.sb-auth-page.sb-auth-legacy .sb-auth-card h1,
.sb-auth-page.sb-auth-legacy .sb-auth-card h2,
.sb-auth-page.sb-auth-legacy .sb-auth-card h3 {
    text-align: center;
    color: #2d594a;
}

.sb-auth-page.sb-auth-legacy .sb-auth-card .sb-auth-legacy-subtitle {
    text-align: center;
    color: #666;
    margin-bottom: 0.75rem;
}

.sb-auth-page.sb-auth-legacy .sb-auth-card p {
    text-align: center;
}

/* Flatten WebODM's two-column form-horizontal layout into the
   reference's stacked label-above-input arrangement, without touching
   the shared form_field.html include. */
.sb-auth-page.sb-auth-legacy .sb-auth-card .form-horizontal .control-label,
.sb-auth-page.sb-auth-legacy .sb-auth-card .control-label {
    float: none;
    display: block;
    width: 100%;
    text-align: left;
    padding-top: 0;
    margin-bottom: 4px;
}

.sb-auth-page.sb-auth-legacy .sb-auth-card .col-sm-10,
.sb-auth-page.sb-auth-legacy .sb-auth-card .col-sm-9,
.sb-auth-page.sb-auth-legacy .sb-auth-card .col-sm-8 {
    float: none;
    display: block;
    width: 100%;
}

.sb-auth-page.sb-auth-legacy .sb-auth-card .col-sm-offset-2,
.sb-auth-page.sb-auth-legacy .sb-auth-card .col-sm-offset-3 {
    margin-left: 0;
}

.sb-auth-page.sb-auth-legacy .sb-auth-card .form-control {
    border-radius: 10px;
    padding: 0.6rem;
    width: 100%;
}

/* Full-width pill green button, as .btn-login in the reference */
.sb-auth-page.sb-auth-legacy .sb-auth-card .btn-primary {
    display: block;
    width: 100%;
    border-radius: 30px;
    background-color: #2f8f6b;
    border-color: #2f8f6b;
    color: #ffffff;
    padding: 0.6rem;
    font-weight: bold;
    margin-top: 1rem;
}

.sb-auth-page.sb-auth-legacy .sb-auth-card .btn-primary:hover,
.sb-auth-page.sb-auth-legacy .sb-auth-card .btn-primary:focus,
.sb-auth-page.sb-auth-legacy .sb-auth-card .btn-primary:active {
    background-color: #266e53;
    border-color: #266e53;
    color: #ffffff;
}

/* Centered green links (signup prompt, forgot password, back to login) */
.sb-auth-page.sb-auth-legacy .sb-auth-card .top-buffer p {
    text-align: center;
}

.sb-auth-page.sb-auth-legacy .sb-auth-card a {
    color: #2f8f6b;
    font-weight: 500;
    text-decoration: none;
}

.sb-auth-page.sb-auth-legacy .sb-auth-card a:hover {
    text-decoration: underline;
}

.sb-auth-page.sb-auth-legacy .sb-auth-card a.btn-primary {
    color: #ffffff;
}