/* ==========================================================================
   HQC FINANCE ERP - LOGIN REFERENCE STYLE V3
   Inspired by modern SaaS login reference.
   Login only.
   ========================================================================== */

/* Ép nền Login */
html:has(.fi-simple-layout),
body:has(.fi-simple-layout),
body.fi-body:has(.fi-simple-layout) {
    min-height: 100vh !important;
    margin: 0 !important;
    overflow-x: hidden !important;
    background:
        linear-gradient(
            90deg,
            rgba(246,250,255,.14) 0%,
            rgba(246,250,255,.08) 52%,
            rgba(248,250,252,.34) 72%,
            rgba(248,250,252,.52) 100%
        ),
        url('/images/login/hqc-login-final.jpg') center center / cover no-repeat fixed !important;
}

/* Xóa mọi nền trắng/xám cũ ở wrapper */
.fi-simple-layout,
.fi-simple-layout > *,
.fi-simple-layout .fi-simple-main-ctn {
    background-color: transparent !important;
}

.fi-simple-layout {
    min-height: 100vh !important;
    width: 100% !important;
}

.fi-simple-layout .fi-simple-main-ctn {
    position: relative !important;
    z-index: 1 !important;
    width: 100% !important;
    min-height: 100vh !important;
    max-width: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    padding: 42px clamp(52px, 8vw, 132px) !important;
    box-sizing: border-box !important;
}

/* Brand góc trái trên giống mẫu */
.fi-simple-layout .fi-simple-main-ctn::before {
    content: "HQC Finance ERP\A Quản trị dòng tiền" !important;
    white-space: pre !important;
    position: absolute !important;
    left: clamp(44px, 5vw, 86px) !important;
    top: 50px !important;
    color: #102a56 !important;
    font-size: 21px !important;
    line-height: 1.28 !important;
    font-weight: 800 !important;
    letter-spacing: -.02em !important;
    text-shadow: 0 2px 12px rgba(255,255,255,.75) !important;
    z-index: 2 !important;
    pointer-events: none !important;
}

/* Xóa text inject cũ */
.fi-simple-layout .hqc-v70-login-kicker,
.fi-simple-layout .hqc-v70-login-copy,
.fi-simple-layout .hqc-v70-login-hero,
.fi-simple-layout [class*="hqc-v70-login"],
.fi-simple-layout [class*="login-kicker"],
.fi-simple-layout [class*="login-copy"],
.fi-simple-layout [class*="login-hero"] {
    display: none !important;
}

/* Card lớn bên phải */
.fi-simple-layout .fi-simple-main {
    position: relative !important;
    width: min(500px, calc(100vw - 40px)) !important;
    max-width: 500px !important;
    margin: 0 !important;
    padding: 40px 42px 30px !important;
    border: 1px solid rgba(226,232,240,.92) !important;
    border-radius: 24px !important;
    background: rgba(255,255,255,.965) !important;
    box-shadow:
        0 28px 70px rgba(30,64,175,.12),
        0 10px 30px rgba(15,23,42,.08) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
}

/* Icon vòng tròn trên card */
.fi-simple-layout .fi-simple-main::before {
    content: "👤" !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 58px !important;
    height: 58px !important;
    margin: 0 auto 14px !important;
    border-radius: 999px !important;
    background: #eef5ff !important;
    color: #2563eb !important;
    font-size: 27px !important;
    box-shadow: inset 0 0 0 1px #dbeafe !important;
}

/* Header */
.fi-simple-layout .fi-simple-header {
    margin-bottom: 24px !important;
    text-align: center !important;
}

/* Logo HQC nhỏ trên cùng */
.fi-simple-layout .fi-logo {
    max-height: 66px !important;
    width: auto !important;
    margin: 0 auto 14px !important;
}

/* Heading theo mẫu */
.fi-simple-layout .fi-simple-header-heading {
    color: #102a56 !important;
    font-size: 38px !important;
    line-height: 1.05 !important;
    font-weight: 850 !important;
    letter-spacing: -.04em !important;
}

/* Nếu Filament có subheading thì ẩn để sạch */
.fi-simple-layout .fi-simple-header-subheading {
    display: none !important;
}

/* Thêm subtitle dưới heading */
.fi-simple-layout .fi-simple-header::after {
    content: "Đăng nhập để quản lý dòng tiền, công nợ và báo cáo dự án" !important;
    display: block !important;
    margin-top: 10px !important;
    color: #64748b !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
    font-weight: 500 !important;
}

