/* FormFlow Custom Styles */ /* Prevent horizontal overflow on mobile */ html, body { max-width: 100%; overflow-x: hidden; } /* Smooth scrollbar */ * { scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent; } *::-webkit-scrollbar { width: 6px; height: 6px; } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { background-color: #cbd5e1; border-radius: 3px; } /* Smooth touch scrolling */ .overflow-x-auto { -webkit-overflow-scrolling: touch; } /* Line clamp */ .line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* Smooth transitions */ * { transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } /* Focus ring style */ :focus-visible { outline: 2px solid #4f46e5; outline-offset: 2px; } /* Drag ghost */ [draggable="true"] { user-select: none; } [draggable="true"]:active { opacity: 0.7; } /* Animate spin for loading */ @keyframes spin { to { transform: rotate(360deg); } } .animate-spin { animation: spin 1s linear infinite; } /* Glassmorphism */ .glass { background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } /* ================================================================ DARK MODE — Applied when ================================================================ */ html.dark { color-scheme: dark; } /* Smooth transition when toggling */ html.dark-transition *, html.dark-transition *::before, html.dark-transition *::after { transition: background-color 0.25s ease, border-color 0.25s ease, color 0.15s ease !important; } /* ── Layout & Base ── */ html.dark body { background-color: #0c1421; color: #e2e8f0; } html.dark .min-h-screen { background-color: #0c1421 !important; } html.dark .bg-slate-50 { background-color: #15202f !important; } html.dark .bg-white { background-color: #1c2a3a !important; } html.dark .bg-white\/80 { background-color: rgba(28,42,58,0.88) !important; } html.dark .bg-slate-100 { background-color: #0c1421 !important; } html.dark .bg-slate-200 { background-color: #2a3a4e !important; } html.dark .bg-slate-50\/80, html.dark .bg-slate-50\/60 { background-color: rgba(21,32,47,0.85) !important; } /* ── Text ── */ html.dark .text-slate-900 { color: #f8fafc !important; } html.dark .text-slate-800 { color: #f1f5f9 !important; } html.dark .text-slate-700 { color: #e2e8f0 !important; } html.dark .text-slate-600 { color: #94a3b8 !important; } html.dark .text-slate-500 { color: #94a3b8 !important; } html.dark .text-slate-400 { color: #cbd5e1 !important; } html.dark .text-slate-300 { color: #e2e8f0 !important; } /* ── Borders ── */ html.dark .border-slate-100 { border-color: #1e2d3e !important; } html.dark .border-slate-200 { border-color: #243347 !important; } html.dark .divide-y > * + * { border-color: #1e2d3e !important; } html.dark [class*="border-b"].border-slate-100, html.dark [class*="border-t"].border-slate-100 { border-color: #1e2d3e !important; } /* ── Hover ── */ html.dark .hover\:bg-slate-50:hover, html.dark .hover\:bg-slate-50\/80:hover { background-color: #1c2a3a !important; } html.dark .hover\:bg-slate-100:hover { background-color: #1e2f42 !important; } html.dark .hover\:bg-slate-200:hover { background-color: #2a3a4e !important; } html.dark .hover\:border-slate-300:hover { border-color: #2a3a4e !important; } html.dark .hover\:bg-red-50:hover { background-color: rgba(127,29,29,0.35) !important; } html.dark .hover\:bg-primary-50:hover { background-color: #1e1b4b !important; } html.dark .hover\:bg-primary-100:hover { background-color: #312e81 !important; } html.dark .hover\:text-primary-600:hover { color: #818cf8 !important; } html.dark .hover\:text-primary-700:hover { color: #a5b4fc !important; } /* ── Group hover ── */ html.dark .group:hover .group-hover\:bg-primary-50 { background-color: #1e1b4b !important; } html.dark .group:hover .group-hover\:text-primary-700 { color: #a5b4fc !important; } html.dark .group:hover .group-hover\:border-primary-100 { border-color: #3730a3 !important; } /* ── Primary color adjustments ── */ html.dark .bg-primary-50 { background-color: #1e1b4b !important; } html.dark .bg-primary-100 { background-color: #312e81 !important; } html.dark .border-primary-100 { border-color: #3730a3 !important; } html.dark .border-primary-200 { border-color: #4338ca !important; } html.dark .text-primary-600 { color: #818cf8 !important; } html.dark .text-primary-700 { color: #a5b4fc !important; } html.dark .text-primary-800 { color: #c7d2fe !important; } /* ── Nav ── */ html.dark nav.fixed, html.dark nav.sticky { background-color: rgba(15,23,42,0.92) !important; border-color: #1e293b !important; } html.dark nav .bg-primary-50 { background-color: #1e1b4b !important; } html.dark nav .text-primary-700 { color: #a5b4fc !important; } /* ── Mobile nav drawer ── */ html.dark .fixed.top-16.bg-white { background-color: #1e293b !important; border-color: #334155 !important; } /* ── Dropdown menus ── */ html.dark .absolute.bg-white, html.dark .absolute.rounded-2xl.bg-white, html.dark .absolute.rounded-xl.bg-white { background-color: #1e293b !important; border-color: #334155 !important; box-shadow: 0 20px 40px rgba(0,0,0,0.6) !important; } /* ── Modals ── */ html.dark .bg-white.rounded-3xl { background-color: #1e293b !important; } html.dark .bg-white.rounded-3xl .border-slate-100 { border-color: #334155 !important; } html.dark .bg-white.rounded-3xl .bg-slate-100 { background-color: #334155 !important; } html.dark .bg-white.rounded-3xl .hover\:bg-slate-200:hover { background-color: #475569 !important; } /* ── Tables ── */ html.dark table thead { background-color: rgba(15,23,42,0.6) !important; } html.dark .hover\:bg-slate-50\/70:hover { background-color: rgba(30,41,59,0.7) !important; } html.dark .submission-row:hover { background-color: rgba(30,41,59,0.7) !important; } /* ── Guide drawer inner ── */ html.dark .bg-white.shadow-2xl { background-color: #1e293b !important; } html.dark .divide-y.divide-slate-100 > * { border-color: #334155 !important; } html.dark .bg-slate-50\/80.border-t { background-color: rgba(15,23,42,0.85) !important; } /* ── Colored card backgrounds (muted dark versions) ── */ html.dark .bg-emerald-50 { background-color: rgba(6,78,59,0.3) !important; } html.dark .border-emerald-200 { border-color: rgba(6,78,59,0.5) !important; } html.dark .bg-amber-50 { background-color: rgba(120,53,15,0.3) !important; } html.dark .border-amber-100, html.dark .border-amber-200 { border-color: rgba(120,53,15,0.5) !important; } html.dark .bg-violet-50 { background-color: rgba(46,16,101,0.4) !important; } html.dark .border-violet-100, html.dark .border-violet-200 { border-color: rgba(76,29,149,0.5) !important; } html.dark .bg-sky-50 { background-color: rgba(12,74,110,0.3) !important; } html.dark .bg-red-50 { background-color: rgba(127,29,29,0.3) !important; } html.dark .border-red-100, html.dark .border-red-200 { border-color: rgba(127,29,29,0.5) !important; } html.dark .bg-green-50 { background-color: rgba(5,46,22,0.4) !important; } html.dark .bg-pink-50 { background-color: rgba(80,7,36,0.3) !important; } html.dark .bg-orange-50 { background-color: rgba(100,21,9,0.3) !important; } html.dark .bg-rose-50 { background-color: rgba(76,5,25,0.3) !important; } html.dark .bg-indigo-50 { background-color: rgba(30,27,75,0.5) !important; } /* ── Colored text stays vivid ── */ html.dark .text-emerald-600 { color: #34d399 !important; } html.dark .text-emerald-700 { color: #6ee7b7 !important; } html.dark .text-amber-600 { color: #fbbf24 !important; } html.dark .text-violet-500, html.dark .text-violet-700 { color: #c4b5fd !important; } html.dark .text-sky-500, html.dark .text-sky-600 { color: #7dd3fc !important; } html.dark .text-red-600 { color: #fca5a5 !important; } html.dark .text-accent-800 { color: #6ee7b7 !important; } html.dark .text-red-800 { color: #fca5a5 !important; } /* ── Input fields ── */ html.dark input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]):not([type="color"]), html.dark textarea, html.dark select { background-color: #0c1421 !important; border-color: #243347 !important; color: #e2e8f0 !important; } html.dark input::placeholder, html.dark textarea::placeholder { color: #4a6180 !important; } /* ── Accent/success alert ── */ html.dark .bg-accent-50.border.border-accent-200 { background-color: rgba(6,78,59,0.3) !important; border-color: rgba(6,78,59,0.5) !important; } /* ── Scrollbars ── */ html.dark * { scrollbar-color: #475569 transparent; } html.dark *::-webkit-scrollbar-thumb { background-color: #475569 !important; } /* ── Stat card icon backgrounds in nav (user avatar) ── */ html.dark .bg-primary-100.rounded-full { background-color: #1e1b4b !important; } /* ── Submission-detail field cards ── */ html.dark .field-card { border-color: #334155 !important; } html.dark .field-card .border-b { background: linear-gradient(90deg, #1a2332, #0f172a) !important; border-color: #334155 !important; } html.dark .field-card span[style*="background:#eef2ff"] { background: #1e1b4b !important; } html.dark .field-card span[style*="background:#f1f5f9"] { background: #1e293b !important; border-color: #334155 !important; } /* ── Inline border overrides (cards with style="border:1px solid #e8ecf0") ── */ html.dark [style*="border:1px solid #e8ecf0"] { border-color: #334155 !important; } /* ── Builder: drag-over dark override ── */ html.dark .drag-over { border-color: #818cf8 !important; background: rgba(79,70,229,0.12) !important; } /* ── Builder: modals (rounded-2xl) dark override ── */ html.dark .bg-white.rounded-2xl { background-color: #1c2a3a !important; border-color: #243347 !important; } html.dark .bg-white.rounded-2xl .bg-slate-50 { background-color: #15202f !important; } html.dark .bg-white.rounded-2xl .border-slate-100 { border-color: #1e2d3e !important; } /* ── Scrollbar in builder ── */ html.dark ::-webkit-scrollbar-thumb { background-color: #2a3a4e !important; } /* ── Flatpickr dark mode ── */ html.dark .flatpickr-calendar { background: #1c2a3a !important; border-color: #243347 !important; box-shadow: 0 20px 60px rgba(0,0,0,0.5) !important; } html.dark .flatpickr-months .flatpickr-month { background: #15202f !important; } html.dark .flatpickr-current-month, html.dark .flatpickr-current-month input.cur-year { color: #e2e8f0 !important; } html.dark .flatpickr-weekday { background: #15202f !important; color: #94a3b8 !important; } html.dark .flatpickr-day { color: #cbd5e1 !important; } html.dark .flatpickr-day:hover { background: #1e1b4b !important; border-color: #3730a3 !important; } html.dark .flatpickr-day.today:hover { background: #1e1b4b !important; } html.dark .flatpickr-day.prevMonthDay, html.dark .flatpickr-day.nextMonthDay { color: #4a6180 !important; } html.dark .flatpickr-months .flatpickr-prev-month svg, html.dark .flatpickr-months .flatpickr-next-month svg { fill: #94a3b8 !important; } html.dark .flatpickr-time { background: #1c2a3a !important; border-color: #243347 !important; } html.dark .flatpickr-time input { color: #e2e8f0 !important; background: transparent !important; border-color: #243347 !important; } html.dark .flatpickr-time .numInputWrapper:hover, html.dark .flatpickr-time .numInputWrapper span:hover { background: #1e1b4b !important; } /* ── Transition for dark mode toggle ── */ html.dark-transition * { transition: background-color 0.25s ease, color 0.15s ease, border-color 0.2s ease !important; }