/* SVNHS Alumni Association - Main Stylesheet */

/* Smooth transitions for dark mode */
html { transition: background-color 0.3s ease, color 0.3s ease; }
body, nav, .modal-content, .card, section, footer, input, select, textarea, button { transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; }

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--bg-secondary, #f1f1f1); }
::-webkit-scrollbar-thumb { background: var(--primary, #931818); border-radius: 4px; }
[data-theme="dark"]::-webkit-scrollbar-track { background: #1e293b; }
[data-theme="dark"]::-webkit-scrollbar-thumb { background: #64748b; }

.reveal-on-scroll { opacity: 0; transform: translateY(30px); transition: all 0.8s ease-out; }
.reveal-on-scroll.is-visible { opacity: 1; transform: translateY(0); }

.modal { opacity: 0; visibility: hidden; transition: all 0.3s ease-in-out; }
.modal.active { opacity: 1; visibility: visible; }
.modal.active .modal-content { transform: scale(1); opacity: 1; }
.modal-content { transform: scale(0.95); opacity: 0; transition: all 0.3s ease-in-out; }

.toast-container { position: fixed; top: 20px; right: 20px; z-index: 9999; display: flex; flex-direction: column; gap: 10px; }
.toast { padding: 16px 20px; border-radius: 12px; box-shadow: 0 10px 40px rgba(0,0,0,0.15); display: flex; align-items: center; gap: 12px; animation: slideIn 0.3s ease-out; max-width: 400px; }
.toast.success { background: linear-gradient(135deg, #10b981, #059669); color: white; }
.toast.error { background: linear-gradient(135deg, #ef4444, #dc2626); color: white; }
.toast.info { background: linear-gradient(135deg, #3b82f6, #2563eb); color: white; }

@keyframes slideIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes slideOut { from { transform: translateX(0); opacity: 1; } to { transform: translateX(100%); opacity: 0; } }
.toast.hiding { animation: slideOut 0.3s ease-in forwards; }

.btn-loading { position: relative; pointer-events: none; }
.btn-loading::after { content: ''; position: absolute; width: 20px; height: 20px; border: 2px solid transparent; border-top-color: currentColor; border-radius: 50%; animation: spin 0.8s linear infinite; right: 16px; top: 50%; transform: translateY(-50%); }
@keyframes spin { to { transform: translateY(-50%) rotate(360deg); } }

.badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 9999px; font-size: 12px; font-weight: 600; text-transform: capitalize; }
.badge-pending { background: linear-gradient(135deg, #fef3c7, #fde68a); color: #92400e; box-shadow: 0 2px 4px rgba(251, 191, 36, 0.2); }
.badge-pending::before { content: '⏳'; }
.badge-approved { background: linear-gradient(135deg, #d1fae5, #a7f3d0); color: #065f46; box-shadow: 0 2px 4px rgba(16, 185, 129, 0.2); }
.badge-approved::before { content: '✅'; }
.badge-rejected { background: linear-gradient(135deg, #fee2e2, #fecaca); color: #991b1b; box-shadow: 0 2px 4px rgba(239, 68, 68, 0.2); }
.badge-rejected::before { content: '❌'; }
.badge-verified { background: linear-gradient(135deg, #dbeafe, #bfdbfe); color: #1e40af; box-shadow: 0 2px 4px rgba(59, 130, 246, 0.2); }
.badge-verified::before { content: '✓'; }

/* Order status badges */
.badge-confirmed { background: linear-gradient(135deg, #dbeafe, #bfdbfe); color: #1e40af; }
.badge-confirmed::before { content: '✅'; }
.badge-shipped { background: linear-gradient(135deg, #e9d5ff, #d8b4fe); color: #7c3aed; }
.badge-shipped::before { content: '📦'; }
.badge-completed { background: linear-gradient(135deg, #d1fae5, #a7f3d0); color: #065f46; }
.badge-completed::before { content: '🎉'; }
.badge-cancelled { background: linear-gradient(135deg, #fee2e2, #fecaca); color: #991b1b; }
.badge-cancelled::before { content: '❌'; }

.stat-card { transition: all 0.3s ease; }
.stat-card:hover { transform: translateY(-4px); box-shadow: 0 20px 40px rgba(0,0,0,0.1); }

.data-table { width: 100%; border-collapse: collapse; }
.data-table th { background: #f8f9fa; padding: 12px 16px; text-align: left; font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; color: #6b7280; border-bottom: 2px solid #e5e7eb; }
.data-table td { padding: 16px; border-bottom: 1px solid #e5e7eb; }
.data-table tr:hover { background: #f9fafb; }

.admin-nav-link { transition: all 0.2s ease; }
.admin-nav-link:hover { background: rgba(147, 24, 24, 0.1); }
.admin-nav-link.active { background: #931818; color: white; }

/* ===== DARK MODE STYLES ===== */

/* Base body and backgrounds */
[data-theme="dark"] body { background-color: var(--bg-primary); color: var(--text-primary); }
[data-theme="dark"] .bg-white { background-color: var(--bg-primary) !important; }
[data-theme="dark"] .bg-gray-50, [data-theme="dark"] .bg-gray-100 { background-color: var(--bg-secondary) !important; }

/* Text colors */
[data-theme="dark"] .text-brand-black, [data-theme="dark"] .text-black { color: var(--text-primary) !important; }
[data-theme="dark"] .text-gray-900, [data-theme="dark"] .text-gray-800, [data-theme="dark"] .text-gray-700 { color: var(--text-primary) !important; }
[data-theme="dark"] .text-gray-600, [data-theme="dark"] .text-gray-500 { color: var(--text-secondary) !important; }
[data-theme="dark"] .text-gray-400, [data-theme="dark"] .text-gray-300 { color: var(--text-muted) !important; }

/* Borders */
[data-theme="dark"] .border-gray-100, [data-theme="dark"] .border-gray-200, [data-theme="dark"] .border-gray-300 { border-color: var(--border-color) !important; }

/* Navigation */
[data-theme="dark"] nav { background-color: var(--nav-bg) !important; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-color: var(--border-color) !important; }
[data-theme="dark"] #mobile-menu { background-color: var(--bg-primary) !important; border-color: var(--border-color) !important; }

/* Cards and shadows */
[data-theme="dark"] .shadow-xl, [data-theme="dark"] .shadow-lg, [data-theme="dark"] .shadow-md, [data-theme="dark"] .shadow { box-shadow: var(--card-shadow) !important; }
[data-theme="dark"] .rounded-xl, [data-theme="dark"] .rounded-2xl { background-color: var(--card-bg); }

/* Form inputs */
[data-theme="dark"] input, [data-theme="dark"] select, [data-theme="dark"] textarea { background-color: var(--input-bg) !important; border-color: var(--input-border) !important; color: var(--text-primary) !important; }
[data-theme="dark"] input::placeholder, [data-theme="dark"] textarea::placeholder { color: var(--text-muted) !important; }
[data-theme="dark"] input:focus, [data-theme="dark"] select:focus, [data-theme="dark"] textarea:focus { border-color: var(--primary) !important; }

/* Modals */
[data-theme="dark"] .modal-content { background-color: var(--bg-primary) !important; }
[data-theme="dark"] #registrationModal .modal-content > div:last-child, 
[data-theme="dark"] #loginModal .modal-content > div:last-child { background-color: var(--bg-secondary) !important; }

/* Ticket cards */
[data-theme="dark"] .sticky-card > div { background-color: var(--card-bg) !important; }
[data-theme="dark"] .sticky-card .shadow-inner { box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3) !important; }

/* Event schedule */
[data-theme="dark"] #event-schedule-container { background-color: var(--card-bg) !important; border-color: var(--border-color) !important; }
[data-theme="dark"] #event-list { background-color: var(--bg-secondary) !important; }
[data-theme="dark"] .event-item:hover { background-color: var(--bg-tertiary) !important; }
[data-theme="dark"] .event-item.border-primary { background-color: var(--bg-tertiary) !important; }

/* Footer */
[data-theme="dark"] footer { background-color: #020617 !important; }
[data-theme="dark"] footer .bg-gray-800 { background-color: #1e293b !important; }

/* Hover effects */
[data-theme="dark"] .hover\:bg-gray-100:hover, [data-theme="dark"] .hover\:bg-gray-50:hover { background-color: var(--bg-tertiary) !important; }

/* Dropdowns */
[data-theme="dark"] #userDropdown { background-color: var(--bg-primary) !important; border-color: var(--border-color) !important; }
[data-theme="dark"] #userDropdown a:hover { background-color: var(--bg-secondary) !important; }

/* Badges */
[data-theme="dark"] .badge-pending { background: linear-gradient(135deg, #422006, #78350f); }
[data-theme="dark"] .badge-approved { background: linear-gradient(135deg, #064e3b, #065f46); }
[data-theme="dark"] .badge-rejected { background: linear-gradient(135deg, #7f1d1d, #991b1b); }

/* Data table */
[data-theme="dark"] .data-table th { background: var(--bg-tertiary); color: var(--text-secondary); border-color: var(--border-color); }
[data-theme="dark"] .data-table td { border-color: var(--border-color); }
[data-theme="dark"] .data-table tr:hover { background: var(--bg-secondary); }

/* Stat cards */
[data-theme="dark"] .stat-card { background-color: var(--card-bg); }
[data-theme="dark"] .stat-card:hover { box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3); }

/* Gradient overlays */
[data-theme="dark"] .bg-gradient-to-t.from-white { --tw-gradient-from: var(--bg-primary) !important; }

/* Prose content */
[data-theme="dark"] .prose { color: var(--text-secondary); }
[data-theme="dark"] .prose a { color: var(--primary-light); }
[data-theme="dark"] .prose h1, [data-theme="dark"] .prose h2, [data-theme="dark"] .prose h3 { color: var(--text-primary); }

/* Dark mode toggle button */
.theme-toggle { 
    display: flex !important; 
    align-items: center !important; 
    justify-content: center !important; 
    width: 40px !important; 
    height: 40px !important; 
    border-radius: 50% !important; 
    background: transparent !important; 
    border: 2px solid #e5e7eb !important; 
    cursor: pointer !important; 
    transition: all 0.3s ease !important;
    position: relative !important;
}
.theme-toggle:hover { 
    background: #f3f4f6 !important; 
    border-color: #d1d5db !important; 
    transform: scale(1.05); 
}
.theme-toggle .theme-icon { 
    font-size: 18px !important; 
    color: #f59e0b !important; 
    transition: all 0.3s ease !important; 
}
.theme-toggle.dark { 
    border-color: #475569 !important; 
    background: #334155 !important; 
}
.theme-toggle.dark:hover { 
    background: #475569 !important; 
    border-color: #64748b !important; 
}
.theme-toggle.dark .theme-icon { color: #fbbf24 !important; }

/* Special effects for dark mode */
[data-theme="dark"] .blob-shape { opacity: 0.3; }
[data-theme="dark"] img { filter: brightness(0.95); }

/* Ticket card notches */
[data-theme="dark"] .sticky-card .absolute.rounded-full { background-color: var(--bg-primary) !important; }
[data-theme="dark"] .ticket-divider { border-color: var(--border-color) !important; }
[data-theme="dark"] .ticket-divider::before, [data-theme="dark"] .ticket-divider::after { background-color: var(--bg-primary) !important; }

/* Back to top button */
[data-theme="dark"] a[href="#navbar"] { background-color: var(--bg-tertiary) !important; }
[data-theme="dark"] a[href="#navbar"]:hover { background-color: var(--primary) !important; }

/* Newsletter input */
[data-theme="dark"] footer input { background-color: #1e293b !important; border-color: #475569 !important; }
[data-theme="dark"] footer input::placeholder { color: #64748b !important; }

/* Hero gradient overlay */
[data-theme="dark"] .from-white { --tw-gradient-from: var(--bg-primary) !important; }

/* Empty state */
[data-theme="dark"] #event-empty-state { background-color: var(--card-bg) !important; border-color: var(--border-color) !important; }

/* Merch price tags */
[data-theme="dark"] .sticky-card ~ div .bg-white { background-color: var(--card-bg) !important; }

/* Batches page cream background */
[data-theme="dark"] .bg-cream { background-color: var(--bg-primary) !important; }
[data-theme="dark"] .bg-cream\/95 { background-color: var(--nav-bg) !important; }

/* Product cards */
[data-theme="dark"] .group:hover .bg-white { background-color: var(--card-bg) !important; }

/* Filter sidebar */
[data-theme="dark"] aside { background-color: var(--card-bg) !important; }

/* Select dropdowns */
[data-theme="dark"] select option { background-color: var(--bg-secondary); color: var(--text-primary); }