/* Hawila Buyback Validator — Custom Styles Loaded AFTER Tailwind CDN (at end of ) so these win. */ /* ══════════════════════════════════════════════════ BASE ══════════════════════════════════════════════════ */ body { font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif !important; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #1a1a1a; letter-spacing: -0.011em; background: #f4f5f7 !important; } *, *::before, *::after { font-family: inherit; } td, th, .stat-value, .pipeline-count, .amount, .code-text { font-variant-numeric: tabular-nums !important; font-feature-settings: "tnum" !important; } h2 { letter-spacing: -0.025em !important; font-weight: 700 !important; } h3 { letter-spacing: -0.015em !important; } /* ══════════════════════════════════════════════════ ANIMATIONS ══════════════════════════════════════════════════ */ .spinner { animation: spin 0.8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .fade-in { animation: fadeIn 0.2s ease-out; } @keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } /* ══════════════════════════════════════════════════ NAVBAR ══════════════════════════════════════════════════ */ nav.nav-bar { backdrop-filter: blur(12px) saturate(1.4) !important; -webkit-backdrop-filter: blur(12px) saturate(1.4) !important; background: rgba(255, 255, 255, 0.88) !important; border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important; } .nav-brand { font-weight: 700 !important; font-size: 0.875rem !important; letter-spacing: -0.025em !important; color: #111827 !important; } .nav-link { font-size: 0.8125rem !important; font-weight: 500 !important; padding: 0.375rem 0.875rem !important; border-radius: 0.5rem !important; transition: all 0.15s ease !important; color: #6b7280 !important; } .nav-link:hover { background: #f3f4f6 !important; color: #111827 !important; } .nav-link.active { background: #111827 !important; color: #fff !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) !important; } /* ══════════════════════════════════════════════════ MODALS — must appear above everything ══════════════════════════════════════════════════ */ .modal-backdrop { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; z-index: 9999 !important; background: rgba(0, 0, 0, 0.45) !important; backdrop-filter: blur(4px) !important; -webkit-backdrop-filter: blur(4px) !important; overflow-y: auto !important; } /* The white modal card */ .modal-backdrop > div { background: #fff !important; box-shadow: 0 24px 48px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(0, 0, 0, 0.04) !important; border-radius: 0.875rem !important; } /* ══════════════════════════════════════════════════ STAT CARDS — solid color, no decoration ══════════════════════════════════════════════════ */ .stat-card { padding: 1.25rem 1.5rem !important; border-radius: 0.75rem !important; } .stat-value { font-size: 2rem !important; font-weight: 700 !important; line-height: 1.1 !important; letter-spacing: -0.035em !important; } .stat-label { font-size: 0.6875rem !important; font-weight: 600 !important; margin-top: 0.5rem !important; text-transform: uppercase !important; letter-spacing: 0.05em !important; opacity: 0.65; } /* ══════════════════════════════════════════════════ PIPELINE SECTION ══════════════════════════════════════════════════ */ .pipeline-section { background: #fff !important; border: 1px solid #e5e7eb !important; border-radius: 0.75rem !important; padding: 1.5rem !important; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03) !important; } .pipeline-label { font-size: 0.625rem !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.08em !important; color: #9ca3af !important; margin-bottom: 0.875rem !important; padding-bottom: 0.5rem !important; border-bottom: 1px solid #f3f4f6 !important; } .pipeline-row { display: flex !important; justify-content: space-between !important; align-items: center !important; padding: 0.5rem 0 !important; } .pipeline-name { font-size: 0.8125rem !important; color: #4b5563 !important; } .pipeline-count { font-size: 0.875rem !important; font-weight: 700 !important; min-width: 2rem !important; text-align: right !important; } /* ══════════════════════════════════════════════════ BADGES ══════════════════════════════════════════════════ */ .badge { display: inline-flex !important; align-items: center !important; padding: 0.125rem 0.625rem !important; border-radius: 9999px !important; font-size: 0.6875rem !important; font-weight: 600 !important; letter-spacing: 0.02em !important; line-height: 1.6 !important; } /* ══════════════════════════════════════════════════ BUTTONS ══════════════════════════════════════════════════ */ .btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 0.375rem !important; font-weight: 600 !important; font-size: 0.8125rem !important; border-radius: 0.5rem !important; padding: 0.5rem 1.25rem !important; transition: all 0.15s ease !important; cursor: pointer !important; letter-spacing: -0.01em !important; } .btn:disabled { opacity: 0.45 !important; cursor: not-allowed !important; } .btn-primary { background: #111827 !important; color: #fff !important; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12) !important; } .btn-primary:hover:not(:disabled) { background: #1f2937 !important; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important; } /* ══════════════════════════════════════════════════ FORMS ══════════════════════════════════════════════════ */ input[type="text"], input[type="password"], input[type="email"], select, textarea { font-family: 'Inter', system-ui, -apple-system, sans-serif !important; font-size: 0.875rem !important; border: 1px solid #d1d5db !important; border-radius: 0.5rem !important; padding: 0.625rem 0.875rem !important; transition: border-color 0.15s ease, box-shadow 0.15s ease !important; outline: none !important; background: #fff !important; color: #111827 !important; } input::placeholder, textarea::placeholder { color: #9ca3af !important; font-weight: 400 !important; } input:focus, select:focus, textarea:focus { border-color: #111827 !important; box-shadow: 0 0 0 3px rgba(17, 24, 39, 0.08) !important; } /* ══════════════════════════════════════════════════ TABLES ══════════════════════════════════════════════════ */ table thead th { font-weight: 600 !important; font-size: 0.6875rem !important; text-transform: uppercase !important; letter-spacing: 0.06em !important; color: #6b7280 !important; padding: 0.75rem 1rem !important; white-space: nowrap !important; } table tbody td { padding: 0.75rem 1rem !important; font-size: 0.8125rem !important; } table tbody tr { transition: background 0.1s ease; } table tbody tr:hover { background: #f9fafb !important; } /* ══════════════════════════════════════════════════ CARDS — white containers throughout the app ══════════════════════════════════════════════════ */ /* Main content area white cards */ main .bg-white { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 0 0 1px rgba(0, 0, 0, 0.02) !important; } /* Upload zone */ main .border-dashed { border-radius: 0.75rem !important; } /* History cards */ main .bg-white.border.rounded-lg { border-radius: 0.625rem !important; transition: border-color 0.15s ease, box-shadow 0.15s ease !important; } main .bg-white.border.rounded-lg:hover { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important; border-color: #d1d5db !important; } /* ══════════════════════════════════════════════════ NUMBER / CODE DISPLAY ══════════════════════════════════════════════════ */ .code-text { font-family: 'SF Mono', 'Cascadia Code', 'JetBrains Mono', ui-monospace, monospace !important; font-size: 0.8125rem !important; letter-spacing: 0.03em !important; } .amount { font-weight: 700 !important; letter-spacing: -0.01em !important; } /* ══════════════════════════════════════════════════ LOGIN ══════════════════════════════════════════════════ */ .login-card { background: #fff !important; border: 1px solid #e5e7eb !important; border-radius: 1rem !important; padding: 2.5rem !important; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.03) !important; width: 100% !important; max-width: 24rem !important; } .login-card h1 { font-size: 1.375rem !important; font-weight: 700 !important; letter-spacing: -0.03em !important; color: #111827 !important; } /* ══════════════════════════════════════════════════ SCROLLBAR ══════════════════════════════════════════════════ */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: #9ca3af; } /* ══════════════════════════════════════════════════ PRINT ══════════════════════════════════════════════════ */ @media print { nav, button, .btn { display: none !important; } body { background: #fff !important; } }