/* Form spacing */
.fi-simple-layout form {
    gap: 16px !important;
}

.fi-simple-layout .fi-fo-component-ctn {
    gap: 16px !important;
}

/* Label */
.fi-simple-layout .fi-fo-field-wrp-label,
.fi-simple-layout .fi-fo-field-wrp-label span,
.fi-simple-layout label {
    color: #334155 !important;
    font-weight: 650 !important;
}

/* Input */
.fi-simple-layout .fi-input-wrp {
    min-height: 54px !important;
    border: 1px solid #d7e0eb !important;
    border-radius: 12px !important;
    background: #fff !important;
    box-shadow: none !important;
    transition: .16s ease !important;
}

.fi-simple-layout .fi-input-wrp:hover {
    border-color: #c6d2e1 !important;
}

.fi-simple-layout .fi-input-wrp:focus-within {
    border-color: #60a5fa !important;
    box-shadow: 0 0 0 4px rgba(59,130,246,.10) !important;
}

.fi-simple-layout input {
    color: #183153 !important;
    font-size: 15px !important;
}

.fi-simple-layout input::placeholder {
    color: #94a3b8 !important;
    opacity: 1 !important;
}

/* Checkbox */
.fi-simple-layout .fi-checkbox-input {
    border-color: #cbd5e1 !important;
    background: #fff !important;
}

