/* NalgaBudget — custom styles beyond Tailwind */

/* Over-budget shake animation */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-4px); }
    75% { transform: translateX(4px); }
}
.shake {
    animation: shake 0.3s ease-in-out;
}

/* Progress bar animation */
@keyframes grow {
    from { width: 0; }
}
.progress-animate {
    animation: grow 0.6s ease-out;
}

/* Drag ghost lift */
.sortable-ghost {
    opacity: 0.4;
}
.sortable-drag {
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.15);
    transform: scale(1.02);
}

/* Smooth transitions for HTMX swaps */
.htmx-settling {
    transition: opacity 0.2s ease-in-out;
}

/* Unassigned tray dashed border */
.unassigned-card {
    border: 2px dashed #d1d5db;
}
.unassigned-card:hover {
    border-color: #22c55e;
}

/* Drag-and-drop styles */
.unassigned-card.dragging {
    opacity: 0.4;
    border-color: #22c55e;
}
.drop-target.drop-highlight {
    background-color: #f0fdf4 !important;
    outline: 2px dashed #22c55e;
    outline-offset: -2px;
}
.drag-handle {
    touch-action: none;
}
.dragging {
    user-select: none;
    -webkit-user-select: none;
}

/* HTMX indicator */
.htmx-indicator {
    display: none;
}
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
    display: inline;
}

/* File drop zone */
.file-drop-zone {
    border: 2px dashed #d1d5db;
    transition: all 0.2s;
}
.file-drop-zone.drag-over {
    border-color: #22c55e;
    background-color: #f0fdf4;
}

