/* ============================================================
 * File   : public/assets/css/main.css
 * Fungsi : File pengatur desain dan warna-warni (CSS) tambahan
 *          khusus untuk halaman Pelanggan.
 *
 * Berlaku di: [LOKAL & CLOUD]
 * ============================================================ */


/* ════════════════════════════════════════════
   1. DESAIN DASAR HALAMAN PELANGGAN
   Mengatur jenis huruf, desain kotak kaca, dan tombol mengkilap.
   ════════════════════════════════════════════ */

/* Font global menggunakan Inter dari Google Fonts */
body { font-family: 'Inter', sans-serif; }

/* Navbar kaca (glass morphism effect) — transparan dengan blur */
.glass-nav {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

/* Teks dengan efek gradient biru → ungu */
.text-gradient {
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Tombol CTA (Call To Action) navbar — "Pesan Sekarang" */
.nav-btn {
    background: linear-gradient(90deg, #3b82f6 0%, #6366f1 100%);
    box-shadow: 0 4px 20px rgba(59,130,246,0.4);
    transition: all 0.3s ease;
}
/* Efek hover tombol CTA — naik sedikit dengan shadow lebih terang */
.nav-btn:hover {
    box-shadow: 0 6px 25px rgba(59,130,246,0.6);
    transform: translateY(-2px);
}


/* ════════════════════════════════════════════
   2. DESAIN SAAT MENCETAK (PRINT)
   Mengatur agar saat Admin mencetak laporan (PDF/Kertas),
   warna latar yang hitam berubah jadi putih supaya hemat tinta.
   ════════════════════════════════════════════ */
@media print {
    /* Paksa browser mencetak warna dengan tepat */
    * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }

    /* Sembunyikan elemen yang tidak relevan saat cetak */
    nav, footer, button, a[href*="logout"] { display: none !important; }

    /* Ubah latar belakang gelap menjadi putih untuk print */
    body, main { background: #ffffff !important; color: #111827 !important; }

    /* Reset komponen dark mode ke latar putih */
    [class*="bg-[#"], [class*="bg-slate-"], [class*="bg-blue-9"], [class*="bg-indigo-"] {
        background: #ffffff !important; color: #111827 !important;
        border: 1.5px solid #d1d5db !important; box-shadow: none !important;
    }

    /* Pastikan semua teks tercetak dengan warna gelap */
    h1, h2, h3, h4, th, td, p, span { color: #111827 !important; text-shadow: none !important; }

    /* Gaya tabel saat dicetak */
    table { page-break-inside: avoid; width: 100%; border-collapse: collapse; }
    tr    { page-break-inside: avoid; border-bottom: 1px solid #e5e7eb !important; }
    th    { background: #f3f4f6 !important; border-bottom: 2px solid #6b7280 !important; font-weight: 800 !important; color: #000 !important; }
    td, th { padding: 12px 10px !important; }

    /* Badge/label status warna tetap tercetak dengan benar */
    [class*="text-emerald-"], [class*="bg-emerald-"] { background: #d1fae5 !important; color: #065f46 !important; border-color: #6ee7b7 !important; }
    [class*="text-blue-"],    [class*="bg-blue-"]    { background: #dbeafe !important; color: #1e40af !important; border-color: #93c5fd !important; }
    [class*="text-amber-"],   [class*="bg-amber-"]   { background: #fef3c7 !important; color: #92400e !important; border-color: #fcd34d !important; }
    [class*="text-red-"],     [class*="bg-red-"]     { background: #fee2e2 !important; color: #991b1b !important; border-color: #fca5a5 !important; }
    [class*="text-violet-"],  [class*="bg-violet-"]  { background: #ede9fe !important; color: #5b21b6 !important; border-color: #c4b5fd !important; }
}


/* ════════════════════════════════════════════
   3. MEMPERJELAS TULISAN DI LAYAR GELAP
   Membuat huruf tebal dan lebih terang agar mudah dibaca.
   ════════════════════════════════════════════ */
th, td { font-weight: 600 !important; }
.text-slate-200, .text-slate-300 { color: #f1f5f9 !important; font-weight: 600 !important; }


/* ════════════════════════════════════════════
   4. EFEK ANIMASI MUNCUL
   Membuat efek kotak konfirmasi muncul seperti melompat kecil (Pop-up).
   ════════════════════════════════════════════ */
@keyframes modalPop {
    from { opacity: 0; transform: scale(0.88) translateY(12px); }
    to   { opacity: 1; transform: scale(1)    translateY(0);    }
}