/* =========================================================================== 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. =========================================================================== */ /* =========================================================================== 1. DESIGN TOKENS & DARK THEME =========================================================================== */ :root { --pt-navbar-h: 64px; /* reference TopBar: h-16 (Shell.tsx:93) */ } /* 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) =========================================================================== */ /* Held in front of the app until the session is resolved, so the shell is never seen in a state it would have to rearrange. Normally invisible: the bundle arrives with the HTML, so Alpine flips `resolved` on its first pass. */ .pt-session-gate { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; background: var(--pt-canvas, #fff); } .navbar { padding-top: 0; padding-bottom: 0; height: var(--pt-navbar-h); } .navbar > .container-fluid { padding-left: 20px; /* reference TopBar: px-5 */ padding-right: 20px; } .navbar-brand { padding-top: 0.75rem; padding-bottom: 0.75rem; } .navbar-dark .navbar-nav .nav-link { padding: 0.75rem 1rem; } .sidebar { position: sticky; /* stick full-height beside scrolling content (was static -> navy cut off at 609px) */ top: var(--pt-navbar-h); align-self: flex-start; height: calc(100vh - var(--pt-navbar-h)); overflow-y: auto; padding: 0; /* kill Bootstrap .col gutter (12px) + old top pad */ flex: 0 0 240px; /* reference aside w-60 = 240px (was responsive col) */ width: 240px; max-width: 240px; } /* Nav container — reference nav: py-4 px-2 (16px/8px), items 4px apart (space-y-1). Zero the template's sticky/px wrappers so the item pill sits 8px from the edge. */ .sidebar .position-sticky { position: static !important; /* outer .sidebar handles sticky now; inner sticky double-offset -> 64px gap */ top: auto !important; margin-top: 0 !important; padding: 16px 8px !important; } .sidebar .position-sticky > div { padding: 0 !important; } .sidebar ul.nav { margin: 0; padding: 0; } .sidebar .nav-item { margin: 0; } .sidebar .nav-link { padding: 0 12px; min-height: 40px; display: flex; align-items: center; gap: 12px; margin-bottom: 4px; /* reference space-y-1 */ white-space: nowrap; /* stop label wrapping (Data Room) */ } .sidebar .nav-link .badge { min-height: 20px; min-width: 20px; display: inline-flex; align-items: center; justify-content: center; padding: 0 6px; /* reference badge: h-5 (20px), px 6px */ } main { margin-top: var(--pt-navbar-h) !important; padding-top: 1.5rem; } /* Fill the row beside the fixed 240px sidebar. Without this, col-lg-10 (83%) + the 240px sidebar overflow the flex row and main wraps BELOW it — the giant empty gap above page content. */ main.col-md-9, main.col-lg-10 { flex: 1 1 0%; width: auto; max-width: none; min-width: 0; padding: 28px !important; /* reference main inner padding (was px-md-4 + wrapper p-3) */ } /* =========================================================================== 4. BOOTSTRAP COMPONENT OVERRIDES =========================================================================== */ .card { margin-bottom: 1.25rem; } .card-header { padding: 1rem 1.5rem; } .card-body { padding: 1.25rem 1.5rem; } /* Stat tiles (KPI strip) — stack label/number full-width, pin icon top-right, fit content height (reference bk.tsx:65-81). */ .card:has(.stat-value) { height: auto; padding: 0 !important; margin-bottom: 0; } /* !important beats Bootstrap .py-2; margin-bottom:0 kills the global .card 20px mb (excess gap under the tile strip) */ .row:has(> [class*="col"] .stat-value) { align-items: flex-start; } .card:has(.stat-value) .card-body { padding: 20px; position: relative; } .card:has(.stat-value) .row { display: block; } .card:has(.stat-value) .col.me-2 { width: 100%; margin: 0; } .card:has(.stat-value) .col-auto { position: absolute; top: 18px; right: 20px; margin: 0; padding: 0; } /* 18 -> icon rect top 21, matching reference */ /* Tile icon (top-right) — 16px like reference h-4 w-4; cover both bootstrap-icon fonts (.bi) and inline SVGs (customer tiles) so wide numbers never collide. */ .card:has(.stat-value) .col-auto .bi, .card:has(.stat-value) .col-auto i, .card:has(.stat-value) .col-auto svg { width: 16px !important; height: 16px !important; font-size: 16px !important; line-height: 1; } .sidebar .nav-link i, .sidebar .nav-link .bi { font-size: 18px; flex-shrink: 0; margin-right: 0 !important; } /* Sidebar collapse (desktop) — icon-only rail, toggled via the navbar button. */ .sidebar { transition: flex-basis 0.18s ease, width 0.18s ease; } html.sidebar-collapsed .sidebar { flex-basis: 72px; width: 72px; max-width: 72px; } html.sidebar-collapsed .sidebar .nav-link { justify-content: center; gap: 0; } html.sidebar-collapsed .sidebar .nav-label, html.sidebar-collapsed .sidebar .nav-link .badge, html.sidebar-collapsed .brand-text { display: none; } /* Collapse toggle — pinned to the sidebar bottom, chevron flips when collapsed. */ .sidebar { display: flex !important; flex-direction: column; } /* !important beats Bootstrap .d-md-block */ .sidebar-collapse-toggle { margin-top: auto; align-items: center; gap: 12px; width: 100%; min-height: 44px; padding: 0 20px; border: none; background: transparent; color: var(--pt-shell-muted); font-size: 14px; cursor: pointer; } .sidebar-collapse-toggle:hover { color: var(--pt-shell-foreground); background-color: oklch(0.97 0.008 220 / 0.04); } .sidebar-collapse-toggle i { font-size: 18px; transition: transform 0.18s ease; } html.sidebar-collapsed .sidebar-collapse-toggle { justify-content: center; gap: 0; padding: 0; } html.sidebar-collapsed .sidebar-collapse-toggle i { transform: rotate(180deg); } .btn { padding: 0.375rem 0.75rem; } .badge { padding: 0.35em 0.65em; } .table { margin-bottom: 0; } .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 ------------------------------------------------------ */ /* Top loading bar. Nothing the viewer waits on reports how far along it is — the document, its entities and its insights each arrive whole — so the bar sweeps rather than fills: it says "still working", not "this much done". */ /* It rides the header's bottom edge rather than the modal's top edge: there the dialog's sides are straight, so the bar runs the full width — corner to corner — without a curve to be clipped by or held off from. The strip is always in the layout and only the segment appears, so nothing shifts by 3px when a fetch starts. */ .pt-loadbar { position: relative; height: 4px; margin-top: -1px; overflow: hidden; pointer-events: none; z-index: 5; } .pt-loadbar-on::before { content: ""; position: absolute; top: 0; bottom: 0; width: 40%; background: linear-gradient(90deg, transparent, var(--pt-accent-blue) 30%, var(--pt-accent-blue) 70%, transparent); animation: ptLoadbarSweep 1.1s ease-in-out infinite; } @keyframes ptLoadbarSweep { from { left: -40%; } to { left: 100%; } } /* Still moving under reduced motion, because a stopped bar reads as a finished one — just slower and even, without the ease that throws it across. */ @media (prefers-reduced-motion: reduce) { .pt-loadbar-on::before { animation-duration: 2.6s; animation-timing-function: linear; } } /* 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; } /* --- Shared table furniture ----------------------------------------------- */ /* Leading mark + two lines, on one baseline, with the name free to truncate. */ .pt-name-cell { display: flex; align-items: center; gap: 12px; min-width: 0; } .pt-name-cell .pt-filemark { flex: none; } .pt-name-lines { min-width: 0; } /* --- My-documents panel --------------------------------------------------- */ /* Name column stretches to fill; max-width:0 lets the inner flex truncate, so a long filename ends in an ellipsis instead of widening the column or wrapping over two lines. The full name is on the element's title. */ .documents-panel td.name-cell { max-width: 0; width: 100%; } /* Every other column holds a short, fixed-shape value — a type, a date, a size, a status, a client. Wrapping one across two lines only makes the row harder to scan, and misaligns it from its neighbours. */ .documents-panel .table thead th, .documents-panel .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). */ /* --- Vendors table ------------------------------------------------------- */ /* Supplier names and references are Hebrew as often as English, and the column they sit in is the same either way — `dir="auto"` on the cell lets each value pick its own direction from its first strong character, so a Hebrew name is not rendered with its punctuation stranded on the wrong side. */ .vendors-page td[dir="auto"] { unicode-bidi: isolate; } /* Long supplier names truncate rather than growing the row: the full value stays available through the cell's title. */ .vendors-page .cell-clip { max-width: 22ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .vendors-page .cell-clip-ref { max-width: 14ch; } /* Amounts and dates are short and fixed-width by nature; wrapping one across two lines only makes the column harder to scan. */ .vendors-page .cell-nowrap { white-space: nowrap; } /* Sortable headers: the whole cell is the control, so it needs to look like one without turning the header row into a wall of buttons. */ .vendors-page th.sortable { cursor: pointer; user-select: none; } .vendors-page th.sortable:hover { color: var(--bs-body-color, #212529); } /* Half the window. A finding is one email and its replies — a column of text — and at modal-xl it covered the table it was opened from for no gain. Below the large breakpoint half a window is too narrow to read in, so it goes back to Bootstrap's own full-width behaviour there. */ .modal-dialog.modal-half { max-width: 50vw; } @media (max-width: 991.98px) { .modal-dialog.modal-half { max-width: none; } }