/* --- 1. MỞ KHÓA TRÌNH DUYỆT (Cho phép cuộn trang để vuốt thanh địa chỉ) --- */
body { 
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; 
    margin: 0; 
    background-color: #e2e8f0; /* bg-slate-200 */
}
.dark body {
    background-color: #0f172a; /* bg-slate-900 */
}

/* --- 2. HỆ MÀU GIAO DIỆN SỔ THU CHI --- */
.bg-gradient-sunsilk { background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%); }
.dark .bg-gradient-sunsilk { background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%) !important;}
.bg-gradient-invest { background: linear-gradient(135deg, #047857 0%, #10b981 100%); }
.dark .bg-gradient-invest { background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%) !important;}
.bg-gradient-card { background: linear-gradient(135deg, #334155 0%, #0f172a 100%); }

.dark .bg-white { background-color: #1e293b !important; border-color: #334155 !important; color: #f8fafc !important; }
.dark .bg-slate-50 { background-color: #0f172a !important; border-color: #334155 !important; color: #cbd5e1 !important; }
.dark .bg-slate-100 { background-color: #334155 !important; }
.dark .text-slate-800, .dark .text-slate-700 { color: #f1f5f9 !important; }
.dark .text-slate-500 { color: #94a3b8 !important; }
.dark .border-slate-100, .dark .border-slate-200 { border-color: #334155 !important; }

/* --- 3. ĐỊNH DẠNG COMPONENT --- */
.input-money-container { display: flex; align-items: center; position: relative; height: 100%; }
.thousand-unit { position: absolute; right: 10px; font-weight: 600; color: #94a3b8; pointer-events: none; }
.select-wrapper { position: relative; height: 100%; }
.select-wrapper::after { content: '\f107'; font-family: 'Font Awesome 6 Free'; font-weight: 900; position: absolute; right: 10px; top: 50%; transform: translateY(-50%); pointer-events: none; color: #64748b; font-size: 0.8rem; }

@keyframes slideIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.item-new { animation: slideIn 0.3s ease-out forwards; }

/* --- 4. TÙY CHỈNH THANH CUỘN (SCROLLBAR) --- */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
.dark ::-webkit-scrollbar-thumb { background: #475569; }
.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }

optgroup { font-weight: 900; color: #1e40af; }
.dark optgroup { color: #38bdf8; }

input[type="month"] {
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-appearance: none;
    appearance: none;
}

/* --- 5. ĐIỀU CHỈNH KHUNG APP (Hỗ trợ kéo vuốt) --- */
.app-container { 
    min-height: 100vh; /* Chuyển từ height cố định sang min-height thả rông */
    display: flex; 
    flex-direction: column; 
    margin: 0 auto; /* Căn giữa app trên màn hình máy tính */
    background-color: #ffffff;
}

.tab-content { 
    display: none; 
    flex: 1; 
    /* ĐÃ XÓA: overflow-y: auto (Trả quyền cuộn cho trình duyệt) */
    padding-bottom: 35px; /* Chừa không gian 85px ở đáy cho Menu bám lên */
}
.tab-content.active { display: block; animation: slideIn 0.2s ease-out; }