/*
 * Login Page — Centered Card
 *
 * Priority:
 *   1. Bootstrap 3 — grid (container/row/col-*), panel, form-group,
 *      form-control, btn, alert, label, text-right, text-center, display-hide
 *   2. Custom CSS — page background, card shadow, logo, button gradients,
 *      input focus ring, divider, reveal animation. Nothing else.
 */

/*  1. Page wrapper */
body.login {
    background: #f5f7fa;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}

/*
 * Make Bootstrap's .container fill the viewport height and
 * vertically centre its single .row using CSS table trick —
 * the safest cross-browser approach for Bootstrap 3.
 */
body.login > .container {
    display: table;
    width: 100%;
    min-height: 100vh;
    padding-bottom: 32px;
}

body.login > .container > .row {
    display: table-cell;
    vertical-align: middle;
}

/* 2. App logo (above the card) */
.lc-logo {
    margin: 44px 0 22px;
}

.lc-logo img {
    max-height: 50px;
    max-width: 160px;
    object-fit: contain;
}

/* 3. Card — extends Bootstrap .panel.panel-default */
.lc-card {
    border: 1px solid #e2e8f0 !important;
    border-radius: 18px !important;
    overflow: hidden;
    box-shadow:
        0 1px 4px  rgba(0,0,0,.06),
        0 4px 16px rgba(0,0,0,.08),
        0 12px 40px rgba(0,0,0,.07) !important;
}

.lc-card > .panel-body {
    padding: 40px 44px !important;
}

/* Customer logo inside the card */
.lc-customer-logo {
    margin-bottom: 24px;
}

.lc-customer-logo img {
    max-height: 58px;
    max-width: 175px;
    object-fit: contain;
}

/* 4. Card typography */
.lc-title {
    font-size: 20px;
    font-weight: 700;
    color: #111827;
    margin: 0 0 4px;
    letter-spacing: -.2px;
}

.lc-subtitle {
    font-size: 13.5px;
    color: #6b7280;
    margin: 0 0 22px;
    line-height: 1.55;
}

/* 5. Alert — Bootstrap .alert.alert-danger is the base */
.login-alert {
    border-radius: 10px !important;
    font-size: 13px;
    padding: 10px 14px !important;
}

.login-alert .fa {
    margin-right: 6px;
    vertical-align: middle;
}

/* 6. Inputs — Bootstrap .form-control is the base */
.lc-card .form-control {
    height: 44px;
    padding: 0 13px;
    border: 1.5px solid #d1d5db;
    border-radius: 10px;
    background: #f9fafb;
    font-size: 14px;
    color: #111827;
    box-shadow: none;
    -webkit-transition: border-color .15s, box-shadow .15s, background .15s;
            transition: border-color .15s, box-shadow .15s, background .15s;
}

.lc-card .form-control:focus {
    border-color: #4f46e5;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(79,70,229,.13);
    outline: 0;
}

.lc-card .control-label {
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 5px;
}

/* jQuery Validate error state (augments Bootstrap .has-error) */
.lc-card .has-error .form-control {
    border-color: #f87171;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(239,68,68,.10);
}

.lc-card .help-block {
    font-size: 12px;
    color: #ef4444;
    font-weight: 500;
    margin-top: 4px;
}

/* 7. Buttons — Bootstrap .btn provides sizing/display */

/* Primary — indigo gradient */
.btn-lc-primary {
    background: -webkit-linear-gradient(315deg, #4338ca 0%, #6366f1 100%);
    background:         linear-gradient(135deg, #4338ca 0%, #6366f1 100%);
    color: #fff !important;
    border: none;
    border-radius: 10px;
    font-weight: 600;
    font-size: 14px;
    padding: 0 26px;
    height: 44px;
    line-height: 44px;
    box-shadow: 0 4px 12px rgba(79,70,229,.36);
    white-space: nowrap;
    -webkit-transition: box-shadow .18s, -webkit-transform .12s;
            transition: box-shadow .18s,         transform .12s;
}

.btn-lc-primary:hover,
.btn-lc-primary:focus {
    color: #fff !important;
    box-shadow: 0 6px 20px rgba(79,70,229,.50);
    -webkit-transform: translateY(-1px);
            transform: translateY(-1px);
    outline: 0;
}

.btn-lc-primary:active {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    box-shadow: 0 2px 6px rgba(79,70,229,.30);
}

/* SSO — emerald gradient; use with Bootstrap .btn-block */
.btn-lc-sso {
    background: -webkit-linear-gradient(315deg, #047857 0%, #10b981 100%);
    background:         linear-gradient(135deg, #047857 0%, #10b981 100%);
    color: #fff !important;
    border: none;
    border-radius: 10px;
    font-weight: 600;
    font-size: 14px;
    height: 44px;
    line-height: 44px;
    box-shadow: 0 4px 12px rgba(5,150,105,.32);
    -webkit-transition: box-shadow .18s, -webkit-transform .12s;
            transition: box-shadow .18s,         transform .12s;
}

.btn-lc-sso:hover,
.btn-lc-sso:focus {
    color: #fff !important;
    box-shadow: 0 6px 20px rgba(5,150,105,.48);
    -webkit-transform: translateY(-1px);
            transform: translateY(-1px);
    outline: 0;
}

.btn-lc-sso:active {
    -webkit-transform: translateY(0);
            transform: translateY(0);
}

/* Back — ghost */
.btn-lc-back {
    background: #f3f4f6;
    border: 1.5px solid #d1d5db;
    border-radius: 10px;
    color: #6b7280 !important;
    font-size: 14px;
    font-weight: 500;
    height: 44px;
    line-height: 40px;
    padding: 0 18px;
    -webkit-transition: background .15s, border-color .15s;
            transition: background .15s, border-color .15s;
}

.btn-lc-back:hover,
.btn-lc-back:focus {
    background: #e5e7eb;
    border-color: #9ca3af;
    color: #374151 !important;
    outline: 0;
}

/* 8. Forgot password link */
.lc-forgot-link {
    font-size: 13px;
    color: #4f46e5;
    font-weight: 500;
    text-decoration: none;
    line-height: 44px; /* aligns with adjacent button height */
}

.lc-forgot-link:hover,
.lc-forgot-link:focus {
    color: #4338ca;
    text-decoration: none;
}

/* 9. OR divider */
.lc-divider {
    position: relative;
    text-align: center;
    margin: 18px 0 14px;
    color: #9ca3af;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .07em;
}

.lc-divider::before,
.lc-divider::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 40%;
    height: 1px;
    background: #e5e7eb;
}

.lc-divider::before { left: 0; }
.lc-divider::after  { right: 0; }

/* 10. Reveal animation */
#passwordSection,
#ssoSection {
    -webkit-animation: lcReveal .2s ease forwards;
            animation: lcReveal .2s ease forwards;
}

@-webkit-keyframes lcReveal {
    from { opacity: 0; -webkit-transform: translateY(-6px); transform: translateY(-6px); }
    to   { opacity: 1; -webkit-transform: translateY(0);    transform: translateY(0); }
}

@keyframes lcReveal {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* 11. Page footer */
.lc-footer {
    color: #9ca3af;
    font-size: 12px;
    margin-top: 18px;
    margin-bottom: 0;
}

.lc-footer a            { color: #6b7280; text-decoration: none; }
.lc-footer a:hover      { color: #374151; }

/* 12. Responsive */
@media (max-width: 480px) {
    .lc-card > .panel-body {
        padding: 28px 20px !important;
    }

    .btn-lc-primary,
    .btn-lc-sso,
    .btn-lc-back {
        width: 100%;
    }
}