/* Theme variables */ :root { --bg: #f6f8fa; --text: #1f2328; --card-bg: #fff; --card-shadow: rgba(20,30,50,0.07); --border: #d9dee5; --input-bg: #fff; --table-header: #f1f4f7; --table-border: #e8ecf0; --badge-bg: #e8e8e8; --hover-bg: #f7f9fb; --muted: #59636e; --link: var(--accent); --page-tint: #f5f7fa; /* Accent (buttons, links, focus rings) */ --accent: #4f46e5; --accent-hover: #4338ca; --accent-contrast: #fff; /* Semantic status colours + soft backgrounds */ --success: #16a34a; --warning: #b45309; --danger: #dc2626; --info: #0369a1; --success-soft: color-mix(in srgb, var(--success) 14%, var(--card-bg)); --warning-soft: color-mix(in srgb, var(--warning) 14%, var(--card-bg)); --danger-soft: color-mix(in srgb, var(--danger) 13%, var(--card-bg)); --info-soft: color-mix(in srgb, var(--info) 13%, var(--card-bg)); /* Scales */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --shadow-sm: 0 1px 2px var(--card-shadow); --shadow-md: 0 1px 2px var(--card-shadow), 0 4px 12px var(--card-shadow); --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 32px; --space-8: 40px; /* Notebook tab colours */ --tab-documents: #4a90d9; --tab-extract: #27ae60; --tab-bulk: #e67e22; --tab-rules: #8e44ad; --tab-doctypes: #2c3e50; --tab-review: #16a085; --tab-regression: #c0392b; --tab-help: #7f8c8d; } [data-theme="dark"] { --bg: #0d1117; --text: #c9d1d9; --card-bg: #161b22; --card-shadow: rgba(0,0,0,0.4); --border: #30363d; --input-bg: #0d1117; --table-header: #21262d; --table-border: #21262d; --badge-bg: #21262d; --hover-bg: #1c2128; --muted: #8b949e; --link: #818cf8; --page-tint: #0d1117; --accent: #6366f1; --accent-hover: #818cf8; --accent-contrast: #fff; --success: #3fb950; --warning: #d29922; --danger: #f85149; --info: #58a6ff; /* Re-declare the soft mixes here: custom properties resolve var() refs on the element that DEFINES them, and the :root definitions resolve against light values because data-theme lives on . */ --success-soft: color-mix(in srgb, var(--success) 18%, var(--card-bg)); --warning-soft: color-mix(in srgb, var(--warning) 18%, var(--card-bg)); --danger-soft: color-mix(in srgb, var(--danger) 17%, var(--card-bg)); --info-soft: color-mix(in srgb, var(--info) 17%, var(--card-bg)); --tab-documents: #1e4976; --tab-extract: #1a6b3a; --tab-bulk: #8b5e2f; --tab-rules: #5b2d7a; --tab-doctypes: #2e3d52; --tab-review: #1a6b5a; --tab-regression: #7a2d2d; --tab-help: #3a4048; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: 14px; line-height: 1.5; background: var(--bg); color: var(--text); transition: background 0.3s, color 0.2s; } a { color: var(--link); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } /* Header — light in light mode, dark in dark mode */ header { background: linear-gradient(135deg, #e8ecf1 0%, #dce1e8 100%); color: #2c3e50; padding: 10px 24px; display: flex; align-items: center; gap: 16px; border-bottom: 1px solid var(--border); } header h1 { font-size: 17px; font-weight: 600; letter-spacing: -0.3px; color: #2c3e50; } header .version { font-size: 11px; color: #7f8c8d; background: rgba(0,0,0,0.06); padding: 2px 6px; border-radius: 3px; } .theme-toggle, .theme-select { background: rgba(0,0,0,0.06); border: 1px solid rgba(0,0,0,0.12); color: #555; padding: 3px 10px; border-radius: 3px; cursor: pointer; font-size: 12px; } .theme-toggle:hover, .theme-select:hover { background: rgba(0,0,0,0.1); color: #333; } .tab-icon { font-size: 14px; margin-right: 2px; } [data-theme="dark"] header { background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%); color: #fff; border-bottom-color: rgba(255,255,255,0.05); } [data-theme="dark"] header h1 { color: #fff; } [data-theme="dark"] header .version { color: #666; background: rgba(255,255,255,0.08); } [data-theme="dark"] .theme-toggle, [data-theme="dark"] .theme-select { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.15); color: #aaa; } [data-theme="dark"] .theme-toggle:hover, [data-theme="dark"] .theme-select:hover { background: rgba(255,255,255,0.15); color: #fff; } /* Notebook Tab Navigation — light bar in light mode */ .tab-bar { display: flex; background: #d5dbe3; padding: 0 16px; gap: 2px; align-items: flex-end; min-height: 42px; } .tab-bar button { background: rgba(0,0,0,0.04); border: none; color: #667; padding: 8px 18px; font-size: 13px; cursor: pointer; border-radius: 6px 6px 0 0; font-weight: 500; transition: all 0.15s; position: relative; bottom: -1px; border: 1px solid transparent; border-bottom: none; } .tab-bar button:hover { background: rgba(0,0,0,0.08); color: #333; } [data-theme="dark"] .tab-bar { background: #1a1a2e; } [data-theme="dark"] .tab-bar button { background: rgba(255,255,255,0.06); color: #889; } [data-theme="dark"] .tab-bar button:hover { background: rgba(255,255,255,0.12); color: #ccc; } .tab-bar button.active { color: #fff; font-weight: 600; border-color: transparent; border-bottom: none; margin-bottom: -1px; padding-bottom: 9px; } /* Per-tab: active tab gets its own colour as background */ .tab-bar button[data-tab="documents"].active { background: var(--tab-documents); } .tab-bar button[data-tab="extract"].active { background: var(--tab-extract); } .tab-bar button[data-tab="bulk"].active { background: var(--tab-bulk); } .tab-bar button[data-tab="rules"].active { background: var(--tab-rules); } .tab-bar button[data-tab="doctypes"].active { background: var(--tab-doctypes); } .tab-bar button[data-tab="review"].active { background: var(--tab-review); } .tab-bar button[data-tab="regression"].active { background: var(--tab-regression); } .tab-bar button[data-tab="help"].active { background: var(--tab-help); } /* Tab Content — full-width tinted background, centered content via padding */ .tab-content { display: none; padding: 24px calc(max(24px, (100vw - 1400px) / 2)); min-height: calc(100vh - 95px); animation: fadeIn 0.2s ease; border-top: 3px solid var(--border); } .tab-content.active { display: block; } @keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } } /* Per-page tinted backgrounds and top borders */ /* Light mode: subtle 8% tint */ #tab-documents { background: color-mix(in srgb, var(--tab-documents) 8%, var(--bg)); border-top-color: var(--tab-documents); } #tab-extract { background: color-mix(in srgb, var(--tab-extract) 8%, var(--bg)); border-top-color: var(--tab-extract); } #tab-bulk { background: color-mix(in srgb, var(--tab-bulk) 8%, var(--bg)); border-top-color: var(--tab-bulk); } #tab-rules { background: color-mix(in srgb, var(--tab-rules) 8%, var(--bg)); border-top-color: var(--tab-rules); } #tab-doctypes { background: color-mix(in srgb, var(--tab-doctypes) 8%, var(--bg)); border-top-color: var(--tab-doctypes); } #tab-review { background: color-mix(in srgb, var(--tab-review) 8%, var(--bg)); border-top-color: var(--tab-review); } #tab-regression{ background: color-mix(in srgb, var(--tab-regression) 8%, var(--bg)); border-top-color: var(--tab-regression); } #tab-help { background: color-mix(in srgb, var(--tab-help) 8%, var(--bg)); border-top-color: var(--tab-help); } /* Dark mode: stronger 20% tint so colour is visible against dark bg */ [data-theme="dark"] #tab-documents { background: color-mix(in srgb, var(--tab-documents) 20%, var(--bg)); } [data-theme="dark"] #tab-extract { background: color-mix(in srgb, var(--tab-extract) 20%, var(--bg)); } [data-theme="dark"] #tab-bulk { background: color-mix(in srgb, var(--tab-bulk) 20%, var(--bg)); } [data-theme="dark"] #tab-rules { background: color-mix(in srgb, var(--tab-rules) 20%, var(--bg)); } [data-theme="dark"] #tab-doctypes { background: color-mix(in srgb, var(--tab-doctypes) 20%, var(--bg)); } [data-theme="dark"] #tab-review { background: color-mix(in srgb, var(--tab-review) 20%, var(--bg)); } [data-theme="dark"] #tab-regression{ background: color-mix(in srgb, var(--tab-regression) 20%, var(--bg)); } [data-theme="dark"] #tab-help { background: color-mix(in srgb, var(--tab-help) 20%, var(--bg)); } /* Cards */ .card { background: var(--card-bg); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); padding: 20px; margin-bottom: 16px; border: 1px solid var(--border); transition: box-shadow 0.15s; } .card:hover { box-shadow: var(--shadow-md); } .card h2 { font-size: 14px; font-weight: 600; margin-bottom: 12px; color: var(--text); padding-bottom: 8px; border-bottom: 1px solid var(--border); letter-spacing: -0.1px; } /* Forms */ .form-row { display: flex; gap: 12px; align-items: flex-end; margin-bottom: 12px; } label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 4px; } input[type="file"], input[type="text"], input[type="password"], input[type="number"], input[type="email"], input[type="search"], select, textarea { padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 14px; background: var(--input-bg); color: var(--text); } input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--accent); } input[type="file"] { flex: 1; } /* Buttons */ .btn { padding: 7px 14px; border: none; border-radius: var(--radius-sm); font-size: 12px; cursor: pointer; font-weight: 500; transition: all 0.15s; letter-spacing: 0.1px; } .btn:hover { filter: brightness(1.1); transform: translateY(-0.5px); } .btn:active { transform: translateY(0); filter: brightness(0.95); } .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .btn-primary { background: var(--accent); color: var(--accent-contrast); } .btn-primary:hover { background: var(--accent-hover); filter: none; } .btn-danger { background: var(--danger); color: #fff; } .btn-success { background: var(--success); color: #fff; } .btn-sm { padding: 4px 10px; font-size: 11px; } .btn:disabled { opacity: 0.4; cursor: not-allowed; filter: none; transform: none; } /* Table */ table { width: 100%; border-collapse: collapse; font-size: 13px; } th { text-align: left; padding: 10px 12px; background: var(--table-header); border-bottom: 2px solid var(--border); font-weight: 600; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.3px; position: sticky; top: 0; z-index: 1; } td { padding: 10px 12px; border-bottom: 1px solid var(--table-border); } tr:hover { background: var(--hover-bg); } tbody tr { transition: background 0.1s; } /* Status badges — semantic tokens (correct contrast in both themes) */ .badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; text-transform: uppercase; } .badge-pending { background: var(--warning-soft); color: var(--warning); } .badge-extracting { background: var(--info-soft); color: var(--info); } .badge-extracted { background: var(--success-soft); color: var(--success); } .badge-reviewed { background: color-mix(in srgb, var(--accent) 14%, var(--card-bg)); color: var(--accent); } .badge-error { background: var(--danger-soft); color: var(--danger); } /* JSON viewer */ .json-viewer { background: #1e1e1e; color: #d4d4d4; padding: 16px; border-radius: 6px; font-family: 'Consolas', 'Monaco', monospace; font-size: 12px; white-space: pre-wrap; word-break: break-word; max-height: 600px; overflow: auto; line-height: 1.5; } .json-viewer .key { color: #9cdcfe; } .json-viewer .string { color: #ce9178; } .json-viewer .number { color: #b5cea8; } .json-viewer .boolean { color: #569cd6; } .json-viewer .null { color: #808080; } /* Split pane for PDF + JSON */ .split-pane { display: flex; gap: 16px; } .split-pane > div { flex: 1; min-width: 0; } /* PDF container */ .pdf-container { border: 1px solid #ddd; border-radius: 6px; background: #525659; min-height: 500px; overflow: auto; } .pdf-container canvas { display: block; margin: 8px auto; } /* Pipeline steps */ .step-list { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; } .step-chip { padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 500; } .step-chip.success { background: var(--success-soft); color: var(--success); } .step-chip.fail { background: var(--danger-soft); color: var(--danger); } /* Loading spinner */ .spinner { display: inline-block; width: 20px; height: 20px; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.6s linear infinite; vertical-align: middle; } @keyframes spin { to { transform: rotate(360deg); } } /* Inline button spinner */ .btn-spinner { display: inline-block; width: 12px; height: 12px; border: 2px solid rgba(255,255,255,0.3); border-top-color: #fff; border-radius: 50%; animation: spin 0.6s linear infinite; vertical-align: middle; margin-right: 4px; } .btn.loading { pointer-events: none; opacity: 0.75; } /* Messages */ .msg { padding: 12px 16px; border-radius: var(--radius-sm); margin-bottom: 12px; font-size: 13px; } .msg-info { background: var(--info-soft); color: var(--info); } .msg-error { background: var(--danger-soft); color: var(--danger); } .msg-success { background: var(--success-soft); color: var(--success); } /* Validation section */ .validation-errors { margin-top: 8px; } .validation-errors li { padding: 4px 0; font-size: 13px; } .validation-errors li.error { color: var(--danger); } .validation-errors li.warning { color: var(--warning); } /* ------------------------------------------------------------------ */ /* Review Panel Styles */ /* ------------------------------------------------------------------ */ .review-split-pane { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; height: calc(100vh - 200px); min-height: 600px; } .review-pdf-side { display: flex; flex-direction: column; background: var(--card-bg); border-radius: 8px; box-shadow: 0 1px 3px var(--card-shadow); border: 1px solid var(--border); overflow: hidden; } .review-pdf-toolbar { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--table-header); border-bottom: 1px solid var(--border); flex-shrink: 0; } .rv-page-info { font-size: 13px; color: var(--muted); min-width: 80px; text-align: center; } .rv-toolbar-spacer { flex: 1; } .review-pdf-container { flex: 1; overflow: auto; background: #525659; min-height: 0; } .review-pdf-container canvas { display: block; margin: 8px auto; } .review-form-side { display: flex; flex-direction: column; background: var(--card-bg); border-radius: 8px; box-shadow: 0 1px 3px var(--card-shadow); border: 1px solid var(--border); overflow: hidden; } .review-form-scroll { flex: 1; overflow-y: auto; padding: 16px; min-height: 0; } .rv-form-footer { padding: 12px 16px; border-top: 1px solid #dee2e6; background: #f8f9fa; flex-shrink: 0; } .rv-notes-input { width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px; font-size: 13px; } /* Bill tabs */ .rv-bill-tabs { display: flex; gap: 0; border-bottom: 2px solid #dee2e6; background: #f8f9fa; flex-shrink: 0; } .rv-tab { padding: 8px 16px; border: none; background: none; cursor: pointer; font-size: 13px; font-weight: 500; color: #666; border-bottom: 2px solid transparent; margin-bottom: -2px; transition: all 0.15s; } .rv-tab:hover { color: #333; background: rgba(0,0,0,0.03); } .rv-tab.rv-tab-active { color: var(--accent); border-bottom-color: var(--accent); } /* Form fields */ .rv-fieldset { border: 1px solid #e0e0e0; border-radius: 6px; padding: 12px 16px; margin-bottom: 16px; } .rv-fieldset legend { font-size: 14px; font-weight: 600; color: #1a1a2e; padding: 0 8px; display: flex; align-items: center; gap: 8px; } .rv-field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; } .rv-field label { font-size: 12px; color: #666; margin-bottom: 2px; } .rv-field input, .rv-field select { width: 100%; padding: 6px 8px; border: 1px solid #ddd; border-radius: 4px; font-size: 13px; background: #fff; } .rv-field input::placeholder { color: #bbb; font-style: italic; } .rv-field input:focus, .rv-field select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 18%, transparent); } /* Diff highlighting */ .rv-field-diff input, .rv-field-diff select { background: #d4edda; border-color: #28a745; } .rv-cell-diff { background: #d4edda !important; } .rv-cell-diff input, .rv-cell-diff select { background: #d4edda; border-color: #28a745; } /* Tables inside fieldsets */ .rv-table-wrap { overflow-x: auto; margin-top: 8px; } .rv-table { width: max-content; min-width: 100%; border-collapse: collapse; font-size: 12px; } .rv-table th { text-align: left; padding: 6px 4px; background: #f0f2f5; border-bottom: 2px solid #dee2e6; font-weight: 600; color: #555; font-size: 11px; white-space: nowrap; } .rv-table td { padding: 3px 2px; border-bottom: 1px solid #eee; } .rv-table-input { width: 100%; padding: 4px 6px; border: 1px solid #ddd; border-radius: 3px; font-size: 12px; background: #fff; } .rv-table-input::placeholder { color: #bbb; font-style: italic; } .rv-table-input:focus { outline: none; border-color: var(--accent); } .rv-row-num { color: #999; text-align: center; width: 28px; font-size: 11px; } .rv-placeholder { color: #999; text-align: center; padding: 40px 16px; font-size: 14px; } .rv-error { color: #f88; } .btn-sm { padding: 4px 10px; font-size: 12px; } /* Make review tab full-width */ #tab-review.active { display: block; max-width: 100%; padding: 16px; } /* Review panel inside doctype builder test panel (no PDF side) */ #dt-test-review-inner .review-split-pane { display: block; height: auto; min-height: auto; } #dt-test-review-inner .review-pdf-side { display: none; } #dt-test-review-inner .review-form-side { max-height: 600px; } /* Rules section toggle buttons */ .rules-section-btn { padding: 6px 14px; border: none; background: #fff; cursor: pointer; font-size: 13px; font-weight: 500; color: #666; transition: all 0.15s; } .rules-section-btn:not(:last-child) { border-right: 1px solid #ddd; } .rules-section-btn:hover { background: #f0f2f5; color: #333; } .rules-section-active { background: var(--accent) !important; color: #fff !important; font-weight: 600; } /* Dark mode overrides for elements with inline/hardcoded colors */ [data-theme="dark"] .card { border: 1px solid var(--border); } [data-theme="dark"] table { background: var(--card-bg); } [data-theme="dark"] th { background: #21262d; color: #c9d1d9; } [data-theme="dark"] td { border-bottom-color: var(--border); color: var(--text); } [data-theme="dark"] tr:hover { background: var(--hover-bg); } [data-theme="dark"] input, [data-theme="dark"] select, [data-theme="dark"] textarea { background: var(--input-bg); color: var(--text); border-color: var(--border); } [data-theme="dark"] .pdf-container { border-color: var(--border); } /* (step-chip / msg / badge / spinner dark variants now come from the semantic tokens above — no per-class overrides needed) */ [data-theme="dark"] .json-viewer { background: #0d1117; border-color: var(--border); } [data-theme="dark"] .rules-section-btn { border-color: var(--border); color: var(--muted); } [data-theme="dark"] a { color: var(--link); } [data-theme="dark"] .credit-display { color: var(--muted); } /* Comprehensive dark mode: override all component inline styles */ [data-theme="dark"] div[class*="card"], [data-theme="dark"] .card, [data-theme="dark"] [style*="background: #fff"], [data-theme="dark"] [style*="background:#fff"], [data-theme="dark"] [style*="background: #f"], [data-theme="dark"] [style*="background:#f"] { background: var(--card-bg) !important; color: var(--text) !important; } [data-theme="dark"] [style*="color:#333"], [data-theme="dark"] [style*="color: #333"], [data-theme="dark"] [style*="color:#1a1a2e"], [data-theme="dark"] [style*="color: #1a1a2e"] { color: var(--text) !important; } [data-theme="dark"] [style*="color:#666"], [data-theme="dark"] [style*="color: #666"], [data-theme="dark"] [style*="color:#999"], [data-theme="dark"] [style*="color: #999"], [data-theme="dark"] [style*="color:#888"], [data-theme="dark"] [style*="color: #888"] { color: var(--muted) !important; } [data-theme="dark"] [style*="border: 1px solid #ddd"], [data-theme="dark"] [style*="border:1px solid #ddd"], [data-theme="dark"] [style*="border: 1px solid #eee"], [data-theme="dark"] [style*="border:1px solid #eee"], [data-theme="dark"] [style*="border-bottom: 1px solid #eee"], [data-theme="dark"] [style*="border-bottom:1px solid #eee"] { border-color: var(--border) !important; } [data-theme="dark"] [style*="background: #f0f2f5"], [data-theme="dark"] [style*="background:#f0f2f5"], [data-theme="dark"] [style*="background: #f8f9fa"], [data-theme="dark"] [style*="background:#f8f9fa"], [data-theme="dark"] [style*="background: #f5f5f5"], [data-theme="dark"] [style*="background:#f5f5f5"], [data-theme="dark"] [style*="background: #eee"], [data-theme="dark"] [style*="background:#eee"] { background: var(--table-header) !important; } [data-theme="dark"] [style*="background: #d4edda"] { background: #1a3a2a !important; color: #3fb950 !important; } [data-theme="dark"] [style*="background:#d4edda"] { background: #1a3a2a !important; color: #3fb950 !important; } [data-theme="dark"] [style*="background: #f8d7da"] { background: #3d1a1a !important; color: #f85149 !important; } [data-theme="dark"] [style*="background:#f8d7da"] { background: #3d1a1a !important; color: #f85149 !important; } [data-theme="dark"] [style*="background: #ffeaa7"] { background: #3d3520 !important; color: #d29922 !important; } [data-theme="dark"] [style*="background:#ffeaa7"] { background: #3d3520 !important; color: #d29922 !important; } [data-theme="dark"] [style*="color:#155724"] { color: #3fb950 !important; } [data-theme="dark"] [style*="color: #155724"] { color: #3fb950 !important; } [data-theme="dark"] [style*="color:#721c24"] { color: #f85149 !important; } [data-theme="dark"] [style*="color: #721c24"] { color: #f85149 !important; } [data-theme="dark"] [style*="color:#856404"] { color: #d29922 !important; } [data-theme="dark"] [style*="color: #856404"] { color: #d29922 !important; } /* Dark mode for dynamically created tables/inputs in components */ [data-theme="dark"] table { background: var(--card-bg); color: var(--text); } [data-theme="dark"] th { background: #21262d !important; color: #c9d1d9 !important; } [data-theme="dark"] td { border-color: var(--border) !important; color: var(--text); } [data-theme="dark"] input, [data-theme="dark"] select, [data-theme="dark"] textarea { background: var(--input-bg) !important; color: var(--text) !important; border-color: var(--border) !important; } [data-theme="dark"] button.btn { border-color: var(--border); } [data-theme="dark"] pre, [data-theme="dark"] code { background: #0d1117; color: #c9d1d9; } [data-theme="dark"] hr { border-color: var(--border); } [data-theme="dark"] [style*="box-shadow"] { box-shadow: 0 1px 3px rgba(0,0,0,0.4) !important; } /* Focus-visible outlines for keyboard navigation */ *:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; } .btn:focus-visible { outline-offset: 1px; } input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; } /* Empty state placeholders */ .empty-state { text-align: center; padding: 40px 20px; color: var(--muted); } .empty-state-icon { font-size: 36px; margin-bottom: 8px; opacity: 0.4; } .empty-state-text { font-size: 14px; } .empty-state-hint { font-size: 12px; margin-top: 4px; opacity: 0.7; } /* Document count badge on tab */ .tab-count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; background: rgba(255,255,255,0.25); border-radius: 9px; font-size: 10px; font-weight: 700; margin-left: 4px; line-height: 1; } /* Mobile responsive */ @media (max-width: 768px) { .tab-bar { flex-wrap: wrap; gap: 1px; padding: 4px 8px; } .tab-bar button { font-size: 11px; padding: 6px 10px; } .tab-bar button .tab-icon { display: none; } .split-pane { flex-direction: column; } .review-split-pane { grid-template-columns: 1fr; } .pdf-container { min-height: 300px; } .form-row { flex-direction: column; gap: 8px; } .tab-content { padding: 16px 12px; } header { flex-wrap: wrap; gap: 8px; } header h1 { font-size: 15px; } } /* Dark mode toast refinement */ [data-theme="dark"] .toast { box-shadow: 0 4px 20px rgba(0,0,0,0.5), 0 1px 3px rgba(0,0,0,0.3); border-color: var(--border); } /* Toast notifications */ .toast-container { position: fixed; top: 16px; right: 16px; z-index: 10001; display: flex; flex-direction: column; gap: 8px; pointer-events: none; max-width: 420px; width: 100%; } .toast { pointer-events: auto; display: flex; align-items: flex-start; gap: 10px; padding: 12px 16px; border-radius: 8px; background: var(--card-bg, #fff); color: var(--text, #333); box-shadow: 0 4px 20px rgba(0,0,0,0.15), 0 1px 3px rgba(0,0,0,0.1); border-left: 4px solid #888; font-size: 13px; line-height: 1.4; animation: toastIn 0.3s ease forwards; position: relative; overflow: hidden; } .toast.removing { animation: toastOut 0.25s ease forwards; } .toast-icon { font-size: 16px; flex-shrink: 0; margin-top: 1px; } .toast-body { flex: 1; min-width: 0; } .toast-title { font-weight: 600; font-size: 13px; margin-bottom: 2px; } .toast-msg { font-size: 12px; opacity: 0.85; white-space: pre-line; word-break: break-word; } .toast-close { flex-shrink: 0; background: none; border: none; color: var(--muted, #666); cursor: pointer; font-size: 16px; padding: 0; line-height: 1; opacity: 0.6; } .toast-close:hover { opacity: 1; } .toast-progress { position: absolute; bottom: 0; left: 0; height: 3px; background: currentColor; opacity: 0.3; border-radius: 0 0 0 8px; } .toast.toast-success { border-left-color: #27ae60; } .toast.toast-success .toast-icon { color: #27ae60; } .toast.toast-error { border-left-color: #e74c3c; } .toast.toast-error .toast-icon { color: #e74c3c; } .toast.toast-warning { border-left-color: #f39c12; } .toast.toast-warning .toast-icon { color: #f39c12; } .toast.toast-info { border-left-color: #3498db; } .toast.toast-info .toast-icon { color: #3498db; } @keyframes toastIn { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: none; } } @keyframes toastOut { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateX(40px) scale(0.95); } } /* Modals — shared overlay/box classes (Phase B de-inlining) */ .modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 20px; } .modal-overlay.modal-scroll { align-items: flex-start; overflow-y: auto; padding: 40px 20px; } .modal-box { background: var(--card-bg, #fff); color: var(--text, #333); border-radius: var(--radius-md); padding: 22px 24px; width: 420px; max-width: 95vw; max-height: 92vh; overflow-y: auto; box-shadow: var(--shadow-md); } .modal-box.modal-wide { width: 780px; } /* Login overlay — fully opaque to hide sensitive data */ .login-overlay { position: fixed; inset: 0; z-index: 10000; background: var(--bg, #f0f0f0); display: flex; align-items: center; justify-content: center; } /* Hide all content when login overlay is visible */ body.auth-pending header, body.auth-pending .tab-bar, body.auth-pending .tab-content { visibility: hidden; } .login-box { background: var(--card-bg, #fff); border-radius: var(--radius-lg); padding: 32px; width: 380px; max-width: 90vw; border: 1px solid var(--border); box-shadow: 0 1px 2px rgba(0,0,0,0.06), 0 16px 48px rgba(20,30,50,0.18); text-align: center; } .login-box h2 { margin-bottom: 8px; } .login-box p { color: var(--muted); font-size: 13px; margin-bottom: 20px; } .login-box input { width: 100%; padding: 10px 14px; border: 1px solid var(--border); border-radius: 6px; font-size: 14px; font-family: monospace; background: var(--input-bg); color: var(--text); margin-bottom: 12px; } /* ================================================================= Layout: Sidebar (data-layout="sidebar") ================================================================= */ [data-layout="sidebar"] { display: flex; flex-direction: row; min-height: 100vh; } [data-layout="sidebar"] header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; height: 44px; } [data-layout="sidebar"] .tab-bar { position: fixed; top: 0; left: 0; bottom: 0; width: 180px; flex-direction: column; align-items: stretch; gap: 2px; padding: 52px 6px 8px 6px; overflow-y: auto; z-index: 98; } [data-layout="sidebar"] .tab-bar button { border-radius: 4px; text-align: left; padding: 8px 12px; font-size: 12px; bottom: 0; margin-bottom: 0; } [data-layout="sidebar"] .tab-bar button.active { margin-bottom: 0; padding-bottom: 8px; } [data-layout="sidebar"] .tab-content { margin-left: 180px; margin-top: 44px; border-top: none; min-height: calc(100vh - 44px); padding: 20px calc(max(20px, (100vw - 180px - 1200px) / 2)); } /* ================================================================= Layout: Minimal (data-layout="minimal") ================================================================= */ [data-layout="minimal"] .tab-bar { background: transparent; padding: 4px 16px; gap: 0; border-bottom: 1px solid var(--border); } [data-layout="minimal"] .tab-bar button { background: none; border-radius: 0; padding: 8px 16px; border-bottom: 2px solid transparent; font-size: 13px; bottom: 0; margin-bottom: 0; color: var(--muted); } [data-layout="minimal"] .tab-bar button:hover { color: var(--text); background: none; } [data-layout="minimal"] .tab-bar button.active { color: var(--text); font-weight: 600; margin-bottom: 0; padding-bottom: 8px; background: none; } [data-layout="minimal"] .tab-bar button[data-tab="documents"].active { border-bottom-color: var(--tab-documents); } [data-layout="minimal"] .tab-bar button[data-tab="extract"].active { border-bottom-color: var(--tab-extract); } [data-layout="minimal"] .tab-bar button[data-tab="bulk"].active { border-bottom-color: var(--tab-bulk); } [data-layout="minimal"] .tab-bar button[data-tab="rules"].active { border-bottom-color: var(--tab-rules); } [data-layout="minimal"] .tab-bar button[data-tab="doctypes"].active { border-bottom-color: var(--tab-doctypes); } [data-layout="minimal"] .tab-bar button[data-tab="review"].active { border-bottom-color: var(--tab-review); } [data-layout="minimal"] .tab-bar button[data-tab="regression"].active { border-bottom-color: var(--tab-regression); } [data-layout="minimal"] .tab-bar button[data-tab="help"].active { border-bottom-color: var(--tab-help); } [data-layout="minimal"] .tab-content { border-top: none; } [data-layout="minimal"] .tab-icon { display: none; } [data-layout="minimal"] header { background: var(--card-bg); color: var(--text); border-bottom: 1px solid var(--border); } [data-layout="minimal"] header h1 { color: var(--text); } [data-layout="minimal"] header .version { background: var(--table-header); color: var(--muted); } /* ================================================================= Layout: Glass — Frosted glassmorphism with mesh gradient ================================================================= */ [data-layout="glass"] { font-family: 'Outfit', -apple-system, sans-serif; --glass-bg: rgba(255,255,255,0.08); --glass-border: rgba(255,255,255,0.12); --glass-hover: rgba(255,255,255,0.14); --glass-blur: 20px; --glass-text: #e2e8f0; --glass-muted: #94a3b8; --glass-accent: #818cf8; --glass-accent-2: #c084fc; --glass-surface: rgba(15,23,42,0.6); } [data-layout="glass"]::before { content: ''; position: fixed; inset: 0; z-index: -1; background: radial-gradient(ellipse 80% 60% at 10% 20%, rgba(99,102,241,0.35) 0%, transparent 60%), radial-gradient(ellipse 60% 80% at 80% 80%, rgba(168,85,247,0.25) 0%, transparent 55%), radial-gradient(ellipse 50% 50% at 50% 0%, rgba(56,189,248,0.15) 0%, transparent 50%), radial-gradient(ellipse 40% 40% at 90% 10%, rgba(244,114,182,0.12) 0%, transparent 50%), #0f172a; animation: glassMeshDrift 25s ease-in-out infinite alternate; } @keyframes glassMeshDrift { 0% { filter: hue-rotate(0deg); } 100% { filter: hue-rotate(15deg); } } [data-layout="glass"], [data-layout="glass"] * { color: var(--glass-text); } /* Glass Header */ [data-layout="glass"] header { background: var(--glass-surface) !important; backdrop-filter: blur(var(--glass-blur)) saturate(1.4); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.4); border-bottom: 1px solid var(--glass-border) !important; color: var(--glass-text) !important; position: sticky; top: 0; z-index: 100; } [data-layout="glass"] header h1 { color: #fff !important; font-weight: 600; letter-spacing: -0.5px; } [data-layout="glass"] header .version { background: rgba(129,140,248,0.2) !important; color: var(--glass-accent) !important; border: 1px solid rgba(129,140,248,0.3); font-weight: 500; } [data-layout="glass"] header .theme-toggle, [data-layout="glass"] header select { background: var(--glass-bg) !important; border-color: var(--glass-border) !important; color: var(--glass-muted) !important; backdrop-filter: blur(10px); } /* Glass Sidebar Nav — extends full height, content padded below header */ [data-layout="glass"] .tab-bar { position: fixed; top: 0; left: 0; bottom: 0; width: 200px; flex-direction: column; align-items: stretch; gap: 3px; padding: 60px 8px 12px 8px; overflow-y: auto; z-index: 98; background: var(--glass-surface); backdrop-filter: blur(var(--glass-blur)) saturate(1.3); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.3); border-right: 1px solid var(--glass-border); } [data-layout="glass"] .tab-bar button { border-radius: 8px; text-align: left; padding: 10px 14px; font-size: 13px; font-family: 'Outfit', sans-serif; font-weight: 400; bottom: 0; margin-bottom: 0; background: transparent; color: var(--glass-muted); border: 1px solid transparent; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); } [data-layout="glass"] .tab-bar button:hover { background: var(--glass-hover); color: var(--glass-text); border-color: var(--glass-border); } [data-layout="glass"] .tab-bar button.active { background: linear-gradient(135deg, rgba(129,140,248,0.2), rgba(192,132,252,0.15)) !important; color: #fff !important; font-weight: 500; border-color: rgba(129,140,248,0.3); box-shadow: 0 0 20px rgba(129,140,248,0.1), inset 0 1px 0 rgba(255,255,255,0.05); margin-bottom: 0; padding-bottom: 10px; } [data-layout="glass"] .tab-bar .tab-icon { font-size: 15px; margin-right: 6px; filter: grayscale(0.3); } [data-layout="glass"] .tab-bar button.active .tab-icon { filter: none; } /* Glass Content Area */ [data-layout="glass"] .tab-content { margin-left: 200px; margin-top: 0; border-top: none !important; background: transparent !important; padding: 24px calc(max(24px, (100vw - 200px - 1100px) / 2)); min-height: calc(100vh - 52px); } /* Glass Cards */ [data-layout="glass"] .card { background: var(--glass-bg) !important; backdrop-filter: blur(var(--glass-blur)) saturate(1.2); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.2); border: 1px solid var(--glass-border) !important; border-radius: 12px; box-shadow: 0 8px 32px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.05) !important; transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s; } [data-layout="glass"] .card:hover { transform: translateY(-1px); box-shadow: 0 12px 40px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.08) !important; border-color: rgba(255,255,255,0.18) !important; } [data-layout="glass"] .card h2 { color: #fff !important; font-weight: 600; letter-spacing: 0.3px; border-bottom-color: var(--glass-border) !important; font-family: 'Outfit', sans-serif; } /* Glass Tables */ [data-layout="glass"] table { background: transparent; } [data-layout="glass"] th { background: rgba(255,255,255,0.04) !important; color: var(--glass-muted) !important; border-bottom: 1px solid var(--glass-border) !important; font-family: 'Outfit', sans-serif; font-weight: 500; } [data-layout="glass"] td { border-bottom: 1px solid rgba(255,255,255,0.05) !important; color: var(--glass-text); } [data-layout="glass"] tbody tr:nth-child(even) { background: rgba(255,255,255,0.02); } [data-layout="glass"] tbody tr:hover { background: rgba(129,140,248,0.06) !important; } /* Glass Buttons */ [data-layout="glass"] .btn { font-family: 'Outfit', sans-serif; font-weight: 500; letter-spacing: 0.2px; border: 1px solid var(--glass-border); transition: all 0.2s; } [data-layout="glass"] .btn-primary { background: linear-gradient(135deg, #6366f1, #8b5cf6) !important; border-color: rgba(99,102,241,0.5) !important; color: #fff !important; box-shadow: 0 2px 12px rgba(99,102,241,0.3); } [data-layout="glass"] .btn-primary:hover { box-shadow: 0 4px 20px rgba(99,102,241,0.4); filter: brightness(1.1); } [data-layout="glass"] .btn-danger { background: linear-gradient(135deg, #ef4444, #dc2626) !important; border-color: rgba(239,68,68,0.4) !important; } [data-layout="glass"] .btn-success, [data-layout="glass"] .btn[style*="background:#27ae60"], [data-layout="glass"] .btn[style*="background: #27ae60"] { background: linear-gradient(135deg, #10b981, #059669) !important; border-color: rgba(16,185,129,0.4) !important; } /* Glass Inputs */ [data-layout="glass"] input, [data-layout="glass"] select, [data-layout="glass"] textarea { background: rgba(255,255,255,0.05) !important; border: 1px solid var(--glass-border) !important; color: var(--glass-text) !important; border-radius: 8px; font-family: 'Outfit', sans-serif; transition: border-color 0.2s, box-shadow 0.2s; } [data-layout="glass"] input:focus, [data-layout="glass"] select:focus, [data-layout="glass"] textarea:focus { outline: none; border-color: var(--glass-accent) !important; box-shadow: 0 0 0 3px rgba(129,140,248,0.15); } [data-layout="glass"] textarea#extract-json-editor { font-family: 'JetBrains Mono', monospace !important; background: rgba(0,0,0,0.3) !important; border-color: rgba(255,255,255,0.08) !important; } /* Glass Badges */ [data-layout="glass"] .badge { backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,0.1); } [data-layout="glass"] .badge-pending { background: rgba(251,191,36,0.15); color: #fbbf24; } [data-layout="glass"] .badge-extracted { background: rgba(52,211,153,0.15); color: #34d399; } [data-layout="glass"] .badge-error { background: rgba(248,113,113,0.15); color: #f87171; } [data-layout="glass"] .badge-reviewed { background: rgba(129,140,248,0.15); color: #818cf8; } /* Glass Step Chips */ [data-layout="glass"] .step-chip.success { background: rgba(52,211,153,0.15); color: #34d399; border: 1px solid rgba(52,211,153,0.2); } [data-layout="glass"] .step-chip.fail { background: rgba(248,113,113,0.15); color: #f87171; border: 1px solid rgba(248,113,113,0.2); } /* Glass Messages */ [data-layout="glass"] .msg-success { background: rgba(52,211,153,0.1); color: #34d399; border: 1px solid rgba(52,211,153,0.2); } [data-layout="glass"] .msg-error { background: rgba(248,113,113,0.1); color: #f87171; border: 1px solid rgba(248,113,113,0.2); } /* Glass Spinner */ [data-layout="glass"] .spinner { border-color: rgba(255,255,255,0.1); border-top-color: var(--glass-accent); } /* Glass Validation */ [data-layout="glass"] .validation-errors .error { color: #f87171; } [data-layout="glass"] .validation-errors .warning { color: #fbbf24; } /* Glass PDF Container */ [data-layout="glass"] .pdf-container { border: 1px solid var(--glass-border); border-radius: 12px; background: rgba(0,0,0,0.3); } /* Glass Review Panel */ [data-layout="glass"] .review-pdf-side, [data-layout="glass"] .review-form-side { background: var(--glass-bg) !important; backdrop-filter: blur(var(--glass-blur)); border: 1px solid var(--glass-border) !important; } [data-layout="glass"] .review-pdf-toolbar { background: rgba(255,255,255,0.03) !important; border-color: var(--glass-border) !important; } /* Glass Help TOC */ [data-layout="glass"] #help-toc .btn { background: var(--glass-bg) !important; border-color: var(--glass-border) !important; color: var(--glass-muted) !important; } [data-layout="glass"] #help-toc .btn:hover { background: var(--glass-hover) !important; color: var(--glass-text) !important; } /* Glass pre/code */ [data-layout="glass"] pre { background: rgba(0,0,0,0.25) !important; color: var(--glass-text) !important; border: 1px solid var(--glass-border); border-radius: 8px; } /* Glass scrollbar */ [data-layout="glass"] ::-webkit-scrollbar { width: 6px; } [data-layout="glass"] ::-webkit-scrollbar-track { background: transparent; } [data-layout="glass"] ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 3px; } [data-layout="glass"] ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.2); } /* Glass label color */ [data-layout="glass"] label { color: var(--glass-muted) !important; } /* Glass link color */ [data-layout="glass"] a { color: var(--glass-accent); } /* Extraction progress bar (status API driven) */ .progress-track { height: 8px; border-radius: 4px; background: var(--badge-bg); overflow: hidden; margin-top: 4px; } .progress-fill { height: 100%; width: 0; border-radius: 4px; background: var(--accent); transition: width 0.6s ease; } /* Operator-only (superadmin) — management UI no tenant profile reveals. Toggled by body.is-superadmin, set in checkAuth(). */ .superadmin-only { display: none !important; } body.is-superadmin .superadmin-only { display: revert !important; } .superadmin-only-inline { display: none; } body.is-superadmin .superadmin-only-inline { display: inline; } /* Visibility profile (white-label): "workings" categories hidden from tenant users unless their tenant's profile reveals the category. body.vis- is set in checkAuth() from the server-resolved visibility set — operators get every category. Add .needs- to any element that exposes that category; it stays hidden until the category is visible. */ .needs-cost, .needs-model, .needs-pipeline, .needs-prompts, .needs-internals { display: none !important; } body.vis-cost .needs-cost { display: revert !important; } body.vis-model .needs-model { display: revert !important; } body.vis-pipeline .needs-pipeline { display: revert !important; } body.vis-prompts .needs-prompts { display: revert !important; } body.vis-internals .needs-internals { display: revert !important; } .needs-cost-inline { display: none; } body.vis-cost .needs-cost-inline { display: inline; } /* --------------------------------------------------------------------------- Dark-mode fixes for the Rules page builders. The rule-editor / enrichment / validation components inject their own