/* Giao diện đăng nhập riêng của app Quản lý tài sản (QLTS): tông CAM + VÀNG, viền LED chạy quanh form.
   Nạp SAU site.css (bản copy từ app Phân ca) nên ghi đè các luật .login-* của nó mà không phải sửa site.css.
   Thiết kế mobile-first: điện thoại dọc là trường hợp chính, PC chỉ nới rộng khung. */

@property --led-angle {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg;
}

.qlts-login {
    --q-orange: #ff7a00;
    --q-amber: #ffa800;
    --q-yellow: #ffd23f;
    --q-ink: #3a1d00;
    --q-muted: #7a5a30;
    --q-cream: #fff8e6;
    --q-blue: #0b52d9; /* xanh logo Co.op Smile */
    --q-card-inset: inset 0 0 0 1px rgba(255, 255, 255, .22);
    min-height: 100vh;
    min-height: 100dvh;
    overflow-x: hidden;
    overflow-y: auto; /* màn thấp (điện thoại nằm ngang) phải cuộn được, không cắt mất nút Đăng nhập */
    /* Nền TRANG: trắng chuyển xám xanh nhạt. */
    background:
        radial-gradient(60vmax 45vmax at 0% 0%, #ffffff 0%, rgba(255, 255, 255, 0) 65%),
        linear-gradient(160deg, #ffffff 0%, #eef3f9 42%, #d6e1ee 100%);
}

/* Lớp hoa văn chấm mờ + hai vệt sáng trôi chậm: tạo chiều sâu mà không tốn ảnh. */
.qlts-login::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: radial-gradient(rgba(60, 100, 160, .10) 1.4px, transparent 1.6px);
    background-size: 26px 26px;
    -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .55), transparent 70%);
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, .55), transparent 70%);
}

.qlts-login::after {
    display: none; /* tắt vệt xanh của site.css */
}

.qlts-login .login-decoration {
    position: fixed;
    border-radius: 999px;
    filter: blur(2px);
    opacity: .9;
}

.qlts-login .login-decoration-top {
    width: 520px;
    height: 190px;
    top: -60px;
    left: -200px;
    background: linear-gradient(140deg, rgba(255, 255, 255, .95), rgba(205, 220, 238, .55) 60%, transparent);
    transform: rotate(-14deg);
    animation: qltsDrift 14s ease-in-out infinite alternate;
}

.qlts-login .login-decoration-bottom {
    width: 560px;
    height: 200px;
    right: -230px;
    bottom: -70px;
    background: linear-gradient(140deg, rgba(150, 178, 212, .55), rgba(120, 152, 196, .35) 60%, transparent);
    transform: rotate(-14deg);
    animation: qltsDrift 16s ease-in-out infinite alternate-reverse;
}

@keyframes qltsDrift {
    from { translate: 0 0; }
    to { translate: 28px 18px; }
}

/* ---------- Khung đăng nhập + viền LED ---------- */

@keyframes qltsLedSpin {
    to { --led-angle: 360deg; }
}

@keyframes qltsLedPulse {
    0%, 100% {
        box-shadow: var(--q-card-inset), 0 24px 60px rgba(10, 40, 120, .28), 0 0 10px 1px rgba(46, 140, 255, .55), 0 0 24px 2px rgba(22, 112, 255, .30);
    }

    50% {
        box-shadow: var(--q-card-inset), 0 24px 60px rgba(10, 40, 120, .28), 0 0 18px 3px rgba(127, 220, 255, .95), 0 0 46px 8px rgba(22, 112, 255, .55);
    }
}

.qlts-login .login-card {
    position: relative;
    z-index: 2;
    width: min(100%, 460px);
    padding: 26px 22px 22px;
    border: 4px solid transparent;
    border-radius: 26px;
    /* Nền KHUNG (không phải nền trang): xanh trơn, cùng màu xanh của logo Co.op Smile (đổi ở biến --q-blue).
       Lớp dưới cùng (border-box) là dải màu conic quay tròn = viền LED xanh (đậm → xanh da trời → trắng sáng). */
    background:
        linear-gradient(var(--q-blue), var(--q-blue)) padding-box,
        conic-gradient(from var(--led-angle), #0a2f9e 0deg, #1670ff 80deg, #46b4ff 140deg, #ffffff 172deg, #7fdcff 196deg, #2e8cff 232deg, #1054d8 290deg, #0a2f9e 360deg) border-box;
    color: #fff;
    animation: qltsLedSpin 4.5s linear infinite, qltsLedPulse 2.6s ease-in-out infinite, appContentFadeIn .22s ease-out;
}

@media (min-width: 576px) {
    .qlts-login .login-card {
        padding: 34px 38px 28px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .qlts-login .login-card {
        animation: none;
        box-shadow: var(--q-card-inset), 0 24px 60px rgba(10, 40, 120, .28), 0 0 22px 3px rgba(46, 140, 255, .7);
    }

    .qlts-login .login-decoration {
        animation: none;
    }
}

/* ---------- Logo + tiêu đề ---------- */

.qlts-login .login-logo-wrap {
    width: min(100%, 180px);
    height: auto;
    aspect-ratio: 1000 / 226;
    padding: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    overflow: visible;
}

.qlts-login .login-logo-wrap img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 6px 8px rgba(0, 10, 90, .55));
}

