/* ═══════════════════════════════════════════════════════
   NSP INVENTORY — UPLOAD STATES
   Loading (scanning radar) · Error (fault pulse) · Success (signal lock)
   Menyambung ke variabel & bahasa visual nsp-theme.css — jangan diubah sendiri.
═══════════════════════════════════════════════════════ */

/* ── Wrapper umum: bungkus drop-zone + status panel ── */
.upload-flow { position: relative; display: flex; flex-direction: column; gap: 16px; }

/* Drop-zone dikunci saat proses berjalan, biar user tidak drop 2x */
.upload-flow.is-busy .drop-zone { pointer-events: none; opacity: .5; filter: grayscale(.4); }

/* ═══════════════════════════
   STATUS PANEL — kontainer bersama utk 3 state
═══════════════════════════ */
.upload-status {
    display: none;
    position: relative;
    align-items: center;
    gap: 16px;
    padding: 20px 22px;
    border-radius: var(--r-md);
    background: var(--panel);
    border: 1px solid var(--panel-line-hi);
    box-shadow: var(--shadow-deep);
    overflow: hidden;
    animation: upStatusIn .35s cubic-bezier(0.16,1,0.3,1) forwards;
}
.upload-status.active { display: flex; }
@keyframes upStatusIn { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }

.upload-status::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: var(--aurora-grad); opacity: .9;
}

/* ═══════════════════════════
   1) LOADING — radar aktif, scan sweep, progress mono
═══════════════════════════ */
.upload-status.is-loading { border-color: rgba(46,230,255,.35); box-shadow: var(--shadow-deep), var(--glow-cyan); }

.upload-radar {
    position: relative;
    flex: 0 0 auto;
    width: 52px; height: 52px;
    border-radius: 50%;
    display: grid; place-items: center;
    background: var(--cyan-dim);
    border: 1px solid rgba(46,230,255,.35);
}
.upload-radar::before, .upload-radar::after {
    content: ''; position: absolute; inset: 0; border-radius: 50%;
    border: 1px solid rgba(46,230,255,.4);
    animation: radarPing 1.8s cubic-bezier(0.4,0,0.2,1) infinite;
}
.upload-radar::after { animation-delay: .9s; }
@keyframes radarPing { 0% { transform: scale(0.6); opacity: .9; } 100% { transform: scale(1.9); opacity: 0; } }
.upload-radar-core {
    width: 10px; height: 10px; border-radius: 50%;
    background: var(--cyan); box-shadow: 0 0 12px rgba(46,230,255,.9);
    animation: radarCore 1.1s ease-in-out infinite;
}
@keyframes radarCore { 0%,100% { transform: scale(1); } 50% { transform: scale(1.35); } }

.upload-status-body { flex: 1; min-width: 0; }
.upload-status-eyebrow {
    font-family: var(--font-mono); font-size: .6rem; letter-spacing: .2em; text-transform: uppercase;
    color: var(--cyan); margin-bottom: 5px; display: flex; align-items: center; gap: 8px;
}
.upload-status-eyebrow .dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; animation: pulseDot 1.4s ease-in-out infinite; }
.upload-status-title { font-family: var(--font-display); font-weight: 600; font-size: .98rem; color: var(--ink); }
.upload-status-sub { font-family: var(--font-body); font-size: .78rem; color: var(--ink-dim); margin-top: 3px; }

/* Progress bar aurora + scan sweep di atasnya */
.upload-progress-track {
    position: relative; margin-top: 12px; height: 6px; border-radius: var(--r-pill);
    background: rgba(148,163,255,.1); overflow: hidden;
}
.upload-progress-fill {
    position: absolute; inset: 0 auto 0 0; width: 0%;
    background: var(--aurora-grad); border-radius: var(--r-pill);
    transition: width .25s ease-out;
}
.upload-progress-track.indeterminate .upload-progress-fill {
    width: 40% !important; animation: scanSweep 1.2s cubic-bezier(0.4,0,0.2,1) infinite;
}
.upload-progress-pct {
    font-family: var(--font-mono); font-size: .68rem; color: var(--cyan); margin-top: 8px; letter-spacing: .04em;
}

/* ═══════════════════════════
   2) SUCCESS — signal lock, checkmark draw, aurora burst
═══════════════════════════ */
.upload-status.is-success { border-color: rgba(53,230,168,.4); box-shadow: var(--shadow-deep), 0 0 0 1px rgba(53,230,168,.35), 0 0 40px rgba(53,230,168,.16); }
.upload-status.is-success::before { background: linear-gradient(100deg, var(--ok) 0%, var(--cyan) 100%); }

.upload-check {
    position: relative; flex: 0 0 auto; width: 52px; height: 52px; border-radius: 50%;
    display: grid; place-items: center; background: rgba(53,230,168,.1); border: 1px solid rgba(53,230,168,.4);
    animation: successPop .5s cubic-bezier(0.34,1.56,0.64,1) both;
}
@keyframes successPop { 0% { transform: scale(0.5); opacity: 0; } 60% { transform: scale(1.08); opacity: 1; } 100% { transform: scale(1); } }
.upload-check::before, .upload-check::after {
    content: ''; position: absolute; inset: -1px; border-radius: 50%; border: 1px solid rgba(53,230,168,.5);
    animation: radarPing 1.6s cubic-bezier(0.4,0,0.2,1) 1;
}
.upload-check::after { animation-delay: .25s; }
.upload-check svg { width: 24px; height: 24px; }
.upload-check svg path {
    fill: none; stroke: var(--ok); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round;
    stroke-dasharray: 30; stroke-dashoffset: 30;
    animation: drawCheck .4s .15s ease forwards;
}
@keyframes drawCheck { to { stroke-dashoffset: 0; } }

