/* static/css/auth.css */

/* Auth text and UI colours — editable from Front UI Settings */
body.auth-body {
    /* Text colours — auth pages use Accent/Warm (Group 2) palette */
    --auth-color-footer: var(--hcs-primary);  /* brand primary for auth footer text */
    --auth-color-card-heading: var(--hcs-on-accent-container);  /* warm brown heading */
    --auth-color-subtitle: var(--hcs-on-earth-container);  /* warm descriptive subtitle text */
    --auth-color-helptext: var(--hcs-on-surface-container);  /* muted helper/field description text */
    --auth-color-error: #b91c1c;
    --auth-color-submit-text: var(--hcs-on-accent);  /* text on accent button */
    --auth-color-nav: var(--hcs-primary);  /* brand primary for auth nav links */
    /* UI — backgrounds, borders, buttons (referencing HCS role tokens) */
    --auth-color-card-border: var(--hcs-accent-border);
    --auth-color-input-border: #d1d5db;
    --auth-color-nav-underline: #000000;
    --auth-color-submit-bg: var(--hcs-accent);  /* warm caramel button */
    --auth-color-bg-start: #d9f99d;
    --auth-color-bg-end: #9e6001;
    --auth-color-footer-bar-bg: var(--hcs-dark-border);  /* UNUSED — footer now uses --color-footer-bg from main.css */
    --auth-color-card-bg: var(--hcs-surface);
    --auth-color-card-bg-opacity: 0.92;  /* Opacity for auth card background (0.0-1.0) */
    --auth-color-nav-bg: var(--hcs-accent-container);  /* warm header bg */
}

/* Whole page background */
body.auth-body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: stretch;   /* let header/main/footer fill width */
    justify-content: flex-start;
    background: radial-gradient(circle at top, var(--auth-color-bg-start) 0, var(--auth-color-bg-end) 60%);
    font-family: var(--font-body);
}

body.auth-body > header {
    align-self: stretch;   /* override align-items:center on body */
    width: 100%;           /* make header span full viewport width */
}

/* Make the main content area fill the space between header and footer */
body.auth-body > .site-main {
    flex: 1;        /* take up remaining vertical space */
    width: 100%;
    display: flex;  /* so its child (.auth-main) can flex inside */
    justify-content: center;
}

body.auth-body > .site-footer {
    align-self: stretch;
    width: 100%;
    box-sizing: border-box;
    /* background & color come from main.css .site-footer (--color-footer-bg / --color-footer-text)
       so the footer is consistent across auth and non-auth pages. */
}

.auth-main {
    flex: 0 1 auto;
    width: 100%;
    max-width: 1100px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 2rem 1rem 3rem;
    box-sizing: border-box;
}

body.auth-body.home-with-image .auth-main {
    justify-content: flex-start;
    padding-top: 2rem;
}

.auth-main .auth-card {
    margin: 0 auto 2rem;
}

/* Keyboard focus — visible focus ring for inputs, buttons, select, textarea */
body.auth-body input:focus,
body.auth-body button:focus,
body.auth-body select:focus,
body.auth-body textarea:focus {
    outline: none;
}

