/* assets/css/app.css — Modern light theme */ /* Inter is loaded via in each page's */ :root { --primary: #4F6EF7; --primary-dark: #3B55D9; --primary-soft: #EEF2FF; --bg: #FFFFFF; --bg-soft: #F8FAFC; --bg-hover: #F1F5F9; --surface: #FFFFFF; --border: #E2E8F0; --border-strong: #CBD5E1; --text: #0F172A; --text-sub: #475569; --text-muted: #94A3B8; --success: #10B981; --success-bg: #ECFDF5; --danger: #EF4444; --danger-bg: #FEF2F2; --warning-bg: #FFFBEB; --out-bg: #FEE2E2; --out-text: #991B1B; --in-bg: #DCFCE7; --in-text: #166534; --shadow-sm: 0 1px 3px rgba(0,0,0,0.07), 0 1px 2px rgba(0,0,0,0.04); --shadow-md: 0 4px 12px rgba(0,0,0,0.09), 0 2px 4px rgba(0,0,0,0.05); --radius: 8px; --radius-sm: 6px; --radius-pill: 20px; } *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; color: var(--text); background: var(--bg-soft); font-size: 14px; line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a { color: var(--primary); text-decoration: none; transition: color 150ms ease; } a:hover { color: var(--primary-dark); text-decoration: underline; } code { background: var(--bg-hover); padding: 2px 6px; border-radius: 4px; font-size: 12px; font-family: 'SFMono-Regular', Consolas, 'Courier New', monospace; color: var(--text-sub); } /* ─── Topbar ─────────────────────────────────────────────── */ .topbar { display: flex; align-items: center; padding: 0 24px; height: 56px; border-bottom: 1px solid var(--border); background: var(--bg); position: sticky; top: 0; z-index: 100; box-shadow: 0 1px 0 var(--border); } .brand { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: 15px; color: var(--text); text-decoration: none; margin-right: 32px; letter-spacing: -0.01em; flex-shrink: 0; } .brand:hover { text-decoration: none; color: var(--text); } .brand-icon { width: 30px; height: 30px; background: linear-gradient(135deg, var(--primary), #818CF8); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; } .topbar nav { display: flex; align-items: stretch; gap: 0; flex: 1; height: 100%; } .topbar nav a { display: flex; align-items: center; gap: 6px; padding: 0 14px; color: var(--text-sub); font-size: 13.5px; font-weight: 500; border-bottom: 2px solid transparent; transition: color 150ms ease, border-color 150ms ease, background 150ms ease; text-decoration: none; } .topbar nav a:hover { color: var(--text); background: var(--bg-soft); text-decoration: none; } .topbar nav a.active { color: var(--primary); border-bottom-color: var(--primary); } .user-menu { display: flex; align-items: center; gap: 10px; margin-left: auto; } .avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--primary-soft); color: var(--primary); font-weight: 700; font-size: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; border: 1.5px solid #C7D2FE; } .user-email { font-size: 13px; color: var(--text-muted); max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ─── Container ───────────────────────────────────────────── */ .container { max-width: 1400px; margin: 0 auto; padding: 28px 24px; } /* ─── Page header ─────────────────────────────────────────── */ .page-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 22px; gap: 12px; } .page-header-text h1 { font-size: 22px; font-weight: 700; color: var(--text); margin: 0 0 2px; letter-spacing: -0.02em; } .page-header-text p { margin: 0; color: var(--text-muted); font-size: 13px; } /* ─── Filter bar ──────────────────────────────────────────── */ .filter-bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; padding: 16px 20px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 22px; box-shadow: var(--shadow-sm); } .filter-field { display: flex; flex-direction: column; gap: 0; min-width: 0; } .filter-field > label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-muted); margin: 0 0 5px; display: block; } .filter-field input, .filter-field select { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 7px 10px; font-size: 13px; color: var(--text); background: var(--bg-soft); font-family: inherit; transition: border-color 150ms, box-shadow 150ms, background 150ms; outline: none; height: 34px; } .filter-field input:focus, .filter-field select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(79,110,247,0.12); background: var(--bg); } .filter-field input[type="date"] { min-width: 128px; } .filter-field input[type="search"] { min-width: 175px; } .filter-date-range { display: flex; align-items: flex-end; gap: 8px; } .range-sep { color: var(--text-muted); font-size: 16px; padding-bottom: 7px; flex-shrink: 0; line-height: 1; } .filter-actions { display: flex; gap: 8px; align-items: flex-end; margin-left: auto; } /* ─── Buttons ─────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 7px 16px; border-radius: var(--radius-sm); font-size: 13px; font-weight: 500; cursor: pointer; border: 1px solid var(--border); background: var(--bg); color: var(--text-sub); font-family: inherit; transition: background 150ms, color 150ms, border-color 150ms, box-shadow 150ms; text-decoration: none; white-space: nowrap; line-height: 1; height: 34px; letter-spacing: -0.01em; } .btn:hover { background: var(--bg-hover); color: var(--text); text-decoration: none; } .btn-primary { background: var(--primary); color: #fff; border-color: var(--primary); box-shadow: 0 1px 2px rgba(79,110,247,0.25); } .btn-primary:hover { background: var(--primary-dark); border-color: var(--primary-dark); color: #fff; box-shadow: 0 2px 6px rgba(79,110,247,0.35); } .btn-ghost { background: transparent; border-color: transparent; color: var(--text-muted); } .btn-ghost:hover { background: var(--bg-hover); color: var(--text); border-color: transparent; } .btn-danger { background: var(--danger-bg); color: var(--danger); border-color: #FECACA; } .btn-danger:hover { background: #FEE2E2; color: #DC2626; border-color: #FCA5A5; } .btn-sm { padding: 5px 12px; font-size: 12px; height: 30px; } /* ─── Alerts ──────────────────────────────────────────────── */ .alert { display: flex; align-items: flex-start; gap: 10px; padding: 12px 16px; border-radius: var(--radius-sm); margin: 0 0 16px; font-size: 13px; border: 1px solid var(--border); background: var(--bg-soft); color: var(--text-sub); } .alert-icon { font-size: 14px; flex-shrink: 0; margin-top: 1px; } .alert-error { background: var(--danger-bg); border-color: #FECACA; color: #991B1B; } .alert-success { background: var(--success-bg); border-color: #A7F3D0; color: #065F46; } .alert-info { background: var(--primary-soft); border-color: #C7D2FE; color: #3730A3; } /* ─── Transaction Groups ──────────────────────────────────── */ .groups-container { display: flex; flex-direction: column; gap: 14px; } .group { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); } .group-header { display: flex; align-items: center; gap: 10px; padding: 12px 20px; background: var(--bg-soft); border-bottom: 1px solid var(--border); } .group-name { font-weight: 600; font-size: 13.5px; color: var(--text); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .group-count { display: inline-flex; align-items: center; padding: 2px 9px; background: var(--bg-hover); border: 1px solid var(--border); border-radius: var(--radius-pill); font-size: 11px; color: var(--text-sub); font-weight: 600; flex-shrink: 0; } .group-subtotal { font-weight: 700; font-size: 14px; color: var(--text); margin-left: 8px; flex-shrink: 0; letter-spacing: -0.01em; } /* ─── Table ───────────────────────────────────────────────── */ .txn-table { width: 100%; border-collapse: collapse; font-size: 13px; } .txn-table th { text-align: left; font-weight: 600; color: var(--text-muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.07em; padding: 9px 16px; border-bottom: 1px solid var(--border); background: var(--bg-soft); white-space: nowrap; } .txn-table th.num, .txn-table td.num { text-align: right; } .txn-table td { padding: 10px 16px; border-bottom: 1px solid var(--border); vertical-align: middle; color: var(--text); } .txn-table tbody tr:last-child td { border-bottom: none; } .txn-table tbody tr { transition: background 100ms ease; } .txn-table tbody tr:hover td { background: var(--bg-hover); } .txn-table td.wide { max-width: 340px; word-break: break-word; color: var(--text-sub); } .txn-table td.nowrap { white-space: nowrap; color: var(--text-muted); font-size: 12px; } .txn-table td.num { font-variant-numeric: tabular-nums; font-weight: 500; } /* ─── Pills & Tags ────────────────────────────────────────── */ .pill { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: var(--radius-pill); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; } .pill-out { background: var(--out-bg); color: var(--out-text); } .pill-in { background: var(--in-bg); color: var(--in-text); } .tag { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: var(--radius-pill); font-size: 12px; font-weight: 500; background: #FEF3C7; color: #92400E; } .src { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; } .src-paypal { color: #1565C0; } .src-manual { color: var(--text-muted); } /* ─── Row actions ─────────────────────────────────────────── */ .row-actions { white-space: nowrap; } .row-actions a { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 500; color: var(--text-muted); padding: 4px 8px; border-radius: 4px; transition: background 150ms, color 150ms; text-decoration: none; } .row-actions a:hover { background: var(--primary-soft); color: var(--primary); text-decoration: none; } /* ─── Grand total ─────────────────────────────────────────── */ .grand-total { display: flex; align-items: center; justify-content: flex-end; gap: 14px; padding: 16px 20px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); margin-top: 12px; box-shadow: var(--shadow-sm); } .grand-total .g-label { font-size: 12px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.07em; } .grand-total .g-amount { font-size: 20px; font-weight: 700; color: var(--text); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } /* ─── Empty state ─────────────────────────────────────────── */ .empty-state { padding: 64px 20px; text-align: center; color: var(--text-muted); background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); } .empty-state .empty-icon { font-size: 40px; margin-bottom: 16px; display: block; opacity: 0.7; } .empty-state h3 { color: var(--text-sub); margin: 0 0 8px; font-size: 16px; font-weight: 600; } .empty-state p { margin: 6px 0; font-size: 13px; } /* ─── Utility ─────────────────────────────────────────────── */ .muted { color: var(--text-muted); } .small { font-size: 12px; } h2 { font-size: 22px; font-weight: 700; margin: 0 0 6px; color: var(--text); letter-spacing: -0.02em; } h3 { font-size: 15px; font-weight: 600; margin: 0 0 12px; color: var(--text); } p { margin: 0 0 12px; } /* ─── Cards ───────────────────────────────────────────────── */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; margin: 0 0 16px; box-shadow: var(--shadow-sm); } .card h3 { margin-bottom: 16px; } /* ─── Forms ───────────────────────────────────────────────── */ .field { display: flex; flex-direction: column; } .field > label { margin: 0 0 5px; } form label { display: block; font-size: 11px; font-weight: 600; color: var(--text-sub); text-transform: uppercase; letter-spacing: 0.07em; margin: 0 0 5px; } form input[type="text"], form input[type="email"], form input[type="password"], form input[type="number"], form input[type="date"], form input[type="datetime-local"], form input[type="search"], form select, form textarea { display: block; width: 100%; padding: 9px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 14px; font-family: inherit; color: var(--text); background: var(--bg); transition: border-color 150ms, box-shadow 150ms; outline: none; line-height: 1.4; } form textarea { resize: vertical; min-height: 90px; } form input::placeholder, form textarea::placeholder { color: var(--text-muted); } form input:focus, form select:focus, form textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(79,110,247,0.12); } .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 24px; } .form-grid .full { grid-column: 1 / -1; } .form-actions { display: flex; align-items: center; gap: 10px; padding-top: 20px; border-top: 1px solid var(--border); margin-top: 4px; } .form-actions .spacer { flex: 1; } /* Segmented direction control */ .seg-control { display: inline-flex; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; background: var(--bg-soft); } .seg-control input[type="radio"] { display: none; } .seg-control label { padding: 8px 22px; font-size: 13px; font-weight: 500; color: var(--text-sub); background: transparent; cursor: pointer; text-transform: none; letter-spacing: 0; border-right: 1px solid var(--border); transition: background 150ms, color 150ms; margin: 0; -webkit-user-select: none; user-select: none; } .seg-control label:last-of-type { border-right: none; } .seg-control input[type="radio"]#dir-out:checked + label { background: var(--danger-bg); color: var(--danger); font-weight: 600; } .seg-control input[type="radio"]#dir-in:checked + label { background: var(--in-bg); color: var(--in-text); font-weight: 600; } /* Inline field row */ .field-row { display: flex; gap: 14px; align-items: flex-start; } .field-row .field { flex: 1; } .field-row .field-narrow { flex: 0 0 140px; } /* Breadcrumb */ .breadcrumb { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-muted); margin-bottom: 20px; } .breadcrumb a { color: var(--text-muted); } .breadcrumb a:hover { color: var(--primary); text-decoration: none; } .breadcrumb .sep { color: var(--border-strong); } .breadcrumb .current { color: var(--text); font-weight: 500; } /* PayPal notice */ .notice { display: flex; align-items: flex-start; gap: 10px; padding: 11px 14px; background: var(--primary-soft); border: 1px solid #C7D2FE; border-radius: var(--radius-sm); font-size: 13px; color: #3730A3; margin-bottom: 20px; } .notice .notice-icon { flex-shrink: 0; font-size: 15px; margin-top: 1px; } /* Form wrapper card */ .form-wrap { max-width: 700px; } /* ─── Login page ──────────────────────────────────────────── */ .auth-layout { display: flex; min-height: 100vh; background: var(--bg-soft); } .auth-brand { flex: 0 0 420px; background: linear-gradient(150deg, #2D46C7 0%, #5465EE 45%, #7C87F5 100%); display: flex; flex-direction: column; justify-content: center; padding: 60px 52px; color: white; position: relative; overflow: hidden; } .auth-brand::before { content: ''; position: absolute; top: -80px; right: -80px; width: 320px; height: 320px; background: rgba(255,255,255,0.06); border-radius: 50%; } .auth-brand::after { content: ''; position: absolute; bottom: -60px; left: -60px; width: 260px; height: 260px; background: rgba(255,255,255,0.05); border-radius: 50%; } .auth-brand-logo { width: 56px; height: 56px; background: rgba(255,255,255,0.18); border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 28px; margin-bottom: 32px; position: relative; z-index: 1; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } .auth-brand h1 { font-size: 26px; font-weight: 700; margin: 0 0 12px; letter-spacing: -0.03em; color: white; position: relative; z-index: 1; } .auth-brand > p { font-size: 14px; color: rgba(255,255,255,0.72); line-height: 1.65; margin: 0 0 40px; position: relative; z-index: 1; } .auth-brand-features { display: flex; flex-direction: column; gap: 12px; position: relative; z-index: 1; } .auth-feature { display: flex; align-items: center; gap: 12px; font-size: 13.5px; color: rgba(255,255,255,0.82); } .auth-feature-dot { width: 7px; height: 7px; background: rgba(255,255,255,0.55); border-radius: 50%; flex-shrink: 0; } .auth-panel { flex: 1; display: flex; align-items: center; justify-content: center; padding: 48px 24px; } .auth-card { width: 100%; max-width: 380px; } .auth-card-header { margin-bottom: 28px; } .auth-card-header h2 { font-size: 24px; font-weight: 700; margin: 0 0 6px; letter-spacing: -0.02em; color: var(--text); } .auth-card-header p { margin: 0; color: var(--text-muted); font-size: 14px; } .auth-field { margin-bottom: 18px; } .auth-field label { display: block; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-sub); margin-bottom: 6px; } .auth-field input { display: block; width: 100%; padding: 10px 13px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 14px; font-family: inherit; color: var(--text); background: var(--bg); outline: none; transition: border-color 150ms, box-shadow 150ms; } .auth-field input::placeholder { color: var(--text-muted); } .auth-field input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(79,110,247,0.12); } .btn-login { width: 100%; height: 42px; font-size: 14px; font-weight: 600; border-radius: var(--radius-sm); margin-top: 8px; } .auth-hint { margin-top: 20px; padding: 12px 14px; background: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 12px; color: var(--text-muted); line-height: 1.5; } /* ─── Sync page ───────────────────────────────────────────── */ .sync-date-row { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; } .sync-date-row .field { flex: 0 0 180px; } .sync-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 14px; } .sync-stat { text-align: center; padding: 18px 12px; background: var(--bg-soft); border-radius: var(--radius-sm); border: 1px solid var(--border); } .sync-stat .stat-value { font-size: 28px; font-weight: 700; color: var(--text); line-height: 1; margin-bottom: 6px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } .sync-stat .stat-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-muted); font-weight: 600; } ol.setup-steps { padding: 0; margin: 0; list-style: none; counter-reset: steps; display: flex; flex-direction: column; gap: 16px; } ol.setup-steps li { display: flex; align-items: flex-start; gap: 14px; counter-increment: steps; font-size: 13px; color: var(--text-sub); line-height: 1.55; } ol.setup-steps li::before { content: counter(steps); display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; background: var(--primary-soft); color: var(--primary); border-radius: 50%; font-size: 11px; font-weight: 700; flex-shrink: 0; margin-top: 1px; } /* ─── Responsive ──────────────────────────────────────────── */ @media (max-width: 900px) { .auth-brand { display: none; } .auth-panel { padding: 40px 20px; } } @media (max-width: 700px) { .form-grid { grid-template-columns: 1fr; } .form-grid .full { grid-column: 1; } .field-row { flex-direction: column; } .field-row .field-narrow { flex: none; width: 100%; } .sync-date-row { flex-direction: column; } .sync-date-row .field { flex: none; width: 100%; } .filter-bar { flex-direction: column; align-items: stretch; } .filter-date-range { flex-wrap: wrap; } .filter-actions { margin-left: 0; } .page-header { flex-direction: column; align-items: flex-start; gap: 12px; } .sync-stats { grid-template-columns: 1fr 1fr; } .user-email { display: none; } .container { padding: 20px 16px; } } @media (max-width: 480px) { .sync-stats { grid-template-columns: 1fr; } .topbar { padding: 0 16px; } .topbar nav a { padding: 0 10px; font-size: 12.5px; } .brand-text { display: none; } }