/* ═══════════════════════════════════════════════════════════════════
   NEA GLOBAL LOADERS — Progress bar · Skeleton · Overlay · Spinners
   ═══════════════════════════════════════════════════════════════════ */

/* ── Keyframes ────────────────────────────────────────────────────── */
@keyframes nea-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
@keyframes nea-shimmer {
    0%   { background-position: -800px 0; }
    100% { background-position:  800px 0; }
}
@keyframes nea-progress-glow {
    0%   { background-position: 0% 0; }
    100% { background-position: 200% 0; }
}
@keyframes nea-fade-in {
    from { opacity: 0; transform: translateY(5px); }
    to   { opacity: 1; transform: none; } /* 'none' so a retained end-state can't become a containing block for fixed descendants */
}
@keyframes nea-pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: .55; }
}

/* ── Top Navigation Progress Bar ─────────────────────────────────── */
#nea-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0%;
    background: linear-gradient(90deg, #018771 0%, #2edbb6 50%, #018771 100%);
    background-size: 200% 100%;
    animation: nea-progress-glow 1.6s linear infinite;
    z-index: 100000;
    transition: width .28s ease, opacity .4s ease;
    pointer-events: none;
    border-radius: 0 2px 2px 0;
    box-shadow: 0 0 8px rgba(46,219,182,.5);
}
#nea-progress.nea-progress-done {
    width: 100% !important;
    opacity: 0;
    transition: width .15s ease, opacity .35s ease .15s;
}

/* ── Full-page Overlay ────────────────────────────────────────────── */
#nea-overlay {
    position: fixed;
    inset: 0;
    background: rgba(10, 20, 35, .72);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 99998;
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 18px;
    padding: 20px;
}
#nea-overlay.nea-overlay-visible {
    display: flex;
}
.nea-overlay-ring {
    width: 54px;
    height: 54px;
    border: 4px solid rgba(255,255,255,.12);
    border-top-color: #2edbb6;
    border-radius: 50%;
    animation: nea-spin .88s linear infinite;
    flex-shrink: 0;
}
.nea-overlay-msg {
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    margin: 0;
    text-align: center;
    letter-spacing: .01em;
}
.nea-overlay-sub {
    font-size: 12px;
    color: rgba(255,255,255,.45);
    margin: -10px 0 0;
    text-align: center;
}

/* ── Button Loading State ─────────────────────────────────────────── */
.nea-btn-loading {
    pointer-events: none !important;
    opacity: .82 !important;
    cursor: not-allowed !important;
}
.nea-btn-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: nea-spin .72s linear infinite;
    vertical-align: middle;
    margin-right: 7px;
    flex-shrink: 0;
}
.nea-btn-label {
    vertical-align: middle;
}

/* ── Inline Mini Spinner (for AJAX actions) ───────────────────────── */
.nea-spinner-sm {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(1,135,113,.25);
    border-top-color: #018771;
    border-radius: 50%;
    animation: nea-spin .75s linear infinite;
    vertical-align: middle;
}
.nea-spinner-md {
    display: inline-block;
    width: 28px;
    height: 28px;
    border: 3px solid rgba(1,135,113,.18);
    border-top-color: #018771;
    border-radius: 50%;
    animation: nea-spin .78s linear infinite;
}
.nea-spinner-lg {
    display: inline-block;
    width: 40px;
    height: 40px;
    border: 4px solid rgba(1,135,113,.15);
    border-top-color: #018771;
    border-radius: 50%;
    animation: nea-spin .82s linear infinite;
}