body.auth-body input:focus-visible,
body.auth-body button:focus-visible,
body.auth-body select:focus-visible,
body.auth-body textarea:focus-visible {
    outline: 2px solid var(--auth-color-card-border, #634b02);
    outline-offset: 2px;
}

body.auth-body.home-with-image {
    /* Use a custom background image just for the home page */
    background-image: url("../img/pages/home/background.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

body.auth-body.login-with-image {
    /* Use a different background image on the log in page */
    background-image: url("../img/pages/login/background.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

body.auth-body.signup-with-image {
    /* Use a different background image on the signup page */
    background-image: url("../img/pages/signup/background.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

body.auth-body.myalerts-with-image {
    /* Use a different background image on the alert list page */
    background-image: url("../img/pages/alert_list/background.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

body.auth-body.savedtrips-with-image {
    /* Saved Trips list page background */
    background-image: url("../img/pages/saved_trips_list/background.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

body.auth-body.alertform-with-image {
    /* Use a different background image on the alert form page */
    background-image: url("../img/pages/alert_form/background.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

body.auth-body.profile-with-image {
    /* Use a different background image on the profile page */
    background-image: url("../img/pages/profile/background.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

/* Plain auth pages (no custom background image) — white background e.g. password reset flow */
body.auth-body.password-reset-with-image,
body.auth-body.password-reset-done-with-image,
body.auth-body.password-reset-confirm-with-image,
body.auth-body.password-reset-complete-with-image {
    background: #ffffff;
    background-image: none;
}

/* Card */
.auth-card {
    background: color-mix(in srgb, var(--auth-color-card-bg) calc(var(--auth-color-card-bg-opacity, 0.85) * 100%), transparent);
    border-radius: 1rem;
    padding: 2rem 2.5rem;
    max-width: 420px;
    width: 100%;
    box-shadow: 0 16px 30px rgba(0, 0, 0, 0.18);
    border: 1px solid var(--auth-color-card-border);
    margin: 4rem auto 2rem;
}

/* Wider cards for staff test tools */
.test-card {
    max-width: 1200px;
    width: 96%;
}

.auth-card h1 {
    margin-top: 0;
    margin-bottom: 0.5rem;
    color: var(--auth-color-card-heading);
}

.auth-card p.subtitle {
    margin-top: 0;
    margin-bottom: 1.5rem;
    color: var(--auth-color-subtitle);
}

/* Simple button + inputs */
.auth-card button[type="submit"] {
    width: 100%;
    padding: 0.6rem 0.9rem;
    border-radius: 999px;
    border: none;
    margin-top: 0.5rem;
    background: var(--auth-color-submit-bg);
    color: var(--auth-color-submit-text);
    cursor: pointer;
}

.auth-card button[type="submit"]:hover {
    background: var(--auth-color-submit-bg);
}

.auth-card input,
.auth-card select,
.auth-card textarea {
    width: 100%;
    padding: 0.5rem 0.75rem;
    margin-top: 0.25rem;
    margin-bottom: 0.75rem;
    border-radius: 0.375rem;
    border: 1px solid var(--auth-color-input-border, #d1d5db);
    box-sizing: border-box;
}

/* Inline controls (checkboxes / radios) should not be full-width */
.auth-card input[type="checkbox"],
.auth-card input[type="radio"] {
    width: auto;
    display: inline-block;
    margin: 0;
    margin-right: 0.5rem;
}

/* Helper for inline label + control rows (e.g. “Email verified”) */
.auth-card .inline-field {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Help text / errors from Django */
.auth-card .helptext {
    color: var(--auth-color-helptext);
}

.auth-card .errorlist {
    margin: 0 0 0.5rem;
    padding: 0;
    list-style: none;
    color: var(--auth-color-error);
}

/* ==========================================================================
   Mobile: auth cards full-width with padding (match home cascade card)
   Override page-specific widths (50vw, 70vw, etc.) so cards fill viewport.
   ========================================================================== */
@media (max-width: 768px) {
  body.auth-body .auth-main {
    padding: 1.5rem 1rem 2rem;
  }
  /* Override page-specific widths so cards fill available space like home */
  body.auth-body .auth-card,
  body.auth-body .auth-card.signup-card,
  body.auth-body .auth-card.profile-card,
  body.auth-body .alerts-card,
  body.auth-body .saved-trips-card {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    box-sizing: border-box;
  }
  body.auth-body.login-with-image .auth-card,
  body.auth-body.signup-with-image .auth-card,
  body.auth-body.password-reset-with-image .auth-card,
  body.auth-body.password-reset-done-with-image .auth-card,
  body.auth-body.password-reset-confirm-with-image .auth-card,
  body.auth-body.password-reset-complete-with-image .auth-card,
  body.auth-body.profile-with-image .auth-card {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
  body.auth-body.myalerts-with-image .alerts-card,
  body.auth-body.savedtrips-with-image .saved-trips-card {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 1rem;
    padding-right: 1rem;
  }
  /* Alert form page: main card container */
  body.auth-body.alertform-with-image .alert-form-cards {
    width: 100% !important;
    max-width: 100% !important;
    min-width: unset;
    padding: 1.5rem 1rem 2rem;
    box-sizing: border-box;
  }
}

@media (max-width: 640px) {
  body.auth-body .auth-main {
    padding: 1.25rem 0.5rem 1.5rem;
  }
  body.auth-body .auth-card,
  body.auth-body .auth-card.signup-card,
  body.auth-body .auth-card.profile-card,
  body.auth-body .alerts-card,
  body.auth-body .saved-trips-card {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
  body.auth-body.login-with-image .auth-card,
  body.auth-body.signup-with-image .auth-card,
  body.auth-body.password-reset-with-image .auth-card,
  body.auth-body.password-reset-done-with-image .auth-card,
  body.auth-body.password-reset-confirm-with-image .auth-card,
  body.auth-body.password-reset-complete-with-image .auth-card,
  body.auth-body.profile-with-image .auth-card {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
  body.auth-body.myalerts-with-image .alerts-card,
  body.auth-body.savedtrips-with-image .saved-trips-card {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  body.auth-body.alertform-with-image .alert-form-cards {
    padding: 1.25rem 1rem 1.5rem;
  }
}

@media (max-width: 420px) {
  body.auth-body .auth-main {
    padding: 1rem 0.25rem 1.25rem;
  }
  body.auth-body .auth-card,
  body.auth-body .auth-card.signup-card,
  body.auth-body .auth-card.profile-card,
  body.auth-body .alerts-card,
  body.auth-body .saved-trips-card {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  body.auth-body.login-with-image .auth-card,
  body.auth-body.signup-with-image .auth-card,
  body.auth-body.password-reset-with-image .auth-card,
  body.auth-body.password-reset-done-with-image .auth-card,
  body.auth-body.password-reset-confirm-with-image .auth-card,
  body.auth-body.password-reset-complete-with-image .auth-card,
  body.auth-body.profile-with-image .auth-card {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  body.auth-body.myalerts-with-image .alerts-card,
  body.auth-body.savedtrips-with-image .saved-trips-card {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
  body.auth-body.alertform-with-image .alert-form-cards {
    padding: 1rem 0.75rem 1.25rem;
  }
}

.top-nav {
    width: 100%;
    padding: 5px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
    gap: 1rem;
    background: color-mix(in srgb, var(--auth-color-nav-bg) 80%, transparent);
    color: var(--auth-color-nav);
}

.top-nav__brand {
    flex-shrink: 0;
}

.top-nav__brand a {
    font-size: var(--text-header-brand);
    display: inline-flex;
    align-items: center;
    gap: var(--header-brand-gap);
    font-weight: 700;
    letter-spacing: 0.04em;
    color: inherit;
    text-decoration: none;
}

.top-nav__logo {
    width: 40px;
    height: 40px;
    padding-top: 0;
    padding-bottom: 0;
}

.top-nav__brand-text {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-family: var(--font-sans-montserrat);
    font-size: var(--text-header-brand);
    letter-spacing: 0.08em;
    color: var(--auth-color-nav);
    vertical-align: middle;
}

.top-nav__links-wrapper {
    display: inline-flex;
    align-items: center;
    gap: var(--header-links-gap);
    flex-wrap: nowrap;
}

.top-nav__links {
    display: inline-flex;
    align-items: center;
    gap: var(--header-links-gap);
    font-size: var(--text-header-links);
    flex-wrap: nowrap;
    vertical-align: middle;
    text-align: right;
}

.top-nav__links a {
    display: inline-flex;
    align-items: center;
    color: var(--auth-color-nav);
    text-decoration: none;
    white-space: nowrap;
}

.top-nav__links a:hover {
    text-decoration: underline;
}

.top-nav-underline {
    display: var(--header-underline-display, block);
    width: 100%;
    height: 2px;
    background: var(--auth-color-nav-underline);
}

/* Standardized form field help text — use across all forms */
.field__help {
    color: var(--auth-color-helptext, #6b7280);
    margin-top: 0.15rem;
    line-height: 1.4;
    display: block;
}