/* ==========================================
   STYLE GLOBAL: INVENTARIS & COMMAND CENTER
   ========================================== */

/* 1. FILTER PILLS (TOMBOL KATEGORI) */
.filter-pills-wrapper {
    display: flex; 
    gap: 6px; 
    overflow-x: auto; 
    padding-bottom: 8px; /* Tambah padding agar scroll lebih leluasa */
    -webkit-overflow-scrolling: touch;
    width: 100%;
    scrollbar-width: none; /* Firefox */
}
.filter-pills-wrapper::-webkit-scrollbar { 
    display: none; /* Chrome, Safari, Edge */
}

.pill-btn {
    background: #f1f5f9; border: 1px solid #cbd5e1; color: #334155;
    padding: 5px 12px; border-radius: 20px; font-size: 10px; font-weight: 800;
    white-space: nowrap; cursor: pointer; transition: 0.2s;
    flex-shrink: 0; /* KUNCI AGAR TIDAK TERGENCET! */
}

/* WARNA DASAR SAAT BELUM DIPILIH */
.pill-btn[data-filter="Rusak"] { border-color: #ef4444; color: #ef4444; background: #fef2f2; }
.pill-btn[data-filter="Di Lokasi Event"] { border-color: #f59e0b; color: #b45309; background: #fffbeb; }
.pill-btn[data-filter="Gudang Kanguru"], .pill-btn[data-filter="Gudang Mrican"] { border-color: #94a3b8; background: #f8fafc; color: #475569; }

/* WARNA SAAT DIPILIH (ACTIVE) */
.pill-btn.active { background: #ea580c !important; color: white !important; border-color: #ea580c !important; }
.pill-btn[data-filter="Di Gudang"].active { background: #10b981 !important; border-color: #10b981 !important; color: white !important; }
.pill-btn[data-filter="Sedang Dipakai"].active { background: #3b82f6 !important; border-color: #3b82f6 !important; color: white !important; }
.pill-btn[data-filter="Rusak"].active { background: #ef4444 !important; border-color: #ef4444 !important; color: white !important; }
.pill-btn[data-filter="Di Lokasi Event"].active { background: #f59e0b !important; border-color: #f59e0b !important; color: white !important; }
.pill-btn[data-filter="Gudang Kanguru"].active, .pill-btn[data-filter="Gudang Mrican"].active { background: #475569 !important; border-color: #334155 !important; color: white !important; }


/* 2. CARDS 2 KOLOM (Untuk Tampilan HP) */
.grid-cards { 
    display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); 
    gap: 10px; max-width: 1200px; margin: 0 auto; padding-bottom: 80px; align-items: stretch; 
}
@media (max-width: 768px) { 
    .grid-cards { grid-template-columns: repeat(2, 1fr); gap: 8px; } 
}

.mission-card { 
    background: #ffffff; border-radius: 10px; padding: 8px; cursor: pointer; transition: 0.2s; 
    border: 1px solid #e2e8f0; display: flex; flex-direction: column; height: 100%; 
    position: relative; box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}

.mission-card.card-siap-dibawa, .list-item.card-siap-dibawa {
    background-color: #fffdf0 !important; border-color: #fef08a !important;
}

.mission-card.selected { border-color: #3b82f6 !important; background: #eff6ff !important; border-width: 2px; }
.card-check { position: absolute; top: 6px; right: 6px; background: #3b82f6; color: white; width: 20px; height: 20px; border-radius: 50%; display: flex; justify-content: center; align-items: center; font-weight: bold; font-size: 10px; z-index: 5; }

/* 3. ALARM BARANG TERTINGGAL (RADAR) */
@keyframes pulseAlert { 
    0% { opacity: 1; transform: scale(1); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); } 
    50% { opacity: 0.8; transform: scale(1.02); box-shadow: 0 0 8px 4px rgba(239, 68, 68, 0.4); } 
    100% { opacity: 1; transform: scale(1); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); } 
}
.nyangkut-alert {
    background-color: #fef2f2 !important;
    animation: pulseAlert 2s infinite !important;
}

.card-img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 6px; background: #eee; margin-bottom: 6px; border: 1px solid #f1f5f9; }
.card-title { font-weight: 800; font-size: 11px; margin: 0 0 4px 0; line-height: 1.2; color: #1e293b; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* 4. BADGES STATUS MINIMALIS */
.badge-status { 
    padding: 3px 6px; border-radius: 4px; font-size: 9px; font-weight: 800; 
    display: inline-block; 
    text-align: center; width: auto; margin: 0;
}
.status-gudang { background: #f1f5f9; color: #64748b; }
.status-keranjang { background: #fff7ed; color: #ea580c; border: 1px solid #fed7aa; }
.status-perjalanan { background: #f3e8ff; color: #7e22ce; }
.status-lokasi { background: #fffbeb; color: #b45309; border: 1px solid #fde68a; } 
.status-dipakai { background: #f0fdf4; color: #16a34a; }
.status-karantina { background: #fef2f2; color: #dc2626; border: 1px dashed #f87171; }

.badge-qty { background: rgba(0,0,0,0.7); color: white; font-size: 9px; padding: 2px 4px; border-radius: 4px; font-weight: 800; }

/* 5. FLOATING BULK BAR (MODE PILIH) */
.bulk-bar { 
    position: fixed; bottom: 0; left: 0; right: 0; 
    background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px); 
    padding: 10px 15px; box-shadow: 0 -5px 25px rgba(0,0,0,0.1); 
    display: none; justify-content: space-between; align-items: center; 
    z-index: 9000; border-top: 1px solid #e2e8f0; 
}
.bulk-bar.active { display: flex; }
.btn-bulk-process { background: #ea580c; color: white; border: none; padding: 8px 12px; border-radius: 8px; font-weight: bold; font-size: 11px; }

/* 6. MODAL OVERLAY & TOAST NOTIFIKASI */
.modal-overlay { 
    position: fixed; top: 0; left: 0; right: 0; bottom: 0; 
    background: rgba(0,0,0,0.7); display: flex; justify-content: center; 
    align-items: center; z-index: 99999; opacity: 0; pointer-events: none; 
    transition: 0.2s; padding: 15px;
}
.modal-overlay.active { opacity: 1; pointer-events: auto; }
.modal-content { width: 100%; box-shadow: 0 10px 30px rgba(0,0,0,0.2); }

.toast-msg { 
    position: fixed; top: 20px; left: 50%; transform: translateX(-50%); 
    background: #1e293b; color: white; padding: 10px 20px; border-radius: 30px; 
    font-weight: bold; font-size: 12px; z-index: 9999999; opacity: 0; transition: 0.3s; 
    pointer-events: none; box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}
.toast-msg.show { opacity: 1; top: 40px; }
.toast-success { background: #10b981; }
.toast-error { background: #ef4444; }

/* FIX: GALERI MURNI CSS (Mencegah Lem/Stuck saat geser foto) */
.detail-gallery { 
    display: flex; gap: 10px; overflow-x: auto; padding-bottom: 10px; 
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.detail-gallery::-webkit-scrollbar { display: none; }
.gallery-img { height: 160px; min-width: 160px; max-width:160px; object-fit: cover; border-radius: 10px; border: 1px solid #e2e8f0; cursor: zoom-in; flex-shrink: 0;}
.gallery-box { position: relative; display:inline-block; vertical-align:top; flex-shrink: 0;}
.badge-wadah { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); background: #ea580c; color: white; font-size: 10px; font-weight: 900; padding: 2px 8px; border-radius: 4px; letter-spacing: 1px; border: 1px solid white; box-shadow: 0 2px 4px rgba(0,0,0,0.5); pointer-events: none; }