/* Reimburse — custom styles (Tailwind handles the rest) */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); * { box-sizing: border-box; } body { font-family: 'Inter', system-ui, sans-serif; } /* Step indicator */ .step-item { position: relative; } .step-item::after { content: ''; position: absolute; top: 18px; left: calc(50% + 20px); width: calc(100% - 40px); height: 2px; background: #e2e8f0; } .step-item:last-child::after { display: none; } .step-item.active .step-circle { background: #4f46e5; color: white; } .step-item.done .step-circle { background: #16a34a; color: white; } .step-item.done::after { background: #16a34a; } .step-circle { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600; background: #e2e8f0; color: #94a3b8; margin: 0 auto 6px; position: relative; z-index: 1; transition: all .2s; } /* Receipt drop zone */ .drop-zone { border: 2px dashed #c7d2fe; border-radius: 12px; padding: 40px 20px; text-align: center; transition: all .2s; cursor: pointer; background: #f8f8ff; } .drop-zone:hover, .drop-zone.drag-over { border-color: #4f46e5; background: #eef2ff; } .drop-zone.drop-zone-sm { padding: 16px 20px; } /* Lightbox */ #lightbox { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.92); z-index: 1000; align-items: center; justify-content: center; } #lightbox.open { display: flex; } #lightbox-img { max-width: 90vw; max-height: 90vh; object-fit: contain; border-radius: 4px; transform-origin: center; transition: transform .15s; cursor: zoom-in; } #lightbox-img.zoomed { cursor: zoom-out; } /* Toast */ .toast { position: fixed; top: 20px; right: 20px; z-index: 2000; padding: 12px 18px; border-radius: 8px; font-size: 14px; font-weight: 500; color: white; box-shadow: 0 4px 12px rgba(0,0,0,.2); animation: slide-in .2s ease; } .toast.success { background: #16a34a; } .toast.error { background: #dc2626; } .toast.info { background: #2563eb; } @keyframes slide-in { from { opacity:0; transform:translateX(20px); } to { opacity:1; transform:translateX(0); } } /* Status badges */ .badge { display:inline-flex; align-items:center; padding:2px 10px; border-radius:99px; font-size:12px; font-weight:600; } .badge-draft { background:#f1f5f9; color:#64748b; } .badge-submitted { background:#dbeafe; color:#1d4ed8; } .badge-reviewed { background:#e0e7ff; color:#4338ca; } .badge-rejected { background:#fee2e2; color:#dc2626; } .badge-approved { background:#dcfce7; color:#16a34a; } .badge-declined { background:#fee2e2; color:#dc2626; } .badge-paid { background:#cffafe; color:#0e7490; } .badge-booked { background:#f3e8ff; color:#7c3aed; } /* Thumbnail grid */ .receipt-thumb { width: 80px; height: 80px; object-fit: cover; border-radius: 8px; cursor: pointer; border: 2px solid #e2e8f0; transition: border-color .15s; } .receipt-thumb:hover { border-color: #4f46e5; } /* Role chip */ .role-chip { font-size: 11px; padding: 2px 8px; border-radius: 4px; font-weight: 600; background: #e0e7ff; color: #4338ca; } /* Card hover */ .request-row { transition: background .1s; } .request-row:hover { background: #f8fafc; } /* Smooth transitions */ .section { transition: opacity .2s, transform .2s; } .section.hidden { display: none !important; } /* Scrollbar */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: #f1f5f9; } ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; } /* ══ DARK MODE ══ — applied via */ html.dark { color-scheme: dark; } html.dark body { background-color: #0f172a !important; color: #e2e8f0; } /* Surfaces */ html.dark .bg-white { background-color: #1e293b !important; } html.dark .bg-slate-50 { background-color: #0f172a !important; } html.dark .bg-slate-100 { background-color: #334155 !important; } html.dark .bg-gradient-to-br { background: linear-gradient(135deg,#0f172a,#1e293b) !important; } /* Borders */ html.dark .border-slate-100, html.dark .border-slate-200 { border-color: #334155 !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: #cbd5e1 !important; } html.dark .text-slate-500 { color: #94a3b8 !important; } html.dark .text-slate-400 { color: #64748b !important; } /* Header */ html.dark header { background-color: #1e293b !important; border-color: #334155 !important; } /* Forms */ html.dark input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), html.dark textarea, html.dark select { background-color: #334155 !important; border-color: #475569 !important; color: #f1f5f9 !important; } html.dark input::placeholder, html.dark textarea::placeholder { color: #475569 !important; } html.dark input[readonly], html.dark textarea[readonly] { background-color: #1e293b !important; color: #94a3b8 !important; } /* Indigo tints */ html.dark .bg-indigo-50 { background-color: #1e1b4b !important; } html.dark .text-indigo-700 { color: #a5b4fc !important; } html.dark .text-indigo-600 { color: #818cf8 !important; } /* Green / red tints */ html.dark .bg-green-50 { background-color: #052e16 !important; } html.dark .text-green-600 { color: #86efac !important; } html.dark .bg-red-50 { background-color: #450a0a !important; } html.dark .text-red-600, html.dark .text-red-700 { color: #fca5a5 !important; } html.dark .border-red-200 { border-color: #7f1d1d !important; } html.dark .text-red-500 { color: #f87171 !important; } /* Shadows */ html.dark .shadow-sm { box-shadow: 0 1px 3px rgba(0,0,0,.5) !important; } html.dark .shadow-xl { box-shadow: 0 20px 40px rgba(0,0,0,.7) !important; } html.dark .shadow-lg { box-shadow: 0 10px 20px rgba(0,0,0,.5) !important; } /* Status badges */ html.dark .badge-draft { background:#334155; color:#94a3b8; } html.dark .badge-submitted { background:#1e3a5f; color:#93c5fd; } html.dark .badge-reviewed { background:#1e1b4b; color:#a5b4fc; } html.dark .badge-approved { background:#14532d; color:#86efac; } html.dark .badge-rejected, html.dark .badge-declined { background:#450a0a; color:#fca5a5; } html.dark .badge-paid { background:#164e63; color:#67e8f9; } html.dark .badge-booked { background:#3b0764; color:#d8b4fe; } /* Drop zone */ html.dark .drop-zone { background-color:#1e293b !important; border-color:#4338ca; } html.dark .drop-zone:hover, html.dark .drop-zone.drag-over { background-color:#1e1b4b !important; border-color:#818cf8; } /* Table */ html.dark .request-row:hover { background-color:#334155 !important; } html.dark table thead { background-color:#0f172a !important; } /* Step indicator */ html.dark .step-item::after { background:#334155; } html.dark .step-circle { background:#334155; color:#64748b; } /* Receipt thumb */ html.dark .receipt-thumb { border-color:#475569; } /* Role chip */ html.dark .role-chip { background:#1e1b4b; color:#a5b4fc; } /* Hover buttons in dark */ html.dark .hover\:bg-slate-50:hover { background-color:#334155 !important; } html.dark .hover\:bg-slate-100:hover { background-color:#334155 !important; } html.dark .hover\:text-slate-700:hover { color:#e2e8f0 !important; } html.dark .hover\:text-slate-600:hover { color:#cbd5e1 !important; } /* Toggle buttons */ #theme-toggle, #lang-toggle { display: inline-flex; align-items: center; justify-content: center; cursor: pointer; border: none; background: none; } #lang-toggle { font-size: 12px; font-weight: 600; padding: 3px 8px; border-radius: 6px; background: #e2e8f0; color: #475569; transition: background .15s; } html.dark #lang-toggle { background: #334155; color: #94a3b8; } #theme-toggle { padding: 4px; border-radius: 6px; color: #64748b; transition: color .15s, background .15s; } #theme-toggle:hover { background: #f1f5f9; } html.dark #theme-toggle { color: #94a3b8; } html.dark #theme-toggle:hover { background: #334155; } /* Compress size tag */ .compress-tag { font-size: 10px; color: #6366f1; background: #eef2ff; padding: 1px 5px; border-radius: 4px; margin-top: 2px; text-align: center; line-height: 1.4; } html.dark .compress-tag { background: #1e1b4b; color: #a5b4fc; }