/* ==========================================================================
 * app-loading.css — ระบบแสดงสถานะการโหลดทั้งระบบ
 * --------------------------------------------------------------------------
 * ประกอบด้วย 5 ส่วน (จับคู่กับ app-loading.js):
 *   1. Page preloader     — สกรีนเต็มจอตอนหน้าเว็บกำลังเปลี่ยน/โหลดครั้งแรก
 *   2. Top progress bar   — แถบความคืบหน้าด้านบนขณะมี request ที่นานเกิน 350ms
 *   3. ปุ่ม is-loading    — ปุ่มที่กำลังทำงาน (spinner + กันกดซ้ำ)
 *   4. Region overlay     — ปิดบังส่วนเนื้อหา (การ์ด/ตาราง/modal) ขณะรอข้อมูล
 *   5. Busy state         — ตัวกัน double-click ของปุ่มจุดคำสั่งต่าง ๆ
 * ========================================================================== */

/* ---------- 1. Page preloader ---------- */

.app-page-preloader {
    position: fixed;
    inset: 0;
    z-index: 10900;
    display: grid;
    place-items: center;
    background: var(--app-bg, #f1f5f9);
    transition: opacity 0.25s ease;
}

.app-page-preloader.is-hiding {
    opacity: 0;
    pointer-events: none;
}

.app-page-preloader-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.app-page-preloader-spinner {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 4px solid #c7d2fe;
    border-top-color: var(--app-primary, #4f46e5);
    animation: appLoadingSpin 0.8s linear infinite;
}

.app-page-preloader-text {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--app-text-muted, #64748b);
}

@keyframes appLoadingSpin {
    to { transform: rotate(360deg); }
}

/* ตอนกำลังจะออกจากหน้า (กดลิงก์) — แสดงเป็นผ้าบาง ๆ ไม่บังทั้งจอ */
.app-page-preloader.is-navigating {
    background: rgba(241, 245, 249, 0.55);
    backdrop-filter: blur(1px);
}

/* ---------- 2. Top progress bar ---------- */

.app-loading-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    z-index: 10950;
    pointer-events: none;
    background: transparent;
}

.app-loading-bar .app-loading-bar-fill {
    display: block;
    height: 100%;
    width: 0%;
    border-radius: 0 3px 3px 0;
    background: linear-gradient(90deg, var(--app-primary, #4f46e5), #a5b4fc);
    box-shadow: 0 0 8px rgba(79, 70, 229, 0.55);
    transition: width 0.25s ease, opacity 0.3s ease;
}

.app-loading-bar.is-active .app-loading-bar-fill {
    width: 80%;
    animation: appLoadingBarSlide 1.6s ease-in-out infinite;
}

.app-loading-bar.is-finishing .app-loading-bar-fill {
    width: 100% !important;
    opacity: 0;
    animation: none;
}

@keyframes appLoadingBarSlide {
    0% { margin-left: 0%; width: 18%; }
    50% { margin-left: 38%; width: 34%; }
    100% { margin-left: 82%; width: 18%; }
}

/* ---------- 3. ปุ่มกำลังทำงาน (is-loading) ---------- */

.btn.is-loading,
.row-action-button.is-loading,
button.is-loading {
    position: relative;
    color: transparent !important;
    user-select: none;
    pointer-events: none;
}

.btn.is-loading::after,
.row-action-button.is-loading::after,
button.is-loading::after {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 1em;
    height: 1em;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: currentColor;
    animation: appLoadingSpin 0.7s linear infinite;
}

/* ปุ่มสว่าง (btn-outline / secondary) ให้ spinner เป็นสีข้อความเดิม */
.btn-outline-primary.is-loading::after,
.btn-outline-secondary.is-loading::after,
.btn-secondary.is-loading::after,
.btn-light.is-loading::after {
    border-top-color: var(--app-primary, #4f46e5);
    border-right-color: rgba(79, 70, 229, 0.25);
}

.row-action-button.is-loading::after {
    border-top-color: var(--app-primary, #4f46e5);
    border-right-color: rgba(79, 70, 229, 0.25);
    border-bottom-color: rgba(79, 70, 229, 0.25);
    border-left-color: rgba(79, 70, 229, 0.25);
}

/* ---------- 4. Region overlay (การ์ด/ตาราง/modal ขณะรอข้อมูล) ---------- */

.app-loading-region {
    position: relative !important;
}

.app-loading-region > .app-loading-region-mask {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: inherit;
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(1.5px);
    animation: appLoadingFade 0.15s ease;
}

.app-loading-region > .app-loading-region-mask .app-loading-region-spinner {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 3.5px solid #c7d2fe;
    border-top-color: var(--app-primary, #4f46e5);
    animation: appLoadingSpin 0.8s linear infinite;
}

.app-loading-region > .app-loading-region-mask .app-loading-region-text {
    font-size: 13px;
    font-weight: 600;
    color: var(--app-text-muted, #64748b);
}

@keyframes appLoadingFade {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ---------- 5. Busy state (กัน double-click) ---------- */

.is-app-busy {
    pointer-events: none !important;
    opacity: 0.55;
}

/* แถวตารางที่กำลังประมวลผลอยู่ */
tr.is-app-busy > td {
    opacity: 0.55;
}

/* ---------- เคารพ prefers-reduced-motion ---------- */

@media (prefers-reduced-motion: reduce) {
    .app-page-preloader-spinner,
    .app-loading-bar.is-active .app-loading-bar-fill,
    .app-loading-region-spinner,
    .btn.is-loading::after,
    button.is-loading::after,
    .row-action-button.is-loading::after {
        animation-duration: 1.6s;
    }
}