/* ---------------------------------------------------------------------------
 * Admission portal -- modern styling layer.
 *
 * Loaded AFTER account_registration.css and deliberately additive: it only
 * restyles classes that already exist, so no template markup or JS changes and
 * no behaviour changes. Remove this one <link> and the portal looks exactly as
 * it did before.
 *
 * The accent colour comes from --portal-accent, which the templates set from
 * the `color_scheme` / `color_scheme2` system parameters (the same values the
 * backend colour-picker field edits). Everything falls back to the previous
 * hard-coded blue when those are unset.
 * ------------------------------------------------------------------------- */

:root {
    --portal-accent: #4966b1;
    --portal-accent-2: #6f8ede;
    --portal-ink: #1c2430;
    --portal-muted: #64748b;
    --portal-line: #e3e8ef;
    --portal-bg: #f5f7fb;
    --portal-radius: 16px;
    --portal-shadow: 0 1px 2px rgba(16, 24, 40, .04),
                     0 12px 32px -12px rgba(16, 24, 40, .18);
}

/* ---- page ---------------------------------------------------------------- */

body {
    background: var(--portal-bg);
    color: var(--portal-ink);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
                 Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

.main {
    padding: clamp(24px, 6vh, 72px) 16px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-height: 100vh;
}

/* The card was `width: 586px; margin-left: 150px`, so it sat off-centre and
   overflowed on anything narrow. `opacity: .8` also faded the text along with
   the panel -- a solid surface with a shadow reads far cleaner. */
.container_account,
.container_account2 {
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
    opacity: 1;
    background: #fff;
    border: 1px solid var(--portal-line);
    border-radius: var(--portal-radius);
    box-shadow: var(--portal-shadow);
    overflow: hidden;
}

.signin-form {
    padding: clamp(28px, 5vw, 44px);
}

.signin-form h2 {
    margin: 0 0 6px;
    font-size: 1.5rem;
    font-weight: 650;
    letter-spacing: -0.01em;
    color: var(--portal-ink);
}

/* A quiet rule under the heading, tinted to the brand colour */
.signin-form h2::after {
    content: "";
    display: block;
    width: 44px;
    height: 3px;
    margin-top: 14px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--portal-accent), var(--portal-accent-2));
}

/* ---- fields -------------------------------------------------------------- */

.form-group-1 {
    display: grid;
    gap: 14px;
    margin-top: 26px;
}

.signin-form input[type="text"],
.signin-form input[type="email"],
.signin-form input[type="password"],
.signin-form input[type="tel"],
.signin-form input[type="number"],
.signin-form input[type="date"],
.signin-form select,
.signin-form textarea {
    width: 100%;
    min-height: 46px;
    padding: 11px 14px;
    background: #fff;
    border: 1px solid var(--portal-line);
    border-radius: 10px;
    font-size: 0.95rem;
    color: var(--portal-ink);
    transition: border-color .15s ease, box-shadow .15s ease;
}

.signin-form input::placeholder,
.signin-form textarea::placeholder {
    color: #9aa5b5;
}

.signin-form input:focus,
.signin-form select:focus,
.signin-form textarea:focus {
    outline: none;
    border-color: var(--portal-accent);
    /* colour-mix keeps the focus ring on-brand; browsers without it simply get
       the border colour change above */
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--portal-accent) 22%, transparent);
}

.signin-form input:disabled,
.signin-form select:disabled {
    background: #f3f5f9;
    color: var(--portal-muted);
}

/* ---- buttons ------------------------------------------------------------- */

.form-submit {
    margin-top: 24px;
}

.submitbtn {
    width: 100%;
    padding: 12px 18px;
    background: var(--portal-accent);
    color: #fff;
    font-size: 0.95rem;
    font-weight: 600;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: filter .15s ease, transform .05s ease, box-shadow .15s ease;
}

.submitbtn:hover {
    background: var(--portal-accent);
    filter: brightness(1.08);
    box-shadow: 0 8px 18px -8px color-mix(in srgb, var(--portal-accent) 70%, transparent);
}

.submitbtn:active {
    transform: translateY(1px);
}

.submitbtn:focus-visible {
    outline: 2px solid var(--portal-accent);
    outline-offset: 2px;
}

/* "Signup ?" and "Reset Password" carry inline `color:blue; margin-left:60px`
   in the template. Overriding needs !important -- the alternative is editing
   markup, which this layer avoids on purpose. */
#signup_switch.btn,
#reset_switch.btn {
    display: inline-block;
    margin: 0 0 0 clamp(28px, 5vw, 44px) !important;
    padding: 0 !important;
    color: var(--portal-accent) !important;
    font-weight: 550;
    background: none;
    border: none;
}

#signup_switch.btn p,
#reset_switch.btn p {
    margin: 0;
    font-size: 0.9rem;
}

#signup_switch.btn:hover,
#reset_switch.btn:hover {
    text-decoration: underline !important;
}

/* the pair sits directly under the form; give them room and a divider */
#signup_switch.btn {
    margin-top: 4px !important;
    padding-top: 18px !important;
    border-top: 1px solid var(--portal-line) !important;
    width: calc(100% - clamp(56px, 10vw, 88px));
}

/* ---- messages ------------------------------------------------------------ */

.signin-form .alert {
    margin-top: 18px;
    padding: 11px 14px;
    border: 1px solid transparent;
    border-radius: 10px;
    font-size: 0.9rem;
}

