/* =========================================================================== layout.css — STRUCTURE ONLY (geometry: display, position, flex/grid, sizing, spacing, overflow, z-index, motion). No palette / borders / type. Pair with theme.css (the swappable skin). Load order: bootstrap, layout, theme. =========================================================================== */ /* =========================================================================== styles.css — Pastel FE, single stylesheet Loaded once on every page via _layout.html (and login.html). SECTIONS 1. Design tokens & dark theme 2. Base 3. Layout chrome (navbar, sidebar, main) 4. Bootstrap component overrides 5. Shared components 6. Pages 7. Modals & panels 8. jSpreadsheet grid THEME MODEL: all colour/space/radius/shadow decisions flow through the --pt-* design tokens. Bootstrap's --bs-* are wired onto them. Dark mode only re-declares the tokens under [data-bs-theme="dark"]. Light token values equal the original hard-coded hex, so the light appearance is unchanged. PAGE SCOPING: rules that use *global* selectors (body / main / list-group / offcanvas) but should only apply to one page are prefixed with a body page class — `body.login-page`, `body.chat-page`, `body.alerts-page`, `body.department-page` (set via {% block body_class %} in _layout.html). =========================================================================== */ /* =========================================================================== 1. DESIGN TOKENS & DARK THEME =========================================================================== */ :root { --pt-navbar-h: 50px; } /* Dark theme — re-declare tokens only. Values align with Bootstrap 5.3's own dark palette so native components and our chrome share one look. Activated by data-bs-theme="dark" on (set by the navbar toggle in _layout.html). */ /* Bootstrap surface + text utilities are fixed and don't follow data-bs-theme; .text-gray-* are our BS4 leftovers. Re-point them in dark. */ /* Tab headers — Bootstrap's nav-tabs link colours need explicit dark values. */ /* =========================================================================== 2. BASE =========================================================================== */ /* =========================================================================== 3. LAYOUT CHROME (navbar, sidebar, main) =========================================================================== */ .navbar { padding-top: 0; padding-bottom: 0; height: var(--pt-navbar-h); } .navbar-brand { padding-top: 0.75rem; padding-bottom: 0.75rem; } .navbar-dark .navbar-nav .nav-link { padding: 0.75rem 1rem; } .sidebar { top: var(--pt-navbar-h); height: calc(100vh - var(--pt-navbar-h)); padding-top: 1rem; } .sidebar .nav-link { padding: 0.5rem 1rem; display: flex; align-items: center; } .sidebar .nav-link .badge { padding: 0.25em 0.5em; min-width: 2ch; text-align: center; } main { margin-top: var(--pt-navbar-h) !important; padding-top: 1.5rem; } /* =========================================================================== 4. BOOTSTRAP COMPONENT OVERRIDES =========================================================================== */ .card { margin-bottom: 1rem; } .card-header { padding: 0.75rem 1rem; } .card-body { padding: 1rem; } .btn { padding: 0.375rem 0.75rem; } .table { margin-bottom: 0; } .table thead th { padding: 0.5rem; } .table tbody td { padding: 0.5rem; vertical-align: middle; } .bi { vertical-align: -0.125em; } /* Disabled nav links */ .nav-link.text-muted { opacity: 0.7; } .nav-link.text-muted:hover { cursor: default; } /* =========================================================================== 5. SHARED COMPONENTS =========================================================================== */ /* Alpine.js cloak — hide elements until Alpine initialises. */ [x-cloak] { display: none !important; } /* Spinner — .spin (alerts, my-documents, doc-viewer refresh icon). */ .spin { animation: spin 1s linear infinite; } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* HTMX: dim an element while its request is in flight (htmx adds .htmx-request). */ .htmx-request.htmx-request { opacity: 0.7; transition: opacity 200ms ease-in; } /* Toasts */ .toast-container .toast { animation: slideInRight 0.3s ease-out; } @keyframes slideInRight { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } /* Conversation timeline (agent inspector) */ .conversation-timeline { padding: 1rem; } .turn-icon { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; } .turn-bubble { max-width: 85%; padding: 0.5rem 0.75rem; word-wrap: break-word; white-space: pre-line; } .turn-card { max-width: 80%; padding: 0.5rem 0.75rem; white-space: pre-line; } .read-more-link { display: block; cursor: pointer; margin-top: 0.25rem; white-space: normal; } .fact-card { transition: box-shadow 0.15s ease-in-out; } .clickable-row { cursor: pointer; } /* Markdown answer styling (NL query — rendered by marked.js into .markdown-answer) */ .markdown-answer p:last-child { margin-bottom: 0; } .markdown-answer table { width: 100%; margin-bottom: 0.75rem; } .markdown-answer th, .markdown-answer td { padding: 0.35rem 0.6rem; } .markdown-answer ul, .markdown-answer ol { padding-left: 1.25rem; margin-bottom: 0.5rem; } .markdown-answer code { padding: 0.15rem 0.35rem; } /* AI-analysis markdown — session inspector (alerts + department pages) */ .ai-analysis-content p { margin-bottom: 0.5rem; } .ai-analysis-content p:last-child { margin-bottom: 0; } .ai-analysis-content ul, .ai-analysis-content ol { margin-bottom: 0.5rem; padding-left: 1.25rem; } .ai-analysis-content li { margin-bottom: 0.25rem; } .ai-analysis-content blockquote { padding-left: 0.75rem; margin: 0.5rem 0; } .ai-analysis-content code { padding: 0.125rem 0.25rem; } .ai-analysis-content pre { padding: 0.75rem; overflow-x: auto; } .ai-analysis-content pre code { padding: 0; } /* =========================================================================== 6. PAGES =========================================================================== */ /* --- Login (standalone page; scoped so its gradient/body rules don't leak) - */ body.login-page { min-height: 100vh; } .login-container { min-height: 100vh; display: flex; align-items: center; justify-content: center; } .login-card { max-width: 420px; width: 100%; } .login-card .card-body { padding: 3rem; } .brand-icon { margin-bottom: 1rem; } .login-title { margin-bottom: 0.5rem; } .login-subtitle { margin-bottom: 2rem; } .google-btn-container { display: flex; justify-content: center; min-height: 44px; } .divider { display: flex; align-items: center; margin: 1.5rem 0; } .divider::before, .divider::after { content: ''; flex: 1; } .divider-text { padding: 0 1rem; } .error-alert { display: none; } /* --- Dashboard (overview + customers) — tiles + BS4-leftover utilities ----- */ .dashboard-tile-header:hover { opacity: 0.85; } .dashboard-title-select { width: auto; min-width: 18rem; max-width: 40rem; } /* --- Chat ----------------------------------------------------------------- */ .save-playbook-backdrop { position: fixed; inset: 0; z-index: 1080; display: flex; align-items: center; justify-content: center; } /* Chat manages its own top padding (via p-2) — drop the layout's main padding. Scoped to the chat page so other pages keep their padding. */ body.chat-page main { padding-top: 0 !important; } .bubble-user, .bubble-assistant { word-break: break-word; } .sidebar-chat:hover .sidebar-kebab { opacity: 1 !important; } .bucket-header:hover .bucket-rename { opacity: 1 !important; } .sidebar-chat-menu .dropdown-item, .sidebar-chat-submenu .dropdown-item { cursor: pointer; } /* Compact inputs for the category picker AND the inline rename in the bucket header — Bootstrap's form-control-sm is still too tall for this dense sidebar. */ .bucket-header input.form-control, .sidebar-chat-submenu input.form-control, .chat-title-edit.form-control { padding: 0.2rem 0.5rem; height: auto; } /* Sidebar search input — match the New-chat button's type size; a class rule is needed because UA font-size wins specificity over inline styles. */ .turn-table-header { cursor: pointer; user-select: none; transition: background-color 0.1s; } /* --- Document viewer ------------------------------------------------------ */ /* PDF page container — the page itself is white paper in both themes. */ .pdf-page-container { position: relative; margin-bottom: 10px; } .text-layer { position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden; z-index: 2; } .text-layer > span { position: absolute; white-space: pre; cursor: text; transform-origin: 0% 0%; } /* Entity highlights — colours applied dynamically via JS (--highlight-color) */ .text-layer .entity-highlight { cursor: pointer; z-index: 3; position: relative; top: -2px; } .text-layer .entity-highlight.highlight-flash { animation: highlightFlash 1s ease-in-out; } @keyframes highlightFlash { 0% { background: transparent; } 50% { background: var(--flash-color); } 100% { background: transparent; } } .text-layer .search-highlight { z-index: 1; } /* Rich tooltip for highlights */ .entity-tooltip { position: fixed; padding: 10px 14px; z-index: 10000; pointer-events: none; max-width: 280px; } .entity-tooltip .tooltip-header { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; } .entity-tooltip .tooltip-type { padding: 2px 6px; } .entity-tooltip .tooltip-properties div { margin-bottom: 2px; } /* Property value formatting */ /* Graph container */ /* --- Personas ------------------------------------------------------------- */ /* --- Playbook ------------------------------------------------------------- */ .entry-card { transition: border-color 0.2s ease; } textarea.auto-expand { overflow: hidden; resize: none; min-height: 31px; } /* --- Alerts (session inspector) — global list-group rule scoped to the page - */ /* --- Department list — global offcanvas rule scoped to the page ----------- */ body.department-page .offcanvas-backdrop.show { opacity: 0.15; } /* =========================================================================== 7. MODALS & PANELS =========================================================================== */ /* --- File-health modal (scoped to #fileHealthModal) ----------------------- */ #fileHealthModal .fh-pill { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; } #fileHealthModal .fh-dot { width: 7px; height: 7px; display: inline-block; } #fileHealthModal .fh-st { padding: 2px 8px; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; } #fileHealthModal .fh-funnel { margin-left: 5px; cursor: pointer; } #fileHealthModal .fh-menu { position: absolute; top: 18px; right: 0; left: auto; z-index: 30; min-width: 150px; padding: 4px; } #fileHealthModal .fh-menu-item { padding: 4px 9px; cursor: pointer; white-space: nowrap; } #fileHealthModal table.fh-tbl th { white-space: nowrap; } #fileHealthModal table.fh-tbl td { white-space: nowrap; } #fileHealthModal tbody tr { cursor: pointer; } /* whole row opens the editor */ /* tabs read as tabs, not links */ /* --- Structure-editor modal (scoped to #structureEditorRoot) --------------- */ /* structure tab is a flex row (grid + panel); a plain class (not .d-flex's !important) so x-show can toggle it. */ #structureEditorRoot .editor-structtab { display: flex; } /* the editor grid renders at full table width; its wrapper scrolls it. */ #grid-structure-editor { max-width: none !important; } /* --- My-documents panel (scoped to #doc-categories-content) --------------- */ #doc-categories-content .table tbody tr td { padding-top: 12px !important; padding-bottom: 12px !important; } /* Name column stretches to fill; max-width:0 lets the inner flex truncate. */ #doc-categories-content td.name-cell { max-width: 0; width: 100%; } #doc-categories-content .table thead th, #doc-categories-content .table tbody td { white-space: nowrap; } /* =========================================================================== 8. JSPREADSHEET GRID (chat result grids + sheet-preview + structure editor) =========================================================================== */ /* Host: width hugs the grid so the toolbar (100% block) aligns to grid edges. */ [id^="grid-"] { width: fit-content; max-width: 100%; position: relative; } /* System font on grid bodies; icons keep Material Icons. */ .jss_toolbar i { white-space: nowrap; } .jss_toolbar { margin: 0 !important; padding: 4px 6px !important; box-sizing: border-box !important; position: relative; } /* Force the toolbar's inner div to flex so margin-left:auto right-aligns Download. */ .jss_toolbar > div { display: flex !important; align-items: center; width: 100%; gap: 4px; } .jss_toolbar > div > .jtoolbar-item:last-child { margin-left: auto !important; } [id^="grid-"] > .jtabs-content, [id^="grid-"] > .jtabs-content > .jss_container, [id^="grid-"] > .jtabs-content > .jss_container > .jss_content { margin: 0 !important; } /* Cells */ .jss_about { display: none !important; } /* Find overlay (Chrome-style, anchored under the toolbar search icon) */ .find-overlay { display: none; position: absolute; z-index: 100; padding: 8px 12px; gap: 10px; align-items: center; } .find-overlay.open { display: flex; } .find-overlay input { padding: 4px 6px; width: 200px; } .find-overlay .find-count { min-width: 50px; text-align: center; padding-left: 10px; } /* Range-sum chip — floats bottom-right when a multi-cell numeric range is selected. */ .grid-sum-chip { position: absolute; right: 8px; bottom: 8px; padding: 4px 10px; z-index: 50; pointer-events: none; } /* Dark theme: recolour grid surfaces onto the app tokens (blue selection tints and yellow find highlights read fine over a dark cell). */