/* Global app styles and component utilities */ /* Layout helpers */ /* Only widen the inner page container, not the whole */ .container--wide .container { max-width: 1500px; } /* Login */ .login-container { max-width: 400px; margin: 100px auto; padding: 20px; border: 1px solid #ddd; border-radius: 5px; box-shadow: 0 0 10px rgba(0,0,0,0.1); } /* Results/blocks shared across pages */ .results { margin-top: 30px; background-color: #f9f9f9; border: 1px solid #ddd; border-radius: 4px; padding: 20px; } .results-container { margin-bottom: 30px; } .result-item { background-color: #fff; border: 1px solid #ddd; border-radius: 6px; padding: 15px; margin-bottom: 20px; box-shadow: 0 2px 4px rgba(0,0,0,0.05); } .content-block { background-color: #f8f9fa; border: 1px solid #eee; border-radius: 4px; padding: 10px; margin: 10px 0; max-height: 300px; overflow-y: auto; } .high-score { color: #27ae60; font-weight: bold; } .medium-score { color: #f39c12; } .low-score { color: #e74c3c; } .score-info { margin: 10px 0; display: flex; flex-wrap: wrap; gap: 15px; } .score-label { font-weight: bold; } .note { font-style: italic; color: #7f8c8d; margin-top: 10px; } /* Help/Documentation blocks */ .help-icon { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background-color: #007bff; color: #fff; font-size: 12px; font-weight: 700; cursor: pointer; transition: background-color .2s; } .help-icon:hover { background-color: #0056b3; } .help-content { display: none; margin-top: 8px; padding: 12px; background-color: #e7f3ff; border: 1px solid #b3d9ff; border-radius: 4px; font-size: 14px; line-height: 1.4; color: #0c5aa6; } .help-content.show { display: block; } /* Loading states */ .loading { display: none; text-align: center; margin: 20px 0; } .spinner { width: 40px; height: 40px; border: 4px solid #f3f3f3; border-top: 4px solid #007bff; border-radius: 50%; animation: spin 1s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg);} 100% { transform: rotate(360deg);} } /* Badges / small text */ .status-badge { font-size: 0.8em; } .timestamp { font-size: 0.8em; color: #6c757d; } /* Node type badges (tables search) */ .node-type-badge { display: inline-block; padding: 3px 8px; border-radius: 4px; font-size: 12px; font-weight: 700; margin-left: 8px; color: #fff; } .node-type-Table { background-color: #3498db; } .node-type-Row { background-color: #2ecc71; } .node-type-Column { background-color: #9b59b6; } .node-type-Question { background-color: #e67e22; } .node-type-Cell { background-color: #f1c40f; color: #333; } .node-type-Message { background-color: #95a5a6; } /* Markdown content defaults */ .markdown-content h1 { font-size: 1.8rem; margin-bottom: 1rem; } .markdown-content h2 { font-size: 1.5rem; margin: 1.5rem 0 .75rem 0; } .markdown-content h3 { font-size: 1.2rem; margin: 1.2rem 0 .5rem 0; } .markdown-content pre { background-color: #f0f0f0; padding: 10px; border-radius: 5px; overflow-x: auto; } .markdown-content code { font-family: monospace; background-color: #f0f0f0; padding: 2px 4px; border-radius: 3px; } /* Dark mode variants (aligned with theme.css) */ .dark-mode .results, body.dark-mode .results { background-color: #222; border-color: rgba(255,255,255,0.08); } .dark-mode .result-item, body.dark-mode .result-item { background-color: #252525; border-color: rgba(255,255,255,0.08); } .dark-mode .content-block, body.dark-mode .content-block { background-color: #1f2937; border-color: rgba(255,255,255,0.08); } .dark-mode .markdown-content pre, body.dark-mode .markdown-content pre { background-color: #1f2937; } .dark-mode .markdown-content code, body.dark-mode .markdown-content code { background-color: #1f2937; } /* Document view */ .document-header { border-bottom: 1px solid #eee; padding-bottom: 15px; margin-bottom: 20px; } .document-meta { display: flex; flex-wrap: wrap; gap: 20px; margin-bottom: 20px; color: #666; } .document-meta div { flex: 1; min-width: 200px; } .document-meta h3 { margin-bottom: 5px; font-size: 16px; color: #7f8c8d; } .document-meta p { margin-top: 0; } .page { border: 1px solid #ddd; border-radius: 4px; padding: 20px; margin-bottom: 20px; background-color: #fff; } .page-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #eee; padding-bottom: 10px; margin-bottom: 15px; } .page-number { font-weight: bold; color: #3498db; font-size: 18px; } .page-summary { font-style: italic; color: #7f8c8d; margin-bottom: 15px; } .page-content { white-space: pre-wrap; line-height: 1.6; } .error { background-color: #f8d7da; color: #721c24; padding: 15px; border-radius: 4px; margin-bottom: 20px; } /* Processing logs */ .log-list { max-height: 600px; overflow-y: auto; } .log-content { max-height: 800px; overflow-y: auto; white-space: pre-wrap; font-family: monospace; padding: 15px; border: 1px solid #ddd; border-radius: 5px; background-color: #f8f9fa; } .log-item { cursor: pointer; } .log-item:hover { background-color: #f0f0f0; } .log-item.active { background-color: #e9ecef; font-weight: bold; } /* File List page */ .file-list-page .container { max-width: 1500px; } .dir-item { cursor: pointer; } .dir-item:hover { background-color: #f8f9ff; } .no-files { text-align: center; margin-top: 20px; font-style: italic; color: #6c757d; } .input-summary { margin-top: 20px; padding: 15px; background-color: #f8f9fa; border-radius: 4px; } /* Directory tree panel */ .dir-panel { background-color: var(--app-card-bg); border: 1px solid var(--app-card-border); border-radius: var(--app-radius); } /* Narrow table columns for status/actions */ .table .col-status { width: 1%; white-space: nowrap; } .table .col-actions { width: 1%; white-space: nowrap; } /* Ensure table row background and borders are consistent across all cells */ .table > tbody > tr > td { border-bottom: 1px solid var(--bs-border-color); background-color: inherit; } .table > thead > tr > th { border-bottom: 1px solid var(--bs-border-color); } /* Upload page */ .upload-options { background-color: #f8f9fa; border-radius: 0.25rem; padding: 1rem; margin-bottom: 1rem; } .process-options { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; justify-items: start; align-items: start; } .form-check-label { cursor: pointer; } .upload-jobs-container { background-color: #ffffff; border: 1px solid #dee2e6; border-radius: 0.375rem; padding: 1rem; margin-top: 1rem; } .job-item { border: 1px solid #e9ecef; border-radius: 0.25rem; padding: 1rem; margin-bottom: 1rem; background-color: #f8f9fa; } .job-item:last-child { margin-bottom: 0; } .job-header { display: flex; justify-content: between; align-items: center; margin-bottom: 0.5rem; } .job-status { font-weight: bold; padding: 0.25rem 0.5rem; border-radius: 0.25rem; font-size: 0.875rem; } .status-queued { background-color: #e3f2fd; color: #1976d2; } .status-processing { background-color: #fff3e0; color: #f57c00; } .status-completed { background-color: #e8f5e8; color: #2e7d32; } .status-failed { background-color: #ffebee; color: #d32f2f; } .status-cancelled { background-color: #f3e5f5; color: #7b1fa2; } .status-partial_failure { background-color: #fff8e1; color: #f9a825; } .progress-bar { height: 8px; background-color: #e9ecef; border-radius: 4px; overflow: hidden; margin: 0.5rem 0; } .progress-fill { height: 100%; background-color: #007bff; transition: width 0.3s ease; } .file-list { margin-top: 0.5rem; } .file-item { display: flex; justify-content: space-between; align-items: center; padding: 0.25rem 0; border-bottom: 1px solid #e9ecef; } .file-item:last-child { border-bottom: none; } .file-status { font-size: 0.75rem; padding: 0.125rem 0.375rem; border-radius: 0.125rem; } .file-upload-area { border: 2px dashed #dee2e6; border-radius: 0.375rem; padding: 2rem; text-align: center; background-color: #f8f9fa; transition: border-color 0.3s ease; } .file-upload-area.dragover { border-color: #007bff; background-color: #e3f2fd; } .selected-files { margin-top: 1rem; } .selected-file { display: flex; justify-content: space-between; align-items: center; padding: 0.5rem; background-color: #e9ecef; border-radius: 0.25rem; margin-bottom: 0.5rem; } .remove-file { background: none; border: none; color: #dc3545; cursor: pointer; font-size: 1.2rem; } /* Table lookup/info */ .table-info { margin: 10px 0; display: flex; flex-wrap: wrap; gap: 15px; } .table-label { font-weight: 600; } /* Simple RAG */ .answer-container { background-color: #f9f9f9; padding: 15px; border-radius: 6px; margin-bottom: 20px; white-space: pre-wrap; border: 1px solid #eee; } .json-container { background-color: #f0f0f0; padding: 15px; border-radius: 6px; overflow-x: auto; display: none; border: 1px solid #e6e6e6; } /* Use standard .btn classes for toggle; keep legacy selector for safety */ .toggle-json { background-color: #2196F3; color: #fff; border: none; padding: 8px 16px; border-radius: 4px; cursor: pointer; margin-bottom: 10px; } .toggle-json:hover { background-color: #0b7dda; } /* Dark mode variants for RAG results */ .dark-mode .answer-container, body.dark-mode .answer-container { background-color: #1f2937; color: #e4e4e7; border-color: rgba(255,255,255,0.12); } .dark-mode .json-container, body.dark-mode .json-container { background-color: #1f2937; color: #e4e4e7; border-color: rgba(255,255,255,0.12); } /* Node Types grid on Simple RAG */ #nodeTypesContainer { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } #nodeTypesContainer label { display: block; padding: 6px 8px; border-radius: 6px; cursor: pointer; } /* Document search link */ .document-link { color: #0d6efd; text-decoration: none; font-weight: 600; } .document-link:hover { text-decoration: underline; } /* Search page containers */ .search-options, .field-types-box { background-color: var(--app-card-bg); border: 1px solid var(--app-card-border); border-radius: var(--app-radius); padding: 15px; margin-bottom: 20px; box-shadow: var(--app-shadow); } /* Checkbox group pills */ .checkbox-group label { background-color: #e9ecef; } .checkbox-group label:hover { background-color: #dee2e6; } .checkbox-group input[type="checkbox"] { margin-right: 5px; } /* Dark mode: checkbox pills and controls */ .dark-mode .checkbox-group label, body.dark-mode .checkbox-group label { background-color: #14532d; /* dark green */ color: #e4e4e7; } .dark-mode .checkbox-group label:hover, body.dark-mode .checkbox-group label:hover { background-color: #166534; /* slightly lighter on hover */ } .dark-mode input[type="checkbox"], body.dark-mode input[type="checkbox"] { accent-color: #22c55e; /* green accent */ } /* Ensure long text wraps in results content */ .content-block pre { white-space: pre-wrap; word-wrap: break-word; overflow-wrap: anywhere; } /* Dark mode variants for upload page containers */ .dark-mode .file-upload-area, body.dark-mode .file-upload-area { background-color: #1f2937; border-color: rgba(255,255,255,0.12); } .dark-mode .file-upload-area.dragover, body.dark-mode .file-upload-area.dragover { background-color: #243445; } .dark-mode .upload-options, body.dark-mode .upload-options, .dark-mode .upload-jobs-container, body.dark-mode .upload-jobs-container, .dark-mode .job-item, body.dark-mode .job-item { background-color: var(--app-card-bg); border-color: var(--app-card-border); } /* Selected file tiles in dark mode */ .dark-mode .selected-file, body.dark-mode .selected-file { background-color: var(--app-card-bg); border: 1px solid var(--app-card-border); } /* Dark mode checkbox “pills” for upload options */ .dark-mode .upload-options .form-check, body.dark-mode .upload-options .form-check { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; background-color: #14532d; color: #e4e4e7; border-radius: 6px; width: max-content; justify-self: start; } .dark-mode .upload-options .form-check:hover, body.dark-mode .upload-options .form-check:hover { background-color: #166534; } /* File list selection */ .file-list-page table tbody tr.selected, .file-list-page .file-row.selected { background-color: #e7f3ff; } body.dark-mode .file-list-page table tbody tr.selected, .dark-mode .file-list-page table tbody tr.selected, .dark-mode .file-list-page .file-row.selected { background-color: #1f2937; } .file-list-page .dir-drop-target { background-color: #e0f2fe; } body.dark-mode .file-list-page .dir-drop-target, .dark-mode .file-list-page .dir-drop-target { background-color: #1f2937; } /* File list toolbar & filter */ .file-list-page #selectionToolbar { font-size: 0.85rem; } .file-list-page .file-list-filter .input-group-text { background-color: transparent; } .dark-mode .file-list-page .file-list-filter .input-group-text, body.dark-mode .file-list-page .file-list-filter .input-group-text { background-color: #111827; color: #9ca3af; } .file-list-page th.sortable { cursor: pointer; user-select: none; white-space: nowrap; } .file-list-page th.sortable i { font-size: 0.75rem; } /* File manager preview chips */ .fm-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 999px; border: 1px solid var(--app-card-border); background-color: var(--app-card-bg); color: var(--app-fg); font-size: 0.8rem; cursor: pointer; } .fm-chip .fm-chip-remove { background: none; border: none; color: var(--app-muted); padding: 0; line-height: 1; } .fm-chip:hover { box-shadow: var(--app-shadow); } .fm-chip:focus-visible { outline: 2px solid var(--app-primary); outline-offset: 2px; } /* Offcanvas/drawer theming for dark mode */ .dark-mode .offcanvas, body.dark-mode .offcanvas { background-color: #252525; color: #e4e4e7; } .dark-mode .offcanvas .btn-close, body.dark-mode .offcanvas .btn-close { filter: invert(1); } /* Page Data Explorer (document view) */ #page-data-explorer .page-data-surface { background-color: var(--app-card-bg); border-color: var(--app-card-border); color: var(--app-fg); } #page-data-explorer .page-data-item { background-color: var(--app-card-bg); border-color: var(--app-card-border); } #page-data-explorer details summary { color: var(--app-muted); cursor: pointer; } .dark-mode #page-data-explorer .page-data-surface, body.dark-mode #page-data-explorer .page-data-surface { background-color: #252525; border-color: rgba(255,255,255,0.08); color: #e4e4e7; } .dark-mode #page-data-explorer .page-data-item, body.dark-mode #page-data-explorer .page-data-item { background-color: #252525; border-color: rgba(255,255,255,0.12); color: #e4e4e7; } .dark-mode #page-data-explorer details summary, body.dark-mode #page-data-explorer details summary { color: var(--app-muted); } .dark-mode #page-data-explorer .badge.bg-light, body.dark-mode #page-data-explorer .badge.bg-light { background-color: #2f2f2f !important; color: var(--app-muted) !important; border-color: rgba(255,255,255,0.12); }