/* ============================================================
   BPM Employee Portal — Login & Portal Home Styles
   ============================================================ */

:root {
    --lp-brand:      #012557;
    --lp-brand-dk:   #011838;
    --lp-brand-lt:   #1c4080;
    --lp-accent:     #2563eb;
    --lp-bg:         #f1f5f9;
    --lp-card:       #ffffff;
    --lp-border:     #e2e8f0;
    --lp-text:       #0f172a;
    --lp-text-sec:   #475569;
    --lp-text-muted: #94a3b8;
    --lp-success:    #059669;
    --lp-warn:       #b45309;
    --lp-danger:     #dc2626;
    --lp-radius:     12px;
    --lp-radius-sm:  8px;
    --lp-shadow-sm:  0 1px 3px rgba(0,0,0,.07);
    --lp-shadow:     0 4px 18px rgba(0,0,0,.09), 0 1px 3px rgba(0,0,0,.04);
    --lp-ease:       150ms cubic-bezier(0.4,0,0.2,1);
    --lp-font:       'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* ──────────────────────────────────────────────────────────
   PRE-LOGIN LAYOUT
   ────────────────────────────────────────────────────────── */

body.lp-body {
    margin: 0; padding: 0;
    font-family: var(--lp-font);
    background: var(--lp-bg);
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}

.lp-wrap {
    display: flex;
    min-height: 100vh;
}

/* Brand panel */
.lp-brand-panel {
    flex: 0 0 400px;
    background: linear-gradient(155deg, var(--lp-brand-dk) 0%, var(--lp-brand) 52%, var(--lp-brand-lt) 100%);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 52px 44px;
    position: relative;
    overflow: hidden;
}

.lp-brand-panel::before {
    content: '';
    position: absolute;
    top: -120px; right: -120px;
    width: 380px; height: 380px;
    border-radius: 50%;
    background: rgba(255,255,255,.04);
    pointer-events: none;
}

.lp-brand-panel::after {
    content: '';
    position: absolute;
    bottom: -80px; left: -80px;
    width: 260px; height: 260px;
    border-radius: 50%;
    background: rgba(255,255,255,.03);
    pointer-events: none;
}

.lp-brand-body { position: relative; z-index: 1; }

.lp-logo-wrap {
    display: inline-block;
    background: transparent;
    padding: 0;
    margin-bottom: 52px;
}

.lp-logo {
    display: block;
    width: 200px;
    height: 79px;
    object-fit: contain;
}

.lp-brand-title {
    font-size: 2rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: -.03em;
    line-height: 1.2;
    margin: 0 0 14px;
}

.lp-brand-desc {
    font-size: .9375rem;
    color: rgba(255,255,255,.6);
    line-height: 1.7;
    margin: 0;
}

.lp-brand-links {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 40px;
}

.lp-brand-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: rgba(255,255,255,.6);
    text-decoration: none;
    font-size: .875rem;
    font-weight: 500;
    transition: color var(--lp-ease);
}

.lp-brand-link:hover { color: #fff; }

.lp-brand-foot {
    position: relative; z-index: 1;
    color: rgba(255,255,255,.32);
    font-size: .8rem;
}

/* Content panel */
.lp-content-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: var(--lp-bg);
}

.lp-content-inner {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 52px clamp(24px, 6vw, 88px);
    max-width: 560px;
    margin: 0 auto;
    width: 100%;
}

.lp-content-foot {
    padding: 16px clamp(24px, 6vw, 88px);
    display: flex;
    gap: 6px;
    font-size: .8125rem;
    color: var(--lp-text-muted);
}

.lp-content-foot a {
    color: var(--lp-text-sec);
    text-decoration: none;
    transition: color var(--lp-ease);
}

.lp-content-foot a:hover { color: var(--lp-brand); }

/* Mobile header strip */
.lp-mobile-hdr {
    display: none;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    background: var(--lp-card);
    border-bottom: 1px solid var(--lp-border);
}

.lp-mobile-logo {
    max-height: 36px;
    max-width: 140px;
    object-fit: contain;
}

.lp-mobile-nav { display: flex; gap: 16px; }

.lp-mobile-nav a {
    font-size: .8125rem;
    font-weight: 500;
    color: var(--lp-text-sec);
    text-decoration: none;
    transition: color var(--lp-ease);
}

.lp-mobile-nav a:hover, .lp-mobile-nav a.active { color: var(--lp-accent); }

/* ──────────────────────────────────────────────────────────
   LOGIN CARD
   ────────────────────────────────────────────────────────── */

.lp-card {
    background: var(--lp-card);
    border-radius: var(--lp-radius);
    padding: 44px 40px;
    box-shadow: var(--lp-shadow);
    border: 1px solid var(--lp-border);
}

.lp-card-title {
    font-size: 1.625rem;
    font-weight: 700;
    color: var(--lp-text);
    letter-spacing: -.025em;
    margin: 0 0 6px;
}

