/* build: slice1-v3 */ /* ============================================================ Hoskin Consulting Web Portal — Centralised Stylesheet styles.css | served at /static/styles.css ⚠️ IMPORTANT: Always edit THIS file from Claude outputs. Do NOT upload an older local copy — it will be missing critical additions (.filters, .filter-bar, .modal max-height). Current canonical additions (do not remove): - .filters (line ~448) — page-level filter grid - .filter-bar (line ~461) — panel-header inline filter - .modal max-height: 90vh + overflow-y: auto (line ~534) Structure: 1. Variables (:root) 2. Reset & Base 3. Layout 4. Stat Cards (canonical — Dashboard row 1 style) 5. Panels 6. Tables 7. Badges 8. Buttons 9. Filter Bar 10. Modals 11. Progress 12. Empty & Loading States 13. Nav (migrated from nav.js) 14. Responsive Breakpoints Per-page CSS that stays in individual HTML files: - dashboard.html: breakdown-card variants, detail/commission/ remittance layout, date filter - manual_review.html: stat-card-light (coloured status row), filter-bar specifics, bulk/allocate modal - outstanding_invoices.html: band-* age-banding tokens, AR table - upload.html: upload-card, drop-zone, file-ready states - tpf_export.html / custom_run_export.html: form-card, preset-buttons layout, date-row, rules-panel - settings.html: settings-card, toggle-switch, slider - tpf_summaries.html: drill-row - tpf_reports.html / custom_reports_report.html: chart/summary layout ============================================================ */ /* ── 1. Variables ──────────────────────────────────────────── */ :root { /* Brand */ --brand-dark: #4D616B; --brand-mid: #89AFB3; --brand-light: #A4C4D4; --brand-pale: #D6E8EE; /* Neutrals */ --white: #ffffff; --off-white: #F5F8FA; /* Text */ --text-dark: #1a2a30; --text-mid: #4D616B; --text-light: #7a9aa5; /* Semantic — canonical values, drift eliminated */ --success: #2D7A4F; --success-bg: #E8F5EE; --warning: #B07D00; --warning-bg: #FFF8E8; --error: #721C24; --error-bg: #FDECEA; --info: #0D47A1; --info-bg: #EBF4FB; --grey: #4D616B; --grey-bg: #EEF4F7; /* Shadows */ --shadow-sm: 0 2px 8px rgba(77,97,107,0.08); --shadow-md: 0 8px 32px rgba(77,97,107,0.14); --shadow-lg: 0 20px 60px rgba(77,97,107,0.18); } /* ── 2. Reset & Base ───────────────────────────────────────── */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Inter', sans-serif; background: var(--brand-dark); min-height: 100vh; display: flex; flex-direction: column; } /* Nav-root blink fix — prevents white flash before nav.js renders. Previously missing from manual_review.html — covered here for all pages. */ #nav-root { min-height: 96px; background: #3d4f57; } /* ── 3. Layout ─────────────────────────────────────────────── */ main { flex: 1; background: var(--off-white); padding: 40px 48px; } .page-title { font-family: 'Inter', sans-serif; font-size: 28px; font-weight: 700; color: var(--text-dark); letter-spacing: -0.02em; margin-bottom: 4px; } .page-subtitle { font-size: 14px; color: var(--text-light); margin-top: 2px; margin-bottom: 28px; } .section-heading { font-size: 11px; font-weight: 600; color: var(--text-light); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 12px; } /* ── 4. Stat Cards ─────────────────────────────────────────── */ /* Canonical = Dashboard row 1 style: dark brand background, white text. Applies to: - dashboard.html (row 1 — total/commission summary) - manual_review.html (stats-row-totals row only) - tpf_summaries.html (all 4 stat cards) - custom_reports.html (all 4 stat cards) Per-page overrides that remain in HTML files: - dashboard.html: .breakdown-card variants (row 2) - manual_review.html: .stat-card-light (coloured status row) - outstanding_invoices.html: .band-* age-banding tokens (stays as-is) - upload.html: stays as-is */ .stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 28px; } .stat-card { background: var(--brand-dark); border-radius: 12px; padding: 20px; box-shadow: var(--shadow-sm); } .stat-label { font-size: 11px; font-weight: 600; color: rgba(255,255,255,0.80); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 8px; } .stat-value { font-family: 'Inter', sans-serif; font-size: 28px; font-weight: 700; color: #ffffff; } .stat-sub { font-size: 12px; color: rgba(255,255,255,0.60); margin-top: 4px; } /* ── 5. Panels ─────────────────────────────────────────────── */ .panel { background: var(--white); border-radius: 12px; border: 1px solid var(--brand-pale); margin-bottom: 24px; overflow: hidden; } .panel-header { padding: 18px 24px; border-bottom: 1px solid var(--brand-pale); display: flex; align-items: center; justify-content: space-between; } .panel-title { font-size: 15px; font-weight: 700; color: var(--text-dark); } .panel-sub { font-size: 12px; color: var(--text-light); margin-top: 2px; } .panel-body { padding: 0; } /* Runs summary bar — shown when a run is open in working mode */ .runs-summary-bar { display: none; align-items: center; justify-content: space-between; padding: 12px 20px; background: var(--white); border: 1px solid var(--brand-pale); border-radius: 10px; margin-bottom: 24px; cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s; } .runs-summary-bar.visible { display: flex; } .runs-summary-bar:hover { border-color: var(--brand-mid); box-shadow: 0 2px 8px rgba(77,97,107,0.1); } .runs-summary-bar-text { font-size: 13px; color: var(--text-dark); font-weight: 500; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .runs-summary-bar-text .bar-run-id { font-weight: 700; color: var(--brand-dark); } .runs-summary-bar-text .bar-period { color: var(--text-mid); font-size: 12px; } .runs-summary-bar-text .bar-pending { font-size: 12px; background: var(--warning-bg); color: var(--warning); padding: 2px 8px; border-radius: 10px; font-weight: 600; } .runs-summary-bar-text .bar-followup { font-size: 12px; background: var(--info-bg); color: var(--info); padding: 2px 8px; border-radius: 10px; font-weight: 600; } .runs-summary-bar-text .bar-escalated { font-size: 12px; background: #fff3e0; color: #e65100; padding: 2px 8px; border-radius: 10px; font-weight: 600; } .runs-summary-bar-text .bar-all-done { font-size: 12px; background: var(--success-bg); color: var(--success); padding: 2px 8px; border-radius: 10px; font-weight: 600; } /* ── 6. Tables ─────────────────────────────────────────────── */ table { width: 100%; border-collapse: collapse; } thead th { background: var(--off-white); padding: 11px 20px; text-align: left; font-size: 11px; font-weight: 600; color: var(--text-light); text-transform: uppercase; letter-spacing: 0.05em; border-bottom: 1px solid var(--brand-pale); white-space: nowrap; } thead th.num { text-align: right; } tbody td { padding: 13px 20px; font-size: 13px; color: var(--text-dark); border-bottom: 1px solid rgba(214,232,238,0.5); vertical-align: middle; } tbody td.num { text-align: right; font-variant-numeric: tabular-nums; } tbody tr:last-child td { border-bottom: none; } tbody tr:hover { background: var(--off-white); cursor: pointer; } tbody tr.detail-row:hover { background: var(--off-white); cursor: default; } /* ── 7. Badges ─────────────────────────────────────────────── */ .badge { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 10px; font-size: 11px; font-weight: 600; white-space: nowrap; } /* Status badges */ .badge-pending { background: var(--warning-bg); color: var(--warning); } .badge-completed { background: var(--success-bg); color: var(--success); } .badge-dismissed { background: var(--grey-bg); color: var(--grey); } .badge-follow-up { background: #e3f2fd; color: #1565c0; } .badge-escalated { background: #fff3e0; color: #e65100; } /* Priority badges */ .badge-high { background: var(--error-bg); color: var(--error); } .badge-medium { background: var(--warning-bg); color: var(--warning); } .badge-low { background: var(--grey-bg); color: var(--grey); } /* Scenario badges — shared by TPF (S1–S5) and Custom TPF rule types. Custom TPF rule type mapping: type-a = S1, type-b = S2, future type-c = S3, type-d = S4, type-e = S5. HTML emits badge-s1, badge-s2 etc — not badge-type-a/b. */ .badge-s1 { background: var(--info-bg); color: var(--info); } .badge-s2 { background: var(--error-bg); color: var(--error); } .badge-s3 { background: var(--warning-bg); color: var(--warning); } .badge-s4 { background: #F3EBFB; color: #5B2D8E; } .badge-s5 { background: var(--success-bg); color: var(--success); } .badge-s6 { background: #E0F4F4; color: #1B6B6B; } /* Teal — SubmitKit/City Osteopath */ /* Confidence badges (tpf_export scenario cards) */ .badge-green { background: var(--success-bg); color: var(--success); } .badge-blue { background: var(--info-bg); color: var(--info); } .badge-amber { background: var(--warning-bg); color: var(--warning); } .badge-grey { background: var(--grey-bg); color: var(--grey); } /* Reports page badges Issue 1 fix: .report-badge.internal now blue — aligned with .review. All three internal reports show the same blue pill. */ .report-badge { display: inline-block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; padding: 3px 9px; border-radius: 20px; margin-bottom: 10px; } .report-badge.internal { background: #e8f0ff; color: #2952A3; } .report-badge.external { background: var(--success-bg); color: var(--success); } .report-badge.review { background: #e8f0ff; color: #2952A3; } /* Allocation badges */ .allocated-badge { font-size: 11px; color: var(--info); background: var(--info-bg); border-radius: 4px; padding: 2px 7px; white-space: nowrap; } .unallocated-badge { font-size: 11px; color: var(--text-light); } /* ── 8. Buttons ────────────────────────────────────────────── */ /* ── Base .btn ── */ .btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 6px; font-size: 12px; font-weight: 600; cursor: pointer; border: 1px solid var(--brand-pale); background: var(--white); color: var(--text-dark); font-family: 'Inter', sans-serif; transition: opacity 0.15s, background 0.15s; white-space: nowrap; } .btn:hover { opacity: 0.85; } /* Fixed-width action buttons */ .btn-action { width: 108px; justify-content: center; } /* Semantic variants */ .btn-primary { background: var(--brand-dark); color: #fff; border-color: var(--brand-dark); } .btn-primary:hover { background: var(--brand-mid); } .btn-primary:disabled { background: var(--brand-light); border-color: var(--brand-light); cursor: not-allowed; } .btn-complete { background: var(--success-bg); color: var(--success); border-color: #b8dfc8; } .btn-complete:hover { background: #d4edda; } .btn-dismiss { background: var(--error-bg); color: var(--error); border-color: #f5c6cb; } .btn-reopen { background: var(--grey-bg); color: var(--grey); border-color: #c8d8de; } .btn-follow-up { background: #e3f2fd; color: #1565c0; border-color: #90caf9; } .btn-escalate { background: #fff3e0; color: #e65100; border-color: #ffcc80; } /* Issue 4 fix: btn-expand aligned to custom_reports canonical. Both tpf_summaries and custom_reports now: teal-pale bg, hover to brand-mid. */ .btn-expand { background: var(--brand-pale); color: var(--brand-dark); border-color: var(--brand-mid); padding: 5px 12px; } .btn-expand:hover { background: var(--brand-mid); color: #fff; } .btn-delete { background: var(--error-bg); color: var(--error); border-color: #f5c6cb; padding: 5px 12px; } .btn-allocate { background: var(--info-bg); color: var(--info); border: 1px solid #90caf9; } .btn-allocate:hover { background: #cfe8fc; } /* Modal buttons */ .btn-cancel { background: var(--off-white); color: var(--text-mid); border-color: var(--brand-pale); } .btn-submit { background: var(--brand-dark); color: #fff; border-color: var(--brand-dark); } .btn-submit:hover { background: #3d4f57; } /* Alloc modal confirm/cancel */ .btn-alloc-confirm { background: var(--brand-dark); color: #fff; border: none; padding: 9px 20px; border-radius: 7px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: 'Inter', sans-serif; } .btn-alloc-confirm:hover { background: var(--brand-mid); } .btn-alloc-cancel { background: none; color: var(--text-mid); border: 1px solid var(--brand-pale); padding: 9px 20px; border-radius: 7px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: 'Inter', sans-serif; } /* ── Submit / Generate Report / Download button ────────────── Issue 2 fix: canonical style for all generate/download actions. Replaces .download-btn.primary (reports.html) and the per-page .submit-btn in tpf_export.html and custom_run_export.html. brand-dark background, hover shifts to brand-mid (teal). */ .submit-btn { background: var(--brand-dark); color: var(--white); padding: 12px 32px; border: none; border-radius: 7px; font-size: 14px; font-weight: 600; cursor: pointer; font-family: 'Inter', sans-serif; width: 100%; transition: background 0.2s, transform 0.15s; display: flex; align-items: center; justify-content: center; gap: 8px; } .submit-btn:hover:not(:disabled) { background: var(--brand-mid); transform: translateY(-1px); } .submit-btn:disabled { opacity: 0.65; cursor: not-allowed; transform: none; } /* ── Filter button ── */ .filter-btn { background: var(--brand-dark); color: white; border: none; padding: 10px 20px; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; transition: background 0.2s; width: 100%; font-family: 'Inter', sans-serif; } .filter-btn:hover { background: var(--brand-mid); } /* ── Preset date buttons ───────────────────────────────────── Issue 3 fix: canonical colour sequence blue→amber→green→red→grey. Applied to both tpf_export.html and custom_run_export.html. */ .preset-buttons { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; } .preset-btn { border: none; border-radius: 8px; cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 600; padding: 11px 16px; transition: opacity 0.15s, transform 0.12s; flex: 1; min-width: 90px; } .preset-btn:hover { opacity: 0.85; transform: translateY(-1px); } .preset-btn:active { transform: translateY(0); } .preset-btn-1 { background: var(--info-bg); color: var(--info); } .preset-btn-2 { background: var(--warning-bg); color: var(--warning); } .preset-btn-3 { background: var(--success-bg); color: var(--success); } .preset-btn-4 { background: var(--error-bg); color: var(--error); } .preset-btn-5 { background: var(--grey-bg); color: var(--grey); } /* ── Spinner ── */ @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .spinner { display: inline-block; animation: spin 0.8s linear infinite; } .spinner-sm { width: 20px; height: 20px; border: 2px solid var(--brand-pale); border-top-color: var(--brand-dark); border-radius: 50%; animation: spin 0.8s linear infinite; margin: 0 auto 12px; display: block; } /* ── 9. Filter Bar ─────────────────────────────────────────── */ /* Shared by manual_review.html and outstanding_invoices.html */ /* Page-level filter grid (outstanding_invoices, manual_review) */ .filters { background: var(--white); border-radius: 12px; padding: 20px 24px; margin-bottom: 24px; box-shadow: var(--shadow-sm); display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; align-items: end; } /* Panel-header inline filter bar (custom_reports, tpf_summaries) */ .filter-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .filter-bar select, .filter-bar input[type="text"] { padding: 6px 10px; border: 1px solid var(--brand-pale); border-radius: 6px; font-size: 12px; font-family: 'Inter', sans-serif; color: var(--text-dark); background: var(--white); outline: none; } .filter-bar select:focus, .filter-bar input[type="text"]:focus { border-color: var(--brand-mid); box-shadow: 0 0 0 3px rgba(137,175,179,0.15); } .filter-group label { display: block; font-size: 12px; font-weight: 600; color: var(--text-mid); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.03em; } .filter-group select, .filter-group input { width: 100%; padding: 10px 12px; border: 1.5px solid #dce6ea; border-radius: 8px; font-size: 14px; font-family: 'Inter', sans-serif; background: var(--off-white); color: var(--text-dark); } .filter-group select:focus, .filter-group input:focus { outline: none; border-color: var(--brand-mid); box-shadow: 0 0 0 3px rgba(137,175,179,0.15); } /* ── 10. Modals ────────────────────────────────────────────── */ .modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 1000; align-items: center; justify-content: center; } .modal-overlay.open { display: flex; } .modal { background: var(--white); border-radius: 12px; padding: 28px 32px; width: 480px; max-width: 95vw; max-height: 90vh; overflow-y: auto; box-shadow: 0 20px 60px rgba(0,0,0,0.2); } .modal-title { font-size: 17px; font-weight: 700; color: var(--text-dark); margin-bottom: 6px; } .modal-sub { font-size: 13px; color: var(--text-light); margin-bottom: 20px; } .modal label { display: block; font-size: 12px; font-weight: 600; color: var(--text-dark); margin-bottom: 6px; } .modal select, .modal textarea { width: 100%; padding: 9px 12px; border: 1px solid var(--brand-pale); border-radius: 7px; font-family: 'Inter', sans-serif; font-size: 13px; color: var(--text-dark); background: var(--white); margin-bottom: 16px; } .modal select:focus, .modal textarea:focus { outline: none; border-color: var(--brand-mid); } .modal textarea { resize: vertical; min-height: 80px; } .modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 4px; } .modal-error { font-size: 12px; color: var(--error); margin-bottom: 12px; display: none; } .modal-error.show { display: block; } /* Alloc overlay — shared by tpf_summaries.html and custom_reports.html */ .alloc-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 1000; align-items: center; justify-content: center; } .alloc-overlay.visible { display: flex; } .alloc-modal { background: #fff; border-radius: 12px; padding: 32px; width: 400px; max-width: 90vw; box-shadow: 0 8px 32px rgba(0,0,0,0.18); } .alloc-modal h3 { font-size: 17px; font-weight: 700; color: var(--text-dark); margin-bottom: 8px; } .alloc-modal p { font-size: 13px; color: var(--text-mid); margin-bottom: 18px; line-height: 1.5; } .alloc-modal label { font-size: 11px; font-weight: 600; color: var(--text-mid); display: block; margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.04em; } .alloc-modal select { width: 100%; padding: 9px 12px; border: 1px solid var(--brand-pale); border-radius: 8px; font-size: 13px; font-family: 'Inter', sans-serif; margin-bottom: 20px; } .alloc-modal-actions { display: flex; gap: 10px; justify-content: flex-end; } /* Error banner */ .error-banner { display: none; margin-top: 16px; padding: 12px 16px; background: var(--error-bg); border: 1px solid #f5c6cb; border-radius: 8px; font-size: 13px; color: var(--error); } .error-banner.show { display: block; } /* Duplicate run warning modal — shared by tpf_export, custom_run_export, telehealth */ .dup-modal-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 1000; align-items: center; justify-content: center; } .dup-modal-backdrop.open { display: flex; } .dup-modal { background: var(--white); border-radius: 10px; padding: 28px 28px 22px; max-width: 480px; width: calc(100% - 40px); box-shadow: 0 8px 32px rgba(0,0,0,0.18); } .dup-modal-icon { font-size: 22px; margin-bottom: 10px; } .dup-modal h3 { font-size: 15px; font-weight: 700; color: var(--brand-dark); margin-bottom: 8px; } .dup-modal p { font-size: 13px; color: var(--text-mid); margin-bottom: 6px; line-height: 1.5; } .dup-modal-runs { margin: 12px 0 18px; border-left: 3px solid var(--brand-mid); padding-left: 12px; } .dup-modal-run { font-size: 12px; color: var(--text-dark); margin-bottom: 5px; line-height: 1.5; } .dup-modal-actions { display: flex; gap: 10px; justify-content: flex-end; } .dup-btn-cancel { padding: 8px 18px; border: 1px solid var(--brand-pale); border-radius: 6px; background: var(--white); font-size: 13px; font-weight: 600; color: var(--text-mid); cursor: pointer; font-family: 'Inter', sans-serif; } .dup-btn-cancel:hover { background: var(--brand-pale); } .dup-btn-confirm { padding: 8px 18px; border: none; border-radius: 6px; background: var(--brand-dark); font-size: 13px; font-weight: 600; color: #fff; cursor: pointer; font-family: 'Inter', sans-serif; } .dup-btn-confirm:hover { background: var(--brand-mid); } /* ── 11. Progress ──────────────────────────────────────────── */ .progress-section { margin-top: 20px; display: none; } .progress-section.visible { display: block; } .progress-wrap { display: flex; align-items: center; gap: 10px; } .progress-label { font-size: 13px; color: var(--text-mid); margin-bottom: 7px; font-weight: 500; } .progress-track { flex: 1; background: var(--brand-pale); border-radius: 4px; height: 6px; overflow: hidden; min-width: 80px; } .progress-fill { height: 100%; border-radius: 4px; background: var(--brand-mid); transition: width 0.4s ease, background 0.3s; width: 0%; } .fill-completed { background: var(--success); } .fill-dismissed { background: var(--text-light); } .fill-pending { background: var(--warning); } /* ── 12. Empty & Loading States ────────────────────────────── */ .loading { padding: 40px; text-align: center; color: var(--text-light); font-size: 14px; } .empty { padding: 48px; text-align: center; color: var(--text-light); } .empty-icon { font-size: 36px; margin-bottom: 12px; } .empty-state { padding: 40px; text-align: center; color: var(--text-light); } .empty-state-icon { font-size: 32px; margin-bottom: 12px; } .empty-state-title { font-size: 18px; font-weight: 600; margin-bottom: 8px; color: var(--text-mid); } .empty-state-text { font-size: 13px; color: var(--text-light); } /* ── 13. Nav (migrated from nav.js injected