/**
 * ໜ້າເຂົ້າສູ່ລະບົບ php-hr — ໂຄງແບບ ແລະ ຈັງຫວະ animation ຕາມ hr_v2
 * (hr_v2/apps/webapp/src/features/auth/*): ຝັ່ງຊ້າຍເປັນ cover ແບຣນເຕັມຂອບ
 * ມີລາຍເຊັນຖືກ "ຂຽນ" ຈາກຊ້າຍຫາຂວາ, ຝັ່ງຂວາເປັນຟອມ 2 ຂັ້ນ.
 * ຈໍນ້ອຍກວ່າ 992px: cover ຫຍໍ້ຢູ່ເທິງ ຟອມຕາມລຸ່ມ.
 *
 * ໝາຍເຫດ: hr_v2 ຂຽນດ້ວຍ Tailwind v4 + oklch. ບ່ອນນີ້ເປັນ CSS ລ້ວນ ແລະ ໃຊ້
 * **ສີແບຣນຂອງ hr_v1 ເອງ** (--hr-brand-* ໃນ hr-ui.css) ບໍ່ແມ່ນສີແດງຂອງ hr_v2 —
 * ບໍ່ດັ່ງນັ້ນໜ້າ login ຈະເປັນສີໜຶ່ງ ແລ້ວ sidebar/topbar ຫຼັງເຂົ້າລະບົບເປັນອີກສີໜຶ່ງ.
 *
 * ໄຟລ໌ນີ້ໃຊ້ບ່ອນດຽວ — php-hr/login.php. ບໍ່ຂຶ້ນກັບ AdminLTE/Bootstrap.
 */

/* ══════════════════ ໂຕນສີ ແລະ ພື້ນຖານ ══════════════════ */

/* ໜ້ານີ້ບໍ່ໂຫຼດ AdminLTE/Bootstrap ອີກແລ້ວ ຈຶ່ງຕ້ອງລ້າງ margin ເອງ */
html,
body {
    margin: 0;
    padding: 0;
}

body {
    background: #fff;
    -webkit-font-smoothing: antialiased;
}

.hr-login *,
.hr-login *::before,
.hr-login *::after {
    box-sizing: border-box;
}