.lp-card-sub {
    font-size: .9375rem;
    color: var(--lp-text-sec);
    margin: 0 0 32px;
}

/* Fields */
.lp-field { margin-bottom: 20px; }

.lp-label {
    display: block;
    font-size: .875rem;
    font-weight: 500;
    color: var(--lp-text);
    margin-bottom: 6px;
}

.lp-input {
    display: block;
    width: 100%;
    padding: 11px 14px;
    font-size: .9375rem;
    font-family: var(--lp-font);
    color: var(--lp-text);
    background: var(--lp-card);
    border: 1.5px solid var(--lp-border);
    border-radius: var(--lp-radius-sm);
    box-shadow: var(--lp-shadow-sm);
    transition: border-color var(--lp-ease), box-shadow var(--lp-ease);
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    line-height: 1.5;
}

.lp-input:focus {
    border-color: var(--lp-accent);
    box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}

.lp-input::placeholder { color: var(--lp-text-muted); }

/* Checkbox row */
.lp-check-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 28px;
}

.lp-check-row input[type="checkbox"] {
    width: 17px;
    height: 17px;
    accent-color: var(--lp-accent);
    cursor: pointer;
    flex-shrink: 0;
}

.lp-check-label {
    font-size: .875rem;
    color: var(--lp-text-sec);
    cursor: pointer;
    user-select: none;
}

/* Primary CTA */
.lp-btn {
    display: block;
    width: 100%;
    padding: 12px 24px;
    font-size: .9375rem;
    font-weight: 600;
    font-family: var(--lp-font);
    color: #fff;
    background: var(--lp-brand);
    border: none;
    border-radius: var(--lp-radius-sm);
    cursor: pointer;
    transition: background var(--lp-ease), box-shadow var(--lp-ease), transform var(--lp-ease);
    letter-spacing: .01em;
    line-height: 1.5;
    text-align: center;
    text-decoration: none;
}

.lp-btn:hover {
    background: var(--lp-brand-lt);
    color: #fff;
    box-shadow: 0 4px 14px rgba(1,37,87,.3);
}

.lp-btn:active { transform: translateY(1px); }

/* Divider */
.lp-or {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 28px 0;
    font-size: .8125rem;
    color: var(--lp-text-muted);
}

.lp-or::before, .lp-or::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--lp-border);
}

/* Social buttons */
.lp-social-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.lp-social-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 9px 12px;
    font-size: .8125rem;
    font-weight: 500;
    font-family: var(--lp-font);
    color: var(--lp-text);
    background: var(--lp-card);
    border: 1.5px solid var(--lp-border);
    border-radius: var(--lp-radius-sm);
    text-decoration: none;
    cursor: pointer;
    transition: border-color var(--lp-ease), background var(--lp-ease), box-shadow var(--lp-ease), color var(--lp-ease);
    white-space: nowrap;
    line-height: 1;
}

.lp-social-btn:hover {
    border-color: #94a3b8;
    background: var(--lp-bg);
    color: var(--lp-text);
    box-shadow: 0 2px 8px rgba(0,0,0,.07);
}

.lp-social-btn img {
    width: 16px;
    height: 16px;
    object-fit: contain;
    flex-shrink: 0;
}

.lp-social-btn.lp-facebook {
    background: #1877f2;
    border-color: #1877f2;
    color: #fff;
}

.lp-social-btn.lp-facebook:hover {
    background: #166fe5;
    border-color: #166fe5;
    color: #fff;
}

/* Last item spans full width when odd */
.lp-social-grid .lp-social-btn:last-child:nth-child(odd) {
    grid-column: 1 / -1;
}

/* Alerts */
.lp-alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 13px 16px;
    border-radius: var(--lp-radius-sm);
    font-size: .875rem;
    line-height: 1.55;
    margin-bottom: 24px;
    animation: lpSlideIn .2s ease;
}

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

.lp-alert-success {
    background: #ecfdf5;
    color: #065f46;
    border: 1px solid #6ee7b7;
}

.lp-alert-danger {
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #fca5a5;
}

.lp-alert-warn {
    background: #fffbeb;
    color: var(--lp-warn);
    border: 1px solid #fcd34d;
}

.lp-alert-icon { flex-shrink: 0; margin-top: 1px; }

/* ──────────────────────────────────────────────────────────
   STATUS PAGES  (Logout / SessionExpired / ShutDown / MissingInfo)
   ────────────────────────────────────────────────────────── */

.lp-status-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100%;
}

.lp-status-card {
    background: var(--lp-card);
    border-radius: var(--lp-radius);
    padding: 52px 48px;
    box-shadow: var(--lp-shadow);
    border: 1px solid var(--lp-border);
    text-align: center;
    max-width: 480px;
    width: 100%;
}

.lp-status-icon {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
    font-size: 1.75rem;
}