.qlts-login .login-title {
    margin-top: 4px;
    font-size: clamp(1.25rem, 5.6vw, 1.55rem);
    font-weight: 800;
    letter-spacing: .04em;
    background: linear-gradient(90deg, #ffb347, #ffe27a 50%, #ffc233);
    filter: drop-shadow(0 2px 2px rgba(0, 10, 90, .55));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--q-orange); /* dự phòng nếu trình duyệt không hỗ trợ background-clip: text */
}

.qlts-login .login-card form {
    margin-top: 20px;
}

.qlts-login .login-subtitle {
    margin-top: 4px;
    color: #dbe8ff;
    font-size: .95rem;
}

.qlts-login .login-icon-badge {
    background: linear-gradient(135deg, #fff1c2, #ffd23f);
    color: #b34700;
    box-shadow: 0 6px 16px rgba(255, 140, 0, .30);
}

/* ---------- Ô nhập + nút ---------- */

.qlts-login .form-label {
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 10, 90, .5);
}

/* Thông báo lỗi đỏ mặc định mờ trên nền xanh: dùng hồng nhạt đậm nét. */
.qlts-login .text-danger {
    color: #ffd6d6 !important;
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(0, 10, 90, .6);
}

.qlts-login .app-input-group .input-group-text,
.qlts-login .app-input-group .form-control,
.qlts-login .password-toggle {
    min-height: 48px;
    border-color: #f0d9a8;
    background-color: #fffaf0;
}

.qlts-login .app-input-group .input-group-text {
    color: #d97500;
}

.qlts-login .app-input-group .form-control {
    font-size: 1rem; /* >= 16px: iOS không tự phóng to trang khi chạm vào ô nhập */
    color: var(--q-ink);
}

.qlts-login .app-input-group .form-control:focus {
    border-color: #ff9d00;
    background-color: #fff;
    box-shadow: 0 0 0 .22rem rgba(255, 168, 0, .30);
}

.qlts-login .password-toggle {
    color: #b36200;
}

.qlts-login .password-toggle:hover,
.qlts-login .password-toggle:focus {
    background: #ffe9b8;
    border-color: #ff9d00;
    color: #8a4a00;
}

.qlts-login .app-btn-primary {
    min-height: 50px;
    font-size: 1.02rem;
    letter-spacing: .02em;
    /* Chữ nâu đậm trên nền cam-vàng: tương phản đủ đọc (chữ trắng trên cam vàng sẽ mờ). */
    color: #3a1d00;
    background: linear-gradient(135deg, #ffb800 0%, #ff8a00 100%);
    border: 0;
    border-radius: 12px;
    box-shadow: 0 10px 22px rgba(255, 122, 0, .38), inset 0 1px 0 rgba(255, 255, 255, .55);
    transition: transform .12s ease, box-shadow .2s ease, filter .2s ease;
}

.qlts-login .app-btn-primary:hover,
.qlts-login .app-btn-primary:focus-visible {
    color: #2b1500;
    filter: brightness(1.05) saturate(1.08);
    box-shadow: 0 12px 28px rgba(255, 122, 0, .5), 0 0 0 .22rem rgba(255, 210, 63, .55);
}

.qlts-login .app-btn-primary:active {
    transform: translateY(1px) scale(.995);
}

.qlts-login .login-security {
    background: var(--q-cream);
    border: 1px solid #ffd98a;
    color: #7a4b00;
}

.qlts-login .alert-danger {
    border-radius: 12px;
}

/* ---------- Màn rất nhỏ / nằm ngang ---------- */

@media (max-width: 380px) {
    .qlts-login .login-card {
        padding: 20px 16px 18px;
        border-radius: 20px;
    }

    .qlts-login .login-security {
        font-size: .78rem;
    }
}

@media (max-height: 520px) and (orientation: landscape) {
    /* Điện thoại nằm ngang: gọn lại, căn từ trên xuống, để cuộn được. */
    .qlts-login .container {
        align-items: flex-start !important;
        min-height: 0 !important;
        padding-top: 14px !important;
        padding-bottom: 14px !important;
    }

    .qlts-login .login-logo-wrap {
        width: 120px;
        margin-bottom: .5rem !important;
    }

    .qlts-login .login-security {
        display: none;
    }
}

/* Vùng an toàn của tai thỏ/thanh điều hướng iPhone. */
@supports (padding: max(0px)) {
    .qlts-login .container {
        padding-left: max(12px, env(safe-area-inset-left));
        padding-right: max(12px, env(safe-area-inset-right));
        padding-bottom: max(1.5rem, env(safe-area-inset-bottom));
    }
}