/* Confidence badge colors */
.confidence-high { background-color: #f0fdf4; color: #16a34a; }
.confidence-mid { background-color: #eff6ff; color: #2563eb; }
.confidence-low { background-color: #fff7ed; color: #ea580c; }

/* Spinner */
@keyframes spin {
    to { transform: rotate(360deg); }
}
.animate-spin {
    animation: spin 0.8s linear infinite;
}
.border-3 {
    border-width: 3px;
}

/* ─── Theme Toggle Icons ───────────────────────────────────────────────────── */
html.dark .dark-hidden-moon { display: none; }
html.dark .dark-hidden-sun { display: block !important; }

/* ─── Dark Mode Overrides ──────────────────────────────────────────────────── */

/* Base backgrounds */
html.dark body { background-color: #0f172a !important; color: #e2e8f0 !important; }
html.dark .bg-white { background-color: #1e293b !important; }
html.dark .bg-gray-50 { background-color: #0f172a !important; }
html.dark .bg-gray-50\/95 { background-color: rgba(15, 23, 42, 0.95) !important; }
html.dark .bg-gray-100 { background-color: #1e293b !important; }

/* Borders */
html.dark .border-gray-100 { border-color: #334155 !important; }
html.dark .border-gray-200 { border-color: #475569 !important; }
html.dark .border-gray-300 { border-color: #475569 !important; }
html.dark .border-gray-200\/50 { border-color: rgba(71, 85, 105, 0.5) !important; }
html.dark .divide-gray-50 > :not(:last-child) { border-color: #334155; }

/* Text */
html.dark .text-slate-800 { color: #e2e8f0 !important; }
html.dark .text-slate-700 { color: #cbd5e1 !important; }
html.dark .text-slate-600 { color: #94a3b8 !important; }
html.dark .text-slate-500 { color: #94a3b8 !important; }
html.dark .text-slate-400 { color: #64748b !important; }

/* Sidebar */
html.dark aside { background-color: #1e293b !important; border-color: #334155 !important; }
html.dark aside a:hover { background-color: #334155 !important; }
html.dark .bg-brand-50 { background-color: rgba(34, 197, 94, 0.1) !important; }
html.dark .bg-brand-100 { background-color: rgba(34, 197, 94, 0.15) !important; }

/* Mobile header & bottom nav */
html.dark .md\:hidden.fixed { background-color: #1e293b !important; border-color: #334155 !important; }

/* Form inputs */
html.dark input[type="text"],
html.dark input[type="email"],
html.dark input[type="password"],
html.dark input[type="number"],
html.dark input[type="date"],
html.dark input[type="search"],
html.dark select,
html.dark textarea {
    background-color: #0f172a !important;
    color: #e2e8f0 !important;
    border-color: #475569 !important;
}
html.dark input::placeholder,
html.dark textarea::placeholder { color: #64748b !important; }
html.dark input:disabled,
html.dark select:disabled { background-color: #1e293b !important; color: #64748b !important; }

/* Shadows */
html.dark .shadow-sm { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important; }
html.dark .shadow-lg { box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important; }

/* Cards & panels */
html.dark .rounded-2xl.shadow-sm { background-color: #1e293b; }

/* Status badges */
html.dark .bg-green-50 { background-color: rgba(34, 197, 94, 0.1) !important; }
html.dark .bg-green-100 { background-color: rgba(34, 197, 94, 0.15) !important; }
html.dark .bg-red-50 { background-color: rgba(239, 68, 68, 0.1) !important; }
html.dark .bg-orange-50 { background-color: rgba(249, 115, 22, 0.1) !important; }
html.dark .bg-blue-50 { background-color: rgba(59, 130, 246, 0.1) !important; }
html.dark .bg-yellow-50 { background-color: rgba(234, 179, 8, 0.1) !important; }
html.dark .bg-violet-50 { background-color: rgba(139, 92, 246, 0.1) !important; }
html.dark .bg-cyan-50 { background-color: rgba(6, 182, 212, 0.1) !important; }
html.dark .bg-indigo-50 { background-color: rgba(99, 102, 241, 0.1) !important; }
html.dark .bg-amber-50 { background-color: rgba(245, 158, 11, 0.1) !important; }
html.dark .bg-rose-50 { background-color: rgba(244, 63, 94, 0.1) !important; }

/* Budget group tinted backgrounds */
html.dark .bg-blue-50\/50 { background-color: rgba(59, 130, 246, 0.08) !important; }
html.dark .bg-emerald-50\/50 { background-color: rgba(16, 185, 129, 0.08) !important; }
html.dark .bg-violet-50\/50 { background-color: rgba(139, 92, 246, 0.08) !important; }
html.dark .bg-amber-50\/50 { background-color: rgba(245, 158, 11, 0.08) !important; }
html.dark .bg-rose-50\/50 { background-color: rgba(244, 63, 94, 0.08) !important; }
html.dark .bg-cyan-50\/50 { background-color: rgba(6, 182, 212, 0.08) !important; }
html.dark .bg-indigo-50\/50 { background-color: rgba(99, 102, 241, 0.08) !important; }
html.dark .bg-orange-50\/50 { background-color: rgba(249, 115, 22, 0.08) !important; }

/* Budget group brighter text */
html.dark .text-blue-700 { color: #60a5fa !important; }
html.dark .text-emerald-700 { color: #34d399 !important; }
html.dark .text-violet-700 { color: #a78bfa !important; }
html.dark .text-amber-700 { color: #fbbf24 !important; }
html.dark .text-rose-700 { color: #fb7185 !important; }
html.dark .text-cyan-700 { color: #22d3ee !important; }
html.dark .text-indigo-700 { color: #818cf8 !important; }
html.dark .text-orange-700 { color: #fb923c !important; }

/* Hover states */
html.dark .hover\:bg-gray-50:hover { background-color: #334155 !important; }
html.dark .hover\:bg-gray-50\/50:hover { background-color: rgba(51, 65, 85, 0.5) !important; }

/* Progress bar track */
html.dark .bg-gray-100.rounded-full { background-color: #334155 !important; }

/* Confidence badges */
html.dark .confidence-high { background-color: rgba(34, 197, 94, 0.1); color: #4ade80; }
html.dark .confidence-mid { background-color: rgba(59, 130, 246, 0.1); color: #60a5fa; }
html.dark .confidence-low { background-color: rgba(249, 115, 22, 0.1); color: #fb923c; }

/* Autocomplete dropdown */
html.dark .ac-dropdown { background-color: #1e293b !important; border-color: #475569 !important; }
html.dark .ac-item:hover { background-color: #334155 !important; }
html.dark .ac-item .text-slate-700 { color: #e2e8f0 !important; }
html.dark .bg-green-50 { background-color: rgba(34, 197, 94, 0.1) !important; }

/* Drag styles */
html.dark .drop-target.drop-highlight { background-color: rgba(34, 197, 94, 0.1) !important; outline-color: #22c55e; }
html.dark .sortable-drag { box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.4); }

/* Unassigned card */
html.dark .unassigned-card { border-color: #475569; }
html.dark .unassigned-card:hover { border-color: #22c55e; }

/* File drop zone */
html.dark .file-drop-zone { border-color: #475569; }
html.dark .file-drop-zone.drag-over { border-color: #22c55e; background-color: rgba(34, 197, 94, 0.1); }

/* LLM status */
html.dark #llm-status { background-color: #0f172a !important; }

/* Account type badges */
html.dark .bg-blue-50.text-blue-600 { background-color: rgba(59, 130, 246, 0.1) !important; }
html.dark .bg-green-50.text-green-600 { background-color: rgba(34, 197, 94, 0.1) !important; }
html.dark .bg-orange-50.text-orange-600 { background-color: rgba(249, 115, 22, 0.1) !important; }

/* Checkbox */
html.dark input[type="checkbox"] { background-color: #0f172a; border-color: #475569; }

/* Charts (insights/networth) */
html.dark canvas { filter: none; }

/* Scrollbar */
html.dark ::-webkit-scrollbar { width: 8px; }
html.dark ::-webkit-scrollbar-track { background: #0f172a; }
html.dark ::-webkit-scrollbar-thumb { background: #334155; border-radius: 4px; }
html.dark ::-webkit-scrollbar-thumb:hover { background: #475569; }

/* Item three-dot menu */
html.dark .item-menu { background-color: #1e293b !important; border-color: #475569 !important; }
html.dark .item-menu button:hover { background-color: #334155 !important; }
html.dark .item-menu .text-slate-600 { color: #cbd5e1 !important; }
html.dark .item-menu .text-slate-400 { color: #64748b !important; }
html.dark .item-menu .text-red-500:hover { background-color: rgba(239, 68, 68, 0.1) !important; }

/* Transaction side panel */
html.dark #txn-panel { background-color: #1e293b !important; border-color: #334155 !important; }
html.dark #txn-panel .text-slate-800 { color: #e2e8f0 !important; }
html.dark #txn-panel .text-slate-700 { color: #cbd5e1 !important; }
html.dark #txn-panel .text-slate-600 { color: #94a3b8 !important; }
html.dark #txn-panel .text-slate-400 { color: #64748b !important; }
html.dark #txn-panel .hover\:bg-gray-50:hover { background-color: #334155 !important; }
html.dark #txn-panel .border-gray-200 { border-color: #475569 !important; }

/* Undo toast */
html.dark #undo-toast .bg-slate-800 { background-color: #0f172a !important; border: 1px solid #334155; }

/* Auth pages — standalone card */
html.dark .bg-white.rounded-2xl { background-color: #1e293b !important; }