/* ============================================================
   INHA Foundation Program — Login redesign
   Scoped under .app-login so it never leaks into the authed app.
   Palette inspired by INHA brand: deep navy + sky blue.
   ============================================================ */

:root {
    --inha-navy:      #0e3a8c;
    --inha-navy-700:  #0b2e6e;
    --inha-navy-900:  #082451;
    --inha-blue:      #1c7fd6;
    --inha-sky:       #36a7e8;
    --inha-bg:        #eef3fb;
    --inha-card:      #ffffff;
    --inha-text:      #1e2a44;
    --inha-muted:     #6b7a90;
    --inha-border:    #e3e9f2;
    --inha-danger:    #e23d3d;
    --inha-radius:    18px;
    --inha-radius-sm: 12px;
    --inha-shadow:    0 24px 60px rgba(14, 58, 140, .16);
    --inha-font:      'Lato', 'Raleway', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ---------- Page background ---------- */
.app-login {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 16px;
    font-family: var(--inha-font);
    color: var(--inha-text);
    background:
        linear-gradient(rgba(8,36,81,.22), rgba(8,36,81,.40)),
        url("../images/bg.jpg") center center / cover no-repeat;
    background-color: var(--inha-navy);
}

/* ---------- Card shell (two columns) ---------- */
.app-login .login-shell {
    width: 100%;
    max-width: 960px;
    min-height: 600px;
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    background: var(--inha-card);
    border-radius: var(--inha-radius);
    box-shadow: var(--inha-shadow);
    overflow: hidden;
}

/* ---------- Left brand panel ---------- */
.app-login .login-brand {
    position: relative;
    padding: 44px 40px;
    color: #fff;
    background: linear-gradient(155deg, var(--inha-navy) 0%, var(--inha-navy-900) 100%);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.app-login .login-brand::after {
    content: "";
    position: absolute;
    right: -120px;
    top: -120px;
    width: 320px;
    height: 320px;
    background: radial-gradient(circle, rgba(54,167,232,.45), transparent 70%);
    pointer-events: none;
}

/* Photo-ambiance variant: poster used as a darkened backdrop with our own
   clean text on top. Image at client/assets/images/login_side.jpg. */
.app-login .login-brand--image {
    padding: 0;
    background: var(--inha-navy-900);
}
.app-login .login-brand--image::after { display: none; }
.app-login .login-brand__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}
.app-login .login-brand__mobile { display: none; }
.app-login .login-brand__lockup {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 32px;
}
.app-login .login-brand__seal {
    height: 52px;
    width: 52px;
    flex: 0 0 auto;
    background: #fff;
    border-radius: 50%;
    padding: 3px;
    box-shadow: 0 6px 16px rgba(0,0,0,.2);
}
.app-login .login-brand__name {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: .3px;
    color: #fff;
    text-transform: uppercase;
}
.app-login .login-brand__title {
    font-size: 40px;
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 30px;
    letter-spacing: .2px;
    color: #fff;
}
.app-login .login-brand__sub {
    font-size: 15px;
    color: rgba(255,255,255,.82);
    margin: 0 0 28px;
    max-width: 30ch;
}
.app-login .login-brand__spacer { flex: 1 1 auto; }
.app-login .login-brand__contacts {
    position: relative;
    font-size: 13px;
    line-height: 1.7;
    color: rgba(255,255,255,.78);
    border-top: 1px solid rgba(255,255,255,.16);
    padding-top: 18px;
}
.app-login .login-brand__contacts a { color: #cfe6fb; text-decoration: none; }
.app-login .login-brand__contacts a:hover { text-decoration: underline; }
.app-login .login-brand__contacts strong { color: #fff; font-weight: 600; }

/* ---------- Right form panel ---------- */
.app-login .login-panel {
    padding: 2px 25px 4px;
    display: flex;
    align-items: center;
}
.app-login .login-panel .card-block { width: 100%; }

/* ---------- Headings inside forms ---------- */
.app-login .login-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--inha-navy);
    margin: 0 0 4px;
}
.app-login .login-note {
    font-size: 14px;
    color: var(--inha-muted);
    margin: 0 0 22px;
}
.app-login .login-register {
    display: inline-block;
    margin: 0 0 20px;
    font-size: 14px;
    color: var(--inha-text);
}
.app-login .login-register a { color: var(--inha-blue); font-weight: 700; text-decoration: none; }
.app-login .login-register a:hover { text-decoration: underline; }

/* ---------- Form fields ---------- */
.app-login .input-group { width: 100%; }
.app-login .form-login .input-group { margin-bottom: 4px; }
.app-login .form-control {
    height: 46px;
    border: 1px solid var(--inha-border);
    border-radius: var(--inha-radius-sm);
    box-shadow: none;
    color: var(--inha-text);
    font-size: 14px;
    transition: border-color .15s, box-shadow .15s;
}
.app-login .form-control:focus {
    border-color: var(--inha-blue);
    box-shadow: 0 0 0 3px rgba(28,127,214,.15);
}
.app-login .input-group-addon {
    background: #f6f9fe;
    border: 1px solid var(--inha-border);
    color: var(--inha-blue);
    border-radius: var(--inha-radius-sm);
    min-width: 46px;
}
/* keep BS3 input-group corners tidy with our radius */
.app-login .input-group .form-control:not(:first-child),
.app-login .input-group-addon:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.app-login .input-group .form-control:not(:last-child),
.app-login .input-group-addon:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }

