:root { --bg: #f4f5f7; --surface: #ffffff; --border: #e3e6ec; --text: #1a1d29; --text-muted: #6b7280; --text-faint: #9aa1b1; --accent: #3358e0; --accent-hover: #2846bd; --accent-soft: #eaeeff; --danger: #d0393f; --danger-hover: #b32e34; --danger-soft: #fdecec; --success-bg: #e4f6ea; --success-text: #1a7a3d; --warning-bg: #fef1dc; --warning-text: #8a5a00; --neutral-bg: #eaecf1; --neutral-text: #4a5064; --radius: 10px; --radius-sm: 6px; --shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .06); --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, Arial, sans-serif; --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: var(--font); background: var(--bg); color: var(--text); font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } nav { background: var(--surface); border-bottom: 1px solid var(--border); padding: 0 24px; height: 56px; display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 10; } nav .nav-left { display: flex; align-items: center; gap: 12px; } nav .brand { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; color: var(--text); } .sidebar-toggle { background: none; border: none; color: var(--text-muted); cursor: pointer; padding: 6px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; } .sidebar-toggle:hover { background: var(--neutral-bg); color: var(--text); } nav .brand a { color: inherit; text-decoration: none; } nav .brand .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); display: inline-block; } nav form { margin: 0; } nav .signout { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 13px; padding: 6px 10px; border-radius: var(--radius-sm); } nav .signout:hover { background: var(--neutral-bg); color: var(--text); } .app-shell { display: flex; align-items: flex-start; } .sidebar { width: 250px; flex-shrink: 0; background: var(--surface); border-right: 1px solid var(--border); min-height: calc(100vh - 56px); max-height: calc(100vh - 56px); overflow-y: auto; position: sticky; top: 56px; padding: 14px 10px; transition: width .18s ease, padding .18s ease; } /* Set on by fragments/nav.html's inline script (synchronously, before the sidebar is parsed) so there's no flash of an expanded sidebar on load when the user's last choice was collapsed. */ html.sidebar-collapsed .sidebar { width: 0; padding: 14px 0; overflow: hidden; border-right: none; } .sidebar-upload-link { display: block; padding: 8px 10px; margin-bottom: 12px; background: var(--accent-soft); color: var(--accent-hover); border-radius: var(--radius-sm); font-weight: 600; font-size: 13px; text-align: center; } .sidebar-upload-link:hover { text-decoration: none; background: #dde4ff; } .scheme-group + .scheme-group { margin-top: 16px; } .scheme-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-faint); padding: 6px 10px 2px; } .filetype-group { margin-top: 2px; } .filetype-label { font-size: 12px; font-weight: 600; color: var(--text-muted); padding: 4px 10px; } .file-leaf { display: block; position: relative; padding: 6px 10px 6px 20px; font-size: 12.5px; color: var(--text); border-radius: var(--radius-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .file-leaf:hover { background: var(--bg); text-decoration: none; } .file-leaf.active { background: var(--accent-soft); color: var(--accent-hover); font-weight: 600; } /* Status dot for files needing attention (mirrors .status::before) -- files in a clean PARSED state get no dot, keeping the sidebar quiet by default and drawing the eye only to files that actually need a look. */ .file-leaf[class*="file-status-"]::before { content: ""; position: absolute; left: 9px; top: 50%; transform: translateY(-50%); width: 6px; height: 6px; border-radius: 50%; } .file-leaf.file-status-UPLOADED::before, .file-leaf.file-status-PARSING::before { background: var(--warning-text); } .file-leaf.file-status-PARSED_WITH_WARNINGS::before { background: var(--warning-text); } .file-leaf.file-status-FAILED::before { background: var(--danger); } .sidebar-empty { padding: 4px 10px; font-size: 12.5px; color: var(--text-faint); } main { flex: 1; min-width: 0; padding: 28px 24px 60px; max-width: 1180px; margin: 0 auto; } .page-header { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 16px; } h1 { font-size: 18px; font-weight: 600; margin: 0 0 4px; letter-spacing: -.01em; } h2 { font-size: 14px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; margin: 0 0 14px; } .subtitle { color: var(--text-muted); font-size: 13px; margin: 0; } .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; margin-bottom: 20px; box-shadow: var(--shadow); } .card + .card { margin-top: 20px; } /* Wide tables (UPI's merged transaction list, FEEDTL, BIN) scroll inside their card instead of visually spilling past its background. */ .table-scroll { overflow-x: auto; } table { width: 100%; border-collapse: collapse; font-size: 13px; } th { text-align: left; padding: 10px 14px; background: var(--bg); color: var(--text-muted); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; border-bottom: 1px solid var(--border); white-space: nowrap; } th:first-child { border-top-left-radius: var(--radius-sm); } th:last-child { border-top-right-radius: var(--radius-sm); } td { padding: 11px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; } tbody tr:hover { background: #fafbfd; } tbody tr:last-child td { border-bottom: none; } .txn-row { cursor: pointer; } .txn-row:hover { background: var(--accent-soft); } .txn-row.expanded { background: var(--accent-soft); } .txn-row.expanded td { border-bottom-color: transparent; } .txn-detail-row td { background: var(--bg); padding: 16px; border-bottom: 1px solid var(--border); } .txn-detail-row .field-grid { border-color: var(--border); } /* Rows that navigate to another page on click (as opposed to .txn-row, which expands inline). */ .nav-row { cursor: pointer; } .nav-row:hover { background: var(--accent-soft); } details summary { list-style: none; } details summary::-webkit-details-marker { display: none; } details[open] summary { margin-bottom: 0; } .filters-panel > summary { font-size: 14px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; cursor: pointer; } .filters-panel > summary::before { content: '\25B8'; display: inline-block; width: 12px; font-size: 11px; color: var(--text-faint); transition: transform .12s ease; } .filters-panel[open] > summary::before { transform: rotate(90deg); } .filters-panel[open] > summary { margin-bottom: 16px; } td.mono, .mono { font-family: var(--mono); font-size: 12.5px; } td.num { text-align: right; font-family: var(--mono); } th.num { text-align: right; } .empty-row td { text-align: center; color: var(--text-faint); padding: 36px 14px; } .status { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; letter-spacing: .02em; white-space: nowrap; } .status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .status-UPLOADED { background: var(--neutral-bg); color: var(--neutral-text); } .status-PARSING { background: var(--warning-bg); color: var(--warning-text); } .status-PARSED { background: var(--success-bg); color: var(--success-text); } .status-PARSED_WITH_WARNINGS { background: var(--warning-bg); color: var(--warning-text); } .status-FAILED { background: var(--danger-soft); color: var(--danger); } .warning-text { color: var(--warning-text); font-weight: 600; } /* Test-environment notices. The strip sits under the nav on every signed-in page; the block form is for the login card and the upload card, where the warning has to be read rather than merely present. */ .env-banner { background: var(--warning-bg); color: var(--warning-text); border-bottom: 1px solid rgba(138, 90, 0, .18); padding: 7px 24px; font-size: 12.5px; font-weight: 500; text-align: center; } .env-notice { background: var(--warning-bg); color: var(--warning-text); border: 1px solid rgba(138, 90, 0, .22); border-radius: var(--radius-sm); padding: 12px 14px; font-size: 13px; line-height: 1.55; margin: 0 0 16px; } .env-notice strong { font-weight: 700; } .progress-header { display: flex; justify-content: space-between; align-items: baseline; font-size: 13.5px; font-weight: 500; margin-bottom: 8px; } .progress-header span:last-child { font-family: var(--mono); color: var(--accent); } .progress-bar-track { height: 8px; border-radius: 4px; background: var(--bg); border: 1px solid var(--border); overflow: hidden; } .progress-bar-fill { height: 100%; background: var(--accent); transition: width .4s ease; min-width: 2px; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 16px; background: var(--accent); color: #fff; border: 1px solid transparent; border-radius: var(--radius-sm); cursor: pointer; text-decoration: none; font-size: 13px; font-weight: 500; line-height: 1.2; transition: background .12s ease; } .btn:hover { background: var(--accent-hover); text-decoration: none; } .btn:disabled { opacity: .5; cursor: not-allowed; } .btn-secondary { background: var(--surface); color: var(--text); border-color: var(--border); } .btn-secondary:hover { background: var(--bg); } /* Tinted rather than solid: for a secondary action sitting on a page whose primary job is reading, not acting -- present without competing with the content (used by the Rejections export). */ .btn-soft { background: var(--accent-soft); color: var(--accent-hover); border-color: transparent; } .btn-soft:hover { background: #dde4ff; color: var(--accent-hover); } .btn-danger { background: transparent; color: var(--danger); border-color: var(--border); } .btn-danger:hover { background: var(--danger-soft); border-color: var(--danger-soft); color: var(--danger-hover); } .btn-sm { padding: 5px 11px; font-size: 12px; } .actions-cell { text-align: right; white-space: nowrap; } .form-row { margin-bottom: 14px; } .form-row label { display: block; font-size: 12px; color: var(--text-muted); margin-bottom: 5px; font-weight: 500; } input[type="text"], input[type="password"], select { width: 100%; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 13px; font-family: inherit; color: var(--text); background: var(--surface); } input[type="text"]:focus, input[type="password"]:focus, select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .filters { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; margin-bottom: 18px; } .filters .field { display: flex; flex-direction: row; align-items: center; gap: 8px; } .filters .field label { font-size: 11px; color: var(--text-muted); margin-bottom: 0; text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; } .filters .field input[type="text"], .filters .field select { width: 150px; } .filters .actions { margin-left: auto; display: flex; gap: 8px; } .field > label { display: block; font-size: 11px; color: var(--text-muted); margin-bottom: 8px; text-transform: uppercase; letter-spacing: .03em; } /* Schemes flow into a grid rather than a column each: the old layout gave every scheme its own flex column, which with four Mastercard formats against one everywhere else was ragged by construction, and stacking them instead pushed the dropzone below the fold. A multi-format scheme spans two columns (.wide) so its options sit two-up, which lets the single-format schemes share a row. */ .scheme-file-type-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px 18px; align-items: start; } .scheme-file-type-group { border: 0; padding: 0; margin: 0; min-width: 0; } .scheme-file-type-group.wide { grid-column: span 2; } @media (max-width: 760px) { .scheme-file-type-group.wide { grid-column: auto; } } .scheme-file-type-group-heading { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .03em; font-weight: 600; margin-bottom: 8px; padding: 0; } .scheme-file-type-options { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 7px; } .scheme-file-type-option { display: flex; align-items: flex-start; gap: 10px; padding: 8px 11px; border: 1px solid var(--border); border-radius: 8px; cursor: pointer; font-size: 13.5px; } .scheme-file-type-option:hover { border-color: var(--accent); background: var(--accent-soft); } .scheme-file-type-option:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); } /* Keyboard users get the same "where am I" the mouse gets from :hover. */ .scheme-file-type-option:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; } .scheme-file-type-option input[type="radio"] { accent-color: var(--accent); margin-top: 2px; flex: none; } .sft-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .sft-name { line-height: 1.3; } .scheme-file-type-option:has(input:checked) .sft-name { font-weight: 600; } .sft-summary { font-size: 12px; color: var(--text-muted); line-height: 1.35; } .scheme-file-type-empty { font-size: 12.5px; color: var(--text-faint); padding: 9px 12px; } /* A scheme whose upload is disabled (PAN protection not yet rolled out to it). */ .scheme-file-type-group.disabled { opacity: .5; } .scheme-file-type-group.disabled .scheme-file-type-option { cursor: not-allowed; } .scheme-file-type-group.disabled .scheme-file-type-option:hover { border-color: var(--border); background: transparent; } .scheme-file-type-note { font-size: 12px; color: var(--warning-text); padding: 6px 12px 0; } .pagination { margin-top: 16px; display: flex; align-items: center; gap: 14px; font-size: 13px; color: var(--text-muted); } .pagination a { padding: 6px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); } .pagination a:hover { background: var(--bg); text-decoration: none; } .page-jump { display: flex; align-items: center; gap: 6px; margin-left: auto; } .page-jump input[type="number"] { width: 64px; padding: 5px 8px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 13px; font-family: inherit; color: var(--text); background: var(--surface); } .page-jump input[type="number"]:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .file-tabs { display: flex; gap: 20px; border-bottom: 1px solid var(--border); margin-bottom: 20px; } .file-tabs a { padding: 10px 2px 12px; font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--text-faint); border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .12s ease, border-color .12s ease; } .file-tabs a:hover { color: var(--text-muted); text-decoration: none; } .file-tabs a.active { color: var(--accent); border-bottom-color: var(--accent); } .unparsed-list { margin: 0; padding-left: 20px; font-family: 'SFMono-Regular', Consolas, monospace; font-size: 13px; color: var(--text); } .unparsed-list li { margin-bottom: 6px; } .field-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; } .field-grid > div { background: var(--surface); padding: 10px 14px; } .field-grid .k { font-size: 10.5px; color: var(--text-faint); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 3px; } .field-grid .v { font-size: 13.5px; font-family: var(--mono); word-break: break-word; } .field-grid .v:empty::after { content: "\2014"; color: var(--text-faint); font-family: var(--font); } .detail-section + .detail-section { margin-top: 16px; } .detail-section-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); margin-bottom: 8px; } .error { color: var(--danger); background: var(--danger-soft); padding: 10px 14px; border-radius: var(--radius-sm); margin-bottom: 16px; font-size: 13px; } .notice { color: var(--success-text); background: var(--success-bg); padding: 10px 14px; border-radius: var(--radius-sm); margin-bottom: 16px; font-size: 13px; } .back-link { display: inline-block; margin-bottom: 14px; font-size: 13px; color: var(--text-muted); } .back-link:hover { color: var(--accent); } .meta-line { color: var(--text-muted); font-size: 13px; margin: 4px 0 0; } .meta-line .sep { margin: 0 6px; color: var(--text-faint); } /* Custom file dropzone -- avoids the browser's native, OS-locale-dependent file-input button/label so the upload control stays consistent and English. */ .dropzone { display: block; border: 1.5px dashed var(--border); border-radius: var(--radius); /* Kept shallow on purpose: the file-type picker above it is the tall part of this card, and the dropzone has to stay on screen with it. */ padding: 20px; text-align: center; background: var(--bg); cursor: pointer; transition: border-color .12s ease, background .12s ease; } .dropzone:hover, .dropzone.dragover { border-color: var(--accent); background: var(--accent-soft); } .dropzone input[type="file"] { display: none; } .dropzone .dz-title { font-weight: 500; font-size: 13.5px; } .dropzone .dz-hint { color: var(--text-muted); font-size: 12px; margin-top: 4px; } .dropzone .dz-filename { margin-top: 10px; font-size: 12.5px; font-family: var(--mono); color: var(--accent); } .upload-actions { display: flex; justify-content: flex-end; margin-top: 12px; } .upload-progress { margin-top: 16px; } .login-shell { min-height: 100vh; display: flex; align-items: center; justify-content: center; } .login-card { width: 360px; } .login-card h1 { text-align: center; margin-bottom: 4px; } .login-card .subtitle { text-align: center; margin-bottom: 20px; } .login-card .btn { width: 100%; } /* The error page (templates/error.html), in the same centred shell as the login card and a little wider: it carries sentences rather than a form. */ .error-card { width: 460px; text-align: center; } .error-card h1 { font-size: 34px; margin-bottom: 6px; } .error-card .subtitle { margin-bottom: 0; } .error-card .meta-line { margin-top: 16px; font-family: var(--mono); font-size: 12px; } .error-card-hint { margin-top: 6px; font-size: 12px; } .error-card .back-link { margin: 18px 0 0; } /* ---- User management, account, audit (added with the access-control system) ---- */ .nav-right { display: flex; align-items: center; gap: 16px; } .nav-link { color: var(--text-muted); text-decoration: none; font-size: 14px; } .nav-link:hover { color: var(--text); } .badge { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 600; margin-right: 4px; } .badge-ok { background: var(--success-bg); color: var(--success-text); } .badge-muted { background: var(--neutral-bg); color: var(--neutral-text); } .badge-warn { background: var(--warning-bg); color: var(--warning-text); } /* Compact forms sitting inline in a table cell or a single row. */ .row-form { display: inline-flex; align-items: center; gap: 4px; margin: 0 6px 0 0; } /* Every control inline in a table row needs its own width. The global form rule is width:100%, which inside a table cell means "as wide as this column can be stretched" -- one such control then takes the width its neighbours needed and pushes their content onto a second line. Covers select too, not just the inputs: the role dropdown is subject to exactly the same rule. */ .row-form input, .row-form select { padding: 5px 8px; font-size: 12px; } .row-form input[type="password"] { width: 130px; } .row-form input[type="text"] { width: 180px; } .row-form select { width: auto; } .inline-form { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; } .inline-form .form-row { margin: 0; } .pager { display: flex; align-items: center; gap: 14px; margin-top: 14px; } /* Reveal-full-PAN button in a transaction detail (admin only). */ .reveal-btn { font-size: 11px; padding: 1px 7px; margin-left: 6px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--neutral-bg); color: var(--text-muted); cursor: pointer; } .reveal-btn:hover { color: var(--text); border-color: var(--accent); } .reveal-btn:disabled { opacity: .5; cursor: default; } /* Confirmation dialog. A native rather than a hand-rolled overlay: it brings the focus trap, Esc-to-dismiss, inertness of the page behind it, and a real ::backdrop with no script beyond showModal(). The browser's own confirm() it replaces could not say *what* was about to be deleted. */ .confirm-dialog { border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 10px 15px -3px rgba(16, 24, 40, .1), 0 4px 6px -4px rgba(16, 24, 40, .1); padding: 0; width: min(460px, calc(100vw - 32px)); color: var(--text); font-family: var(--font); } .confirm-dialog::backdrop { background: rgba(16, 24, 40, .45); } .confirm-dialog-body { padding: 22px 22px 18px; } .confirm-dialog h2 { margin: 0 0 8px; font-size: 16px; display: flex; align-items: center; gap: 9px; } /* The warning mark carries the tone, so the heading itself stays plain text rather than shouting in red. */ .confirm-dialog h2::before { content: "!"; flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--danger-soft); color: var(--danger); font-size: 14px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; } .confirm-dialog p { margin: 0 0 12px; font-size: 13.5px; color: var(--text-muted); } .confirm-dialog p:last-child { margin-bottom: 0; } /* What is about to be destroyed, stated concretely -- the filename and the row counts -- so the choice is made against the real thing, not a generic prompt. */ .confirm-target { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; margin-bottom: 12px; } .confirm-target .name { font-family: var(--mono); font-size: 12.5px; word-break: break-all; color: var(--text); } .confirm-target .counts { font-size: 12.5px; color: var(--text-muted); margin-top: 5px; } .confirm-dialog-actions { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 22px; border-top: 1px solid var(--border); background: var(--bg); border-radius: 0 0 var(--radius) var(--radius); } /* The destructive action is filled here, unlike the page's outline .btn-danger: in a dialog whose only purpose is this decision, it is the primary action. */ .confirm-dialog-actions .btn-danger-solid { background: var(--danger); color: #fff; border-color: var(--danger); } .confirm-dialog-actions .btn-danger-solid:hover { background: var(--danger-hover); border-color: var(--danger-hover); } /* TOTP enrollment. Centred on the page and stacked rather than left-aligned in a wide column: this is a single-purpose page whose one job is "scan this", so the QR belongs where the eye lands, not tucked against the left edge of a 1180px main. */ .totp-card { max-width: 520px; margin-left: auto; margin-right: auto; } .totp-setup { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 18px 0; } /* The typed-key fallback stays available for a desktop password manager, but reads as the secondary route it is. */ .totp-manual { text-align: center; max-width: 340px; } .totp-qr { border: 1px solid var(--border); border-radius: var(--radius-sm); background: #fff; flex: none; } .totp-secret { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 10px; margin-top: 4px; /* Grouped-looking and selectable: this gets copied or typed, not read. */ letter-spacing: .08em; word-break: break-all; user-select: all; }