/* =============================================
   style.css — ระบบยืนยันตัวตน กระทรวงสาธารณสุข
   ============================================= */
*, *::before, *::after { box-sizing: border-box; }
body { font-family: 'Kanit', sans-serif; margin: 0; }

/* =============================================
   Background — Navy Blue (ตาม theme โปรเจค)
   ============================================= */
.login-body {
    min-height: 100vh;
    background: linear-gradient(145deg,
        #0c1a3a 0%,
        #0f2d6e 30%,
        #1a47b8 65%,
        #1472aa 100%
    );
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    animation: bgPulse 10s ease-in-out infinite alternate;
}

@keyframes bgPulse {
    from { filter: brightness(1); }
    to   { filter: brightness(1.05); }
}

/* =============================================
   Layout
   ============================================= */
.login-page {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.75rem;
}

/* System title */
.login-sys-title {
    color: rgba(255,255,255,.88);
    font-size: .85rem;
    font-weight: 400;
    letter-spacing: .04em;
    animation: fadeDown .6s ease both;
}

.alert-login {
    width: 100%;
    max-width: 540px;
    border-radius: .875rem;
    font-size: .88rem;
}

/* =============================================
   Cards wrap
   ============================================= */
.login-cards-wrap {
    display: flex;
    flex-direction: row;
    gap: 1.75rem;
    width: 100%;
    max-width: 840px;
    align-items: stretch;
}

/* =============================================
   Login Card (lc) — เพิ่ม shadow + animation
   ============================================= */
.lc {
    flex: 1;
    background: #fff;
    border-radius: 1.75rem;
    box-shadow:
        0 4px 6px rgba(0,0,0,.06),
        0 12px 32px rgba(0,0,0,.14),
        0 32px 64px rgba(0,0,0,.12);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform .3s cubic-bezier(.34,1.56,.64,1),
                box-shadow .3s ease;
    /* เข้า animation */
    animation: cardRise .65s cubic-bezier(.22,1,.36,1) both;
}

.lc:nth-child(1) { animation-delay: .1s; }
.lc:nth-child(3) { animation-delay: .22s; }

@keyframes cardRise {
    from { opacity: 0; transform: translateY(36px) scale(.97); }
    to   { opacity: 1; transform: translateY(0)    scale(1);   }
}

.lc:hover {
    transform: translateY(-8px) scale(1.012);
    box-shadow:
        0 8px 16px rgba(0,0,0,.08),
        0 24px 56px rgba(0,0,0,.18),
        0 48px 80px rgba(0,0,0,.12);
}