.hr-login {
    /* ໄລ່ສີພື້ນແບຣນ — ໄລ່ຈາກ brand-900 → 700 → 600 ຂອງ hr-ui.css */
    --hl-grad-1: #7f1d1d;
    --hl-grad-2: #b91c1c;
    --hl-grad-3: #dc2626;
    --hl-brand: #b91c1c;
    --hl-brand-hover: #991b1b;
    --hl-brand-rgb: 185 28 28;

    --hl-fg: #0f172a;
    --hl-muted: #64748b;
    --hl-border: #e2e8f0;
    --hl-surface: #ffffff;
    --hl-danger: #b3261e;

    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    min-height: 100vh;
    min-height: 100svh;
    overflow: hidden;
    background: var(--hl-surface);
    color: var(--hl-fg);
    font-family: var(--hr-font, "Noto Sans Lao", "Noto Serif Lao", -apple-system,
        BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
}

/* ຄໍລຳ grid ຖືກ min-content ດັນໃຫ້ກວ້າງກວ່າຈໍໄດ້ — ຂໍ້ຄວາມລາວບໍ່ມີຊ່ອງວ່າງ ຈຶ່ງ
   ຕັດແຖວເອງບໍ່ໄດ້ ແລ້ວໜ້າຈະເລື່ອນຊ້າຍ-ຂວາໃນມືຖື. min-width:0 ປົດລັອກອັນນີ້ */
.hr-login>* {
    min-width: 0;
}

/* ຈໍນ້ອຍ: cover ຫຍໍ້ເປັນແຜ່ນຢູ່ເທິງ (ສູງເທົ່າເນື້ອໃນ) ຟອມກິນທີ່ເຫຼືອ.
   ຖ້າປ່ອຍໃຫ້ແຖວ auto ຢືດຕາມ align-content:stretch cover ຈະສູງເຄິ່ງຈໍ
   ແລ້ວດັນຟອມລົງໃຕ້ຂອບຈໍ — ຜູ້ໃຊ້ຕ້ອງເລື່ອນລົງກ່ອນຈຶ່ງເຫັນຊ່ອງກອກ */
@media (max-width: 991.98px) {
    .hr-login {
        grid-template-rows: auto 1fr;
    }

    .hr-login__sig-slot {
        padding: 20px 0 12px;
    }
}

@media (min-width: 992px) {
    .hr-login {
        /* ຝັ່ງແບຣນກວ້າງກວ່າຟອມເລັກນ້ອຍ ຄືກັບ lg:grid-cols-[1.05fr_1fr] ຂອງ hr_v2 */
        grid-template-columns: 1.05fr 1fr;
    }
}

/* ແສງແບຣນຈາງໆ + ລາຍຈຸດຫຼັງຝັ່ງຟອມ — ບໍ່ໃຫ້ພື້ນຂາວເບິ່ງແປນເກີນໄປ */
.hr-login__glow,
.hr-login__dots {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.hr-login__glow {
    background: radial-gradient(70% 55% at 50% -10%, var(--hl-grad-2), transparent);
    opacity: 0.1;
}

.hr-login__dots {
    background-image: radial-gradient(var(--hl-border) 1px, transparent 1px);
    background-size: 24px 24px;
    opacity: 0.4;
}

/* ══════════════════ ຝັ່ງຊ້າຍ — cover ແບຣນ ══════════════════ */

.hr-login__cover {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 24px;
    color: #fff;
    background-image: linear-gradient(135deg,
            var(--hl-grad-1) 0%,
            var(--hl-grad-2) 55%,
            var(--hl-grad-3) 100%);
}

@media (min-width: 992px) {
    .hr-login__cover {
        padding: 40px;
    }
}

/* ຕາຕະລາງເສັ້ນຈາງໆເທິງພື້ນແດງ — ຈາງລົງເຄິ່ງລຸ່ມດ້ວຍ mask */
.hr-login__grid {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgb(255 255 255 / 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgb(255 255 255 / 0.035) 1px, transparent 1px);
    background-size: 44px 44px;
    -webkit-mask-image: linear-gradient(180deg, #000, #000 55%, transparent);
    mask-image: linear-gradient(180deg, #000, #000 55%, transparent);
}

/* ວົງມົນຈາງໆ ເພີ່ມຄວາມເລິກໃຫ້ cover — ບໍ່ແຍ່ງຄວາມສົນໃຈຈາກລາຍເຊັນ */
.hr-login__blobs {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.hr-login__blob {
    position: absolute;
    border-radius: 9999px;
}

.hr-login__blob--tl {
    top: -96px;
    left: -80px;
    width: 288px;
    height: 288px;
    background: rgb(255 255 255 / 0.1);
    filter: blur(40px);
}

.hr-login__blob--br {
    right: -64px;
    bottom: -64px;
    width: 320px;
    height: 320px;
    background: rgb(0 0 0 / 0.15);
    filter: blur(40px);
}

.hr-login__blob--ring {
    bottom: 33.333%;
    left: 10%;
    width: 96px;
    height: 96px;
    border: 1px solid rgb(255 255 255 / 0.1);
}

/* ---- ແຖວເທິງ: ໂລໂກ + ຊື່ລະບົບ ຊ້າຍ · ໂມງ ຂວາ ---- */
.hr-login__top {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.hr-login__lockup {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.hr-login__logo {
    width: 40px;
    height: 40px;
    flex: none;
    border-radius: 12px;
    background: #fff;
    object-fit: contain;
    padding: 2px;
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.15);
}

@media (min-width: 992px) {
    .hr-login__logo {
        width: 44px;
        height: 44px;
    }
}

.hr-login__lockup>div {
    min-width: 0;
}

.hr-login__name,
.hr-login__tagline {
    /* ຄຳລາວຍາວໆຕັດແຖວໄດ້ ແທນທີ່ຈະດັນຄໍລຳໃຫ້ກວ້າງ */
    overflow-wrap: anywhere;
}

.hr-login__name {
    margin: 0;
    font-size: 16px;
    font-weight: 900;
    letter-spacing: -0.01em;
    line-height: 1.2;
}

@media (min-width: 992px) {
    .hr-login__name {
        font-size: 18px;
    }
}

.hr-login__tagline {
    margin: 2px 0 0;
    font-size: 12px;
    color: rgb(255 255 255 / 0.7);
    line-height: 1.3;
}

/* ໂມງ — ບໍ່ມີໃນ hr_v2 ແຕ່ hr_v1 ເປັນລະບົບເຂົ້າ-ອອກວຽກ ຜູ້ໃຊ້ອ່ານເວລາຢູ່ໜ້ານີ້ປະຈຳ.
   ວາງມຸມຂວາເທິງແບບຫຍໍ້ ບໍ່ໃຫ້ແຍ່ງລາຍເຊັນກາງຈໍຄືເກົ່າ (ເກົ່າໃຫຍ່ 68px) */
.hr-login__clock {
    flex: none;
    text-align: right;
    line-height: 1.15;
}

.hr-login__clock-time {
    display: block;
    font-size: 20px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
}

.hr-login__clock-date {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    color: rgb(255 255 255 / 0.72);
    white-space: nowrap;
}

@media (min-width: 992px) {
    .hr-login__clock-time {
        font-size: 26px;
    }
}

/* ---- ລາຍເຊັນແບຣນ — ຈຸດເດັ່ນກາງ cover ---- */
.hr-login__sig-slot {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    padding: 32px 0;
}

@media (min-width: 992px) {
    .hr-login__sig-slot {
        padding: 48px 0;
    }
}

.hr-login__sig {
    position: relative;
    width: 100%;
    max-width: 280px;
    margin-inline: auto;
}

@media (min-width: 640px) {
    .hr-login__sig {
        max-width: 320px;
    }
}

@media (min-width: 992px) {
    .hr-login__sig {
        max-width: 430px;
    }
}

@media (min-width: 1280px) {
    .hr-login__sig {
        max-width: 500px;
    }
}

/* ແສງ radial ຈາງໆຫຼັງລາຍເຊັນ — ບໍ່ມີ animation */
.hr-login__sig-glow {
    position: absolute;
    top: -16px;
    bottom: -16px;
    left: -48px;
    right: -48px;
    pointer-events: none;
    background: radial-gradient(closest-side, rgb(255 255 255 / 0.12), transparent);
}

.hr-login__sig-box {
    position: relative;
    width: 100%;
    aspect-ratio: 560 / 190;
}

.hr-login__sig-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* ຊັ້ນຕົວໜັງສື — ສະແດງທັນທີໂດຍບໍ່ມີ animation delay */
.hr-login__sig-svg--text {
    clip-path: none !important;
}

.hr-login__sig-word {
    font-family: "Nuanta", "Noto Sans Lao", system-ui, sans-serif;
}

/* ເສັ້ນ flourish ໃຕ້ຊື່ — ສະແດງທັນທີ */
.hr-login__sig-stroke {
    stroke-dasharray: none;
    stroke-dashoffset: 0 !important;
}

.hr-login__sig-pin {
    opacity: 1 !important;
    transform: none !important;
}

.hr-login__sig-sub {
    margin: 4px 0 0;
    text-align: center;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: rgb(255 255 255 / 0.85);
    opacity: 1 !important;
    transform: none !important;
}

/* ---- ຈຸດຂາຍຫຍໍ້ + ລິຂະສິດ — ເຊື່ອງໃນຈໍນ້ອຍເພື່ອບໍ່ໃຫ້ຟອມຖືກດັນລົງ ---- */
.hr-login__points {
    position: relative;
    display: none;
    margin: 0;
    padding: 0;
    list-style: none;
}

.hr-login__points li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: rgb(255 255 255 / 0.85);
}

.hr-login__points li + li {
    margin-top: 10px;
}

.hr-login__points ion-icon {
    flex: none;
    font-size: 15px;
    color: rgb(255 255 255 / 0.8);
}

.hr-login__copy {
    position: relative;
    display: none;
    margin: 20px 0 0;
    font-size: 11px;
    color: rgb(255 255 255 / 0.55);
}

@media (min-width: 992px) {

    .hr-login__points,
    .hr-login__copy {
        display: block;
    }
}

/* ══════════════════ ຝັ່ງຂວາ — ຟອມ ══════════════════ */

.hr-login__pane {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 24px;
}

@media (min-width: 640px) {
    .hr-login__pane {
        padding: 40px;
    }
}

@media (min-width: 992px) {
    .hr-login__pane {
        padding: 56px 40px;
    }
}

.hr-login__form {
    width: 100%;
    max-width: 440px;
    background: #ffffff;
    border: 1px solid var(--hl-border);
    border-radius: 24px;
    padding: 36px 32px;
}

@media (max-width: 639.98px) {
    .hr-login__form {
        border-radius: 20px;
        padding: 28px 20px;
    }
}

.hr-login__h1 {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.hr-login__lead {
    margin: 6px 0 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--hl-muted);
}

.hr-login__body {
    margin-top: 28px;
}

/* ---- ຕົວບອກຂັ້ນ (1/2) ---- */
.hl-steps {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
}

.hl-steps__bar {
    width: 28px;
    height: 4px;
    border-radius: 9999px;
    background: var(--hl-border);
    transition: background-color 0.2s ease;
}

.hl-steps__bar.is-on {
    background: var(--hl-brand);
}

.hl-steps__label {
    margin-left: 4px;
    font-size: 12px;
    color: var(--hl-muted);
}

.hl-step-title {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.hl-step-sub {
    margin: 4px 0 0;
    font-size: 14px;
    line-height: 1.55;
    color: var(--hl-muted);
}

/* ---- ຊ່ອງກອກ ---- */
.hl-field {
    margin-top: 12px;
}

.hl-label {
    display: block;
    margin-bottom: 6px;
    font-size: 14px;
    font-weight: 600;
}

.hl-input-wrap {
    position: relative;
}

.hl-input {
    width: 100%;
    height: 48px;
    padding: 10px 16px;
    border: 1px solid var(--hl-border);
    border-radius: 12px;
    background: #fff;
    color: var(--hl-fg);
    font-family: 'Nuanta', 'Noto Sans Lao', system-ui, sans-serif;
    font-size: 15px;
    font-weight: 500;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.hl-input::placeholder {
    color: #94a3b8;
}

.hl-input:focus {
    outline: none;
    border-color: var(--hl-brand);
    box-shadow: none !important;
    background: #ffffff;
}

.hl-input.is-invalid {
    border-color: var(--hl-danger);
    background-color: rgba(179, 38, 30, 0.03);
}

/* ປຸ່ມເບິ່ງ/ເຊື່ອງລະຫັດຜ່ານ — ຄື PasswordInput ຂອງ hr_v2 */
.hl-input--pw {
    padding-right: 48px;
}

.hl-eye {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--hl-muted);
    font-size: 20px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.hl-eye:hover {
    background: #f1f5f9;
    color: var(--hl-fg);
}

.hl-desc {
    margin: 6px 0 0;
    font-size: 12px;
    color: var(--hl-muted);
}

/* ຂໍ້ຄວາມຜິດພາດ — ວາງໃຕ້ຊ່ອງທີ່ຕ້ອງແກ້ ບໍ່ແມ່ນ toast ລອຍໆ */
.hl-error {
    margin: 6px 0 0;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--hl-danger);
    font-weight: 500;
}

.hl-error:empty {
    display: none;
}

/* ---- ແຖບຊື່ຮ້ານ (ຂັ້ນ 2) ---- */
.hl-shop {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
    padding-left: 14px;
    padding-right: 6px;
    border-radius: 12px;
    background: rgb(var(--hl-brand-rgb) / 0.08);
    color: var(--hl-brand);
    font-size: 14px;
    border: 1px solid rgb(var(--hl-brand-rgb) / 0.15);
}

/* ---- ປຸ່ມກັບຄືນ Arrow Back ---- */
.hl-back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 12px;
    padding: 6px 10px 6px 4px;
    border: 0;
    background: transparent;
    color: var(--hl-muted);
    font-family: 'Nuanta', 'Noto Sans Lao', system-ui, sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.15s ease;
}

.hl-back-link ion-icon {
    font-size: 18px;
}

.hl-back-link:hover {
    color: var(--hl-brand);
    background: rgb(var(--hl-brand-rgb) / 0.08);
}

.hl-shop__change:hover {
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* ---- ກ່ອງໝາຍຕິກ ---- */
.hl-check {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
}

.hl-check input {
    width: 18px;
    height: 18px;
    accent-color: var(--hl-brand);
    cursor: pointer;
    border-radius: 4px;
}

/* ---- ປຸ່ມ DrinkFlow Modern UI ---- */
.hl-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 48px;
    margin-top: 24px;
    padding: 0 20px;
    border: 0;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--hl-grad-3), var(--hl-grad-2));
    color: #fff;
    font-family: 'Nuanta', 'Noto Sans Lao', system-ui, sans-serif;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.01em;
    cursor: pointer;
    box-shadow: 0 8px 24px -4px rgba(185, 28, 28, 0.4), 0 4px 12px -2px rgba(185, 28, 28, 0.25);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.hl-btn ion-icon {
    font-size: 20px;
}

.hl-btn:hover {
    background: linear-gradient(135deg, var(--hl-brand), var(--hl-brand-hover));
    transform: translateY(-2px);
    box-shadow: 0 12px 28px -4px rgba(185, 28, 28, 0.5), 0 6px 16px -2px rgba(185, 28, 28, 0.35);
}

.hl-btn:active {
    transform: translateY(0);
    box-shadow: 0 4px 12px -2px rgba(185, 28, 28, 0.3);
}

.hl-btn[disabled] {
    opacity: 0.6;
    cursor: not-allowed;
}

.hl-btn--ghost {
    margin-top: 8px;
    background: transparent;
    color: var(--hl-fg);
    border: 1px solid var(--hl-border);
}

.hl-btn--ghost:hover {
    background: #f8fafc;
}

/* ວົງລໍ — ສະແດງແທນ icon ຕອນລໍຄຳຕອບຈາກເຊີເວີ */
.hl-spin {
    width: 16px;
    height: 16px;
    border: 2px solid rgb(255 255 255 / 0.4);
    border-top-color: #fff;
    border-radius: 9999px;
    animation: hl-spin 0.7s linear infinite;
}

/* ---- ບັດຜູ້ໃຊ້ທີ່ເກັບໄວ້ ---- */
.hl-profile {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 16px;
    padding: 14px;
    border: 1px solid var(--hl-border);
    border-radius: 12px;
    background: rgb(var(--hl-brand-rgb) / 0.04);
}

.hl-profile__avatar {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--hl-grad-2), var(--hl-grad-1));
    color: #fff;
    font-size: 30px;
}

.hl-profile__name {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
}

.hl-profile__meta {
    margin: 2px 0 0;
    font-size: 12px;
    color: var(--hl-muted);
}

.hl-profile__acts {
    display: flex;
    gap: 6px;
    margin-top: 8px;
}

.hl-chip {
    padding: 5px 10px;
    border: 1px solid var(--hl-border);
    border-radius: 6px;
    background: #fff;
    color: var(--hl-muted);
    font-family: inherit;
    font-size: 12px;
    cursor: pointer;
}

.hl-chip:hover {
    border-color: var(--hl-brand);
    color: var(--hl-brand);
}

.hl-chip--danger:hover {
    border-color: var(--hl-danger);
    color: var(--hl-danger);
}

/* ---- ຕີນຟອມ: ຕິດຕໍ່ຜູ້ດູແລ ---- */
.hr-login__help {
    margin: 32px 0 0;
    text-align: center;
    font-size: 12px;
    line-height: 1.7;
    color: var(--hl-muted);
}

.hr-login__help a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--hl-muted);
    text-decoration: underline;
    text-underline-offset: 4px;
}