.lp-icon-success { background: #ecfdf5; color: var(--lp-success); }
.lp-icon-warn    { background: #fffbeb; color: var(--lp-warn); }
.lp-icon-info    { background: #eff6ff; color: var(--lp-accent); }

.lp-status-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--lp-text);
    letter-spacing: -.025em;
    margin: 0 0 12px;
}

.lp-status-msg {
    font-size: .9375rem;
    color: var(--lp-text-sec);
    line-height: 1.65;
    margin: 0 0 32px;
}

/* ──────────────────────────────────────────────────────────
   PORTAL HOME  (Welcome.cshtml)
   ────────────────────────────────────────────────────────── */

.lp-portal {
    font-family: var(--lp-font);
    -webkit-font-smoothing: antialiased;
}

.lp-portal-title {
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--lp-text);
    letter-spacing: -.02em;
    margin: 0 0 24px;
}

/* Section cards */
.lp-sec {
    background: var(--lp-card);
    border-radius: var(--lp-radius);
    border: 1px solid var(--lp-border);
    box-shadow: var(--lp-shadow-sm);
    margin-bottom: 20px;
    overflow: hidden;
    transition: box-shadow var(--lp-ease);
}

.lp-sec:hover { box-shadow: var(--lp-shadow); }

.lp-sec-hdr {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 18px;
    background: #f8f9fc;
    border-bottom: 1px solid var(--lp-border);
}

.lp-sec-badge {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .875rem;
    flex-shrink: 0;
}

.lp-badge-blue   { background: #dbeafe; color: #1d4ed8; }
.lp-badge-green  { background: #dcfce7; color: #15803d; }
.lp-badge-orange { background: #ffedd5; color: #c2410c; }
.lp-badge-purple { background: #f3e8ff; color: #7c3aed; }
.lp-badge-navy   { background: #dbeafe; color: var(--lp-brand); }
.lp-badge-teal   { background: #ccfbf1; color: #0f766e; }
.lp-badge-rose   { background: #ffe4e6; color: #be123c; }
.lp-badge-slate  { background: #f1f5f9; color: #475569; }
.lp-badge-amber  { background: #fef3c7; color: #92400e; }

.lp-sec-title {
    font-size: .8125rem;
    font-weight: 600;
    color: var(--lp-text);
    letter-spacing: .04em;
    text-transform: uppercase;
    margin: 0;
}

/* Link list */
.lp-links {
    list-style: none;
    margin: 0;
    padding: 6px 0;
}

.lp-links li + li { border-top: 1px solid var(--lp-border); }

.lp-link {
    display: flex;
    align-items: center;
    padding: 11px 18px;
    font-size: .875rem;
    color: var(--lp-text-sec);
    text-decoration: none;
    gap: 8px;
    transition: background var(--lp-ease), color var(--lp-ease);
}

.lp-link:hover {
    background: #f8f9fc;
    color: var(--lp-brand);
}

.lp-link-chevron {
    margin-left: auto;
    font-size: .7rem;
    color: var(--lp-text-muted);
    transition: transform var(--lp-ease), color var(--lp-ease);
}

.lp-link:hover .lp-link-chevron {
    transform: translateX(3px);
    color: var(--lp-accent);
}

.lp-link-static {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 18px;
    font-size: .875rem;
    color: var(--lp-text-muted);
    font-style: italic;
}

/* 2-col link grid inside a section */
.lp-link-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.lp-link-grid .lp-link { border-top: 1px solid var(--lp-border); border-right: 1px solid var(--lp-border); }
.lp-link-grid .lp-link:nth-child(even) { border-right: none; }
.lp-link-grid .lp-link:first-child,
.lp-link-grid .lp-link:nth-child(2) { border-top: none; }

/* Portal two-column layout */
.lp-portal-grid {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 24px;
    align-items: start;
}

@media (max-width: 900px) {
    .lp-portal-grid { grid-template-columns: 1fr; }
}

/* ──────────────────────────────────────────────────────────
   RESPONSIVE
   ────────────────────────────────────────────────────────── */

@media (max-width: 991.98px) {
    .lp-brand-panel { display: none !important; }
    .lp-mobile-hdr  { display: flex; }
    .lp-content-panel { min-height: 100vh; }
    .lp-content-inner {
        padding: 36px 24px;
        max-width: 100%;
        justify-content: flex-start;
        padding-top: 40px;
    }
}

@media (max-width: 576px) {
    .lp-card         { padding: 28px 20px; }
    .lp-status-card  { padding: 36px 24px; }
    .lp-social-grid  { grid-template-columns: 1fr; }
    .lp-social-grid .lp-social-btn:last-child:nth-child(odd) { grid-column: initial; }
    .lp-link-grid    { grid-template-columns: 1fr; }
    .lp-link-grid .lp-link { border-right: none; }
    .lp-link-grid .lp-link:nth-child(2) { border-top: 1px solid var(--lp-border); }
}