.signin-form .alert-danger {
    background: #fef2f2;
    border-color: #fecaca;
    color: #b42318 !important;
}

.signin-form .alert-success {
    background: #f0fdf4;
    border-color: #bbf7d0;
}

/* ---- small screens ------------------------------------------------------- */

@media (max-width: 575.98px) {
    .main {
        padding: 16px 12px;
    }
    .container_account,
    .container_account2 {
        border-radius: 12px;
    }
    #signup_switch.btn,
    #reset_switch.btn {
        margin-left: 24px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .submitbtn,
    .signin-form input,
    .signin-form select {
        transition: none;
    }
}

/* ---- brand mark ---------------------------------------------------------- */

/* The signup page sits on a dark navy gradient, which is why it used to ship a
   white logo. KSBL's mark is dark-on-light, so it gets a white chip instead of
   being recoloured; the brand colours stay exactly as supplied. */
.o_portal_brand {
    display: inline-flex;
    align-items: center;
    padding: 8px 14px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .16);
}

.o_portal_brand_img {
    display: block;
    height: 40px;
    width: auto;
    max-width: 260px;
    object-fit: contain;
}

@media (max-width: 575.98px) {
    .o_portal_brand {
        padding: 6px 10px;
    }
    .o_portal_brand_img {
        height: 30px;
        max-width: 180px;
    }
}

/* ===========================================================================
 * KSBL sign-in / sign-up page (account_registration_ksbl)
 *
 * That template sits on a dark navy gradient and predates Bootstrap 5, so it
 * still uses .input-group-prepend (dropped in BS5, hence the misaligned icon
 * boxes) and carries a few inline styles -- most visibly a brown submit button
 * and an inline "Galano Grotesque" font that is not actually loaded anywhere.
 *
 * Inline styles outrank stylesheets, so the handful of !important rules below
 * are unavoidable without editing markup, which this layer avoids on purpose.
 * ======================================================================== */

/* --- the sign-in panel ---------------------------------------------------- */

#signin_div {
    margin: 0 auto;
    max-width: 940px;
}

#signin_form,
#signup_form {
    padding: clamp(20px, 3vw, 30px);
    background: rgba(255, 255, 255, .10);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: var(--portal-radius);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

/* the inline font is not loaded; fall back to the system stack rather than
   silently rendering in a default serif */
#signin_form [style*="Galano"],
#signup_form [style*="Galano"] {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
                 Arial, sans-serif !important;
}

#signin_form label,
#signup_form label {
    color: rgba(255, 255, 255, .92);
    font-size: .85rem;
    font-weight: 550;
    letter-spacing: .01em;
    margin-bottom: 6px !important;
}

/* --- fields: BS4 input-group-prepend never lines up under BS5 ------------- */

#signin_form .input-group-prepend,
#signup_form .input-group-prepend {
    display: flex;
    align-items: stretch;
    width: 100%;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
}

#signin_form .input-group-text,
#signup_form .input-group-text {
    display: flex;
    align-items: center;
    margin: 0 !important;
    padding: 0 12px !important;
    background: transparent;
    border: none;
    color: var(--portal-accent);
}

#signin_form .form-control,
#signup_form .form-control {
    flex: 1 1 auto;
    min-height: 44px;
    padding: 10px 12px 10px 0 !important;
    background: transparent;
    border: none;
    box-shadow: none;
    font-size: .95rem;
    color: var(--portal-ink);
}

#signin_form .input-group-prepend:focus-within,
#signup_form .input-group-prepend:focus-within {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--portal-accent) 30%, transparent);
}

#signin_form .form-control:focus,
#signup_form .form-control:focus {
    outline: none;
    box-shadow: none;
}

/* --- buttons -------------------------------------------------------------- */

/* was inline `background-color: brown` */
#signin_submit,
#signup_submit {
    min-height: 44px;
    background: var(--portal-accent) !important;
    border: none !important;
    border-radius: 10px !important;
    font-weight: 600;
    letter-spacing: .01em;
    transition: filter .15s ease, transform .05s ease, box-shadow .15s ease;
}

#signin_submit:hover,
#signup_submit:hover {
    filter: brightness(1.1);
    box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--portal-accent) 75%, transparent);
}

#signin_submit:active,
#signup_submit:active {
    transform: translateY(1px);
}

#signin_switch,
#signup_switch_ksbl {
    min-height: 44px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, .55) !important;
    border-radius: 10px !important;
    color: #fff !important;
    font-weight: 550;
    background: transparent !important;
}

#signin_switch:hover,
#signup_switch_ksbl:hover {
    background: rgba(255, 255, 255, .14) !important;
}

/* "Forgot Password?" carries inline color:white */
#signin_form a[href="/web/reset_password"] {
    display: inline-block;
    margin-top: 8px;
    font-size: .82rem;
    color: rgba(255, 255, 255, .85) !important;
    text-decoration: none;
}

#signin_form a[href="/web/reset_password"]:hover {
    text-decoration: underline;
}

/* --- alerts --------------------------------------------------------------- */

#signin_form .alert,
#signup_form .alert {
    border: none;
    border-radius: 10px;
    font-size: .9rem;
}

/* --- narrow screens: the col-md-4 fields collapse, so give them room ------ */

@media (max-width: 767.98px) {
    #signin_div {
        padding: 0 12px;
    }
    #signin_div > .col-8 {
        flex: 0 0 100%;
        max-width: 100%;
    }
    #signin_form .form-group,
    #signup_form .form-group {
        margin-bottom: 14px;
    }
}