.hr-login__help a:hover {
    color: var(--hl-brand);
}

.hr-login__help ion-icon {
    font-size: 14px;
}

/* ══════════════════ ຜ້າມານຕອນເຂົ້າລະບົບສຳເລັດ ══════════════════ */
/* ສອງຝັ່ງແຍກອອກຈາກກາງກ່ອນໂຫຼດເຂົ້າລະບົບ (ໄລຍະຕ້ອງກົງກັບ HL_CURTAIN_MS ໃນ login.php) */

.hr-login.is-exiting .hr-login__cover {
    animation: hl-curtain-left 0.7s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}

.hr-login.is-exiting .hr-login__pane {
    animation: hl-curtain-right 0.7s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}

/* ══════════════════ keyframes ══════════════════ */

@keyframes hl-sig-write {
    to {
        clip-path: inset(0 0 0 0);
    }
}

@keyframes hl-sig-stroke {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes hl-glow-drift {

    0%,
    100% {
        opacity: 0.55;
        transform: translateX(-3%);
    }

    50% {
        opacity: 0.95;
        transform: translateX(3%);
    }
}

@keyframes hl-sig-rise {
    from {
        opacity: 0;
        transform: translateY(14px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes hl-curtain-left {
    to {
        transform: translateX(-100%);
    }
}

@keyframes hl-curtain-right {
    to {
        transform: translateX(100%);
    }
}

@keyframes hl-spin {
    to {
        transform: rotate(360deg);
    }
}

/* ຄົນປິດ motion: ສະແດງລາຍເຊັນຄົບທັນທີ ບໍ່ຕ້ອງລໍ animation
   (ຜ້າມານບໍ່ຕ້ອງໃສ່ — login.php ກວດ prefers-reduced-motion ແລ້ວຂ້າມເອງ) */
@media (prefers-reduced-motion: reduce) {

    .hr-login__sig-svg--text,
    .hr-login__sig-stroke,
    .hr-login__sig-pin,
    .hr-login__sig-sub,
    .hr-login__sig-glow {
        animation: none;
    }

    .hr-login__sig-svg--text {
        clip-path: none;
    }

    .hr-login__sig-stroke {
        stroke-dashoffset: 0;
    }
}

/* ══════════════════ ແຈ້ງເຕືອນ (ຍົກມາຈາກ login.php ເດີມ) ══════════════════ */

.md-dialog-overlay {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    background: rgb(0 0 0 / 0.5);
    backdrop-filter: blur(2px);
}

.md-dialog {
    width: 90%;
    max-width: 320px;
    overflow: hidden;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 10px 25px rgb(0 0 0 / 0.2);
    animation: mdPop 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.md-dialog-content {
    padding: 24px;
    text-align: center;
}

.md-dialog-icon {
    display: block;
    margin-bottom: 16px;
    font-size: 56px;
    color: #79747e;
}

.md-dialog-message {
    margin: 0;
    color: #49454f;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
}

.md-dialog-btn {
    width: 100%;
    padding: 16px;
    border: 0;
    background: #b91c1c;
    color: #fff;
    font-family: inherit;
    font-size: 17px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.md-dialog-btn:active {
    background: #7f1d1d;
}

.md-toast-container {
    position: fixed;
    left: 0;
    width: 100%;
    z-index: 10001;
    display: flex;
    flex-direction: column;
    pointer-events: none;
}

.md-toast {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    padding: 16px 24px;
    background: #322f35;
    color: #fff;
    font-size: 15px;
    text-align: center;
    box-shadow: 0 4px 12px rgb(0 0 0 / 0.3);
    animation: mdSlideDown 0.4s cubic-bezier(0, 0, 0.2, 1);
}

.md-toast ion-icon {
    font-size: 20px;
}

.md-toast.danger {
    background-color: #b3261e;
}

.md-toast.success {
    background-color: #2e7d32;
}

.md-toast.info {
    background-color: #0288d1;
}

.md-toast.bottom {
    animation: mdSlideUpFull 0.4s cubic-bezier(0, 0, 0.2, 1);
}

@keyframes mdSlideDown {
    from {
        transform: translateY(-100%);
    }

    to {
        transform: translateY(0);
    }
}

@keyframes mdSlideUpFull {
    from {
        transform: translateY(100%);
    }

    to {
        transform: translateY(0);
    }
}

@keyframes mdPop {
    from {
        transform: scale(0.85);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}