/* ── Skeleton Base ────────────────────────────────────────────────── */
.nea-sk {
    background: linear-gradient(90deg,
        #f1f5f9 0%, #f1f5f9 38%,
        #e2e8f0 50%,
        #f1f5f9 62%, #f1f5f9 100%);
    background-size: 800px 100%;
    animation: nea-shimmer 1.65s ease-in-out infinite;
    border-radius: 6px;
    display: block;
}
/* Dark variant for admin/depo dark surfaces */
.nea-sk-dark {
    background: linear-gradient(90deg,
        #1e2a3a 0%, #1e2a3a 38%,
        #253344 50%,
        #1e2a3a 62%, #1e2a3a 100%);
    background-size: 800px 100%;
    animation: nea-shimmer 1.65s ease-in-out infinite;
    border-radius: 6px;
    display: block;
}

/* ── Skeleton: Product Cards ──────────────────────────────────────── */
.sk-product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
    padding: 4px 0;
}
.sk-product-card {
    background: #fff;
    border-radius: 14px;
    padding: 14px 14px 16px;
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
    border: 1px solid #f1f5f9;
}
.sk-product-img  { aspect-ratio: 1; border-radius: 10px; margin-bottom: 12px; }
.sk-line         { height: 12px; border-radius: 4px; margin-bottom: 9px; }
.sk-line.w-75    { width: 75%; }
.sk-line.w-55    { width: 55%; }
.sk-line.w-40    { width: 40%; }
.sk-line.h-16    { height: 16px; }
.sk-line.h-20    { height: 20px; }

/* ── Skeleton: Table Rows ─────────────────────────────────────────── */
.sk-tbl-row {
    display: flex;
    gap: 16px;
    padding: 12px 18px;
    border-bottom: 1px solid #f8fafc;
    align-items: center;
}
.sk-tbl-cell            { height: 13px; border-radius: 3px; flex-shrink: 0; }
.sk-tbl-cell.c-25       { width: 25%; }
.sk-tbl-cell.c-18       { width: 18%; }
.sk-tbl-cell.c-14       { width: 14%; }
.sk-tbl-cell.c-10       { width: 10%; }
.sk-tbl-cell.c-badge    { width: 72px; height: 22px; border-radius: 20px; }
.sk-tbl-cell.c-avatar   { width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; }
.sk-tbl-cell.c-actions  { width: 80px; height: 28px; border-radius: 8px; margin-left: auto; }

/* ── Skeleton: KPI / Dashboard Cards ─────────────────────────────── */
.sk-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 16px;
    margin-bottom: 22px;
}
.sk-kpi-card     { background: #fff; border-radius: 14px; padding: 18px; box-shadow: 0 1px 4px rgba(0,0,0,.06); }
.sk-kpi-icon     { width: 42px; height: 42px; border-radius: 12px; margin-bottom: 14px; }
.sk-kpi-number   { height: 28px; width: 60%; border-radius: 5px; margin-bottom: 10px; }
.sk-kpi-label    { height: 12px; width: 80%; border-radius: 3px; }

/* ── Skeleton: Chart ──────────────────────────────────────────────── */
.sk-chart-wrap   { background: #fff; border-radius: 14px; padding: 18px; box-shadow: 0 1px 4px rgba(0,0,0,.06); }
.sk-chart-title  { height: 16px; width: 40%; border-radius: 4px; margin-bottom: 16px; }
.sk-chart-body   { height: 240px; border-radius: 10px; }

/* ── Skeleton: Order Cards ────────────────────────────────────────── */
.sk-order-card   { background: #fff; border-radius: 14px; padding: 16px 18px; margin-bottom: 14px; box-shadow: 0 1px 4px rgba(0,0,0,.06); border-left: 4px solid #e2e8f0; }
.sk-order-head   { display: flex; gap: 12px; margin-bottom: 14px; align-items: center; }
.sk-order-icon   { width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0; }
.sk-order-meta   { flex: 1; }
.sk-order-line-a { height: 14px; width: 55%; border-radius: 4px; margin-bottom: 8px; }
.sk-order-line-b { height: 11px; width: 32%; border-radius: 3px; }
.sk-order-foot   { height: 34px; border-radius: 8px; width: 130px; margin-left: auto; }

/* ── Skeleton: Profile ────────────────────────────────────────────── */
.sk-avatar   { width: 80px; height: 80px; border-radius: 50%; }
.sk-name     { height: 22px; width: 180px; border-radius: 5px; margin-bottom: 10px; }
.sk-badge    { height: 18px; width: 80px;  border-radius: 20px; }

/* ── Table Loading Overlay ────────────────────────────────────────── */
.nea-tbl-loading {
    position: relative;
    pointer-events: none;
    min-height: 120px;
}
.nea-tbl-loading::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,.72);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    border-radius: inherit;
    z-index: 8;
    transition: opacity .2s;
}
.nea-tbl-spin {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 36px;
    height: 36px;
    border: 3px solid rgba(1,135,113,.18);
    border-top-color: #018771;
    border-radius: 50%;
    animation: nea-spin .82s linear infinite;
    z-index: 9;
    pointer-events: none;
}

/* ── Page Fade-in ─────────────────────────────────────────────────── */
.nea-page-in {
    animation: nea-fade-in .32s ease both;
}

/* ── Search/Filter busy indicator ────────────────────────────────── */
.nea-field-loading {
    position: relative;
}
.nea-field-loading::after {
    content: '';
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    border: 2px solid rgba(1,135,113,.2);
    border-top-color: #018771;
    border-radius: 50%;
    animation: nea-spin .72s linear infinite;
}

/* ── Export / Download button ─────────────────────────────────────── */
.nea-export-loading {
    animation: nea-pulse 1.4s ease infinite;
    pointer-events: none;
    cursor: not-allowed;
}

/* ── Depo / Admin table placeholder rows ─────────────────────────── */
.nea-rows-placeholder {
    padding: 8px 0;
}