/* Primary Login button xanh như mẫu */
.fi-simple-layout form .fi-btn.fi-color-primary,
.fi-simple-layout .fi-form-actions .fi-btn {
    width: 100% !important;
    min-height: 54px !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: linear-gradient(135deg,#2563eb 0%,#4f8df7 100%) !important;
    color: #fff !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    box-shadow: 0 12px 24px rgba(37,99,235,.19) !important;
    transition: .16s ease !important;
}

.fi-simple-layout form .fi-btn.fi-color-primary:hover,
.fi-simple-layout .fi-form-actions .fi-btn:hover {
    transform: translateY(-1px) !important;
    filter: brightness(1.03) !important;
}

/* Footer */
.fi-simple-layout .fi-simple-main::after {
    content: "© 2026 Hoang Quan Group • Developed by DucToanIT" !important;
    display: block !important;
    margin-top: 22px !important;
    text-align: center !important;
    color: #94a3b8 !important;
    font-size: 12px !important;
    line-height: 1.4 !important;
}

/* Tablet */
@media (max-width: 1024px) {
    .fi-simple-layout .fi-simple-main-ctn {
        justify-content: center !important;
        padding: 26px !important;
    }

    .fi-simple-layout .fi-simple-main-ctn::before {
        display: none !important;
    }

    .fi-simple-layout .fi-simple-main {
        width: min(500px, calc(100vw - 32px)) !important;
        max-width: 500px !important;
    }
}

/* Mobile app login */
@media (max-width: 640px) {
    html:has(.fi-simple-layout),
    body:has(.fi-simple-layout),
    body.fi-body:has(.fi-simple-layout) {
        background:
            linear-gradient(rgba(244,248,255,.80),rgba(248,250,252,.92)),
            url('/images/login/hqc-login-final.jpg') center center / cover no-repeat fixed !important;
    }

    .fi-simple-layout .fi-simple-main-ctn {
        min-height: 100dvh !important;
        padding: 14px !important;
    }

    .fi-simple-layout .fi-simple-main {
        width: 100% !important;
        max-width: 430px !important;
        padding: 28px 20px 22px !important;
        border-radius: 22px !important;
    }

    .fi-simple-layout .fi-simple-header-heading {
        font-size: 31px !important;
    }

    .fi-simple-layout .fi-simple-header::after {
        font-size: 13px !important;
    }

    .fi-simple-layout .fi-logo {
        max-height: 62px !important;
    }
}

/* HQC_LOGIN_POLISH_V31_START */

/* 1) Giữ toàn trang vừa đúng viewport */
html:has(.fi-simple-layout),
body:has(.fi-simple-layout) {
    height: 100% !important;
    min-height: 100% !important;
    overflow: hidden !important;
}

.fi-simple-layout {
    height: 100dvh !important;
    min-height: 100dvh !important;
    overflow: hidden !important;
}

.fi-simple-layout .fi-simple-main-ctn {
    height: 100dvh !important;
    min-height: 100dvh !important;
    overflow: hidden !important;
    padding-top: clamp(14px, 2.2vh, 28px) !important;
    padding-bottom: clamp(14px, 2.2vh, 28px) !important;
}

/* 2) Brand HQC Finance ERP góc trái: sắc nét, cân chữ hơn */
.fi-simple-layout .fi-simple-main-ctn::before {
    left: clamp(38px, 4.2vw, 72px) !important;
    top: clamp(28px, 4.2vh, 46px) !important;
    color: #0b2b57 !important;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif !important;
    font-size: clamp(17px, 1.45vw, 22px) !important;
    line-height: 1.26 !important;
    font-weight: 850 !important;
    letter-spacing: -.028em !important;
    text-rendering: geometricPrecision !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    text-shadow:
        0 1px 0 rgba(255,255,255,.95),
        0 2px 10px rgba(255,255,255,.35) !important;
}

/* 3) Card login gọn chiều cao để không phải cuộn */
.fi-simple-layout .fi-simple-main {
    width: min(500px, calc(100vw - 40px)) !important;
    max-width: 500px !important;
    max-height: calc(100dvh - 28px) !important;
    overflow: hidden !important;
    padding:
        clamp(20px, 2.5vh, 30px)
        clamp(26px, 2.6vw, 38px)
        clamp(16px, 2vh, 24px) !important;
    border-radius: 22px !important;
}

/* 4) Thu gọn phần đầu card */
.fi-simple-layout .fi-simple-main::before {
    width: 46px !important;
    height: 46px !important;
    margin-bottom: 7px !important;
    font-size: 21px !important;
}

.fi-simple-layout .fi-simple-header {
    margin-bottom: clamp(12px, 1.8vh, 18px) !important;
}

.fi-simple-layout .fi-logo {
    max-height: clamp(46px, 6.2vh, 60px) !important;
    margin-bottom: 7px !important;
}

.fi-simple-layout .fi-simple-header-heading {
    font-size: clamp(28px, 3.2vh, 36px) !important;
    line-height: 1.02 !important;
}

.fi-simple-layout .fi-simple-header::after {
    margin-top: 7px !important;
    font-size: 12.5px !important;
    line-height: 1.4 !important;
}

/* 5) Form compact nhưng vẫn dễ thao tác */
.fi-simple-layout form,
.fi-simple-layout .fi-fo-component-ctn {
    gap: clamp(10px, 1.4vh, 14px) !important;
}

.fi-simple-layout .fi-fo-field-wrp-label {
    margin-bottom: 4px !important;
}

.fi-simple-layout .fi-input-wrp {
    min-height: clamp(44px, 5.6vh, 50px) !important;
}

.fi-simple-layout input {
    font-size: 14px !important;
}

.fi-simple-layout form .fi-btn.fi-color-primary,
.fi-simple-layout .fi-form-actions .fi-btn {
    min-height: clamp(44px, 5.8vh, 50px) !important;
}

.fi-simple-layout .fi-simple-main::after {
    margin-top: clamp(10px, 1.5vh, 16px) !important;
    font-size: 11px !important;
}

/* 6) Laptop thấp chiều cao: tự thu gọn thêm */
@media (min-width: 1025px) and (max-height: 760px) {
    .fi-simple-layout .fi-simple-main {
        padding: 16px 28px 14px !important;
        max-height: calc(100dvh - 16px) !important;
    }

    .fi-simple-layout .fi-simple-main::before {
        width: 38px !important;
        height: 38px !important;
        margin-bottom: 4px !important;
        font-size: 18px !important;
    }

    .fi-simple-layout .fi-logo {
        max-height: 42px !important;
        margin-bottom: 4px !important;
    }

    .fi-simple-layout .fi-simple-header {
        margin-bottom: 10px !important;
    }

    .fi-simple-layout .fi-simple-header-heading {
        font-size: 27px !important;
    }

    .fi-simple-layout .fi-simple-header::after {
        font-size: 11.5px !important;
        margin-top: 5px !important;
    }

    .fi-simple-layout form,
    .fi-simple-layout .fi-fo-component-ctn {
        gap: 8px !important;
    }

    .fi-simple-layout .fi-input-wrp {
        min-height: 42px !important;
    }

    .fi-simple-layout form .fi-btn.fi-color-primary,
    .fi-simple-layout .fi-form-actions .fi-btn {
        min-height: 44px !important;
    }

    .fi-simple-layout .fi-simple-main::after {
        margin-top: 8px !important;
        font-size: 10.5px !important;
    }
}

/* 7) Mobile vẫn cho cuộn nếu bàn phím ảo mở, tránh kẹt form */
@media (max-width: 1024px) {
    html:has(.fi-simple-layout),
    body:has(.fi-simple-layout),
    .fi-simple-layout,
    .fi-simple-layout .fi-simple-main-ctn {
        height: auto !important;
        min-height: 100dvh !important;
        overflow-y: auto !important;
    }

    .fi-simple-layout .fi-simple-main {
        max-height: none !important;
        overflow: visible !important;
    }
}

/* HQC_LOGIN_POLISH_V31_END */

/* HQC_LOGIN_POLISH_V32_START */

/* LOGIN luôn dùng light style, không bị dark mode của Admin ảnh hưởng */
.dark .fi-simple-layout,
.dark body:has(.fi-simple-layout),
.dark html:has(.fi-simple-layout) {
    color-scheme: light !important;
}

/* Bỏ icon user nằm phía trên logo */
.fi-simple-layout .fi-simple-main::before {
    content: none !important;
    display: none !important;
}

/* Brand góc trái: 2 dòng, xanh + vàng gradient */
.fi-simple-layout .fi-simple-main-ctn::before {
    content: "HQC Finance ERP" !important;
    white-space: nowrap !important;
    left: clamp(38px, 4.2vw, 72px) !important;
    top: clamp(30px, 4.4vh, 48px) !important;
    color: #0b4ea2 !important;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif !important;
    font-size: clamp(18px, 1.5vw, 23px) !important;
    line-height: 1.15 !important;
    font-weight: 900 !important;
    letter-spacing: -.03em !important;
    text-shadow:
        0 1px 0 rgba(255,255,255,.96),
        0 2px 10px rgba(15,77,146,.12) !important;
}

/* Dòng vàng bên dưới brand */
.fi-simple-layout .fi-simple-main-ctn::after {
    content: "Quản trị dòng tiền" !important;
    position: absolute !important;
    left: clamp(38px, 4.2vw, 72px) !important;
    top: clamp(56px, 7.4vh, 80px) !important;
    z-index: 2 !important;
    pointer-events: none !important;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif !important;
    font-size: clamp(15px, 1.12vw, 18px) !important;
    line-height: 1.2 !important;
    font-weight: 850 !important;
    letter-spacing: -.015em !important;
    background: linear-gradient(90deg, #f6c945 0%, #ffb300 52%, #f59e0b 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: #e9a900 !important;
    filter: drop-shadow(0 1px 0 rgba(255,255,255,.8)) !important;
}

/* Form cao hơn nhẹ, cân đối hơn */
.fi-simple-layout .fi-simple-main {
    padding:
        clamp(26px, 3.0vh, 36px)
        clamp(28px, 2.8vw, 40px)
        clamp(22px, 2.6vh, 30px) !important;
    min-height: clamp(500px, 66vh, 610px) !important;
    max-height: calc(100dvh - 24px) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}

/* Logo & heading spacing */
.fi-simple-layout .fi-logo {
    max-height: clamp(52px, 6.8vh, 66px) !important;
    margin-bottom: 8px !important;
}

.fi-simple-layout .fi-simple-header {
    margin-bottom: clamp(16px, 2.1vh, 22px) !important;
}

.fi-simple-layout .fi-simple-header-heading {
    font-size: clamp(30px, 3.4vh, 38px) !important;
}

/* Laptop thấp: vẫn vừa khung */
@media (min-width: 1025px) and (max-height: 760px) {
    .fi-simple-layout .fi-simple-main {
        min-height: 0 !important;
        max-height: calc(100dvh - 14px) !important;
        padding: 16px 28px 14px !important;
    }

    .fi-simple-layout .fi-simple-main-ctn::before {
        top: 22px !important;
    }

    .fi-simple-layout .fi-simple-main-ctn::after {
        top: 48px !important;
    }
}

/* Tablet/mobile: bỏ brand trái, form ổn định */
@media (max-width: 1024px) {
    .fi-simple-layout .fi-simple-main-ctn::before,
    .fi-simple-layout .fi-simple-main-ctn::after {
        display: none !important;
    }

    .fi-simple-layout .fi-simple-main {
        min-height: 0 !important;
        max-height: none !important;
        width: min(460px, calc(100vw - 28px)) !important;
    }
}

@media (max-width: 640px) {
    .fi-simple-layout .fi-simple-main {
        width: 100% !important;
        max-width: 430px !important;
        padding: 24px 18px 20px !important;
        border-radius: 20px !important;
    }

    .fi-simple-layout .fi-simple-header-heading {
        font-size: 29px !important;
    }
}

/* HQC_LOGIN_POLISH_V32_END */