.app-login .field { margin-bottom: 16px; }
.app-login .validation { display: block; font-size: 12px; color: var(--inha-danger); margin-top: 4px; min-height: 14px; }

/* ---------- Captcha (full width) ---------- */
.app-login .login-captcha { margin-bottom: 16px; }
.app-login .login-captcha__img {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f6f9fe;
    border: 1px solid var(--inha-border);
    border-radius: var(--inha-radius-sm);
    padding: 8px;
    margin-bottom: 8px;
    min-height: 58px;
    line-height: 0;
}
.app-login .login-captcha__img svg { max-height: 48px; width: auto; }

/* ---------- OneID button ---------- */
.app-login .login-or {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 18px 0;
    font-size: 12px;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: var(--inha-muted);
}
.app-login .login-or::before,
.app-login .login-or::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: var(--inha-border);
}
.app-login .btn-oneid {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    height: 46px;
    background: #fff;
    border: 1px solid var(--inha-border);
    border-radius: var(--inha-radius-sm);
    font-weight: 700;
    color: var(--inha-text);
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
}
.app-login .btn-oneid:hover { border-color: #4825c2; box-shadow: 0 0 0 3px rgba(72,37,194,.12); }
.app-login .btn-oneid img { height: 22px; width: auto; }

/* ---------- Buttons ---------- */
.app-login .btn {
    border-radius: var(--inha-radius-sm);
    font-weight: 700;
    font-size: 14px;
    transition: background-color .15s, box-shadow .15s, transform .05s;
}
.app-login .btn-primary {
    height: 46px;
    padding: 0 26px;
    background: var(--inha-navy);
    border-color: var(--inha-navy);
    box-shadow: 0 10px 24px rgba(14,58,140,.22);
}
.app-login .btn-primary:hover,
.app-login .btn-primary:focus { background: var(--inha-navy-700); border-color: var(--inha-navy-700); }
.app-login .btn-primary:active { transform: translateY(1px); }
.app-login .btn-link { color: var(--inha-blue); font-weight: 600; }
.app-login .btn-link:hover { color: var(--inha-navy); }

.app-login .login-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 22px;
}

/* ---------- Help line ---------- */
.app-login .login-help {
    margin: 20px 0 0;
    font-size: 14px;
    color: var(--inha-muted);
    text-align: center;
}
.app-login .login-help a { color: var(--inha-blue); font-weight: 700; text-decoration: none; }
.app-login .login-help a:hover { text-decoration: underline; }

/* ---------- Show/hide password addon ---------- */
.app-login .pwd-toggle { cursor: pointer; border-left: 0; }

/* ============================================================
   Responsive
   ============================================================ */

/* Tablet: keep two columns but tighten */
@media (max-width: 900px) {
    .app-login .login-shell { max-width: 720px; }
    .app-login .login-brand__title { font-size: 30px; margin-bottom: 18px; }
    .app-login .login-brand__content { padding: 32px 28px; }
}

/* Phone: full-screen, poster as a top banner (shows logo + title + student). */
@media (max-width: 640px) {
    .app-login { padding: 0; align-items: stretch; }
    .app-login .login-shell {
        display: flex;
        flex-direction: column;
        grid-template-columns: none;
        max-width: 100%;
        min-height: 100vh;
        border-radius: 0;
        box-shadow: none;
    }
    /* Brand → solid navy header with logo (poster crops badly when narrow) */
    .app-login .login-brand--image {
        flex: 0 0 auto;
        background: linear-gradient(155deg, var(--inha-navy) 0%, var(--inha-navy-900) 100%);
    }
    .app-login .login-brand__img { display: none; }
    .app-login .login-brand__mobile {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 8px;
        padding: 20px 22px;
    }
    .app-login .login-brand__lockup { justify-content: center; margin: 0; }
    .app-login .login-brand__seal { height: 44px; width: 44px; }
    .app-login .login-brand__name { font-size: 13px; }
    .app-login .login-brand__mtitle { font-size: 17px; font-weight: 700; color: #fff; line-height: 1.25; }
    /* Form fills the rest */
    .app-login .login-panel { flex: 1 1 auto; padding: 28px 22px; align-items: flex-start; }
    .app-login .login-title { font-size: 22px; }
    .app-login .login-actions { flex-wrap: wrap; gap: 10px; }
    .app-login .login-actions .btn-primary { width: 100%; order: 1; }
    .app-login .login-actions .btn-link { order: 2; }
}

/* Very small phones */
@media (max-width: 380px) {
    .app-login .login-panel { padding: 24px 16px; }
    .app-login .login-captcha__img svg { max-height: 40px; }
}