.viz-root { color-scheme: light; --surface-1: #fcfcfb; --page-plane: #f9f9f7; --text-primary: #0b0b0b; --text-secondary: #52514e; --text-muted: #898781; --gridline: #e1e0d9; --baseline: #c3c2b7; --border: rgba(11,11,11,0.10); --series-1: #2a78d6; /* blue - primary action */ --series-3: #1baf7a; /* aqua */ --status-good: #0ca30c; --status-warning: #fab219; --status-critical:#d03b3b; --status-info: #2f6fed; } @media (prefers-color-scheme: dark) { :root:where(:not([data-theme="light"])) .viz-root { color-scheme: dark; --surface-1: #1a1a19; --page-plane: #0d0d0d; --text-primary: #ffffff; --text-secondary: #c3c2b7; --text-muted: #898781; --gridline: #2c2c2a; --baseline: #383835; --border: rgba(255,255,255,0.10); --series-1: #3987e5; --series-3: #199e70; --status-good: #0ca30c; --status-warning: #fab219; --status-critical:#e66767; --status-info: #5b93f5; } } /* Manual theme choice (Settings > Appearance - Matt's Aug 24 2026 request): data-theme="dark" on forces this palette regardless of the system setting; data-theme="light" forces light (the media block above already excludes it); no attribute = follow the system. */ :root[data-theme="dark"] .viz-root { color-scheme: dark; --surface-1: #1a1a19; --page-plane: #0d0d0d; --text-primary: #ffffff; --text-secondary: #c3c2b7; --text-muted: #898781; --gridline: #2c2c2a; --baseline: #383835; --border: rgba(255,255,255,0.10); --series-1: #3987e5; --series-3: #199e70; --status-good: #0ca30c; --status-warning: #fab219; --status-critical:#e66767; --status-info: #5b93f5; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--page-plane); color: var(--text-primary); font-family: system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 14px; } .app-header { display: flex; align-items: center; justify-content: space-between; padding: 20px 28px 12px; } .app-title h1 { margin: 0; font-size: 22px; font-weight: 700; } .subtitle { margin: 2px 0 0; color: var(--text-secondary); font-size: 13px; } .btn { border: 1px solid var(--border); background: var(--surface-1); color: var(--text-primary); padding: 9px 16px; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; transition: filter 0.1s ease; } .btn:hover { filter: brightness(0.96); } .btn-primary { background: var(--series-1); color: #fff; border-color: transparent; } .btn-secondary { background: var(--surface-1); color: var(--text-primary); } .btn-good { background: var(--status-good); color: #fff; border-color: transparent; } .btn-sm { padding: 6px 12px; font-size: 12px; } .tiles { display: flex; gap: 14px; padding: 4px 28px 18px; flex-wrap: wrap; } .tile { background: var(--surface-1); border: 1px solid var(--border); border-radius: 10px; padding: 14px 18px; min-width: 140px; } .tile .tile-value { font-size: 26px; font-weight: 700; font-variant-numeric: proportional-nums; } .tile .tile-label { font-size: 12px; color: var(--text-secondary); margin-top: 2px; } .tile.status-good .tile-value { color: var(--status-good); } .tile.status-warning .tile-value { color: var(--status-warning); } .tile.status-info .tile-value { color: var(--status-info); } .tile.status-critical .tile-value { color: var(--status-critical); } .tile.status-orange .tile-value { color: #f28c28; } .tile.status-purple .tile-value { color: #a86bd6; } .tile.status-teal .tile-value { color: #2aa7a0; } /* Tiles are quick filters (Matt's Aug 23 2026 request) - clicking one shows those rows in the table; the active one wears a ring. */ .tile.clickable { cursor: pointer; transition: border-color 0.1s, transform 0.05s; user-select: none; } .tile.clickable:hover { border-color: var(--series-1); } .tile.clickable:active { transform: scale(0.98); } .tile.tile-active { border-color: var(--series-1); box-shadow: 0 0 0 1px var(--series-1); } .view-tabs { display: flex; gap: 4px; padding: 0 28px; border-bottom: 1px solid var(--border); } .view-tab { border: none; background: none; color: var(--text-secondary); padding: 10px 16px 12px; font-size: 14px; font-weight: 600; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; } .view-tab:hover { color: var(--text-primary); } .view-tab.active { color: var(--series-1); border-bottom-color: var(--series-1); } .view-hint { margin: 10px 28px 0; padding: 0; color: var(--text-secondary); font-size: 12px; max-width: 900px; } .filter-bar { display: flex; align-items: center; gap: 10px; padding: 0 28px 14px; flex-wrap: wrap; } .filter-bar select, .filter-bar input[type=search] { padding: 8px 10px; border-radius: 7px; border: 1px solid var(--border); background: var(--surface-1); color: var(--text-primary); font-size: 13px; } .filter-bar input[type=search] { min-width: 220px; } .filter-bar .date-filter { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-secondary); white-space: nowrap; } .filter-bar .date-filter input[type=date] { padding: 7px 8px; border-radius: 7px; border: 1px solid var(--border); background: var(--surface-1); color: var(--text-primary); font-size: 13px; } .date-clear { white-space: nowrap; } .spacer { flex: 1; } .bulk-actions { display: flex; align-items: center; gap: 8px; } .bulk-actions span { font-size: 12px; color: var(--text-secondary); } .hidden { display: none !important; } .table-wrap { padding: 0 28px 32px; overflow-x: auto; } table { width: 100%; border-collapse: collapse; background: var(--surface-1); border-radius: 10px; overflow: hidden; border: 1px solid var(--border); } thead th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-muted); font-weight: 600; padding: 10px 12px; border-bottom: 1px solid var(--gridline); position: sticky; top: 0; background: var(--surface-1); } /* white-space: nowrap keeps a dollar amount on one line - the old bug was a negative sign wrapping onto its own line above the number. */ th.num, td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } th.sortable { cursor: pointer; user-select: none; } th.sortable:hover { color: var(--text-secondary); } th.sort-active { color: var(--text-primary); } tbody td { padding: 9px 12px; border-bottom: 1px solid var(--gridline); font-size: 13px; vertical-align: middle; } tbody tr:last-child td { border-bottom: none; } tbody tr:hover { background: var(--page-plane); } .col-check { width: 34px; } .empty-state { text-align: center; color: var(--text-muted); padding: 30px !important; } .pill { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 600; } .pill-subbatch { background: var(--gridline); color: var(--text-secondary); } /* Status is computed automatically from Crystal's own Ins/Pat Balance on every Invoice Report import (see matching.compute_status) - this select is a manual-override escape hatch, not the primary way status changes. Picking a value here is a temporary stopgap: the next Invoice Report import that touches this claim recomputes and overwrites it. */ .status-select { display: inline-flex; align-items: center; border: none; border-radius: 999px; padding: 4px 22px 4px 11px; font-size: 12px; font-weight: 700; cursor: pointer; appearance: none; -webkit-appearance: none; background-repeat: no-repeat; background-position: right 8px center; background-size: 8px; } /* Status colors mirror Matt's balance-sheet color key (Aug 23 2026): TEAL working - filed, waiting on insurance YELLOW patient_balance - patient owes, needs an invoice ORANGE pb_first_sent - 1st invoice sent RED pb_second_sent - 2nd invoice sent + alert in EHR PURPLE pb_employee - staff balance BLUE patient_refund - practice owes the patient GREEN complete - manually done; removed by the next report upload */ .status-select.working { background-color: rgba(42,167,160,0.16); color: #2aa7a0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath fill='%232aa7a0' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E"); } .status-select.complete { background-color: rgba(12,163,12,0.14); color: var(--status-good); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath fill='%230ca30c' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E"); } .status-select.posted { background-color: rgba(12,163,12,0.14); color: var(--status-good); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath fill='%230ca30c' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E"); } .status-select.patient_refund { background-color: rgba(47,111,237,0.14); color: var(--status-info); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath fill='%232f6fed' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E"); } .status-select.patient_balance { background-color: rgba(250,178,25,0.18); color: var(--status-warning); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath fill='%23fab219' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E"); } .status-select.pb_first_sent { background-color: rgba(242,140,40,0.18); color: #f28c28; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath fill='%23f28c28' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E"); } .status-select.pb_second_sent { background-color: rgba(208,59,59,0.14); color: var(--status-critical); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath fill='%23d03b3b' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E"); } .status-select.pb_employee { background-color: rgba(155,89,208,0.18); color: #a86bd6; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath fill='%23a86bd6' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E"); } .status-pill { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; } .status-pill.working { background: rgba(42,167,160,0.16); color: #2aa7a0; } .status-pill.complete { background: rgba(12,163,12,0.14); color: var(--status-good); } .status-pill.posted { background: rgba(12,163,12,0.14); color: var(--status-good); } .status-pill.patient_refund { background: rgba(47,111,237,0.14); color: var(--status-info); } .status-pill.patient_balance { background: rgba(250,178,25,0.18); color: var(--status-warning); } .status-pill.pb_first_sent { background: rgba(242,140,40,0.18); color: #f28c28; } .status-pill.pb_second_sent { background: rgba(208,59,59,0.14); color: var(--status-critical); } .status-pill.pb_employee { background: rgba(155,89,208,0.18); color: #a86bd6; } .file-links { display: flex; gap: 6px; } .file-link { border: 1px solid var(--border); background: var(--surface-1); color: var(--text-secondary); border-radius: 6px; padding: 4px 8px; font-size: 11px; cursor: pointer; text-decoration: none; } .file-link:hover { color: var(--series-1); border-color: var(--series-1); } .file-link.disabled { opacity: 0.35; cursor: default; pointer-events: none; } .notes-input { width: 140px; border: 1px solid transparent; background: transparent; color: var(--text-primary); font-size: 12px; padding: 4px 6px; border-radius: 6px; } .notes-input:hover, .notes-input:focus { border-color: var(--border); background: var(--surface-1); } /* The InstaMed fetch's running per-chunk log - full trail, not just the latest status line, so a skipped range can never hide. */ .fetch-log { max-height: 150px; overflow-y: auto; background: var(--surface-2, rgba(0,0,0,0.2)); border: 1px solid var(--border); border-radius: 7px; padding: 8px 10px; margin: 8px 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; line-height: 1.6; white-space: pre-wrap; color: var(--text-secondary); } /* Invoice View's Notes button - the dot version means a note exists. */ .notes-btn { white-space: nowrap; } .notes-btn.has-notes { color: var(--series-1); border-color: var(--series-1); font-weight: 600; } #notesModal textarea { width: 100%; box-sizing: border-box; padding: 10px; border-radius: 7px; border: 1px solid var(--border); background: var(--surface-1); color: var(--text-primary); font-size: 13px; line-height: 1.5; font-family: inherit; resize: vertical; } .muted { color: var(--text-muted); } .btn-xs { padding: 3px 8px; font-size: 11px; } /* Payments View's manual Mark as Posted tracker - deliberately distinct styling from .status-pill's colors (working/posted/etc) so the two "posted" concepts never look like the same thing at a glance. */ .posted-pill.posted { background: rgba(12,163,12,0.14); color: var(--status-good); } .posted-pill.not-posted { background: var(--gridline); color: var(--text-secondary); } .modal-overlay { position: fixed; inset: 0; background: rgba(11,11,11,0.4); display: flex; align-items: center; justify-content: center; z-index: 10; } .modal { background: var(--surface-1); border-radius: 12px; padding: 26px 28px; width: 420px; max-width: 92vw; border: 1px solid var(--border); /* Settings grew tall enough (payer codes + folders + appearance + users + audit) to push its buttons off a smaller screen - scroll inside the modal instead. */ max-height: 88vh; overflow-y: auto; } .modal h2 { margin: 0 0 6px; font-size: 17px; } .modal-hint { margin: 0 0 16px; color: var(--text-secondary); font-size: 12px; } .modal label { display: block; font-size: 12px; font-weight: 600; color: var(--text-secondary); margin-bottom: 12px; } .modal label select, .modal label input { display: block; width: 100%; margin-top: 5px; padding: 9px 10px; border-radius: 7px; border: 1px solid var(--border); background: var(--page-plane); color: var(--text-primary); font-size: 13px; } .modal-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin-top: 6px; } /* A modal with a "Back" action plus several forward actions (e.g. the InstaMed fetch modal) - Back stays pinned to the left via margin-right: auto, the rest cluster to the right, and everything wraps onto its own row if the modal isn't wide enough rather than the whole row jumbling together (Matt's Aug 21 2026 screenshot: 5 buttons crammed into a 420px-wide .modal-actions with no room to breathe). */ .modal-actions-split .modal-back { margin-right: auto; } .modal-error { background: rgba(208,59,59,0.1); color: var(--status-critical); padding: 10px 12px; border-radius: 7px; font-size: 12px; margin-bottom: 12px; } .modal-warnings { background: rgba(250,178,25,0.14); color: #a86a00; padding: 10px 12px; border-radius: 7px; font-size: 12px; margin-bottom: 12px; } .header-actions { display: flex; gap: 10px; } .input-with-button { display: flex; gap: 8px; align-items: center; } .input-with-button input { flex: 1; margin-top: 5px; } .input-with-button .btn { margin-top: 5px; white-space: nowrap; flex-shrink: 0; } .modal-wide { width: 640px; max-width: 94vw; max-height: 85vh; overflow-y: auto; } /* Settings got its own wider size (Matt's Aug 24 2026 "make the settings pop up menu larger so things settle correctly") - the payer codes sit in a 2-up grid so the modal is roomy without being a tower. */ .modal-settings { width: 600px; max-width: 94vw; } .settings-codes { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 18px; } .table-scroll { max-height: 320px; overflow-y: auto; overflow-x: auto; border: 1px solid var(--border); border-radius: 8px; margin: 10px 0; } .table-scroll table { border: none; border-radius: 0; } .table-scroll thead th { position: sticky; top: 0; } /* The EOB popup's line-item table has 9 columns (DOS/Code/Mod/Charge/Paid/ Patient Amt/Write-Off/Adjustments/Remarks) - wider than the other modal-wide tables need, so it gets its own width plus a minimum table width that forces the horizontal scrollbar above rather than letting Adjustments and Remarks get crushed illegibly. */ #eobModal .modal { width: 900px; } #eob-table { min-width: 840px; } /* Extra room for the InstaMed fetch modal's 5 footer actions - see .modal-actions-split above. */ #instamedModal .modal { width: 520px; } #rec-summary { display: flex; gap: 10px; flex-wrap: wrap; margin: 4px 0 14px; } .rec-stat { border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px; font-size: 12px; } .rec-stat b { display: block; font-size: 18px; } .rec-stat.good { color: var(--status-good); } .rec-stat.warn { color: #a86a00; } .rec-stat.muted { color: var(--text-muted); } #rec-other-details { margin-top: 10px; font-size: 12px; color: var(--text-secondary); } #rec-other-details summary { cursor: pointer; font-weight: 600; margin-bottom: 8px; } .rec-other-row { display: flex; justify-content: space-between; padding: 5px 0; border-bottom: 1px solid var(--gridline); } .staleness-list { list-style: none; margin: 0 0 16px; padding: 0; } .staleness-list li { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--gridline); } .staleness-list li:last-child { border-bottom: none; } .staleness-name { font-weight: 600; font-size: 13px; } .staleness-age { font-size: 12px; color: var(--text-secondary); } .staleness-age.stale { color: #a86a00; font-weight: 600; } .staleness-age.never { color: var(--status-critical); font-weight: 600; } .modal-choice { display: flex; flex-direction: column; gap: 10px; margin-bottom: 6px; } .modal-choice .btn { width: 100%; text-align: center; padding: 12px 14px; } .modal-choice-desc { font-size: 11px; color: var(--text-muted); margin: -6px 0 4px; } .last-payment-panel { border: 1px solid var(--border); border-radius: 8px; padding: 10px 14px; font-size: 12px; color: var(--text-secondary); margin: 0 0 14px; } .last-payment-panel b { color: var(--text-primary); } .claim-type-select { border: 1px solid var(--border); background: var(--gridline); color: var(--text-secondary); border-radius: 999px; padding: 3px 7px; font-size: 11px; font-weight: 600; cursor: pointer; max-width: 190px; } .claim-type-select:hover, .claim-type-select:focus { border-color: var(--series-1); color: var(--text-primary); } #eob-table tbody tr.eob-negative td { background: rgba(250,178,25,0.14); } #eob-table td, #eob-table th { font-size: 12px; } #eob-table td:nth-child(8), #eob-table td:nth-child(9) { font-size: 11px; color: var(--text-secondary); } #gen-links.file-links { margin-top: 4px; } #gen-links .file-link { padding: 6px 12px; font-size: 12px; } /* ------------------------------------------------------------------ */ /* Recent Files side panel */ /* ------------------------------------------------------------------ */ .app-layout { display: flex; align-items: flex-start; gap: 0; } .main-content { flex: 1; min-width: 0; } .files-panel { flex-shrink: 0; width: 300px; margin: 0 20px 24px 0; background: var(--surface-1); border: 1px solid var(--border); border-radius: 10px; padding: 16px 16px 10px; position: sticky; top: 12px; max-height: calc(100vh - 24px); display: flex; flex-direction: column; transition: width 0.15s ease, padding 0.15s ease; } .files-panel.collapsed { width: 44px; padding: 16px 8px; overflow: hidden; } .files-panel.collapsed .files-panel-hint, .files-panel.collapsed .files-panel-list, .files-panel.collapsed .files-panel-header h2 { display: none; } .files-panel.collapsed .files-panel-toggle { transform: rotate(180deg); } .files-panel-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; } .files-panel-header h2 { margin: 0; font-size: 14px; font-weight: 700; flex: 1; } .files-panel-clear { flex-shrink: 0; } /* Remits View toolbar (payer picker + filename search) */ .remits-toolbar { display: flex; gap: 10px; padding: 10px 12px; align-items: center; } .remits-toolbar input[type="search"] { flex: 1; max-width: 340px; } .files-panel-toggle { border: 1px solid var(--border); background: var(--page-plane); color: var(--text-secondary); border-radius: 6px; width: 24px; height: 24px; font-size: 13px; line-height: 1; cursor: pointer; flex-shrink: 0; } .files-panel-toggle:hover { color: var(--series-1); border-color: var(--series-1); } .files-panel-hint { margin: 0 0 12px; color: var(--text-muted); font-size: 11px; line-height: 1.4; } .files-panel-list { overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding-bottom: 6px; } .file-card { border: 1px solid var(--border); border-radius: 8px; padding: 9px 10px; background: var(--page-plane); } .file-card-kind { font-size: 10px; text-transform: uppercase; letter-spacing: 0.03em; font-weight: 700; color: var(--text-muted); margin-bottom: 2px; } .file-card-label { font-size: 12px; font-weight: 600; margin-bottom: 2px; word-break: break-word; } .file-card-time { font-size: 10px; color: var(--text-muted); margin-bottom: 8px; } .file-card-actions { display: flex; gap: 6px; } .file-card-actions .file-link { flex: 1; text-align: center; } .file-card.missing { opacity: 0.5; } .file-card.missing .file-card-label::after { content: " (moved or deleted)"; font-weight: 400; color: var(--status-critical); } .file-card-actions .file-link.copied { color: var(--status-good); border-color: var(--status-good); } /* Merge Payments (Matt's Aug 23 2026 request) - small pill next to the patient name on a row that combines several payment events into one merged EOB/835. Purely informational; Unmerge lives in the bulk bar. */ .merged-badge { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; font-size: 10px; font-weight: 700; letter-spacing: 0.02em; white-space: nowrap; color: var(--series-1); border: 1px solid var(--series-1); background: transparent; vertical-align: 1px; } /* ===================================================================== Insurance multi-select filter (Matt's Aug 23 2026 request) - a button that opens a checkbox menu, so several insurances filter at once. ===================================================================== */ .multi-filter { position: relative; } .multi-filter-btn { padding: 8px 10px; border-radius: 7px; border: 1px solid var(--border); background: var(--surface-1); color: var(--text-primary); font-size: 13px; cursor: pointer; white-space: nowrap; } .multi-filter-btn.filter-active { border-color: var(--series-1); box-shadow: 0 0 0 1px var(--series-1); } .multi-filter-menu { position: absolute; top: calc(100% + 4px); left: 0; z-index: 60; min-width: 210px; padding: 6px; background: var(--surface-1); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 8px 24px rgba(11,11,11,0.18); display: flex; flex-direction: column; gap: 2px; } .multi-filter-item { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px; font-size: 13px; cursor: pointer; user-select: none; } .multi-filter-item:hover { background: var(--page-plane); } .multi-filter-clear { margin-top: 4px; padding: 6px 8px; border-radius: 6px; border: 1px solid var(--border); background: var(--page-plane); color: var(--text-secondary); font-size: 12px; cursor: pointer; } .multi-filter-clear:hover { color: var(--text-primary); } /* ===================================================================== Payments View color coding (Matt's Aug 23 2026 scheme): Posted green, Unposted white, then per-Claim-Type pastels - 1 Exams light green / 2 CL light yellow / 3 Glasses & CBs light blue / 4 Complex orange / 5 Action Needed red. Shared by the tiles and each row's Claim Type dropdown. Fixed light backgrounds with dark text in both themes, so a category is the same color everywhere. ===================================================================== */ .tile.cat-posted { background: #c9ecc9; border-color: #86c986; } .tile.cat-unposted { background: #ffffff; border-color: #c9c8c0; } .tile.cat-exams { background: #ddf3dd; border-color: #a4d8a4; } .tile.cat-cl { background: #fdf3c4; border-color: #e4d288; } .tile.cat-cb { background: #d8e9fa; border-color: #a3c6ec; } .tile.cat-complex { background: #fbd6a4; border-color: #eba95a; } .tile.cat-action { background: #f6bcbc; border-color: #e18787; } .tile.cat-posted .tile-value, .tile.cat-unposted .tile-value, .tile.cat-exams .tile-value, .tile.cat-cl .tile-value, .tile.cat-cb .tile-value, .tile.cat-complex .tile-value, .tile.cat-action .tile-value { color: #0b0b0b; } .tile.cat-posted .tile-label, .tile.cat-unposted .tile-label, .tile.cat-exams .tile-label, .tile.cat-cl .tile-label, .tile.cat-cb .tile-label, .tile.cat-complex .tile-label, .tile.cat-action .tile-label { color: #3d3c39; } .tile.tile-active.cat-posted, .tile.tile-active.cat-unposted, .tile.tile-active.cat-exams, .tile.tile-active.cat-cl, .tile.tile-active.cat-cb, .tile.tile-active.cat-complex, .tile.tile-active.cat-action { border-color: var(--series-1); } /* Row-level: the Claim Type dropdown wears its category's tint. */ select.claim-type-select.cat-exams { background: #ddf3dd; color: #0b0b0b; border-color: #a4d8a4; } select.claim-type-select.cat-cl { background: #fdf3c4; color: #0b0b0b; border-color: #e4d288; } select.claim-type-select.cat-cb { background: #d8e9fa; color: #0b0b0b; border-color: #a3c6ec; } select.claim-type-select.cat-complex { background: #fbd6a4; color: #0b0b0b; border-color: #eba95a; } select.claim-type-select.cat-action { background: #f6bcbc; color: #0b0b0b; border-color: #e18787; } /* Posted pill stays green; Not Posted goes white (Matt's color key). */ .posted-pill.not-posted { background: #ffffff; color: #52514e; border: 1px solid #c9c8c0; } .modal-divider { border: none; border-top: 1px solid var(--border); margin: 14px 0; } /* ===================================================================== Auth gate (multi-user deployment, Matt's Aug 24 2026 request) - the full-screen login/setup/2FA screens, the user chip, and the Settings modal's user-management + audit sections. ===================================================================== */ .auth-screen { position: fixed; inset: 0; z-index: 200; background: var(--page-plane); display: flex; align-items: center; justify-content: center; } .auth-card { width: 380px; max-width: 92vw; background: var(--surface-1); border: 1px solid var(--border); border-radius: 12px; padding: 28px 30px; box-shadow: 0 12px 40px rgba(11,11,11,0.15); } .auth-card h1 { margin: 0 0 4px; font-size: 22px; } .auth-card h2 { margin: 10px 0 4px; font-size: 15px; } .auth-card label { display: block; font-size: 12px; color: var(--text-secondary); margin: 10px 0 2px; } .auth-card input[type=text], .auth-card input[type=password] { width: 100%; padding: 9px 10px; margin-top: 3px; border: 1px solid var(--border); border-radius: 7px; background: var(--page-plane); color: var(--text-primary); font-size: 14px; } .auth-card .btn { width: 100%; margin-top: 14px; } .auth-message { min-height: 18px; color: var(--status-critical); font-size: 12px; margin: 4px 0 0; } .auth-remember { display: flex !important; align-items: center; gap: 7px; font-size: 12px !important; } .auth-remember input { width: auto !important; margin: 0 !important; } .auth-qr { display: flex; justify-content: center; margin: 10px 0; } .auth-qr svg { width: 180px; height: 180px; background: #fff; padding: 8px; border-radius: 8px; } #auth-secret { font-size: 11px; word-break: break-all; } .user-chip { font-size: 13px; font-weight: 600; color: var(--text-secondary); padding: 0 4px; } .users-list { display: flex; flex-direction: column; gap: 6px; margin: 8px 0; } .user-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 7px; } .user-row > span:last-child { display: flex; gap: 6px; flex-shrink: 0; } .audit-list { max-height: 220px; overflow-y: auto; border: 1px solid var(--border); border-radius: 7px; padding: 8px; font-size: 11px; margin-top: 6px; } .audit-row { padding: 2px 0; border-bottom: 1px solid var(--gridline); } .audit-row:last-child { border-bottom: none; } .audit-ts { color: var(--text-muted); font-variant-numeric: tabular-nums; } /* A/R aging row (Invoice View) - slightly more compact than the status tiles above it, dollars as the headline like a real aging report. */ .aging-tiles { padding-top: 0; } .aging-tiles .tile { padding: 10px 16px; min-width: 150px; } .aging-tiles .tile-value { font-size: 20px; }