/* แถบสีบนสุด */
.lc__topbar {
    height: 7px;
    width: 100%;
    flex-shrink: 0;
}
.lc__topbar--green {
    background: linear-gradient(90deg, #004d20, #007a36, #00c853);
    background-size: 200% 100%;
    animation: shimmer 3s linear infinite;
}
.lc__topbar--blue {
    background: linear-gradient(90deg, #0d47a1, #1976d2, #42a5f5);
    background-size: 200% 100%;
    animation: shimmer 3s linear infinite;
}

@keyframes shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Body */
.lc__body {
    padding: 2rem 2rem 1.75rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex: 1;
}

/* Badge */
.lc__badge {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .75rem;
    font-weight: 500;
    padding: .35em 1em;
    border-radius: 2rem;
    margin-bottom: 1.5rem;
    letter-spacing: .02em;
}
.lc__badge--green { background: #e8f5e9; color: #1b5e20; border: 1.5px solid #81c784; }
.lc__badge--blue  { background: #e3f2fd; color: #0d47a1; border: 1.5px solid #64b5f6; }

/* =============================================
   Logo — ขนาดใหญ่ขึ้น
   ============================================= */
.lc__logo-wrap {
    width: 100%;
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    /* gentle float animation */
    animation: floatLogo 4s ease-in-out infinite;
}
.lc:nth-child(3) .lc__logo-wrap { animation-delay: .5s; }

@keyframes floatLogo {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-6px); }
}

/* Provider ID logo — ขนาดใหญ่ */
.lc__logo {
    object-fit: contain;
    width: auto;
    max-width: 200px;
}
.lc__logo--provider {
    height: 150px;
}

/* ThaID logo — มุมมน */
.lc__logo--thaid {
    height: 150px;
    border-radius: 28px;
    box-shadow: 0 6px 24px rgba(21,101,192,.25);
}

/* Fallback */
.lc__logo-fallback {
    display: none;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
}
.lc__logo-fallback--green { color: #1b5e20; }
.lc__logo-fallback--blue  { color: #0d47a1; }
.lc__logo-fallback i    { font-size: 4rem; }
.lc__logo-fallback span { font-size: 1.6rem; font-weight: 700; }

/* =============================================
   Text — อ่านชัดขึ้น
   ============================================= */
.lc__title {
    font-size: 1.15rem;
    font-weight: 700;
    color: #111;
    margin-bottom: .35rem;
    letter-spacing: -.01em;
}

.lc__sub {
    font-size: .85rem;
    color: #666;
    margin-bottom: 1.5rem;
    line-height: 1.75;
    font-weight: 400;
}

/* =============================================
   ปุ่ม Login
   ============================================= */
.lc__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    width: 100%;
    padding: .88rem 1.5rem;
    border-radius: 3rem;
    font-family: 'Kanit', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all .22s cubic-bezier(.4,0,.2,1);
    border: 2px solid transparent;
    line-height: 1;
    position: relative;
    overflow: hidden;
}

/* ripple effect */
.lc__btn::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,0);
    transition: background .2s;
    border-radius: inherit;
}
.lc__btn:active::after { background: rgba(255,255,255,.2); }

/* Outline green */
.lc__btn--green {
    border-color: #007a36;
    color: #007a36;
    background: transparent;
    letter-spacing: .02em;
}
.lc__btn--green:hover {
    background: #007a36;
    color: #fff;
    box-shadow: 0 6px 24px rgba(0,122,54,.4);
    transform: translateY(-1px);
}

/* Outline blue */
.lc__btn--blue {
    border-color: #1565c0;
    color: #1565c0;
    background: transparent;
    letter-spacing: .02em;
}
.lc__btn--blue:hover {
    background: #1565c0;
    color: #fff;
    box-shadow: 0 6px 24px rgba(21,101,192,.4);
    transform: translateY(-1px);
}

/* Solid green */
.lc__btn--solid-green {
    background: linear-gradient(135deg, #007a36, #00a046);
    color: #fff;
    border: none;
    margin-top: .35rem;
    font-weight: 600;
}
.lc__btn--solid-green:hover {
    background: linear-gradient(135deg, #005226, #007a36);
    color: #fff;
    box-shadow: 0 8px 24px rgba(0,82,38,.45);
    transform: translateY(-2px);
}

/* Solid blue */
.lc__btn--solid-blue {
    background: linear-gradient(135deg, #1565c0, #1e88e5);
    color: #fff;
    border: none;
    margin-top: .35rem;
    font-weight: 600;
}
.lc__btn--solid-blue:hover {
    background: linear-gradient(135deg, #0d47a1, #1565c0);
    color: #fff;
    box-shadow: 0 8px 24px rgba(13,71,161,.45);
    transform: translateY(-2px);
}

/* =============================================
   Divider
   ============================================= */
.lc__divider {
    display: flex;
    align-items: center;
    width: 100%;
    gap: .6rem;
    margin: 1.1rem 0 .75rem;
    color: #bbb;
    font-size: .76rem;
}
.lc__divider::before,
.lc__divider::after {
    content: '';
    flex: 1;
    border-top: 1px solid #ececec;
}
.lc__divider span { white-space: nowrap; }

/* =============================================
   Footer links
   ============================================= */
.lc__links {
    margin-top: 1.35rem;
    font-size: .73rem;
    color: #ccc;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .1rem .3rem;
    line-height: 1.9;
}
.lc__link-btn {
    background: none;
    border: none;
    color: #bbb;
    font-family: 'Kanit', sans-serif;
    font-size: .73rem;
    cursor: pointer;
    padding: 0;
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color .2s;
}
.lc__link-btn:hover { color: #007a36; }

/* =============================================
   Copyright
   ============================================= */
.login-copy {
    color: rgba(255,255,255,.4);
    font-size: .73rem;
    margin: 0;
    animation: fadeDown .8s ease .4s both;
}

/* =============================================
   Animations utility
   ============================================= */
@keyframes fadeDown {
    from { opacity: 0; transform: translateY(-10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* SweetAlert */
.swal-kanit { font-family: 'Kanit', sans-serif !important; }

/* =============================================
   Loading Overlay
   ============================================= */
.loading-overlay {
    position: fixed;
    inset: 0;
    background: rgba(10,20,60,.75);
    z-index: 9999;
    display: flex !important;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(6px);
}
.loading-overlay.d-none { display: none !important; }
.loading-spinner { text-align: center; }

/* =============================================
   Dashboard
   ============================================= */
.dashboard-body {
    min-height: 100vh;
    background: #f0f4f8;
    font-family: 'Kanit', sans-serif;
}
.navbar-main {
    background: linear-gradient(90deg, #002b12, #007a36);
    box-shadow: 0 2px 8px rgba(0,0,0,.2);
    padding: .75rem 0;
}
.dashboard-card {
    border-radius: 1rem;
    background: linear-gradient(135deg, #fff 60%, #f1f8e9);
}
.badge-login-type {
    background: linear-gradient(135deg, #007a36, #00b050);
    color: #fff;
    font-size: .8rem;
    padding: .45em .9em;
    border-radius: 2rem;
    font-weight: 400;
}
.info-card {
    border-radius: 1rem;
    transition: transform .2s;
}
.info-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0,0,0,.1) !important;
}
.info-label {
    font-size: .72rem;
    color: #6c757d;
    margin-bottom: .25rem;
    text-transform: uppercase;
    letter-spacing: .05em;
}
.info-value {
    font-size: .9rem;
    font-weight: 600;
    color: #1a1a2e;
    margin-bottom: 0;
}
.info-icon {
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* =============================================
   Logs Table
   ============================================= */
.log-table { font-size: .82rem; }
.log-table thead th { font-weight: 500; white-space: nowrap; font-size: .78rem; }
.log-table tbody tr:hover { background: #f0f5ff; }

/* =============================================
   Responsive
   ============================================= */
@media (max-width: 660px) {
    .login-cards-wrap {
        flex-direction: column;
        max-width: 400px;
        gap: 1.25rem;
    }
    .lc__logo--provider,
    .lc__logo--thaid { height: 120px; }
    .lc__logo-wrap   { height: 130px; }
    .lc__body        { padding: 1.5rem 1.25rem 1.25rem; }
    .lc__title       { font-size: 1rem; }
}