.upload-status.is-success .upload-status-eyebrow { color: var(--ok); }
.upload-status.is-success .upload-status-eyebrow .dot { animation: none; }

/* Ringkasan angka hasil import — inserted / updated / skipped */
.upload-result-stats { display: flex; gap: 18px; margin-top: 10px; flex-wrap: wrap; }
.upload-result-stat { display: flex; flex-direction: column; gap: 2px; }
.upload-result-stat strong { font-family: var(--font-mono); font-size: 1.05rem; font-weight: 600; color: var(--ink); line-height: 1; }
.upload-result-stat.inserted strong { color: var(--ok); }
.upload-result-stat.updated strong { color: var(--cyan); }
.upload-result-stat.skipped strong { color: var(--warn); }
.upload-result-stat span { font-family: var(--font-mono); font-size: .56rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); }

/* Brand baru terdeteksi — badge kecil */
.upload-brand-chip {
    display: inline-flex; align-items: center; gap: 6px; margin: 10px 6px 0 0;
    font-family: var(--font-mono); font-size: .64rem; color: var(--violet);
    background: var(--violet-dim); border: 1px solid rgba(139,107,255,.3);
    padding: 4px 10px; border-radius: var(--r-pill);
}

/* ═══════════════════════════
   3) ERROR — fault pulse, glitch shake ringan, warn glow
═══════════════════════════ */
.upload-status.is-error { border-color: rgba(255,95,126,.4); box-shadow: var(--shadow-deep), 0 0 0 1px rgba(255,95,126,.35), 0 0 40px rgba(255,95,126,.14); animation: upStatusIn .35s cubic-bezier(0.16,1,0.3,1) forwards, faultShake .4s ease .35s; }
.upload-status.is-error::before { background: linear-gradient(100deg, var(--warn) 0%, var(--magenta) 100%); }
@keyframes faultShake { 0%,100% { transform: translateX(0); } 20% { transform: translateX(-4px); } 40% { transform: translateX(3px); } 60% { transform: translateX(-2px); } 80% { transform: translateX(1px); } }

.upload-fault {
    position: relative; flex: 0 0 auto; width: 52px; height: 52px; border-radius: 50%;
    display: grid; place-items: center; background: rgba(255,95,126,.1); border: 1px solid rgba(255,95,126,.4);
}
.upload-fault::before {
    content: ''; position: absolute; inset: -1px; border-radius: 50%; border: 1px solid rgba(255,95,126,.45);
    animation: faultPulse 1.6s ease-in-out infinite;
}
@keyframes faultPulse { 0%,100% { opacity: .5; transform: scale(1); } 50% { opacity: 1; transform: scale(1.12); } }
.upload-fault svg { width: 22px; height: 22px; }
.upload-fault svg path, .upload-fault svg line {
    stroke: var(--warn); stroke-width: 2.4; stroke-linecap: round; fill: none;
}

.upload-status.is-error .upload-status-eyebrow { color: var(--warn); }
.upload-status.is-error .upload-status-eyebrow .dot { background: var(--warn); animation: pulseDot 1s ease-in-out infinite; }
.upload-status.is-error .upload-status-title { color: #ffb3c1; }

/* Daftar baris invalid / pesan error rinci (dari invalid_rows) */
.upload-error-list {
    margin-top: 12px; max-height: 140px; overflow-y: auto;
    border: 1px solid rgba(255,95,126,.2); border-radius: var(--r-sm);
    background: rgba(255,95,126,.04);
}
.upload-error-list::-webkit-scrollbar { width: 3px; }
.upload-error-list::-webkit-scrollbar-thumb { background: rgba(255,95,126,.4); }
.upload-error-item {
    padding: 8px 12px; font-family: var(--font-mono); font-size: .7rem; color: #ffb3c1;
    border-bottom: 1px solid rgba(255,95,126,.12);
}
.upload-error-item:last-child { border-bottom: none; }

.upload-retry-btn {
    margin-top: 14px; align-self: flex-start;
    font-family: var(--font-body); font-size: .8rem; font-weight: 600;
    color: #05060d; background: linear-gradient(100deg, var(--warn) 0%, var(--magenta) 100%);
    border: none; padding: 9px 20px; border-radius: var(--r-pill); cursor: pointer; transition: var(--transition-slow);
}
.upload-retry-btn:hover { transform: translateY(-1px); box-shadow: var(--glow-magenta); }

/* Tombol close/dismiss kecil di pojok status panel */
.upload-status-dismiss {
    position: absolute; top: 12px; right: 14px; width: 22px; height: 22px;
    display: grid; place-items: center; border-radius: 6px; background: none; border: none;
    color: var(--ink-faint); cursor: pointer; transition: var(--transition);
}
.upload-status-dismiss:hover { color: var(--ink); background: rgba(255,255,255,.06); }

@media (max-width: 480px) {
    .upload-status { padding: 16px 16px 16px 14px; flex-wrap: wrap; }
    .upload-result-stats { gap: 12px; }
}