/* 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 center; will-change: transform; touch-action: none; user-select: none; } /* 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; } /* Mobile app navigation */ .mobile-bottom-nav { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; height: 64px; padding-bottom: env(safe-area-inset-bottom, 0); background: #fff; border-top: 1px solid #e2e8f0; box-shadow: 0 -4px 18px rgba(15, 23, 42, .08); } .mobile-bottom-nav-inner { display: flex; align-items: stretch; height: 100%; max-width: 560px; margin: 0 auto; padding: 0 6px; } .mobile-bottom-nav a, .mobile-bottom-nav button { flex: 1 1 0; min-width: 0; border: 0; background: transparent; color: #64748b; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 5px 3px; font-size: 10px; font-weight: 700; line-height: 1.15; text-decoration: none; cursor: pointer; } .mobile-bottom-nav .mobile-nav-icon { font-size: 18px; line-height: 1; } .mobile-bottom-nav a:hover, .mobile-bottom-nav button:hover, .mobile-bottom-nav .active { color: #4f46e5; } html.dark .mobile-bottom-nav { background: #1e293b; border-color: #334155; box-shadow: 0 -4px 18px rgba(0, 0, 0, .28); } html.dark .mobile-bottom-nav a, html.dark .mobile-bottom-nav button { color: #94a3b8; } html.dark .mobile-bottom-nav a:hover, html.dark .mobile-bottom-nav button:hover, html.dark .mobile-bottom-nav .active { color: #a5b4fc; } /* Desktop defaults — must appear BEFORE the mobile media query so @media can override */ .header-menu-toggle { display: none; } .header-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .header-menu-panel { display: flex; align-items: center; gap: 12px; } @media (max-width: 768px) { body.has-mobile-bottom-nav { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0)); } .mobile-bottom-nav { display: block; } .header-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; } .header-menu-toggle { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid #e2e8f0; border-radius: 8px; background: #fff; cursor: pointer; font-size: 1.2rem; flex-shrink: 0; margin-left: auto; } html.dark .header-menu-toggle { background: #1e293b; border-color: #334155; color: #e2e8f0; } .header-menu-toggle .header-menu-close { display: none; } header.header-menu-open .header-menu-toggle .header-menu-icon { display: none; } header.header-menu-open .header-menu-toggle .header-menu-close { display: block; } header .header-menu-panel { display: none; flex-basis: 100%; flex-direction: column; align-items: stretch; gap: 10px; padding: 8px 0 4px; border-top: 1px solid #e2e8f0; margin-top: 4px; } header.header-menu-open .header-menu-panel { display: flex; } header .max-w-4xl, header .max-w-5xl, header .max-w-6xl { min-height: 56px; } } /* ══ PREMIUM ACTION BUTTONS ══ */ .btn-action { display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 5px 10px; font-size: 11px; font-weight: 600; border-radius: 6px; cursor: pointer; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); user-select: none; line-height: 1.25; white-space: nowrap; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03); border: 1px solid transparent; outline: none; } .btn-action:hover { transform: translateY(-1px); } .btn-action:active { transform: translateY(0); } /* Approve (Emerald) */ .btn-action-approve { background-color: rgba(16, 185, 129, 0.07); color: #065f46; border-color: rgba(16, 185, 129, 0.2); } .btn-action-approve:hover { background-color: #10b981 !important; color: #ffffff !important; border-color: #10b981 !important; box-shadow: 0 3px 8px rgba(16, 185, 129, 0.25); } html.dark .btn-action-approve { background-color: rgba(52, 211, 153, 0.12) !important; color: #34d399 !important; border-color: rgba(52, 211, 153, 0.25) !important; } html.dark .btn-action-approve:hover { background-color: #34d399 !important; color: #064e3b !important; border-color: #34d399 !important; box-shadow: 0 3px 10px rgba(52, 211, 153, 0.35); } /* Decline & Reject (Rose/Red) */ .btn-action-decline, .btn-action-reject { background-color: rgba(244, 63, 94, 0.07); color: #9f1239; border-color: rgba(244, 63, 94, 0.2); } .btn-action-decline:hover, .btn-action-reject:hover { background-color: #f43f5e !important; color: #ffffff !important; border-color: #f43f5e !important; box-shadow: 0 3px 8px rgba(244, 63, 94, 0.25); } html.dark .btn-action-decline, html.dark .btn-action-reject { background-color: rgba(251, 113, 133, 0.12) !important; color: #fda4af !important; border-color: rgba(251, 113, 133, 0.25) !important; } html.dark .btn-action-decline:hover, html.dark .btn-action-reject:hover { background-color: #fb7185 !important; color: #4c0519 !important; border-color: #fb7185 !important; box-shadow: 0 3px 10px rgba(251, 113, 133, 0.35); } /* Review (Indigo) */ .btn-action-review { background-color: rgba(79, 70, 229, 0.07); color: #3730a3; border-color: rgba(79, 70, 229, 0.2); } .btn-action-review:hover { background-color: #6366f1 !important; color: #ffffff !important; border-color: #6366f1 !important; box-shadow: 0 3px 8px rgba(79, 70, 229, 0.25); } html.dark .btn-action-review { background-color: rgba(129, 140, 248, 0.12) !important; color: #a5b4fc !important; border-color: rgba(129, 140, 248, 0.25) !important; } html.dark .btn-action-review:hover { background-color: #818cf8 !important; color: #1e1b4b !important; border-color: #818cf8 !important; box-shadow: 0 3px 10px rgba(129, 140, 248, 0.35); } /* Pay (Teal) */ .btn-action-pay { background-color: rgba(13, 148, 136, 0.07); color: #0f766e; border-color: rgba(13, 148, 136, 0.2); } .btn-action-pay:hover { background-color: #0d9488 !important; color: #ffffff !important; border-color: #0d9488 !important; box-shadow: 0 3px 8px rgba(13, 148, 136, 0.25); } html.dark .btn-action-pay { background-color: rgba(45, 212, 191, 0.12) !important; color: #2dd4bf !important; border-color: rgba(45, 212, 191, 0.25) !important; } html.dark .btn-action-pay:hover { background-color: #2dd4bf !important; color: #115e59 !important; border-color: #2dd4bf !important; box-shadow: 0 3px 10px rgba(45, 212, 191, 0.35); } /* Book (Purple) */ .btn-action-book { background-color: rgba(124, 58, 237, 0.07); color: #6d28d9; border-color: rgba(124, 58, 237, 0.2); } .btn-action-book:hover { background-color: #7c3aed !important; color: #ffffff !important; border-color: #7c3aed !important; box-shadow: 0 3px 8px rgba(124, 58, 237, 0.25); } html.dark .btn-action-book { background-color: rgba(167, 139, 250, 0.12) !important; color: #c084fc !important; border-color: rgba(167, 139, 250, 0.25) !important; } html.dark .btn-action-book:hover { background-color: #c084fc !important; color: #3b0764 !important; border-color: #c084fc !important; box-shadow: 0 3px 10px rgba(167, 139, 250, 0.35); } /* Dashboard filter tabs with actionable pending items */ .filter-tab-pending { background-color: rgba(245, 158, 11, 0.12); color: #b45309; border-color: rgba(245, 158, 11, 0.45); } .filter-tab-pending:hover { background-color: rgba(245, 158, 11, 0.2); border-color: rgba(245, 158, 11, 0.6); } html.dark .filter-tab-pending { background-color: rgba(245, 158, 11, 0.15); color: #fbbf24; border-color: rgba(245, 158, 11, 0.4); } html.dark .filter-tab-pending:hover { background-color: rgba(245, 158, 11, 0.25); } /* Warning / Pending (Amber) */ .btn-action-warning { background-color: rgba(245, 158, 11, 0.07); color: #b45309; border-color: rgba(245, 158, 11, 0.2); } .btn-action-warning:hover:not(:disabled) { background-color: #f59e0b !important; color: #ffffff !important; border-color: #f59e0b !important; box-shadow: 0 3px 8px rgba(245, 158, 11, 0.25); } html.dark .btn-action-warning { background-color: rgba(245, 158, 11, 0.12) !important; color: #fbbf24 !important; border-color: rgba(245, 158, 11, 0.25) !important; } html.dark .btn-action-warning:hover:not(:disabled) { background-color: #fbbf24 !important; color: #78350f !important; border-color: #fbbf24 !important; box-shadow: 0 3px 10px rgba(245, 158, 11, 0.35); } /* Disabled State Overrides */ .btn-action:disabled { cursor: default !important; transform: none !important; box-shadow: none !important; opacity: 0.55 !important; pointer-events: none; }