body { font-family: 'Inter', sans-serif; scroll-behavior: smooth; }
        .swiper-button-next, .swiper-button-prev { color: #1E40AF; } /* deep blue */
        .swiper-pagination-bullet-active { background-color: #1E40AF; }
        .glass-card { background: rgba(255, 255, 255, 0.6); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
        .modal-backdrop { background-color: rgba(0, 0, 0, 0.5); }
        .status-badge {
            display: inline-flex;
            align-items: center;
            padding: 0.25rem 0.75rem;
            border-radius: 9999px;
            font-weight: 500;
            font-size: 0.75rem;
        }
        .status-SIAP_JEMPUT { background-color: #DBEAFE; color: #1E40AF; }
        .status-PROSES_JEMPUT { background-color: #D1FAE5; color: #065F46; }
        .status-SEDANG_DICUCI { background-color: #FEF3C7; color: #92400E; }
        .status-PENITIPAN { background-color: #E0E7FF; color: #4338CA; }
        .status-PROSES_ANTAR { background-color: #FCE7F3; color: #9D174D; }
        .status-DALAM_ANTRIAN { background-color: #CFFAFE; color: #0E7490; }
        .status-PENDING_DATA { background-color: #fef9c3; color: #854d0e; }
        .status-SELESAI { background-color: #FFEDD5; color: #9A3412; }
        .status-LUNAS { background-color: #e5e7eb; color: #4b5563; }

        .kanban-container::-webkit-scrollbar { height: 8px; }
        .kanban-container::-webkit-scrollbar-track { background: #f1f5f9; border-radius: 10px; }
        .kanban-container::-webkit-scrollbar-thumb { background: #94a3b8; border-radius: 10px; }
        .kanban-container::-webkit-scrollbar-thumb:hover { background: #64748b; }

        .route-timeline { display: flex; align-items: center; overflow-x: auto; padding: 1rem 0; scrollbar-width: thin; }
        .route-timeline::-webkit-scrollbar { height: 6px; }
        .route-timeline::-webkit-scrollbar-track { background: transparent; }
        .route-timeline::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 6px; }

        .route-stop { display: flex; flex-direction: column; align-items: center; position: relative; flex-shrink: 0; padding: 0 1.5rem; }
        .route-stop:not(:last-child)::after { content: ''; position: absolute; top: 1.25rem; left: 50%; height: 2px; width: 100%; background: linear-gradient(to right, #60a5fa, #3b82f6); z-index: 1; }
        .route-stop-node { width: 2.5rem; height: 2.5rem; border-radius: 9999px; display: flex; align-items: center; justify-content: center; position: relative; z-index: 2; cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease; }
        .route-stop-node:hover { transform: scale(1.1); box-shadow: 0 0 15px rgba(59, 130, 246, 0.5); }
        .route-stop-node-inner { width: 2rem; height: 2rem; border-radius: 9999px; background-color: white; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.75rem; }
        .route-stop-label { margin-top: 0.75rem; font-size: 0.8rem; font-weight: 500; text-align: center; width: 100px; }
        .route-stop.highlight-card .route-stop-node { animation: pulse 1s infinite; }
        @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7); } 70% { box-shadow: 0 0 0 10px rgba(59, 130, 246, 0); } 100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); } }
        .card-highlight { box-shadow: 0 0 15px 3px rgba(37, 99, 235, 0.4); border-color: #2563eb; }
        
        .card-swiper .swiper-pagination-bullet { width: 6px; height: 6px; background-color: rgba(255, 255, 255, 0.8); opacity: 1; }
        .card-swiper .swiper-pagination-bullet-active { background-color: #ffffff; }

        .admin-table { width: 100%; border-collapse: collapse; }
        .admin-table th, .admin-table td { padding: 12px; border: 1px solid #e2e8f0; text-align: left; font-size: 0.875rem; vertical-align: middle; }
        .admin-table th { background-color: #f8fafc; font-weight: 600; }
        .admin-table tr:nth-child(even) { background-color: #f1f5f9; }
        .admin-table input, .admin-table select, .admin-table textarea { width: 100%; padding: 8px; border-radius: 6px; border: 1px solid #cbd5e1; }
        .admin-table .action-button { padding: 6px 12px; border-radius: 6px; font-weight: 500; transition: all 0.2s; }

        #toast-container .toast { transition: opacity 0.5s ease, transform 0.5s ease; transform: translateX(0); }
 
        #order-notes {
    animation: fadeIn 0.5s ease-out forwards;
}


.collapsible-container {
    overflow: hidden;
    transition: max-height 0.4s ease-in-out;
    max-height: 0px;
}
.collapsible-container.open {
    max-height: 500px; 
}

.collapsible-toggle.open .feather-chevron-down {
    transform: rotate(180deg);
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

        #map, #minimap, #signupMap, #editProfileMap, #customerEditOrderMap { height: 250px; border-radius: 0.75rem; z-index: 10; width: 100%; border: 1px solid #e2e8f0; }
        #minimap { height: 150px; }
        #customerEditOrderMap { height: 200px; }

        .customer-sidebar a.active { background-color: #DBEAFE; color: #1E40AF; font-weight: 600; }

        /* [BARU] Menambahkan panah kecil di bawah tooltip WhatsApp */
.whatsapp-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    right: 20px;
    border-width: 6px;
    border-style: solid;
    border-color: #1e293b transparent transparent transparent; /* #1e293b adalah warna bg-slate-800 */
}

/* [BARU] Style untuk mengubah kursor saat tombol WA digeser */
#whatsapp-float-button.dragging {
    cursor: grabbing;
    transform: scale(1.1); /* Sedikit membesar saat digeser */
    opacity: 0.8;
}
        /* Revisi: Style untuk feedback form dengan teks */
        #feedbackForm label { display: inline-block; }
        #feedbackForm input[type="radio"].peer { display: none; }
        #feedbackForm .feedback-option {
            padding: 0.5rem 1rem;
            border: 1px solid #cbd5e1;
            border-radius: 0.5rem;
            cursor: pointer;
            transition: all 0.2s ease-in-out;
            font-size: 0.875rem;
        }
        #feedbackForm .peer:checked + .feedback-option {
            background-color: #dbeafe;
            border-color: #3b82f6;
            color: #1e40af;
            font-weight: 600;
        }
       
        .user-location-pulse {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #3b82f6; /* blue-500 */
    cursor: pointer;
    box-shadow: 0 0 0 rgba(59, 130, 246, 0.4);
    animation: pulse 2s infinite;
}


/* Animasi Slide Up untuk Modal Gaji Pegawai di Mobile */
@keyframes slideUpMobile {
    from {
        transform: translateY(100%);
        opacity: 0.5;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@media (max-width: 640px) {
    .animate-slide-up {
        animation: slideUpMobile 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    }
}

/* Scrollbar styling khusus tabel admin agar rapi */
#admin-gaji-content .overflow-x-auto::-webkit-scrollbar {
    height: 8px;
}
#admin-gaji-content .overflow-x-auto::-webkit-scrollbar-thumb {
    background-color: #cbd5e1;
    border-radius: 4px;
}

/* ============================================================
   MODAL INPUT PEKERJAAN — Mobile-first bottom sheet
   ============================================================ */

/* Di HP: modal muncul dari bawah, full width, tinggi maks 92vh */
@media (max-width: 639px) {
    .modal-pekerjaan-sheet {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        max-height: 92dvh;       /* dvh = dynamic viewport height, lebih akurat di HP */
        border-radius: 20px 20px 0 0;
        animation: slideUpSheet 0.28s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    }
}

/* Di desktop: centered card biasa */
@media (min-width: 640px) {
    .modal-pekerjaan-sheet {
        max-height: 88vh;
        animation: fadeScaleIn 0.22s ease-out forwards;
    }
}

@keyframes slideUpSheet {
    from { transform: translateY(100%); opacity: 0.6; }
    to   { transform: translateY(0);    opacity: 1; }
}

@keyframes fadeScaleIn {
    from { opacity: 0; transform: scale(0.96) translateY(6px); }
    to   { opacity: 1; transform: scale(1)    translateY(0); }
}

/* Scrollbar di dalam form modal agar tidak mengganggu layout */
#formInputPekerjaan::-webkit-scrollbar { width: 4px; }
#formInputPekerjaan::-webkit-scrollbar-track { background: transparent; }
#formInputPekerjaan::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }

/* Row gaji karyawan — kompak di HP */
#list-gaji-karyawan .row-gaji {
    background: #f8fafc;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    padding: 8px 10px;
    gap: 6px;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
}

#list-gaji-karyawan .row-gaji .input-nama-karyawan {
    flex: 1;
    min-width: 0;
    font-size: 0.75rem;
    padding: 6px 8px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    background: white;
}

#list-gaji-karyawan .row-gaji .input-qty-gaji {
    width: 60px;
    flex-shrink: 0;
    font-size: 0.75rem;
    padding: 6px 6px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    background: white;
    text-align: center;
}

/* Label nama gaji — bungkus kalau kepanjangan */
#list-gaji-karyawan .row-gaji > span:first-child {
    font-size: 0.7rem;
    line-height: 1.3;
    max-width: 80px;
    flex-shrink: 0;
    color: #334155;
    font-weight: 700;
}

/* Row produk satuan — kompak */
#list-produk-satuan .row-produk-satuan {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 7px 10px;
    gap: 6px;
}

#list-produk-satuan .row-produk-satuan span {
    font-size: 0.75rem;
    color: #475569;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#list-produk-satuan .row-produk-satuan .input-qty-satuan {
    width: 56px;
    flex-shrink: 0;
    font-size: 0.75rem;
    padding: 5px 6px;
    border-radius: 7px;
    border: 1px solid #e2e8f0;
    text-align: center;
    background: white;
}

/* Tombol hapus (×) — konsisten ukuran dan look */
.btn-hapus-item {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
    transition: background 0.15s, color 0.15s;
    background: #fee2e2;
    color: #ef4444;
    border: none;
    cursor: pointer;
}
.btn-hapus-item:hover {
    background: #ef4444;
    color: white;
}