/* Custom Styling untuk JasaPro Estimator */

/* Custom scrollbars */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: #f1f5f9;
}
::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* Form Input Focus states */
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: #3b82f6 !important;
}

/* Area luas nama barang / uraian jasa agar terbaca penuh */
.item-name-textarea {
    min-height: 48px;
    line-height: 1.35;
    word-break: break-word;
    font-size: 12px;
}

/* Efek sensor privacy mode */
.cost-column.filter.blur-sm,
.cost-summary-box.filter.blur-sm {
    transition: filter 0.2s ease;
    user-select: none;
}

/* Tabel responsive styling */
#table-calculator th, #table-calculator td {
    vertical-align: middle;
}

/* Animasi halus untuk tab */
#panel-global-markup, #panel-item-markup {
    transition: all 0.25s ease-in-out;
}

/* ==========================================================================
   PENJAMIN KONTRAS TOMBOL & FALLBACK WARNA LENGKAP
   Memastikan tidak ada tombol / tautan dengan latar putih dan teks putih
   ========================================================================== */

/* 1. Palet Slate (Dark Navy / Gray) */
.bg-slate-900 { background-color: #0f172a !important; color: #ffffff !important; }
.bg-slate-800 { background-color: #1e293b !important; color: #ffffff !important; }
.bg-slate-700 { background-color: #334155 !important; color: #ffffff !important; }
.bg-slate-600 { background-color: #475569 !important; color: #ffffff !important; }
.bg-slate-200 { background-color: #e2e8f0 !important; }
.bg-slate-100 { background-color: #f1f5f9 !important; }
.bg-slate-50  { background-color: #f8fafc !important; }

.hover\:bg-slate-800:hover { background-color: #1e293b !important; }
.hover\:bg-slate-700:hover { background-color: #334155 !important; }

.text-slate-900 { color: #0f172a !important; }
.text-slate-800 { color: #1e293b !important; }
.text-slate-700 { color: #334155 !important; }
.text-slate-400 { color: #94a3b8 !important; }
.text-slate-300 { color: #cbd5e1 !important; }
.text-slate-200 { color: #e2e8f0 !important; }

.border-slate-800 { border-color: #1e293b !important; }
.border-slate-700 { border-color: #334155 !important; }
.border-slate-300 { border-color: #cbd5e1 !important; }
.border-slate-200 { border-color: #e2e8f0 !important; }
.border-slate-100 { border-color: #f1f5f9 !important; }

/* 2. Palet Emerald (Green) */
.bg-emerald-700 { background-color: #047857 !important; color: #ffffff !important; }
.bg-emerald-600 { background-color: #059669 !important; color: #ffffff !important; }
.bg-emerald-500 { background-color: #10b981 !important; color: #ffffff !important; }
.bg-emerald-200 { background-color: #a7f3d0 !important; }
.bg-emerald-100 { background-color: #d1fae5 !important; }
.bg-emerald-50  { background-color: #ecfdf5 !important; }

.hover\:bg-emerald-700:hover { background-color: #047857 !important; }
.hover\:bg-emerald-500:hover { background-color: #10b981 !important; }
.hover\:bg-emerald-100:hover { background-color: #d1fae5 !important; }

.text-emerald-950 { color: #022c22 !important; }
.text-emerald-900 { color: #064e3b !important; }
.text-emerald-800 { color: #065f46 !important; }
.text-emerald-700 { color: #047857 !important; }
.text-emerald-600 { color: #059669 !important; }
.text-emerald-400 { color: #34d399 !important; }
.text-emerald-300 { color: #6ee7b7 !important; }

.border-emerald-400 { border-color: #34d399 !important; }
.border-emerald-300 { border-color: #6ee7b7 !important; }
.border-emerald-200 { border-color: #a7f3d0 !important; }

/* 3. Palet Amber (Warm Yellow/Orange) */
.bg-amber-500 { background-color: #f59e0b !important; color: #ffffff !important; }
.bg-amber-100 { background-color: #fef3c7 !important; }
.bg-amber-50  { background-color: #fffbeb !important; }

.hover\:bg-amber-100:hover { background-color: #fef3c7 !important; }

.text-amber-950 { color: #451a03 !important; }
.text-amber-900 { color: #78350f !important; }
.text-amber-800 { color: #92400e !important; }
.text-amber-500 { color: #f59e0b !important; }
.text-amber-400 { color: #fbbf24 !important; }

.border-amber-300 { border-color: #fcd34d !important; }
.border-amber-200 { border-color: #fde68a !important; }

/* 4. Palet Blue */
.bg-blue-700 { background-color: #1d4ed8 !important; color: #ffffff !important; }
.bg-blue-600 { background-color: #2563eb !important; color: #ffffff !important; }
.bg-blue-500 { background-color: #3b82f6 !important; color: #ffffff !important; }
.bg-blue-100 { background-color: #dbeafe !important; }
.bg-blue-50  { background-color: #eff6ff !important; }

.hover\:bg-blue-700:hover { background-color: #1d4ed8 !important; }
.hover\:bg-blue-500:hover { background-color: #3b82f6 !important; }
.hover\:bg-blue-100:hover { background-color: #dbeafe !important; }

.text-blue-900 { color: #1e3a8a !important; }
.text-blue-800 { color: #1e40af !important; }
.text-blue-700 { color: #1d4ed8 !important; }
.text-blue-600 { color: #2563eb !important; }
.text-blue-200 { color: #bfdbfe !important; }

.border-blue-400 { border-color: #60a5fa !important; }
.border-blue-300 { border-color: #93c5fd !important; }
.border-blue-200 { border-color: #bfdbfe !important; }

/* 5. Aturan Penjamin: Elemen teks putih WAJIB memiliki latar gelap */
.text-white {
    color: #ffffff !important;
}