/* Base Styles */
body {
    font-family: 'Inter', sans-serif;
}

/* Animations */
.fade-in {
    animation: fadeIn 0.5s ease-in;
}

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

/* Glass Effect */
.glass {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
}

/* Gradient Backgrounds */
.gradient-bg {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

/* Card Hover Effects */
.card-hover {
    transition: all 0.3s ease;
}

.card-hover:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

/* Step Indicators */
.step-active {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.step-inactive {
    background: #e5e7eb;
    color: #6b7280;
}

/* Journal Cards */
.journal-card {
    border-left: 4px solid #667eea;
}

.analysis-card {
    border-left: 4px solid #10b981;
}

/* Prompt Box */
.prompt-box {
    background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
}

/* Section Visibility */
.hidden-section {
    display: none;
}

.visible-section {
    display: block;
    animation: fadeIn 0.5s ease-in;
}

/* TikTok Button */
.tiktok-btn {
    background: linear-gradient(135deg, #ff0050 0%, #00f2ea 100%);
}

/* Copy Success State */
.copy-success {
    background-color: #10b981 !important;
}

/* Table Output Styling */
.table-output {
    font-family: 'Courier New', monospace;
    font-size: 0.85rem;
    line-height: 1.4;
}

/* Efficiency Badge */
.efficiency-badge {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Pre Tag Styling */
pre {
    white-space: pre-wrap;
    word-wrap: break-word;
}

/* Button Transitions */
button {
    transition: all 0.3s ease;
}

/* Focus States */
input:focus,
textarea:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

/* FIX MOBILE UX: Membuat Sidebar transparan & tidak mengganggu saat tidak di-hover di HP */
@media (max-width: 768px) {
    .fixed.left-1, .fixed.right-1 {
        opacity: 0.25; /* Buat buram saat tidak disentuh */
        transform: translateY(-50%) scale(0.85); /* Perkecil sedikit ukurannya */
        transition: all 0.3s ease;
    }
    
    /* Saat area sidebar disentuh/di-scroll di atasnya, kembalikan ke warna asli */
    .fixed.left-1:hover, .fixed.right-1:hover,
    .fixed.left-1:active, .fixed.right-1:active {
        opacity: 1;
        transform: translateY(-50%) scale(1);
    }
}

/* Print Styles */
@media print {
    header,
    footer,
    .proposal-nav-btn,
    button,
    .fixed {
        display: none !important;
    }
    
    .proposal-section {
        display: block !important;
        page-break-inside: avoid;
    }
}

/* ========================================= */
/* DARK MODE OVERRIDES (REVISI KONTRAS TOTAL)*/
/* ========================================= */

body.dark-mode {
    background-color: #111827 !important; /* gray-900 (Hitam pekat) */
    color: #e5e7eb !important; /* gray-200 (Putih terang) */
}

/* 1. MENGATASI BACKGROUND KARTU & KOTAK */
body.dark-mode .bg-white,
body.dark-mode .bg-gray-50,
body.dark-mode .bg-gray-100 {
    background-color: #1f2937 !important; /* gray-800 */
    border-color: #374151 !important; /* gray-700 */
    color: #e5e7eb !important;
}

/* 2. MENGATASI FOOTER KAKU (GAMBAR 1) */
/* Menyamakan warna footer dengan body agar sudut kotaknya membaur hilang */
body.dark-mode .sticky.bottom-0,
body.dark-mode .bg-gray-50\/95 {
    background-color: #111827 !important; /* Sama persis dengan body */
    border-top-color: #374151 !important; /* Garis batas tipis nan elegan */
}

/* 3. MENGATASI TEKS TABEL TAK TERBACA (GAMBAR 2) */
/* Memaksa semua teks pekat (termasuk hasil parser Markdown) menjadi putih terang */
body.dark-mode .text-gray-900,
body.dark-mode .text-gray-800,
body.dark-mode .text-gray-700,
body.dark-mode .text-gray-600,
body.dark-mode .text-gray-500 {
    color: #f3f4f6 !important; /* gray-100 */
}

/* 4. MENGATASI TOMBOL KEMBALI */
body.dark-mode .bg-gray-200,
body.dark-mode .bg-gray-300 {
    background-color: #374151 !important; /* gray-700 */
    color: #f9fafb !important; /* Teks putih */
    border-color: #4b5563 !important;
}
body.dark-mode .hover\:bg-gray-300:hover,
body.dark-mode .hover\:bg-gray-200:hover,
body.dark-mode .hover\:bg-gray-100:hover {
    background-color: #4b5563 !important; 
}

/* 5. MENERANGKAN WARNA TEKS JUDUL & INFO BOX (Kuning, Hijau, Ungu, dll) */
body.dark-mode .text-indigo-600, body.dark-mode .text-indigo-700, body.dark-mode .text-indigo-800, body.dark-mode .text-indigo-900 { color: #818cf8 !important; }
body.dark-mode .text-green-600, body.dark-mode .text-green-700, body.dark-mode .text-green-800, body.dark-mode .text-green-900 { color: #34d399 !important; }
body.dark-mode .text-purple-600, body.dark-mode .text-purple-700, body.dark-mode .text-purple-800, body.dark-mode .text-purple-900 { color: #a78bfa !important; }
body.dark-mode .text-yellow-600, body.dark-mode .text-yellow-700, body.dark-mode .text-yellow-800, body.dark-mode .text-yellow-900 { color: #fde047 !important; }
body.dark-mode .text-red-600, body.dark-mode .text-red-700, body.dark-mode .text-red-800, body.dark-mode .text-red-900 { color: #f87171 !important; }
body.dark-mode .text-blue-600, body.dark-mode .text-blue-700, body.dark-mode .text-blue-800, body.dark-mode .text-blue-900 { color: #60a5fa !important; }
body.dark-mode .text-teal-600, body.dark-mode .text-teal-700, body.dark-mode .text-teal-800, body.dark-mode .text-teal-900 { color: #2dd4bf !important; }
body.dark-mode .text-emerald-600, body.dark-mode .text-emerald-700, body.dark-mode .text-emerald-800, body.dark-mode .text-emerald-900 { color: #34d399 !important; }

/* 6. MENGATASI BACKGROUND BOX PERINGATAN & LINGKARAN IKON/NOMOR */
body.dark-mode .bg-red-50, body.dark-mode .bg-red-50\/50, body.dark-mode .bg-red-100 { 
    background-color: rgba(153, 27, 27, 0.2) !important; 
    border-color: rgba(153, 27, 27, 0.4) !important; 
}
body.dark-mode .bg-blue-50, body.dark-mode .bg-blue-50\/50, body.dark-mode .bg-blue-100 { 
    background-color: rgba(30, 58, 138, 0.2) !important; 
    border-color: rgba(30, 58, 138, 0.4) !important; 
}
body.dark-mode .bg-yellow-50, body.dark-mode .bg-yellow-50\/50, body.dark-mode .bg-yellow-100 { 
    background-color: rgba(133, 77, 14, 0.3) !important; /* Dibuat gelap transparan */
    border-color: rgba(133, 77, 14, 0.4) !important; 
}
body.dark-mode .bg-green-50, body.dark-mode .bg-green-100 { 
    background-color: rgba(6, 78, 59, 0.2) !important; 
    border-color: rgba(6, 78, 59, 0.4) !important; 
}
body.dark-mode .bg-purple-50, body.dark-mode .bg-purple-100 { 
    background-color: rgba(88, 28, 135, 0.2) !important; 
    border-color: rgba(88, 28, 135, 0.4) !important; 
}
body.dark-mode .bg-teal-50, body.dark-mode .bg-teal-100 { 
    background-color: rgba(19, 78, 74, 0.2) !important; 
    border-color: rgba(19, 78, 74, 0.4) !important; 
}
body.dark-mode .bg-emerald-50, body.dark-mode .bg-emerald-100 { 
    background-color: rgba(6, 78, 59, 0.2) !important; 
    border-color: rgba(6, 78, 59, 0.4) !important; 
}
body.dark-mode .bg-indigo-50, body.dark-mode .bg-indigo-100 { 
    background-color: rgba(49, 46, 129, 0.3) !important;
    border-color: rgba(49, 46, 129, 0.5) !important; 
}

/* 7. MENGATASI TABEL MARKDOWN KHUSUS */
body.dark-mode th {
    background-color: #374151 !important; /* Header tabel abu-abu gelap */
    color: #f9fafb !important; /* Teks header putih */
}
body.dark-mode td {
    border-color: #4b5563 !important; /* Garis tabel menyesuaikan */
}
body.dark-mode .border,
body.dark-mode .border-gray-200,
body.dark-mode .border-gray-100,
body.dark-mode .border-b {
    border-color: #374151 !important;
}

/* 8. FORM INPUT & TEXTAREA */
body.dark-mode textarea,
body.dark-mode input,
body.dark-mode select {
    background-color: #374151 !important; 
    color: #f9fafb !important; 
    border-color: #4b5563 !important; 
}
body.dark-mode textarea:focus,
body.dark-mode input:focus,
body.dark-mode select:focus {
    border-color: #818cf8 !important; 
}

/* 9. ELEMEN HEADER & SIDEBAR */
body.dark-mode .gradient-bg {
    background: linear-gradient(135deg, #1e1b4b 0%, #312e81 100%) !important;
}
body.dark-mode .step-active {
    background: linear-gradient(135deg, #3730a3 0%, #4c1d95 100%) !important;
}
body.dark-mode .bg-white\/80 {
    background-color: rgba(31, 41, 55, 0.85) !important;
}

/* 10. FIX KHUSUS: KARTU JUDUL (STEP 4) SAAT HOVER/SELECTED */
/* Solusi: Paksa teks h4 di dalam kartu yang aktif menjadi putih mutlak. */
body.dark-mode .title-card:hover h4,
body.dark-mode .title-card.bg-yellow-50 h4 {
    color: #ffffff !important; /* Putih bersih */
}

/* Opsional: Membuat background kartu yang dipilih (selected) 
   sedikit lebih terang/menyala agar beda dengan kartu biasa yang gelap. */
body.dark-mode .title-card.bg-yellow-50 {
    /* Menggunakan warna kuning emas yang lebih cerah tapi tetap transparan */
    background-color: rgba(234, 179, 8, 0.25) !important; 
    border-color: rgba(234, 179, 8, 0.6) !important;
}

/* ========================================= */
/* 11. FIX HOVER KOTAK PENCARIAN JURNAL (STEP 1) */
/* ========================================= */

/* Mencegah kotak hasil pencarian menjadi putih/terang saat di-hover di mode gelap */
body.dark-mode .hover\:bg-red-50:hover { 
    background-color: rgba(153, 27, 27, 0.3) !important; 
}
body.dark-mode .hover\:bg-blue-50:hover { 
    background-color: rgba(30, 58, 138, 0.3) !important; 
}
body.dark-mode .hover\:bg-yellow-50:hover { 
    background-color: rgba(133, 77, 14, 0.4) !important; 
}
body.dark-mode .hover\:bg-green-50:hover { 
    background-color: rgba(6, 78, 59, 0.3) !important; 
}
body.dark-mode .hover\:bg-purple-50:hover { 
    background-color: rgba(88, 28, 135, 0.3) !important; 
}
body.dark-mode .hover\:bg-teal-50:hover { 
    background-color: rgba(19, 78, 74, 0.3) !important; 
}
body.dark-mode .hover\:bg-orange-50:hover { 
    background-color: rgba(154, 52, 18, 0.3) !important; 
}
body.dark-mode .hover\:bg-indigo-50:hover { 
    background-color: rgba(49, 46, 129, 0.4) !important; 
}

/* ========================================= */
/* PLAGIARISM CHECKER STYLES (Diperbaiki)    */
/* ========================================= */

.plagiarism-panel {
    background: linear-gradient(to right, #fff7ed, #fffbeb);
    border: 1px solid #fed7aa;
    border-radius: 0.75rem;
    overflow: hidden;
}

.plagiarism-score-high { 
    background-color: #fee2e2; 
    color: #991b1b; 
}
.plagiarism-score-medium { 
    background-color: #fef9c3; 
    color: #854d0e; 
}
.plagiarism-score-low { 
    background-color: #d1fae5; 
    color: #065f46; 
}
.plagiarism-score-safe { 
    background-color: #dbeafe; 
    color: #1e40af; 
}

/* Highlight di editor */
.cm-highlight-plagiarism {
    background-color: rgba(239, 68, 68, 0.2);
    border-bottom: 2px wavy #ef4444;
}

/* Progress bar animation */
@keyframes pulse-orange {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}
.plagiarism-scanning {
    animation: pulse-orange 2s infinite;
}

/* Provider selection */
.provider-btn.selected {
    border-color: #f97316;
    background-color: #fff7ed;
}