/* 92_combined.min.css */
/* 01_variables.css */ /* ======================== */ /* CSS VARIABLES - MUST LOAD FIRST */ /* File: 00_variables.css */ /* ======================== */ :root { /* ======================== */ /* DARK THEME COLORS */ /* ======================== */ /* Background colors */ --bg-primary: rgb(25, 25, 25); --bg-secondary: rgb(35, 35, 35); --bg-tertiary: rgb(15, 15, 15); --bg-dark: rgb(10, 10, 10); --bg-hover: rgba(255, 255, 255, 0.1); --bg-modal: #2a2a2a; --bg-modal-header: #1a1a1a; /* Border colors */ --border-primary: #444; --border-secondary: #666; --border-tertiary: #888; --border-focus: #0d6efd; --border-focus-shadow: rgba(13, 110, 253, 0.25); /* Text colors */ --text-primary: #ffffff; --text-secondary: #e0e0e0; --text-tertiary: #d0d0d0; --text-muted: #888; --text-disabled: #666; /* Status colors */ --color-success: #00bc8c; --color-success-hover: #009670; --color-danger: #e74c3c; --color-danger-hover: #dc3545; --color-warning: #f39c12; --color-warning-hover: #ffd700; --color-info: #3498db; --color-info-hover: #66b3ff; --color-primary: #0d6efd; --color-primary-hover: #0a58ca; --color-primary-light: #66b3ff; /* Value colors for tables */ --value-positive: #28a745; --value-negative: #dc3545; /* Component specific */ --shadow-default: 0 4px 8px rgba(0, 0, 0, 0.3); --shadow-hover: 0 6px 12px rgba(0, 0, 0, 0.2); --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.5); /* Transitions */ --transition-default: all 0.2s ease; --transition-slow: all 0.3s ease; /* Font sizes */ --font-size-xs: 10px; --font-size-sm: 11px; --font-size-base: 12px; --font-size-md: 13px; --font-size-lg: 14px; --font-size-xl: 16px; /* Spacing */ --spacing-xs: 4px; --spacing-sm: 8px; --spacing-md: 12px; --spacing-lg: 16px; --spacing-xl: 20px; /* Border radius */ --radius-sm: 3px; --radius-base: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-xl: 12px; /* Z-index layers */ --z-sticky-1: 1; --z-sticky-2: 2; --z-sticky-3: 3; --z-dropdown: 10; --z-modal: 100; --z-tooltip: 1000; } /* 02_global_dynamic_fonts.css */ /* ======================== */ /* GLOBAL DYNAMIC FONT SIZING */ /* File: 01_global_dynamic_fonts.css */ /* ======================== */ /* * This file sets dynamic font sizing for ALL components * Load this AFTER variables.css but BEFORE all other component CSS files * This ensures all components inherit these responsive sizes */ /* ======================== */ /* OVERRIDE CSS VARIABLES BASED ON SCREEN SIZE */ /* ======================== */ /* Mobile First - Smallest sizes */ :root { --font-size-xs: 9px; --font-size-sm: 10px; --font-size-base: 10px; /* Down from 12px */ --font-size-md: 11px; /* Down from 13px */ --font-size-lg: 12px; /* Down from 14px */ --font-size-xl: 14px; /* Down from 16px */ } /* Small devices (landscape phones, 544px and up) */ @media (min-width: 544px) { :root { --font-size-xs: 10px; --font-size-sm: 11px; --font-size-base: 11px; --font-size-md: 12px; --font-size-lg: 13px; --font-size-xl: 15px; } } /* Medium devices (tablets, 768px and up) */ @media (min-width: 768px) { :root { --font-size-xs: 10px; --font-size-sm: 11px; --font-size-base: 12px; --font-size-md: 13px; --font-size-lg: 14px; --font-size-xl: 16px; } } /* Large devices (desktops, 992px and up) */ @media (min-width: 992px) { :root { --font-size-xs: 10px; --font-size-sm: 11px; --font-size-base: 12px; --font-size-md: 13px; --font-size-lg: 14px; --font-size-xl: 16px; } } /* Extra large devices (large desktops, 1200px and up) */ @media (min-width: 1200px) { :root { --font-size-xs: 10px; --font-size-sm: 11px; --font-size-base: 12px; --font-size-md: 13px; --font-size-lg: 14px; --font-size-xl: 16px; } } /* ======================== */ /* UNIVERSAL FONT SIZE APPLICATION */ /* ======================== */ /* Apply to ALL text elements by default */ body, body * { font-size: var(--font-size-base) !important; }¨ /* ======================== */ /* SPECIFIC COMPONENT OVERRIDES */ /* ======================== */ /* Paragraphs - Keep your existing responsive sizing */ p { font-size: var(--font-size-base) !important; } /* Spans */ span { font-size: var(--font-size-base) !important; } /* Headers - Slightly larger but still dynamic */ h1 { font-size: calc(var(--font-size-xl) * 1.5) !important; } h2 { font-size: calc(var(--font-size-xl) * 1.25) !important; } h3 { font-size: calc(var(--font-size-lg) * 1.2) !important; } h4 { font-size: var(--font-size-lg) !important; } h5 { font-size: var(--font-size-md) !important; } h6 { font-size: var(--font-size-base) !important; } /* ======================== */ /* TABLES (DataTable & dbc.Table) */ /* ======================== */ /* Table body cells */ .table tbody td, .dash-spreadsheet-container td, div.dash-spreadsheet-container .dash-spreadsheet-inner table td { font-size: var(--font-size-base) !important; } /* Table headers - slightly larger */ .table thead th, .dash-spreadsheet-container th, div.dash-spreadsheet-container .dash-spreadsheet-inner table th { font-size: var(--font-size-md) !important; } /* ======================== */ /* FORMS & INPUTS */ /* ======================== */ /* All form controls */ .form-control, .form-select, input[type="text"], input[type="number"], input[type="email"], input[type="password"], textarea, select { font-size: var(--font-size-base) !important; } /* Labels */ label, .form-label { font-size: var(--font-size-sm) !important; } /* ======================== */ /* DROPDOWNS & SELECT MENUS */ /* ======================== */ /* Keep dropdowns small as you like them */ .Select-control, .Select-menu-outer, .Select-value-label, .Select-option, .Select-input input, .Select-placeholder { font-size: var(--font-size-sm) !important; /* 10-11px dynamic */ } /* ======================== */ /* BUTTONS */ /* ======================== */ /* All buttons */ .btn, button, [type="button"], [type="submit"], .export { font-size: var(--font-size-base) !important; } /* Small buttons */ .btn-sm { font-size: var(--font-size-sm) !important; } /* Large buttons */ .btn-lg { font-size: var(--font-size-md) !important; } /* ======================== */ /* NAVIGATION & TABS */ /* ======================== */ .nav-link, .nav-tabs .nav-link, .navbar-nav { font-size: var(--font-size-base) !important; } /* ======================== */ /* CARDS */ /* ======================== */ .card-body, .card-title, .card-text { font-size: var(--font-size-base) !important; } .card-header, .card-footer { font-size: var(--font-size-sm) !important; } /* ======================== */ /* MODALS */ /* ======================== */ .modal-body { font-size: var(--font-size-base) !important; } .modal-title { font-size: var(--font-size-lg) !important; } /* ======================== */ /* PAGINATION */ /* ======================== */ .page-number, .current-page-container input, .pagination { font-size: var(--font-size-sm) !important; } /* ======================== */ /* TOOLTIPS & POPOVERS */ /* ======================== */ .tooltip, .popover, .dash-tooltip { font-size: var(--font-size-sm) !important; } /* ======================== */ /* DATE PICKERS */ /* ======================== */ .DateInput_input, .DateInput_input_1, .CalendarDay__default, .CalendarMonth_caption { font-size: var(--font-size-base) !important; } /* ======================== */ /* OVERRIDE FOR SPECIFIC SMALL ELEMENTS */ /* ======================== */ /* Keep these extra small */ .badge, .form-text, small, .small { font-size: var(--font-size-xs) !important; } /* ======================== */ /* ENSURE READABILITY MINIMUMS */ /* ======================== */ /* Never go below 9px for readability */ @media (max-width: 543px) { body, body * { min-font-size: 9px; } } /* ======================== */ /* PLOTLY GRAPH OVERRIDES */ /* ======================== */ /* Let Plotly control its own font sizes */ .js-plotly-plot .plotly text, .js-plotly-plot .legend text, .js-plotly-plot .legendtext, g.legend text.legendtext { font-size: var(--font-size-xs) !important; } /* Alternatively, if you want to use your CSS variable system */ .js-plotly-plot .legend text { font-size: var(--font-size-xs) !important; /* 11px by default */ } /* ======================== */ /* TERMLY BANNER SIZE FIX - SPECIFIC VERSION */ /* Based on exact class names from inspection */ /* ======================== */ /* ======================== */ /* TERMLY BANNER SIZE FIX - DYNAMIC VERSION WITH SCALE VARIABLE */ /* Adjust the --termly-scale variable to make everything bigger/smaller */ /* ======================== */ /* Define the scale variable - CHANGE THIS TO ADJUST SIZE */ :root { --termly-scale: 0.7; /* 0.5 = 50% of original size, 1.0 = 100%, 0.7 = 70%, etc. */ } /* Responsive scale adjustments */ @media (max-width: 768px) { :root { --termly-scale: 0.65; /* Slightly smaller on tablets */ } } @media (max-width: 480px) { :root { --termly-scale: 0.6; /* Even smaller on phones */ } } @media (max-width: 375px) { :root { --termly-scale: 0.55; /* Smallest for iPhone SE and similar */ } } /* Calculate all sizes based on the scale variable */ :root { /* Original sizes multiplied by scale */ --termly-font-size: calc(14px * var(--termly-scale)); --termly-message-font: calc(13px * var(--termly-scale)); --termly-button-font: calc(13px * var(--termly-scale)); /* Padding calculations */ --termly-banner-padding-y: calc(12px * var(--termly-scale)); --termly-banner-padding-x: calc(16px * var(--termly-scale)); --termly-button-padding-y: calc(8px * var(--termly-scale)); --termly-button-padding-x: calc(16px * var(--termly-scale)); /* Heights and gaps */ --termly-button-height: calc(36px * var(--termly-scale)); --termly-gap: calc(12px * var(--termly-scale)); --termly-button-gap: calc(8px * var(--termly-scale)); --termly-max-height: calc(160px * var(--termly-scale)); /* Line height scales less aggressively to maintain readability */ --termly-line-height: calc(1.4 - (0.2 * (1 - var(--termly-scale)))); } /* Main banner container */ .termly-styles-root-b8aebb.termly-styles-banner-e1cd59 { padding: var(--termly-banner-padding-y) var(--termly-banner-padding-x) !important; font-size: var(--termly-font-size) !important; } /* Content wrapper */ .termly-styles-content-fcafe4 { font-size: var(--termly-font-size) !important; gap: var(--termly-gap) !important; } /* Message container */ .termly-styles-messageContainer-d6c726 { font-size: var(--termly-font-size) !important; } /* Message text */ .termly-styles-message-d6c726, .termly-styles-root-d5f97a { font-size: var(--termly-message-font) !important; line-height: var(--termly-line-height) !important; } /* Cookie policy link text */ .termly-styles-root-d5f97a[role="button"][tabindex="0"] { font-size: var(--termly-message-font) !important; text-decoration: underline; } /* Preferences link */ .termly-styles-root-d5f97a[data-testid="preferences-link"] { font-size: var(--termly-message-font) !important; } /* Button container */ .termly-styles-buttons-bb7ed2 { gap: var(--termly-button-gap) !important; } /* Accept button */ .termly-styles-button-bb7ed2[data-tid="banner-accept"] { background: rgb(74, 74, 74) !important; font-size: var(--termly-button-font) !important; padding: var(--termly-button-padding-y) var(--termly-button-padding-x) !important; height: var(--termly-button-height) !important; min-height: unset !important; } /* Accept All Cookies button */ .termly-styles-module-root-aa0eb.termly-styles-module-primary-aa493c.termly-styles-module-solid-cd1b13.termly-styles-button-a4543c button { font-size: var(--termly-button-font) !important; padding: var(--termly-button-padding-y) var(--termly-button-padding-x) !important; height: var(--termly-button-height) !important; font-weight: normal !important; } /* Override all text inside the banner */ #termly-code-snippet-support * { font-size: inherit !important; line-height: inherit !important; } /* Ensure the banner container doesn't grow too large */ #termly-code-snippet-support { font-size: var(--termly-font-size) !important; max-height: var(--termly-max-height) !important; } /* Additional micro-adjustments for very small screens */ @media (max-width: 320px) { :root { --termly-scale: 0.45; /* Ultra-compact for very small devices */ } /* Stack buttons vertically on very small screens */ .termly-styles-buttons-bb7ed2 { flex-direction: column !important; width: 100% !important; } .termly-styles-button-bb7ed2, .termly-styles-module-root-aa0eb { width: 100% !important; } } /* 03_typography.css */ /* ======================== */ /* TYPOGRAPHY AND TEXT STYLES */ /* File: 02_typography.css */ /* ======================== */ /* Base font family inheritance */ .dash-table-container, .dash-spreadsheet-container, .dash-spreadsheet-container table, .dash-spreadsheet-container input { font-family: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; } /* ======================== */ /* RESPONSIVE TYPOGRAPHY */ /* ======================== */ /* Paragraph responsive sizing */ @media (min-width: 1px) { p { font-size: var(--font-size-xs); } } @media (min-width: 544px) { p { font-size: var(--font-size-base); } } @media (min-width: 768px) { p { font-size: var(--font-size-md); } } @media (min-width: 992px) { p { font-size: var(--font-size-md); } } @media (min-width: 1200px) { p { font-size: var(--font-size-md); } } /* Span responsive sizing */ @media (min-width: 1px) { span { font-size: var(--font-size-xs); } } @media (min-width: 544px) { span { font-size: var(--font-size-base); } } @media (min-width: 768px) { span { font-size: var(--font-size-md); } } @media (min-width: 992px) { span { font-size: var(--font-size-md); } } @media (min-width: 1200px) { span { font-size: var(--font-size-md); } } /* H1 responsive sizing */ @media (min-width: 1px) { h1 { font-size: 1.8rem; } } @media (min-width: 544px) { h1 { font-size: 2rem; } } @media (min-width: 768px) { h1 { font-size: 2.2rem; } } @media (min-width: 992px) { h1 { font-size: 2.4rem; } } @media (min-width: 1200px) { h1 { font-size: 2.5rem; } } /* H2 responsive sizing */ @media (min-width: 1px) { h2 { font-size: 1.4rem; } } @media (min-width: 544px) { h2 { font-size: 1.6rem; } } @media (min-width: 768px) { h2 { font-size: 1.8rem; } } @media (min-width: 992px) { h2 { font-size: 1.9rem; } } @media (min-width: 1200px) { h2 { font-size: 2rem; } } /* H3 responsive sizing */ @media (min-width: 1px) { h3 { font-size: 1.2rem; } } @media (min-width: 544px) { h3 { font-size: 1.25rem; } } @media (min-width: 768px) { h3 { font-size: 1.35rem; } } @media (min-width: 992px) { h3 { font-size: 1.5rem; } } @media (min-width: 1200px) { h3 { font-size: 1.75rem; } } /* H4 responsive sizing */ @media (min-width: 1px) { h4 { font-size: 1rem; } } @media (min-width: 544px) { h4 { font-size: 1rem; } } @media (min-width: 768px) { h4 { font-size: 1rem; } } @media (min-width: 992px) { h4 { font-size: 1.1rem; } } @media (min-width: 1200px) { h4 { font-size: 1.1rem; } } /* H5 responsive sizing */ @media (min-width: 1px) { h5 { font-size: 1rem; } } @media (min-width: 544px) { h5 { font-size: 1rem; } } @media (min-width: 768px) { h5 { font-size: 1rem; } } @media (min-width: 992px) { h5 { font-size: 1.1rem; } } @media (min-width: 1200px) { h5 { font-size: 1.1rem; } } /* ======================== */ /* COLOR CODING FOR VALUES */ /* ======================== */ /* Positive values */ .cell-value-positive { color: var(--value-positive); font-weight: 500; } /* Negative values */ .cell-value-negative { color: var(--value-negative); font-weight: 500; } /* Primary text color in modals */ .learn-more-content .text-primary { color: var(--color-info-hover); } /* 04_forms_inputs.css */ /* ======================== */ /* FORM ELEMENTS AND INPUTS */ /* File: 03_forms-inputs.css */ /* ======================== */ /* Base form controls */ .form-control, .form-control:focus, .form-control:valid, input[type="number"], input[type="text"], input.form-control { background-color: var(--bg-primary); color: var(--text-primary); border: 1px solid var(--border-primary); } .form-control:focus { border-color: var(--border-focus); box-shadow: 0 0 0 0.25rem var(--border-focus-shadow); } /* Form control responsive sizing */ @media (min-width: 1px) { .form-control:valid { font-size: var(--font-size-xs); } } @media (min-width: 768px) { .form-control:valid { font-size: var(--font-size-sm); } } /* Disabled input styling */ input:disabled, .form-control:disabled { background-color: var(--bg-tertiary); color: var(--text-disabled); cursor: not-allowed; opacity: 0.6; } /* ======================== */ /* SELECT DROPDOWNS */ /* ======================== */ /* Select control base styling */ .Select-control { background-color: var(--bg-primary); border: 1px solid var(--border-primary); min-height: 30px; font-size: var(--font-size-base); /* font-size changed to var(--font-size-base): old design was font-size: 11px;*/ } /* Select menu styling */ .Select-menu-outer { background-color: var(--bg-primary); border: 1px solid var(--border-primary); margin-top: 2px; font-size: var(--font-size-sm); /* font-size: 11px; Changed to var(--font-size-sm) to match new design */ } /* Select value and label */ .Select-value, .Select-value-label { color: var(--text-primary); } /* Select input */ .Select-input input { color: var(--text-primary); font-size: var(--font-size-sm); /* font-size: 11px; changed to var(--font-size-base): old design was font-size: 11px;* */ } /* Select options */ .Select-option { background-color: var(--bg-primary); color: var(--text-primary); padding: var(--spacing-sm) var(--spacing-md); } .Select-option:hover { background-color: var(--bg-hover); } .Select-option.is-selected { background-color: var(--color-primary); color: var(--text-primary); } /* Dropdown container */ .dash-dropdown-container { background-color: var(--bg-primary); } /* Custom form select (date dropdowns) */ .form-select-sm { background-color: #222; color: var(--text-primary); border: 1px solid var(--border-primary); transition: var(--transition-default); } .form-select-sm:focus { background-color: #2a2a2a; border-color: var(--color-success); box-shadow: 0 0 0 0.25rem rgba(0, 188, 140, 0.25); color: var(--text-primary); } .form-select-sm option { background-color: #222; color: var(--text-primary); } .form-select-sm:hover { border-color: var(--border-secondary); } /* ======================== */ /* EXPORT BUTTONS */ /* ======================== */ .export { background-color: var(--bg-primary); color: var(--text-primary); border: 1px solid var(--border-primary); padding: 6px 12px; border-radius: var(--radius-base); font-size: var(--font-size-base); cursor: pointer; transition: var(--transition-default); margin: var(--spacing-xs); } .export:hover { background-color: var(--bg-hover); border-color: var(--border-secondary); } /* ======================== */ /* DCC.DROPDOWN FIXES */ /* ======================== */ /* Fix focus state - prevent white background */ .Select.is-focused > .Select-control { background-color: rgb(25, 25, 25) !important; border-color: var(--border-focus) !important; box-shadow: 0 0 0 0.25rem var(--border-focus-shadow) !important; } /* Fix selected value text color for single select */ .Select--single > .Select-control .Select-value { color: var(--text-primary) !important; } /* Ensure text remains white in all states */ .Select-value-label { color: var(--text-primary) !important; } /* Fix placeholder text color */ .Select-placeholder { color: var(--text-muted) !important; } /* Fix dropdown arrow color */ .Select-arrow { border-color: var(--text-muted) transparent transparent !important; } /* Fix dropdown arrow on hover */ .Select-control:hover .Select-arrow { border-color: var(--text-primary) transparent transparent !important; } /* Additional fixes for multi-select if needed */ .Select--multi .Select-value { background-color: var(--bg-secondary) !important; border-color: var(--border-primary) !important; color: var(--text-primary) !important; } .Select--multi .Select-value-icon { border-color: var(--border-primary) !important; } .Select--multi .Select-value-icon:hover { background-color: var(--bg-hover) !important; color: var(--text-primary) !important; } /* ======================== */ /* DROPDOWN STATE FIXES - Add these to the end of 03_forms_inputs.css */ /* ======================== */ /* Fix for dropdown background turning white after callbacks */ .Select-control, .Select.is-open > .Select-control, .Select.is-focused:not(.is-open) > .Select-control { background-color: var(--bg-primary) !important; border-color: var(--border-primary) !important; } /* Ensure menu stays dark */ .Select-menu-outer, .Select.is-open .Select-menu-outer { background-color: var(--bg-primary) !important; border-color: var(--border-primary) !important; } /* Fix for multi-select specific issues */ .Select--multi .Select-control, .Select--multi.is-open > .Select-control, .Select--multi.is-focused:not(.is-open) > .Select-control { background-color: var(--bg-primary) !important; } /* Handle React-Select's dynamic classes */ .Select-control, .Select-control:hover, .Select--single > .Select-control, .Select--multi > .Select-control { background-color: rgb(25, 25, 25) !important; } /* Ensure dropdown arrow and clear button stay visible */ .Select-arrow-zone, .Select-clear-zone { background-color: transparent !important; } /* Handle the input field inside the dropdown */ .Select-input > input, .Select--multi .Select-input > input { background-color: transparent !important; color: var(--text-primary) !important; } /* Fix for when dropdown is disabled */ .Select.is-disabled > .Select-control { background-color: var(--bg-tertiary) !important; opacity: 0.6; } /* Additional specificity for problematic states */ .dash-dropdown .Select-control, .dash-dropdown .Select.is-open > .Select-control, .dash-dropdown .Select.is-focused > .Select-control { background-color: rgb(25, 25, 25) !important; color: var(--text-primary) !important; } /* Force dark background on all Select elements regardless of state */ div[class*="Select"] .Select-control { background-color: rgb(25, 25, 25) !important; } /* Handle Dash's wrapper divs */ .dash-dropdown-container .Select-control, .dash-dropdown-container .Select-menu-outer { background-color: var(--bg-primary) !important; } /* Ensure the dropdown doesn't inherit any white backgrounds from parent elements */ .Select-control * { background-color: transparent !important; } /* Fix for dropdown options */ .Select-option, .Select-option.is-focused, .Select-option.is-selected { background-color: var(--bg-primary) !important; } .Select-option.is-focused:not(.is-selected) { background-color: var(--bg-hover) !important; } .Select-option.is-selected { background-color: var(--color-primary) !important; } /* Ensure no white background bleeds through from Bootstrap or other sources */ .form-control.Select-input, .form-control .Select-control { background-color: transparent !important; } /* 05_tables.css */ /* ======================== */ /* TABLE STYLES */ /* File: 04_tables.css */ /* ======================== */ /* ======================== */ /* STICKY COLUMNS - DEFAULT (First column) */ /* ======================== */ th:first-child, td:first-child { position: sticky !important; left: 0px; z-index: var(--z-sticky-1); white-space: nowrap; background-color: var(--bg-secondary); } /* ======================== */ /* STICKY COLUMNS - TWO COLUMNS */ /* Apply class 'two-columns-sticky' when first column has collapse button */ /* ======================== */ .two-columns-sticky th:nth-child(1), .two-columns-sticky td:nth-child(1) { position: sticky !important; left: 0px; z-index: var(--z-sticky-2); white-space: nowrap; background-color: var(--bg-secondary); } .two-columns-sticky th:nth-child(2), .two-columns-sticky td:nth-child(2) { position: sticky !important; left: 20px; /* Adjust based on first column width - it was 31 before*/ z-index: var(--z-sticky-1); white-space: nowrap; background-color: var(--bg-secondary); } /* ======================== */ /* STICKY COLUMNS - THREE COLUMNS */ /* Apply class 'three-columns-sticky' when both [+] and [X] buttons present */ /* ======================== */ .three-columns-sticky th:nth-child(1), .three-columns-sticky td:nth-child(1) { position: sticky !important; left: 0px; z-index: var(--z-sticky-3); white-space: nowrap; background-color: var(--bg-secondary); } .three-columns-sticky th:nth-child(2), .three-columns-sticky td:nth-child(2) { position: sticky !important; left: 25px; /* Width of first column */ z-index: var(--z-sticky-2); white-space: nowrap; background-color: var(--bg-secondary); } .three-columns-sticky th:nth-child(3), .three-columns-sticky td:nth-child(3) { position: sticky !important; left: 50px; /* Width of first + second columns */ z-index: var(--z-sticky-1); white-space: nowrap; background-color: var(--bg-secondary); } /* ======================== */ /* SPECIAL COLUMN WIDTHS */ /* ======================== */ /* Fixed width "+" column */ .plus-col, .plus-col > button { width: 20px; min-width: 20px; max-width: 20px; text-align: center; padding: 0; } /* Fixed width "X" column */ .remove-col, .remove-col > button { width: 25px; min-width: 25px; max-width: 25px; text-align: center; padding: 0; } /* First sticky column: "+" */ th.plus-col, td.plus-col { position: sticky; left: 0; z-index: var(--z-sticky-2); background: var(--bg-secondary); } /* Second sticky column: "X" (if present) or ticker */ th.remove-col, td.remove-col { position: sticky; left: 25px; /* Exactly width of first column */ z-index: var(--z-sticky-1); background: var(--bg-secondary); } /* 06_datatable.css */ /* ======================== */ /* DASH DATATABLE STYLES - TRADITIONAL TABLE MATCHING */ /* File: 05_datatable.css */ /* ======================== */ /* Override inline styles with higher specificity */ .dash-table-container .dash-spreadsheet-container { --accent: #0d6efd !important; --border: #3a3a3a !important; --text-color: #ffffff !important; --background-color: #1a1a1a !important; --hover: #2a2a2a !important; } /* Main container */ .dash-table-container { font-family: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important; } /* Table wrapper */ .dash-spreadsheet-container { border: none !important; border-radius: 0 !important; overflow: hidden !important; } /* Inner container */ .dash-spreadsheet-inner { background-color: transparent !important; } /* The actual table - TRADITIONAL GRID */ .dash-spreadsheet-inner table { background-color: transparent !important; border-collapse: collapse !important; /* No gaps between cells */ border-spacing: 0 !important; } /* ============= HEADERS - DARKER LIKE LEFT TABLE ============= */ .dash-spreadsheet .dash-header { background-color: #141414 !important; /* Darker header */ font-weight: 600 !important; } .dash-spreadsheet-inner th, .dash-header th, .dash-filter th { background-color: #141414 !important; /* Very dark header */ color: #ffffff !important; font-weight: 600 !important; padding: 8px 10px !important; /* Reduced padding to match */ border: none !important; border-bottom: 1px solid #3a3a3a !important; /* Bottom border only */ border-radius: 0 !important; /* No rounded corners */ font-size: 11px !important; /* Smaller to match */ text-align: left !important; } /* Column headers specifically */ .column-header-name { color: #ffffff !important; font-weight: 600 !important; } /* ============= DATA CELLS - TRADITIONAL STYLE ============= */ .dash-spreadsheet-inner td, .dash-cell-value, .dash-select-cell { background-color: transparent !important; /* Inherit row background */ color: #e0e0e0 !important; /* Slightly softer white */ border: none !important; border-bottom: 1px solid #2a2a2a !important; /* Horizontal lines only */ border-radius: 0 !important; /* No rounded corners */ padding: 6px 10px !important; /* Tighter padding */ font-size: 11px !important; font-weight: 400 !important; /* Regular weight */ line-height: 1.4 !important; /* Tighter line height */ transition: none !important; /* Remove animations */ } /* Cell content */ .dash-cell-value { background-color: transparent !important; border: none !important; padding: 0 !important; } /* ============= ROW BACKGROUNDS - SUBTLE STRIPING ============= */ .dash-spreadsheet-inner tbody tr { background-color: #1a1a1a !important; /* Base background */ } .dash-spreadsheet-inner tbody tr:nth-child(even) { background-color: #1d1d1d !important; /* Very subtle stripe */ } /* ============= HOVER STATES - SUBTLE ============= */ .dash-spreadsheet-inner tbody tr:hover { background-color: #252525 !important; /* Subtle hover */ } .dash-spreadsheet-inner tbody tr:hover td { background-color: transparent !important; /* Cells inherit row background */ transform: none !important; /* No scaling */ box-shadow: none !important; /* No shadow */ } /* ============= SELECTED/ACTIVE CELLS ============= */ .dash-spreadsheet td.focused { background-color: rgba(13, 110, 253, 0.15) !important; box-shadow: inset 0 0 0 1px #0d6efd !important; } .dash-spreadsheet td.cell--selected { background-color: rgba(13, 110, 253, 0.08) !important; } /* ============= FILTERS ============= */ .dash-filter { background-color: #1a1a1a !important; } .dash-filter input { background-color: #1a1a1a !important; color: #ffffff !important; border: 1px solid #3a3a3a !important; border-radius: 2px !important; /* Minimal rounding */ padding: 4px 6px !important; font-size: 11px !important; } .dash-filter input:focus { border-color: #0d6efd !important; outline: none !important; } .dash-filter--case { background-color: #1a1a1a !important; } /* ============= PAGINATION CONTAINER ============= */ .previous-next-container { background-color: #1a1a1a !important; padding: 8px !important; border-top: 1px solid #3a3a3a !important; display: flex !important; align-items: center !important; gap: 4px !important; } /* ============= PAGINATION BUTTONS - TRADITIONAL ============= */ .previous-page, .next-page, .first-page, .last-page, .page-number { border-radius: 3px !important; /* Minimal rounding */ background: #252525 !important; color: #ffffff !important; border: 1px solid #3a3a3a !important; padding: 4px 8px !important; height: 28px !important; /* Smaller height */ box-sizing: border-box !important; font-size: 11px !important; font-weight: 400 !important; line-height: 20px !important; transition: background-color 0.15s ease !important; cursor: pointer !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; vertical-align: middle !important; margin: 0 2px !important; } .page-number:hover, .previous-page:hover:not([disabled]), .next-page:hover:not([disabled]), .first-page:hover:not([disabled]), .last-page:hover:not([disabled]) { background: #2a2a2a !important; border-color: #444 !important; transform: none !important; /* No movement */ box-shadow: none !important; /* No shadow */ } /* Disabled state */ .previous-page[disabled], .next-page[disabled], .first-page[disabled], .last-page[disabled] { opacity: 0.5 !important; cursor: not-allowed !important; } /* ============= CURRENT PAGE INPUT - TRADITIONAL ============= */ /* Remove pseudo-elements */ .current-page-container::before, .current-page-container::after, .current-page-container input::before, .current-page-container input::after, .current-page-container *::before, .current-page-container *::after { content: none !important; display: none !important; } /* Container alignment */ .current-page-container { position: relative !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; vertical-align: middle !important; background: transparent !important; height: 28px !important; line-height: 28px !important; margin: 0 2px !important; } /* Hide duplicate elements */ .current-page-container > *:not(input) { display: none !important; } /* Traditional input style */ .current-page-container input { border-radius: 3px !important; background: #0d6efd !important; border: 1px solid #0d6efd !important; color: #ffffff !important; font-weight: 500 !important; padding: 4px 8px !important; width: 50px !important; height: 28px !important; box-sizing: border-box !important; text-align: center !important; font-size: 11px !important; line-height: 20px !important; transition: background-color 0.15s ease !important; box-shadow: none !important; position: relative !important; top: 0 !important; margin: 0 !important; vertical-align: middle !important; z-index: 1 !important; text-shadow: none !important; -webkit-font-smoothing: antialiased !important; -moz-osx-font-smoothing: grayscale !important; -webkit-text-fill-color: #ffffff !important; transform: translateY(0) !important; } /* Subtle hover effect */ .current-page-container input:hover, .current-page-container input:focus { background: #0a58ca !important; border-color: #0a58ca !important; box-shadow: none !important; transform: none !important; outline: none !important; } /* ============= SORT INDICATORS ============= */ .sort { color: #0d6efd !important; font-weight: 600 !important; padding-left: 4px !important; font-size: 10px !important; } .sort.descending::after { content: ' ↓' !important; } .sort.ascending::after { content: ' ↑' !important; } /* ============= SCROLLBARS ============= */ .dash-spreadsheet-inner::-webkit-scrollbar, .dash-table-viewport::-webkit-scrollbar { width: 8px !important; height: 8px !important; } .dash-spreadsheet-inner::-webkit-scrollbar-track, .dash-table-viewport::-webkit-scrollbar-track { background: #1a1a1a !important; } .dash-spreadsheet-inner::-webkit-scrollbar-thumb, .dash-table-viewport::-webkit-scrollbar-thumb { background: #3a3a3a !important; border-radius: 2px !important; } .dash-spreadsheet-inner::-webkit-scrollbar-thumb:hover, .dash-table-viewport::-webkit-scrollbar-thumb:hover { background: #4a4a4a !important; } /* ============= EDITABLE CELLS ============= */ .dash-spreadsheet-inner .cell--editing { background-color: #1a1a1a !important; box-shadow: inset 0 0 0 1px #0d6efd !important; } .dash-spreadsheet-inner .cell--editing input { background-color: transparent !important; color: #ffffff !important; font-size: 11px !important; } /* ============= DROPDOWN CELLS ============= */ .dash-dropdown { background-color: #1a1a1a !important; } .Select-control { background-color: #1a1a1a !important; border-color: #3a3a3a !important; } .Select-menu-outer { background-color: #1a1a1a !important; border-color: #3a3a3a !important; color: #ffffff !important; } /* ============= FORCE OVERRIDES ============= */ div.dash-table-container * { background-color: inherit !important; color: inherit !important; } div.dash-table-container table, div.dash-table-container tbody, div.dash-table-container thead, div.dash-table-container tr { background-color: transparent !important; } /* ============= EXPORT BUTTONS ============= */ .export { background-color: #252525 !important; color: #ffffff !important; border: 1px solid #3a3a3a !important; border-radius: 3px !important; padding: 4px 8px !important; margin: 2px !important; cursor: pointer !important; font-size: 11px !important; } .export:hover { background-color: #2a2a2a !important; border-color: #444 !important; } /* ============= ENSURE TEXT CONSISTENCY ============= */ .dash-spreadsheet-inner td, .dash-spreadsheet-inner th { font-family: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important; letter-spacing: normal !important; text-transform: none !important; } /* ============= HORIZONTAL SCROLLING FIX ============= */ /* Enable horizontal scrolling for all DataTables */ .dash-table-container { overflow-x: auto !important; width: 100% !important; } .dash-spreadsheet-container { overflow-x: auto !important; } /* Ensure the table can expand beyond container width */ .dash-table-container .dash-spreadsheet-inner { min-width: 100%; width: auto !important; } /* Optional: Ensure viewport scrolling works properly */ .dash-table-viewport { overflow-x: auto !important; } /* Optional: Fix for when table is inside a Bootstrap column */ .col .dash-table-container, .col-md-6 .dash-table-container, .col-lg-6 .dash-table-container, [class*="col-"] .dash-table-container { max-width: 100%; overflow-x: auto !important; } /* ============= FIX FOR STICKY COLUMNS IN DATATABLE ============= */ /* Ensure sticky columns have opaque backgrounds */ /* First sticky column */ .dash-spreadsheet-inner td:first-child, .dash-spreadsheet-inner th:first-child { background-color: #252525 !important; /* Opaque background matching your theme */ position: sticky !important; left: 0; z-index: 2; } /* For two-columns-sticky class */ .two-columns-sticky .dash-spreadsheet-inner td:nth-child(1), .two-columns-sticky .dash-spreadsheet-inner th:nth-child(1) { background-color: #252525 !important; position: sticky !important; left: 0; z-index: 3; } .two-columns-sticky .dash-spreadsheet-inner td:nth-child(2), .two-columns-sticky .dash-spreadsheet-inner th:nth-child(2) { background-color: #252525 !important; position: sticky !important; left: 31px; z-index: 2; } /* For three-columns-sticky class */ .three-columns-sticky .dash-spreadsheet-inner td:nth-child(1), .three-columns-sticky .dash-spreadsheet-inner th:nth-child(1) { background-color: #252525 !important; position: sticky !important; left: 0; z-index: 4; } .three-columns-sticky .dash-spreadsheet-inner td:nth-child(2), .three-columns-sticky .dash-spreadsheet-inner th:nth-child(2) { background-color: #252525 !important; position: sticky !important; left: 25px; z-index: 3; } .three-columns-sticky .dash-spreadsheet-inner td:nth-child(3), .three-columns-sticky .dash-spreadsheet-inner th:nth-child(3) { background-color: #252525 !important; position: sticky !important; left: 50px; z-index: 2; } /* Ensure sticky headers also have opaque backgrounds */ .dash-spreadsheet .dash-header th:first-child, .dash-spreadsheet .dash-header th:nth-child(2), .dash-spreadsheet .dash-header th:nth-child(3) { background-color: #141414 !important; /* Match your header background */ } /* Handle hover states for sticky columns */ .dash-spreadsheet-inner tbody tr:hover td:first-child, .dash-spreadsheet-inner tbody tr:hover td:nth-child(2), .dash-spreadsheet-inner tbody tr:hover td:nth-child(3) { background-color: #2a2a2a !important; /* Slightly lighter on hover */ } /* Ensure cell content within sticky columns doesn't override */ .dash-spreadsheet-inner td:first-child .dash-cell-value, .dash-spreadsheet-inner td:nth-child(2) .dash-cell-value, .dash-spreadsheet-inner td:nth-child(3) .dash-cell-value { background-color: transparent !important; /* Keep content transparent */ } /* Add shadow to sticky columns for better visual separation */ .dash-spreadsheet-inner td:first-child::after, .dash-spreadsheet-inner th:first-child::after { content: ""; position: absolute; top: 0; right: -5px; bottom: 0; width: 5px; background: linear-gradient(to right, rgba(0,0,0,0.1), transparent); pointer-events: none; } /* For multiple sticky columns, only add shadow to the last sticky column */ .two-columns-sticky .dash-spreadsheet-inner td:nth-child(2)::after, .two-columns-sticky .dash-spreadsheet-inner th:nth-child(2)::after, .three-columns-sticky .dash-spreadsheet-inner td:nth-child(3)::after, .three-columns-sticky .dash-spreadsheet-inner th:nth-child(3)::after { content: ""; position: absolute; top: 0; right: -5px; bottom: 0; width: 5px; background: linear-gradient(to right, rgba(0,0,0,0.1), transparent); pointer-events: none; } /* Remove shadow from non-last sticky columns in multi-sticky setups */ .two-columns-sticky .dash-spreadsheet-inner td:nth-child(1)::after, .two-columns-sticky .dash-spreadsheet-inner th:nth-child(1)::after, .three-columns-sticky .dash-spreadsheet-inner td:nth-child(1)::after, .three-columns-sticky .dash-spreadsheet-inner th:nth-child(1)::after, .three-columns-sticky .dash-spreadsheet-inner td:nth-child(2)::after, .three-columns-sticky .dash-spreadsheet-inner th:nth-child(2)::after { display: none; } /* 07_components.css */ /* ======================== */ /* UI COMPONENTS */ /* File: 05_components.css */ /* ======================== */ /* ======================== */ /* CARD HOVER EFFECTS */ /* ======================== */ /* Hover effect for cards with 'hover-card' class */ .hover-card { transition: transform 0.2s ease, box-shadow 0.2s ease; } .hover-card:hover { transform: scale(1.05); box-shadow: var(--shadow-hover); } /* Custom card shadow */ .custom-card-shadow { box-shadow: var(--shadow-default); } /* ======================== */ /* LINK HOVER EFFECTS */ /* ======================== */ .hover-link:hover { cursor: pointer; } /* ======================== */ /* NAVIGATION TABS */ /* ======================== */ /* Pill-style modern tabs */ .nav-tabs { border-bottom: none; background-color: rgba(0, 0, 0, 0.2); padding: var(--spacing-sm); border-radius: var(--radius-xl); display: inline-flex; gap: var(--spacing-xs); } .nav-tabs .nav-link { border: none; border-radius: var(--radius-lg); background-color: transparent; color: rgba(255, 255, 255, 0.7); padding: 10px 18px; transition: var(--transition-slow); font-size: var(--font-size-md); font-weight: 500; } .nav-tabs .nav-link:hover { background-color: var(--bg-hover); color: var(--text-primary); } .nav-tabs .nav-link.active { background-color: var(--color-primary); color: var(--text-primary); box-shadow: 0 2px 8px rgba(13, 110, 253, 0.3); } /* ======================== */ /* TOOLTIPS */ /* ======================== */ .dash-tooltip { background-color: var(--bg-primary); color: var(--text-primary); border: 1px solid var(--border-primary); border-radius: var(--radius-base); padding: var(--spacing-sm) var(--spacing-md); font-size: var(--font-size-base); box-shadow: var(--shadow-default); } /* ======================== */ /* LOADING STATE */ /* ======================== */ .dash-loading { background-color: rgba(35, 35, 35, 0.9); color: var(--text-primary); } .dash-loading-spinner { border-color: var(--border-primary); border-top-color: var(--color-primary); } /* 08_date_picker.css */ /* ======================== */ /* DATE PICKER COMPONENT */ /* File: 06_date-picker.css */ /* ======================== */ /* Date input fields */ .DateInput_input { background-color: var(--bg-primary); color: var(--text-primary); font-size: inherit; height: 25px; border: 1px solid var(--border-primary); } /* Date input variant (used by some date pickers) */ .DateInput_input_1 { background-color: var(--bg-primary); color: var(--text-primary); font-size: inherit; height: 25px; border: 1px solid var(--border-primary); } .DateInput_input__focused { border-color: var(--border-focus); background-color: #2b2b2b; } /* Date picker container and wrapper */ .SingleDatePicker_picker { background-color: #1a1a1a; border: 1px solid var(--border-primary); border-radius: var(--radius-base); box-shadow: var(--shadow-lg); } .DateRangePicker_picker { background-color: #1a1a1a; border: 1px solid var(--border-primary); border-radius: var(--radius-base); box-shadow: var(--shadow-lg); } /* Calendar base */ .DayPicker { background-color: #1a1a1a; } .DayPicker__horizontal { background-color: #1a1a1a; } /* Month container */ .CalendarMonth { background-color: #1a1a1a; padding: 0; } /* Calendar month caption - THIS IS THE YEAR/MONTH HEADER */ .CalendarMonth_caption { color: var(--text-primary); background-color: #1a1a1a; font-weight: 600; font-size: var(--font-size-xl); padding: 10px 0; margin-bottom: 5px; } /* Navigation arrows */ .DayPickerNavigation_button { background-color: transparent; border: 1px solid var(--border-primary); border-radius: var(--radius-sm); } .DayPickerNavigation_button:hover { background-color: var(--bg-hover); } .DayPickerNavigation_svg { fill: var(--text-primary); } /* Week headers (Su Mo Tu etc) - HIDDEN */ .DayPicker_weekHeader { display: none !important; } .DayPicker_weekHeader_ul { display: none !important; } .DayPicker_weekHeader_li { display: none !important; } /* Calendar table */ .CalendarMonth_table { background-color: #1a1a1a; margin: 0; margin-top: 5px; /* Add space above the date grid */ } /* Calendar week (tr elements) */ .CalendarWeek { background-color: #1a1a1a; } /* Calendar days */ .CalendarDay__default { background-color: #1a1a1a; color: var(--text-primary); border: 1px solid #2a2a2a; font-weight: 400; height: 35px; vertical-align: middle; } .CalendarDay__default:hover { background-color: #2a2a2a; color: var(--text-primary); border: 1px solid var(--border-primary); } /* Fix for the container edges */ .DayPicker_transitionContainer { background-color: #1a1a1a; padding-bottom: 10px; } .DayPickerKeyboardShortcuts_buttonReset { display: none !important; /* Hide the question mark button */ } /* Today */ .CalendarDay__today { background-color: #2a2a2a; color: var(--color-info-hover); font-weight: 600; } /* Selected day */ .CalendarDay__selected { background-color: var(--color-primary); color: var(--text-primary); border: 1px solid var(--color-primary); font-weight: 600; } .CalendarDay__selected:hover { background-color: var(--color-primary-hover); border: 1px solid var(--color-primary-hover); } /* Selected span */ .CalendarDay__selected_span { background-color: rgba(13, 110, 253, 0.2); color: var(--text-primary); border: 1px solid rgba(13, 110, 253, 0.3); } /* Hovered span */ .CalendarDay__hovered_span { background-color: rgba(13, 110, 253, 0.1); border: 1px solid rgba(13, 110, 253, 0.2); } /* Blocked/disabled days */ .CalendarDay__blocked_calendar { background-color: #1a1a1a; color: var(--border-primary); text-decoration: line-through; } /* Outside month days */ .CalendarDay__blocked_out_of_range { background-color: #1a1a1a; color: #333; } /* Additional fixes for white edges */ .DateRangePickerInput { background-color: #1a1a1a; } .DateRangePicker { background-color: #1a1a1a; } .DayPicker__withBorder { background-color: #1a1a1a; box-shadow: none; } /* Force dark background on all date picker elements */ .SingleDatePicker, .SingleDatePickerInput { background-color: transparent; } /* Override any default white backgrounds */ div[class*="DayPicker"], div[class*="CalendarMonth"], div[class*="CalendarDay"] { background-color: #1a1a1a; } /* Fix spacing to prevent first row from being hidden */ .CalendarMonthGrid { background-color: #1a1a1a; } .CalendarMonthGrid__horizontal { background-color: #1a1a1a; } /* Ensure proper spacing for the first week */ .CalendarMonth tbody { background-color: #1a1a1a; } .CalendarMonth_table tbody tr:first-child { height: auto; min-height: 35px; } /* 09_modals.css */ /* ======================== */ /* MODAL DIALOGS */ /* File: 07_modals.css */ /* ======================== */ /* Modal base styling */ .modal-content { background-color: var(--bg-modal); border: 1px solid var(--border-primary); } .modal-header { background-color: var(--bg-modal-header); border-bottom: 1px solid var(--border-primary); color: var(--text-primary); /* This will use white ?*/ } .modal-body { background-color: var(--bg-modal); color: var(--text-secondary); } .modal-footer { background-color: var(--bg-modal-header); border-top: 1px solid var(--border-primary); } /* Close button */ #close-learn-more { background-color: var(--border-primary); border-color: var(--border-primary); } #close-learn-more:hover { background-color: #555; border-color: #555; } /* ======================== */ /* LEARN MORE MODAL SPECIFIC */ /* ======================== */ /* Learn More content styling */ .learn-more-content { font-size: var(--font-size-xl); line-height: 1.6; color: var(--text-secondary); } .learn-more-content h5 { color: var(--color-primary-light); font-weight: 600; border-bottom: 2px solid var(--border-primary); padding-bottom: var(--spacing-sm); } .learn-more-content h6 { color: #ffcc66; font-size: 18px; margin-top: var(--spacing-xl); } .learn-more-content p { color: var(--text-tertiary); margin-bottom: 15px; } .learn-more-content ul { margin-left: var(--spacing-xl); margin-bottom: 15px; } .learn-more-content li { margin-bottom: var(--spacing-sm); color: var(--text-tertiary); } .learn-more-content strong { color: var(--color-warning-hover); font-weight: 600; } /* Learn More Button */ #learn-more-button { border-color: var(--color-primary-light); color: var(--color-primary-light); font-weight: 500; transition: var(--transition-slow); } #learn-more-button:hover { background-color: var(--color-primary-light); color: var(--bg-modal-header); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(102, 179, 255, 0.4); } /* ======================== */ /* MODAL SCROLLBAR */ /* ======================== */ .modal-body::-webkit-scrollbar { width: 10px; } .modal-body::-webkit-scrollbar-track { background: var(--bg-modal-header); } .modal-body::-webkit-scrollbar-thumb { background: var(--border-primary); border-radius: 5px; } .modal-body::-webkit-scrollbar-thumb:hover { background: #555; } /* 10_scrollbars.css */ /* ======================== */ /* CUSTOM SCROLLBARS */ /* File: 08_scrollbars.css */ /* ======================== */ /* Dash DataTable scrollbars */ .dash-spreadsheet-container::-webkit-scrollbar, .dash-spreadsheet-inner::-webkit-scrollbar { width: 8px; height: 8px; } .dash-spreadsheet-container::-webkit-scrollbar-track, .dash-spreadsheet-inner::-webkit-scrollbar-track { background-color: var(--bg-primary); } .dash-spreadsheet-container::-webkit-scrollbar-thumb, .dash-spreadsheet-inner::-webkit-scrollbar-thumb { background-color: var(--border-secondary); border-radius: var(--radius-base); } .dash-spreadsheet-container::-webkit-scrollbar-thumb:hover, .dash-spreadsheet-inner::-webkit-scrollbar-thumb:hover { background-color: var(--border-tertiary); } /* 11_dbc_table.css */ /* ======================== */ /* DASH BOOTSTRAP COMPONENTS TABLE STYLES */ /* File: 10_dbc_table.css */ /* ======================== */ /* ======================== */ /* TABLE BODY STYLES */ /* ======================== */ /* Base table body cells */ .table tbody td { font-family: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: var(--font-size-base); /* 12px by default */ color: var(--text-primary); padding: var(--spacing-sm) var(--spacing-md); /* 8px 12px */ vertical-align: middle; } /* Alternative: If you want different font sizes for different screen sizes */ @media (min-width: 1px) { .table tbody td { font-size: var(--font-size-xs); /* 10px on mobile */ } } @media (min-width: 768px) { .table tbody td { font-size: var(--font-size-sm); /* 11px on tablet */ } } @media (min-width: 992px) { .table tbody td { font-size: var(--font-size-base); /* 12px on desktop */ } } /* ======================== */ /* TABLE HEADER STYLES */ /* ======================== */ /* Table header cells */ .table thead th { font-family: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: var(--font-size-md); /* 13px */ font-weight: 600; color: var(--text-primary); /*text-transform: uppercase; Optional: makes headers stand out */ letter-spacing: 0.5px; /* Optional: adds spacing between letters */ padding: var(--spacing-md) var(--spacing-md); /* 12px padding */ vertical-align: middle; border-bottom: 2px solid var(--border-primary); /* Thicker border for header */ } /* Alternative header styling (remove text-transform if not wanted) */ .table thead th { background-color: var(--bg-secondary); /* Slightly different background */ position: relative; } /* ======================== */ /* HOVER EFFECTS */ /* ======================== */ /* Row hover effect for better readability */ .table tbody tr:hover { background-color: var(--bg-hover) !important; transition: var(--transition-default); } /* Ensure text remains readable on hover */ .table tbody tr:hover td { color: var(--text-primary); } /* ======================== */ /* STRIPED TABLE VARIANT */ /* ======================== */ /* If using striped tables */ .table-striped tbody tr:nth-of-type(odd) { background-color: rgba(255, 255, 255, 0.02); } .table-striped tbody tr:hover { background-color: var(--bg-hover) !important; } /* ======================== */ /* BORDERED TABLE VARIANT */ /* ======================== */ .table-bordered { border: 1px solid var(--border-primary); } .table-bordered td, .table-bordered th { border: 1px solid var(--border-primary); } /* ======================== */ /* SMALL/COMPACT TABLE VARIANT */ /* ======================== */ .table-sm td, .table-sm th { padding: var(--spacing-xs) var(--spacing-sm); /* 4px 8px for compact */ font-size: var(--font-size-sm); /* 11px for compact */ } /* ======================== */ /* RESPONSIVE TABLE WRAPPER */ /* ======================== */ .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* Custom scrollbar for responsive tables */ .table-responsive::-webkit-scrollbar { height: 8px; } .table-responsive::-webkit-scrollbar-track { background-color: var(--bg-primary); } .table-responsive::-webkit-scrollbar-thumb { background-color: var(--border-secondary); border-radius: var(--radius-base); } .table-responsive::-webkit-scrollbar-thumb:hover { background-color: var(--border-tertiary); } /* ======================== */ /* SPECIFIC DBC.TABLE TARGETING */ /* ======================== */ /* More specific selectors for dbc.Table if needed */ div[class*="dash-table"] .table tbody td, div[class*="dash-bootstrap"] .table tbody td { font-family: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: var(--font-size-base); } div[class*="dash-table"] .table thead th, div[class*="dash-bootstrap"] .table thead th { font-family: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: var(--font-size-md); font-weight: 600; } /* ======================== */ /* CUSTOM FONT SIZE CLASSES */ /* ======================== */ /* Use these classes to override default sizes */ .table-font-xs tbody td { font-size: var(--font-size-xs) !important; } /* 10px */ .table-font-sm tbody td { font-size: var(--font-size-sm) !important; } /* 11px */ .table-font-md tbody td { font-size: var(--font-size-md) !important; } /* 13px */ .table-font-lg tbody td { font-size: var(--font-size-lg) !important; } /* 14px */ .table-header-xs thead th { font-size: var(--font-size-sm) !important; } /* 11px */ .table-header-sm thead th { font-size: var(--font-size-base) !important; } /* 12px */ .table-header-md thead th { font-size: var(--font-size-md) !important; } /* 13px */ .table-header-lg thead th { font-size: var(--font-size-lg) !important; } /* 14px */ .table-header-xl thead th { font-size: var(--font-size-xl) !important; } /* 16px */ /* ======================== */ /* ALIGNMENT UTILITIES */ /* ======================== */ .table .text-left { text-align: left !important; } .table .text-center { text-align: center !important; } .table .text-right { text-align: right !important; } .table .align-top { vertical-align: top !important; } .table .align-middle { vertical-align: middle !important; } .table .align-bottom { vertical-align: bottom !important; } /* ======================== */ /* COLOR CODING FOR VALUES (matching DataTable) */ /* ======================== */ .table .cell-value-positive, .table .text-success { color: var(--value-positive); font-weight: 500; } .table .cell-value-negative, .table .text-danger { color: var(--value-negative); font-weight: 500; }
/* 11_custom.css */
/* ============================================================================= PPE LLM — Cream / Charcoal Editorial Theme Source design: __temp_folder_home_testing/home_test_03.html + home_authed_03.html ---------------------------------------------------------------------------- STRUCTURE 1. Tokens & font import 2. Base reset + typography 3. Layout primitives (container, section, divider) 4. Bootstrap / DBC component overrides - Buttons, forms, cards, navbar, tabs, modals, offcanvas, alerts, badges, accordion, switches, tables, dropdowns 5. App-specific components - Hero, panel, ask, response, consensus, final, stat, pill, model dot, rank pill, stage divider, conversation 6. Markdown content 7. Responsive breakpoints ============================================================================= */ @import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&display=swap'); /* ============================================================================= 1. TOKENS ============================================================================= */ :root { /* Surfaces */ --cream: #f7f4ed; --offwhite: #fcfbf8; --charcoal: #1c1c1c; --ink: #1c1c1c; /* Text */ --muted: #5f5f5d; --quiet: #a09f9b; /* Borders & lines */ --border-soft: #eceae4; --border: #eceae4; --border-strong:rgba(28,28,28,0.35); --border-int: rgba(28,28,28,0.4); /* Accent gradients (hero / accent underline) */ --accent-coral: #f4a27a; --accent-warm: #f7c49a; --accent-coral-strong: #e8885a; --accent-amber: #b96b3a; /* Provider colors (dot badges, pills) */ --p-anth: #cc785c; --p-oai: #10a37f; --p-goog: #4285f4; --p-mistral: #fa520f; --p-xai: #1c1c1c; --p-meta: #1877f2; --p-deepseek: #4d6bfe; --p-default: #5f5f5d; /* Semantic */ --good: #21a056; --warn: #e8885a; --danger: #c0392b; --info: #4285f4; /* Shadows */ --shadow-1: rgba(28,28,28,0.06) 0 1px 0, rgba(28,28,28,0.04) 0 4px 12px; --shadow-2: rgba(28,28,28,0.08) 0 8px 24px, rgba(28,28,28,0.04) 0 1px 0; --shadow-strong:rgba(28,28,28,0.12) 0 14px 32px; --shadow-btn: rgba(255,255,255,0.18) 0 0.5px 0 0 inset, rgba(0,0,0,0.20) 0 0 0 0.5px inset, rgba(0,0,0,0.05) 0 1px 2px 0; /* Radii */ --r-xs: 4px; --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 22px; --r-pill: 9999px; /* Type */ --font: 'DM Sans', ui-sans-serif, system-ui, -apple-system, sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; /* Type scale (fluid) */ --fs-display: clamp(36px, 6vw, 60px); --fs-h1: clamp(32px, 5vw, 48px); --fs-h2: clamp(24px, 3.5vw, 36px); --fs-h3: 20px; --fs-h4: 17px; --fs-h5: 15px; --fs-h6: 13px; --fs-body: 15px; --fs-small: 13px; --fs-tiny: 11px; --fs-eyebrow: 12px; /* Spacing scale */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-7: 32px; --s-8: 48px; --s-9: 64px; --s-10: 96px; /* Motion */ --t-fast: 0.15s ease; --t-norm: 0.25s ease; --t-slow: 0.4s cubic-bezier(0.21,0.61,0.35,1); } /* Mobile bump: the fixed-pixel type tokens above (h3..tiny) don't scale — on phones they read too small. Override the tokens at <768px so every rule using var(--fs-*) picks up the larger value automatically. The clamp()-based --fs-display/h1/h2 already scale fluidly and are left alone. */ @media (max-width: 767.98px) { :root { --fs-h3: 22px; --fs-h4: 18px; --fs-h5: 16px; --fs-h6: 14px; --fs-body: 16px; --fs-small: 14px; --fs-tiny: 12px; --fs-eyebrow: 12px; } } /* ============================================================================= 2. BASE RESET + TYPOGRAPHY ============================================================================= */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; font-size: 16px; -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--cream); color: var(--charcoal); font-family: var(--font); font-size: var(--fs-body); line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: var(--font); color: var(--charcoal); margin: 0; font-weight: 600; letter-spacing: -0.4px; line-height: 1.15; } h1, .h1 { font-size: var(--fs-h1); letter-spacing: -1.2px; } h2, .h2 { font-size: var(--fs-h2); letter-spacing: -1px; } h3, .h3 { font-size: var(--fs-h3); letter-spacing: -0.4px; } h4, .h4 { font-size: var(--fs-h4); letter-spacing: -0.3px; } h5, .h5 { font-size: var(--fs-h5); letter-spacing: -0.2px; font-weight: 600; } h6, .h6 { font-size: var(--fs-h6); letter-spacing: 0; font-weight: 600; } /* `em` / `i` inherit size from their parent (h1, h2, p, …). 92_combined ships `body, body * { font-size: var(--font-size-base) !important }` which forces every descendant — including italics inside headings — down to ~12px, making the italic word visibly smaller than the rest of the heading. The !important inherit reasserts the parent's size. */ em, i { font-style: italic; font-size: inherit !important; font-weight: inherit; line-height: inherit; color: inherit; } p { margin: 0; font-size: var(--fs-body); line-height: 1.6; } small, .small { font-size: var(--fs-small); } a { color: var(--charcoal); text-decoration: none; transition: opacity var(--t-fast); } a:hover { opacity: 0.7; color: var(--charcoal); } ::selection { background: var(--accent-coral); color: var(--charcoal); } hr { border: 0; border-top: 1px solid var(--border-soft); margin: var(--s-6) 0; opacity: 1; } .text-muted { color: var(--muted) !important; } .text-quiet { color: var(--quiet) !important; } .text-light { color: var(--cream) !important; } .text-warning { color: var(--accent-coral-strong) !important; } .text-danger { color: var(--danger) !important; } .text-success { color: var(--good) !important; } .fst-italic { font-style: italic; } /* ============================================================================= 3. LAYOUT PRIMITIVES ============================================================================= */ .container, .container-fluid { max-width: 1160px; margin: 0 auto; padding: 0 var(--s-6); } .container-fluid { max-width: 100%; } main, .app-main { padding: var(--s-8) 0 var(--s-10); } .app-section-label { font-size: var(--fs-eyebrow); font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; } .app-eyebrow { display: inline-block; font-size: var(--fs-small); font-weight: 400; color: var(--muted); letter-spacing: 0.03em; border: 1px solid var(--border-soft); border-radius: var(--r-pill); padding: 4px 14px; background: rgba(252,251,248,0.7); } .app-divider { display: flex; align-items: center; gap: 12px; margin: var(--s-6) 0 14px; } .app-divider::before, .app-divider::after { content: ''; flex: 1; height: 1px; background: var(--border-soft); } .app-divider-label { font-size: var(--fs-eyebrow); font-weight: 500; color: var(--muted); letter-spacing: 0.04em; text-transform: uppercase; } /* ============================================================================= 4. COMPONENT OVERRIDES (Bootstrap / DBC) ============================================================================= */ /* ---- BUTTONS -------------------------------------------------------------- */ .btn { font-family: var(--font); font-size: var(--fs-small); font-weight: 500; padding: 8px 16px; border-radius: var(--r-sm); border: 1px solid transparent; transition: opacity var(--t-fast), background var(--t-fast), color var(--t-fast), border-color var(--t-fast); box-shadow: none; line-height: 1.2; } .btn:hover { opacity: 0.85; transform: none; box-shadow: none; } .btn:active { opacity: 0.95; } .btn:focus, .btn:focus-visible { outline: 2px solid var(--charcoal); outline-offset: 2px; box-shadow: none; } .btn-primary, .btn-danger, .btn-success, .btn-info { background: var(--charcoal); color: var(--cream); border-color: var(--charcoal); box-shadow: var(--shadow-btn); } .btn-primary:hover, .btn-danger:hover, .btn-success:hover, .btn-info:hover { background: var(--charcoal); color: var(--cream); border-color: var(--charcoal); opacity: 0.86; } .btn-secondary { background: var(--offwhite); color: var(--charcoal); border-color: var(--border-soft); } .btn-secondary:hover { background: var(--cream); color: var(--charcoal); border-color: var(--border-strong); } .btn-outline-primary, .btn-outline-secondary, .btn-outline-danger, .btn-outline-success, .btn-outline-info, .btn-outline-warning { background: transparent; color: var(--charcoal); border-color: var(--border-int); } .btn-outline-primary:hover, .btn-outline-secondary:hover, .btn-outline-danger:hover, .btn-outline-success:hover, .btn-outline-info:hover, .btn-outline-warning:hover { background: var(--charcoal); color: var(--cream); border-color: var(--charcoal); } .btn-link { background: transparent; color: var(--charcoal); border-color: transparent; text-decoration: underline; text-underline-offset: 2px; box-shadow: none; padding: 4px 8px; } .btn-link:hover { background: transparent; opacity: 0.65; text-decoration: underline; } .btn-sm { padding: 6px 12px; font-size: var(--fs-tiny); } .btn-lg { padding: 12px 22px; font-size: var(--fs-body); border-radius: var(--r-sm); } .btn:disabled, .btn.disabled { opacity: 0.5; cursor: not-allowed; } /* Pill button (used in nav, ask area, etc.) */ .app-btn-pill { border-radius: var(--r-pill) !important; padding: 8px 16px !important; } /* Primary CTA — large, charcoal, soft inset highlight */ .app-cta-primary { display: inline-flex; align-items: center; gap: 8px; background: var(--charcoal); color: var(--cream); font-family: var(--font); font-size: var(--fs-body); font-weight: 400; padding: 10px 22px; border-radius: var(--r-sm); border: 0; cursor: pointer; text-decoration: none; box-shadow: var(--shadow-btn); transition: opacity var(--t-fast); } .app-cta-primary:hover { opacity: 0.85; color: var(--cream); } .app-cta-ghost { display: inline-flex; align-items: center; gap: 8px; background: transparent; color: var(--charcoal); font-family: var(--font); font-size: var(--fs-body); font-weight: 400; padding: 10px 22px; border-radius: var(--r-sm); border: 1px solid var(--border-int); cursor: pointer; text-decoration: none; transition: opacity var(--t-fast); } .app-cta-ghost:hover { opacity: 0.7; color: var(--charcoal); } /* ---- FORMS --------------------------------------------------------------- */ /* Bootswatch DARKLY has `.form-control:focus, .form-control:valid, input[type="number"], input[type="text"], input.form-control { ... }` which paints inputs dark on focus/valid/text-input. Specificities mix (0,0,1,1) and (0,0,2,0). To beat them, our selector list must include matching specificities — hence the duplicates below. Without this, the first character typed turns the input dark via the `:valid` selector and renders text against a near-black background. */ input, textarea, select, input.form-control, textarea.form-control, select.form-control, input.form-select, select.form-select, input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="search"], input[type="tel"], input[type="url"], .form-control, .form-select, .form-control:valid, .form-select:valid { font-family: var(--font); font-size: var(--fs-body); color: var(--charcoal); background: var(--offwhite); border: 1px solid var(--border-soft); border-radius: var(--r-sm); padding: 10px 14px; transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast); line-height: 1.4; } input::placeholder, textarea::placeholder, .form-control::placeholder, .form-select::placeholder { color: var(--quiet); } input:focus, textarea:focus, select:focus, input.form-control:focus, textarea.form-control:focus, select.form-control:focus, .form-control:focus, .form-select:focus, .form-control:focus-visible, .form-select:focus-visible { border-color: var(--charcoal); background: var(--offwhite); box-shadow: 0 0 0 3px rgba(28,28,28,0.08); outline: 0; color: var(--charcoal); } /* Browser autofill — Chrome/Safari paint a yellow/coral background hint when an input has been autofilled (and sometimes when the field is "remembered" but not yet typed into). Override with a long inset shadow + matching text fill so autofilled inputs stay on-theme. */ input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active, input:-internal-autofill-selected, textarea:-webkit-autofill, select:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px var(--offwhite) inset !important; box-shadow: 0 0 0 1000px var(--offwhite) inset !important; -webkit-text-fill-color: var(--charcoal) !important; caret-color: var(--charcoal); transition: background-color 9999s ease-in-out 0s; border-color: var(--border-soft) !important; } textarea, .form-control[type="textarea"] { line-height: 1.5; } .form-label, label { font-family: var(--font); font-size: var(--fs-small); font-weight: 500; color: var(--charcoal); margin-bottom: 6px; } /* Input group (password input + toggle) */ .input-group { background: transparent; } .input-group > .form-control { border-right: 0; } .input-group > .btn { border: 1px solid var(--border-soft); border-left: 0; background: var(--offwhite); color: var(--muted); border-top-left-radius: 0; border-bottom-left-radius: 0; } .input-group > .btn:hover { background: var(--cream); color: var(--charcoal); opacity: 1; } /* Form check / checkbox / radio. `input.form-check-input` (0,1,1) beats Bootswatch DARKLY's `.form-check-input` (0,1,0) so our 16px sizing applies. */ input.form-check-input { width: 16px; height: 16px; border: 1px solid var(--border-int); background-color: var(--offwhite); cursor: pointer; flex-shrink: 0; } input.form-check-input:checked { background-color: var(--charcoal); border-color: var(--charcoal); } input.form-check-input:focus { border-color: var(--charcoal); box-shadow: 0 0 0 3px rgba(28,28,28,0.08); } /* Standalone .form-check (single checkbox + label, e.g. "I agree to the Terms" and the model picker rows). Flex + align-items: center vertically centres the box on the label. We reset Bootstrap's float/negative-margin layout on the input so flex + gap drives spacing instead. `.form-check-inline` (RadioItems inline) is excluded — Bootstrap relies on it being `display: inline-block` to lay out option pills. */ .form-check:not(.form-check-inline) { display: flex; align-items: center; gap: 8px; padding-left: 0; margin-bottom: 0; } .form-check:not(.form-check-inline) .form-check-input { float: none; margin: 0; } .form-check-label { font-size: var(--fs-small); color: var(--charcoal); cursor: pointer; line-height: 1.4; } .form-check-label a { color: var(--muted); text-decoration: underline; text-underline-offset: 2px; } .form-check-label a:hover { color: var(--charcoal); } /* Switch (DBC) */ .form-switch .form-check-input { width: 32px; height: 18px; background-color: var(--cream); border: 1px solid var(--border-int); background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%231c1c1c'/%3e%3c/svg%3e"); } .form-switch .form-check-input:checked { background-color: var(--charcoal); border-color: var(--charcoal); background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23f7f4ed'/%3e%3c/svg%3e"); } /* ---- CARDS --------------------------------------------------------------- */ .card { background: var(--offwhite); border: 1px solid var(--border-soft); border-radius: var(--r-lg); box-shadow: none; transition: border-color var(--t-fast), box-shadow var(--t-fast); color: var(--charcoal); } .card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-1); transform: none; } .card-header { background: transparent; border-bottom: 1px solid var(--border-soft); padding: 16px 20px; font-family: var(--font); font-size: var(--fs-small); font-weight: 600; color: var(--charcoal); border-radius: var(--r-lg) var(--r-lg) 0 0; } .card-body { padding: 20px; color: var(--charcoal); } .card-footer { background: transparent; border-top: 1px solid var(--border-soft); padding: 14px 20px; border-radius: 0 0 var(--r-lg) var(--r-lg); } /* Response / answer cards */ .response-card { background: var(--offwhite); border: 1px solid var(--border-soft); border-radius: var(--r-lg); box-shadow: none; transition: border-color var(--t-fast); } .response-card:hover { border-color: var(--border-strong); transform: none; box-shadow: none; } .response-card .card-header { font-weight: 500; } /* The dark ".response-card.border-warning" final-answer card was retired when the conversation UI was unified into one linear chat flow; its rules were removed. Stage-1/2 detail cards keep the light .response-card look above. */ /* ---- APP NAVBAR (custom 3-column nav) ------------------------------------ */ .app-navbar { background: var(--cream) !important; border-bottom: 1px solid var(--border-soft); box-shadow: none; padding: 10px 0 !important; position: sticky; top: 0; z-index: 1000; } .app-navbar .container { max-width: 1160px; } .app-navbar-inner { display: flex; align-items: center; gap: 16px; min-height: 56px; padding: 0 24px; width: 100%; flex-wrap: wrap; } .app-nav-left { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 0 0 auto; } .app-nav-center{ display: flex; align-items: center; justify-content: center; flex: 1 1 auto; min-width: 0; } .app-nav-right { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; } .app-nav-slot-left { width: 36px; display: flex; align-items: center; justify-content: center; } /* Collapse layout. - At lg+: visible inline; tabs absolutely centered vs the navbar inner; right cluster pinned to the right edge. The center is taken out of flow so it can be true-centered relative to the whole navbar (a simple `space-between` flex would only center it relative to the leftover space, which leans left of the brand). - Below lg: we DO NOT force `display:flex`. Bootstrap's `.collapse:not(.show) { display:none }` then hides the menu by default, and the toggler reveals it. Forcing display:flex at all widths was the bug that made the mobile menu always-open. */ @media (min-width: 992px) { .app-navbar-inner { position: relative; } .app-navbar.navbar .app-nav-collapse { flex: 1 1 auto; display: flex; align-items: center; justify-content: flex-end; gap: 16px; } .app-navbar.navbar .app-nav-collapse .app-nav-center { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); white-space: nowrap; } .app-navbar.navbar .app-nav-collapse .app-nav-right { margin-left: auto; } } @media (max-width: 991.98px) { /* Mobile: when the toggler is open (.show / .collapsing), stack the tabs and right cluster vertically. Default (closed) state is handled by Bootstrap's own `.collapse:not(.show){display:none}`. */ .app-navbar.navbar .app-nav-collapse.show, .app-navbar.navbar .app-nav-collapse.collapsing { display: flex; flex-direction: column; align-items: stretch; flex-basis: 100%; gap: 12px; padding-top: 12px; } .app-navbar.navbar .app-nav-collapse .app-nav-center { justify-content: flex-start; } .app-navbar.navbar .app-nav-collapse .app-nav-right { justify-content: flex-start; flex-wrap: wrap; } } .app-nav-conv-btn { color: var(--charcoal) !important; border-radius: var(--r-pill) !important; border: 0 !important; background: transparent !important; padding: 6px 10px !important; font-size: 18px !important; box-shadow: none !important; } .app-nav-conv-btn:hover { background: var(--offwhite) !important; opacity: 1 !important; color: var(--charcoal) !important; } .app-navbar-brand, .navbar-brand.app-navbar-brand { display: inline-flex; align-items: center; margin: 0; padding: 0; color: var(--charcoal) !important; font-family: var(--font); font-weight: 600; font-size: 16px; text-decoration: none; letter-spacing: -0.3px; } .app-brand { display: inline-flex; align-items: center; gap: 0; } .app-brand-mark { display: inline-flex; align-items: center; background: var(--charcoal); color: var(--cream); border-radius: var(--r-xs); padding: 1px 7px; font-size: 13px; font-weight: 600; margin-right: 6px; letter-spacing: 0; line-height: 1.4; } .app-brand-word { font-weight: 600; letter-spacing: -0.3px; color: var(--charcoal); } /* Centered nav-pills tabs in navbar */ .app-navbar-tabs { margin: 0 !important; padding: 4px !important; list-style: none; } .app-navbar-tabs .nav-link { color: var(--muted) !important; font-size: var(--fs-small); font-weight: 500; padding: 6px 14px !important; border-radius: var(--r-pill); transition: color var(--t-fast), background var(--t-fast); } .app-navbar-tabs .nav-link:hover { color: var(--charcoal) !important; background: transparent; opacity: 1; } .app-navbar-tabs .nav-link.active { background: var(--charcoal); color: var(--cream) !important; } /* Right-side nav controls */ .app-nav-link { font-size: var(--fs-small); font-weight: 500; color: var(--charcoal); padding: 6px 12px; border-radius: var(--r-pill); text-decoration: none; transition: opacity var(--t-fast); } .app-nav-link:hover { color: var(--charcoal); opacity: 0.65; } .app-nav-cta { padding: 7px 16px !important; font-size: var(--fs-small) !important; font-weight: 500 !important; } .app-nav-icon-link { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; color: var(--charcoal); background: var(--offwhite); border: 1px solid var(--border-soft); text-decoration: none; transition: background var(--t-fast), border-color var(--t-fast); } .app-nav-icon-link:hover { background: var(--cream); border-color: var(--border-strong); color: var(--charcoal); } .app-pill-warn { background: linear-gradient(135deg, rgba(244,162,122,0.18) 0%, rgba(247,196,154,0.18) 100%); border-color: rgba(244,162,122,0.45); color: var(--accent-amber); } .app-pill-warn:hover { color: var(--accent-amber); opacity: 0.85; } /* Mobile toggler — Bootstrap's `.navbar-expand-lg .navbar-toggler` rule auto-hides this at lg+. We only restyle it. */ .app-nav-toggler { border: 1px solid var(--border-soft) !important; background: var(--offwhite) !important; padding: 6px 10px !important; } .app-nav-toggler:focus { box-shadow: 0 0 0 3px rgba(28,28,28,0.08); } /* Below lg the collapse needs to break onto its own row (full width) so the stacked tabs + right cluster don't squeeze the brand. */ @media (max-width: 991.98px) { .app-navbar.navbar .app-nav-collapse { flex-basis: 100%; } } /* ---- NAVBAR (DBC defaults — kept for any other dbc.Navbar usages) -------- */ .navbar { background: var(--cream) !important; border-bottom: 1px solid var(--border-soft); box-shadow: none; padding: 12px 0; position: sticky; top: 0; z-index: 1000; } .navbar-dark, .navbar.bg-dark { background: var(--cream) !important; } .navbar .container, .navbar .container-fluid { max-width: 1160px; } .navbar-brand { font-family: var(--font); font-size: var(--fs-h5); font-weight: 600; color: var(--charcoal) !important; letter-spacing: -0.3px; display: inline-flex; align-items: center; gap: 10px; } .navbar-brand img { border-radius: 6px; } .navbar-toggler { border: 1px solid var(--border-soft); background: var(--offwhite); padding: 6px 10px; } .navbar-toggler-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%231c1c1c' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); width: 22px; height: 22px; } .nav-link { font-family: var(--font); font-size: var(--fs-small); font-weight: 500; color: var(--muted) !important; padding: 8px 14px !important; border-radius: var(--r-pill); transition: color var(--t-fast), background var(--t-fast); } .nav-link:hover { color: var(--charcoal) !important; background: var(--offwhite); opacity: 1; } .nav-link.text-light, .navbar-dark .nav-link { color: var(--muted) !important; } .nav-link.text-warning { color: var(--accent-coral-strong) !important; } /* Inline conversation icon button in nav (shown on board) */ #conversation-modal-btn { color: var(--charcoal) !important; border-radius: var(--r-pill); padding: 6px 10px !important; } #conversation-modal-btn:hover { background: var(--offwhite); opacity: 1; } /* Nav collapse (mobile menu) */ .navbar-collapse { padding-top: 4px; } /* ---- TABS (DBC) ---------------------------------------------------------- */ /* Default `.nav-tabs` keeps the editorial underline look. The pill segmented control lives on a separate opt-in class `.app-tabs-pill` (below) so that each `dbc.Tabs` callsite chooses its style explicitly via className, instead of every tab in the app being forced into pills. */ .nav-tabs { border-bottom: 1px solid var(--border-soft); gap: 4px; } .nav-tabs .nav-link { border: 0; border-bottom: 2px solid transparent; border-radius: 0; color: var(--muted) !important; background: transparent; padding: 10px 14px !important; font-weight: 500; font-size: var(--fs-small); } .nav-tabs .nav-link:hover { color: var(--charcoal) !important; background: transparent; border-bottom-color: var(--border-int); } .nav-tabs .nav-link.active { color: var(--charcoal) !important; background: transparent; border-bottom: 2px solid var(--charcoal); } /* Cream-on-cream pill segmented control. Opt in by adding `app-tabs-pill` to the `dbc.Tabs` className. The container is content-width (`width: fit-content`) so callers can center it with `margin: 0 auto`. */ .app-tabs-pill.nav-tabs { background: var(--cream); border: 1px solid var(--border-soft); border-bottom: 1px solid var(--border-soft); border-radius: var(--r-pill); padding: 5px; display: flex; width: fit-content; flex-wrap: wrap; gap: 2px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.6); } .app-tabs-pill.nav-tabs .nav-link { border: 0 !important; border-bottom: 0 !important; border-radius: var(--r-pill) !important; color: var(--muted) !important; background: transparent !important; padding: 8px 18px !important; margin: 0 !important; /* clear Bootstrap's nav-tabs negative margin */ font-weight: 500; font-size: var(--fs-small); transition: color .18s ease, background-color .18s ease; } .app-tabs-pill.nav-tabs .nav-link:hover { color: var(--charcoal) !important; background: transparent !important; border-bottom-color: transparent !important; } .app-tabs-pill.nav-tabs .nav-link.active { color: var(--cream) !important; background: var(--charcoal) !important; border-bottom: 0 !important; } .app-tabs-pill.nav-tabs .nav-link.disabled { color: var(--quiet) !important; opacity: 0.55; cursor: not-allowed; } /* Pill-tab variant (nav-pills) — used as segmented control */ .nav-pills { background: var(--offwhite); border: 1px solid var(--border-soft); border-radius: var(--r-pill); padding: 4px; display: inline-flex; gap: 4px; } .nav-pills .nav-link { border-radius: var(--r-pill); padding: 6px 14px !important; font-size: var(--fs-small); color: var(--muted) !important; background: transparent; } .nav-pills .nav-link.active { background: var(--charcoal); color: var(--cream) !important; } /* ---- MODALS / OFFCANVAS -------------------------------------------------- */ .modal-content, .offcanvas { background: var(--offwhite); color: var(--charcoal); border: 1px solid var(--border-soft); border-radius: var(--r-xl); box-shadow: var(--shadow-strong); } .offcanvas { border-radius: 0; } /* Bootswatch DARKLY paints `.modal-header`, `.modal-body`, and `.modal-footer` separately with a dark background-color and light text. The cream `.modal-content` shows through only the rounded border; the inside panels still go dark unless we explicitly clear their backgrounds and re-assert the charcoal text colour. */ .modal-header, .offcanvas-header { background: transparent; background-color: transparent; color: var(--charcoal); border-bottom: 1px solid var(--border-soft); padding: 18px 22px; } .modal-title, .offcanvas-title { font-family: var(--font); /* !important to defeat 92_combined.min.css `body * { font-size: ... !important }` */ font-size: var(--fs-h4) !important; font-weight: 600; color: var(--charcoal); letter-spacing: -0.3px; } .modal-body, .offcanvas-body { background: transparent; background-color: transparent; color: var(--charcoal); padding: 22px; } .modal-footer { background: transparent; background-color: transparent; color: var(--charcoal); border-top: 1px solid var(--border-soft); padding: 16px 22px; } .btn-close { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%231c1c1c'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e"); opacity: 0.6; } .btn-close:hover { opacity: 1; } .modal-backdrop, .offcanvas-backdrop { background-color: rgba(28,28,28,0.55); } .modal-backdrop.show, .offcanvas-backdrop.show { opacity: 1; } /* ---- ALERTS -------------------------------------------------------------- */ .alert { background: var(--offwhite); border: 1px solid var(--border-soft); color: var(--charcoal); border-radius: var(--r-md); padding: 14px 16px; box-shadow: none; font-size: var(--fs-small); } .alert-warning { background: linear-gradient(135deg, rgba(244,162,122,0.12) 0%, rgba(247,196,154,0.12) 100%); border-color: rgba(244,162,122,0.35); color: var(--charcoal); } .alert-warning .alert-link { color: var(--accent-amber); font-weight: 600; } .alert-danger { background: rgba(192,57,43,0.06); border-color: rgba(192,57,43,0.25); color: var(--danger); } .alert-success { background: rgba(33,160,86,0.08); border-color: rgba(33,160,86,0.30); color: var(--good); } .alert-info { background: rgba(66,133,244,0.06); border-color: rgba(66,133,244,0.20); color: var(--charcoal); } /* ---- BADGES / PILLS ------------------------------------------------------ */ .badge { font-family: var(--font); font-size: var(--fs-tiny); font-weight: 600; padding: 4px 10px; border-radius: var(--r-pill); line-height: 1.3; letter-spacing: 0; } .badge.bg-primary, .badge.bg-secondary, .badge.bg-info { background: var(--charcoal) !important; color: var(--cream); } .badge.bg-success { background: var(--good) !important; color: var(--cream); } .badge.bg-warning { background: var(--accent-coral) !important; color: var(--charcoal); } .badge.bg-danger { background: var(--danger) !important; color: var(--cream); } /* Model badge — uses inline style backgroundColor from Python. We round it like a pill and add some subtle structure. */ .model-badge { font-family: var(--font); font-size: var(--fs-tiny); font-weight: 600; padding: 4px 10px; border-radius: var(--r-pill); color: #fff; letter-spacing: 0; line-height: 1.3; } /* Rank pill (small numeric label) */ .rank-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 6px; font-size: 10px; font-weight: 700; background: var(--cream); color: var(--charcoal); border: 1px solid var(--border-soft); border-radius: var(--r-xs); } .rank-badge.rank-1 { background: var(--charcoal); color: var(--cream); border-color: var(--charcoal); } .rank-badge.rank-2 { background: var(--offwhite); color: var(--charcoal); } .rank-badge.rank-3 { background: var(--cream); color: var(--muted); } .rank-badge.rank-other { background: var(--cream); color: var(--quiet); } /* ---- ACCORDION ----------------------------------------------------------- */ .accordion { background: var(--offwhite); border: 1px solid var(--border-soft); border-radius: var(--r-lg); box-shadow: none; overflow: hidden; } .accordion-item { background: transparent; border: 0; border-top: 1px solid var(--border-soft); } .accordion-item:first-child { border-top: 0; } .accordion-button { background: transparent !important; color: var(--charcoal) !important; font-family: var(--font); font-size: var(--fs-small); font-weight: 600; padding: 14px 18px; box-shadow: none; } .accordion-button.collapsed { background: transparent !important; color: var(--charcoal) !important; } .accordion-button:not(.collapsed) { background: var(--cream) !important; color: var(--charcoal) !important; box-shadow: none; } .accordion-button:focus { box-shadow: 0 0 0 3px rgba(28,28,28,0.08); border-color: var(--charcoal); } .accordion-button::after { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%231c1c1c'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 01.708 0L8 10.293l5.646-5.647a.5.5 0 01.708.708l-6 6a.5.5 0 01-.708 0l-6-6a.5.5 0 010-.708z'/%3e%3c/svg%3e"); filter: none !important; } .accordion-button.collapsed::after { filter: none; } .accordion-body { padding: 12px 18px 18px; color: var(--charcoal); font-size: var(--fs-small); } /* ---- DROPDOWN ------------------------------------------------------------ */ .dropdown-menu { background: var(--offwhite); border: 1px solid var(--border-soft); border-radius: var(--r-md); box-shadow: var(--shadow-2); padding: 6px; font-size: var(--fs-small); } .dropdown-item { color: var(--charcoal); padding: 8px 12px; border-radius: var(--r-sm); } .dropdown-item:hover, .dropdown-item:focus { background: var(--cream); color: var(--charcoal); } /* ---- TOOLTIPS ------------------------------------------------------------ */ .tooltip-inner { background: var(--charcoal); color: var(--cream); font-family: var(--font); font-size: var(--fs-tiny); padding: 6px 10px; border-radius: var(--r-sm); max-width: 280px; } .tooltip .tooltip-arrow::before { border-top-color: var(--charcoal) !important; border-bottom-color: var(--charcoal) !important; } /* ---- TABLES -------------------------------------------------------------- */ .table { color: var(--charcoal); background: transparent; /* Bootstrap DARKLY pulls --bs-table-bg from --bs-body-bg (#222 dark) and applies it to every cell via .table>:not(caption)>*>* — re-pin to transparent so cream theme isn't punctured by dark cell fills. */ --bs-table-bg: transparent; --bs-table-color: var(--charcoal); } .table > :not(caption) > * > * { background-color: transparent; color: var(--charcoal); } .table th, .table td { border-color: var(--border-soft); padding: 12px 14px; font-size: var(--fs-small); vertical-align: middle; } .table thead th { /* 92_combined.min.css forces background: var(--bg-secondary) (dark rgb(35,35,35)) on .table thead th — override to cream so the muted-charcoal label color stays readable. */ background-color: var(--cream) !important; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; font-size: var(--fs-tiny); border-bottom: 1px solid var(--border-soft); } .table-hover > tbody > tr:hover > * { background: var(--cream); color: var(--charcoal); } .table-striped { --bs-table-striped-bg: var(--offwhite); --bs-table-striped-color: var(--charcoal); } .table-striped > tbody > tr:nth-of-type(odd) > * { background-color: var(--offwhite); color: var(--charcoal); } /* 92_combined.min.css applies a global `th:first-child, td:first-child` rule that forces `position: sticky` and a dark `--bg-secondary` fill on the first column of EVERY table on the site (intended for legacy admin DataTables). On the cream theme it produces dark-on-dark first columns in markdown answer tables (`.markdown-content table`) and in light-theme DataTables. Neutralize it globally; tables that genuinely need a sticky first column can opt back in via an explicit class. */ table th:first-child, table td:first-child { position: static !important; background-color: transparent !important; white-space: normal; z-index: auto; } /* Dash DataTable (admin page) — neutralize dark zebra stripes, dark header (#141414) and dark sticky-first-column (#252525) from 92_combined.min.css. Stripes go offwhite/cream, header gets cream with charcoal label text, and the sticky column inherits the row background instead of staying #252525. */ .dash-spreadsheet-inner tbody tr { background-color: var(--offwhite) !important; } .dash-spreadsheet-inner tbody tr:nth-child(even) { background-color: var(--cream) !important; } .dash-spreadsheet-inner td, .dash-spreadsheet-inner .dash-cell-value, .dash-spreadsheet-inner .dash-select-cell { color: var(--charcoal) !important; background-color: transparent !important; border-bottom: 1px solid var(--border-soft) !important; } /* 92_combined.min.css has `.dash-spreadsheet-inner td:first-child` and `.dash-spreadsheet-inner th:first-child` (specificity 0,1,2) forcing #252525 + sticky on the first body/header column, producing charcoal-text-on-#252525 — the dark-on-dark complained about in the admin Live tab. dash_table renders `<table><tbody><tr><th>` WITHOUT a `<thead>`, so any neutralizer scoped to `thead th` silently fails to match and the legacy rule wins. Drop the `tbody`/`thead` prefix so the override actually applies. */ .dash-spreadsheet-inner td:first-child, .dash-spreadsheet-inner th:first-child { background-color: transparent !important; position: static !important; } .dash-spreadsheet-inner tbody tr:hover { background-color: var(--border-soft) !important; } .dash-spreadsheet-inner tbody tr:hover td:first-child, .dash-spreadsheet-inner tbody tr:hover td:nth-child(2), .dash-spreadsheet-inner tbody tr:hover td:nth-child(3) { background-color: transparent !important; } .dash-spreadsheet .dash-header, .dash-spreadsheet-inner th, .dash-header th, .dash-filter th, .dash-spreadsheet .dash-header th:first-child, .dash-spreadsheet .dash-header th:nth-child(2), .dash-spreadsheet .dash-header th:nth-child(3) { background-color: var(--cream) !important; color: var(--charcoal) !important; border-bottom: 1px solid var(--border-soft) !important; } .dash-spreadsheet-inner .column-header-name, .dash-spreadsheet-inner .sort { color: var(--charcoal) !important; } /* Drop the dark-edge shadow that was meant to separate sticky columns on a dark theme — it just renders as a faint dark band on cream. */ .dash-spreadsheet-inner td:first-child::after, .dash-spreadsheet-inner th:first-child::after { display: none !important; } /* ---- TOAST --------------------------------------------------------------- */ .toast { background: var(--offwhite); border: 1px solid var(--border-soft); border-radius: var(--r-md); box-shadow: var(--shadow-2); color: var(--charcoal); } /* ============================================================================= 5. APP-SPECIFIC COMPONENTS ============================================================================= */ /* ---- HERO (board page) --------------------------------------------------- */ .app-hero { margin: 8px 0 32px; } .app-hero h1 { font-size: 48px; font-weight: 500; line-height: 1.0; letter-spacing: -1.4px; } .app-hero h1 em { font-style: italic; font-weight: 400; } .app-hero h1 em::after { content: ''; display: block; margin-top: 6px; height: 3px; border-radius: var(--r-pill); background: linear-gradient(90deg, var(--accent-coral), var(--accent-warm)); opacity: 0.7; width: min(220px, 60%); } .app-hero .sub { font-size: var(--fs-body); color: var(--muted); margin-top: 14px; max-width: 560px; line-height: 1.55; } /* ---- PANEL (top board members card) ------------------------------------- */ .app-panel { background: var(--offwhite); border: 1px solid var(--border-soft); border-radius: var(--r-xl); padding: 20px 24px; margin-bottom: 14px; box-shadow: var(--shadow-1); } .app-panel-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } .app-panel-label { font-size: var(--fs-small); font-weight: 600; color: var(--charcoal); } .app-panel-label .meta { font-weight: 400; color: var(--muted); margin-left: 6px; } /* "More models" trigger inside the panel — keep on one line. */ #open-settings-from-card { white-space: nowrap; flex-shrink: 0; } /* Provider/tier toggle pills inside panel */ #quick-model-selector { background: var(--offwhite) !important; border: 1px solid var(--border-soft) !important; border-radius: var(--r-xl) !important; padding: 18px 22px !important; margin-bottom: 14px !important; box-shadow: var(--shadow-1); } /* Shape only — colors come from the callback (provider buttons) or from Bootstrap's filled/outline class swap (tier buttons). Using !important on background/color/border here was the bug: it clobbered both signals so selected and unselected buttons looked identical. */ .quick-provider-btn, .quick-tier-btn { border-radius: var(--r-pill) !important; padding: 6px 14px !important; font-size: var(--fs-tiny) !important; font-weight: 500 !important; box-shadow: none !important; transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast); } /* Default (unselected) baseline. Provider buttons rely on the inline style="border-color: <color>; color: <color>" pushed by the callback, so we don't paint a background here — the cream body shows through. */ .quick-provider-btn.btn-outline-primary, .quick-provider-btn.btn-outline-secondary, .quick-tier-btn.btn-outline-secondary { background: var(--cream); } /* Selected tier — the callback flips outline=False, which makes dbc emit .btn-secondary instead of .btn-outline-secondary. Charcoal-fill it. */ .quick-tier-btn.btn-secondary, .quick-tier-btn.btn-secondary:not(:disabled):not(.disabled):active, .quick-tier-btn.btn-secondary:focus { background: var(--charcoal); border-color: var(--charcoal); color: var(--cream); } .quick-tier-btn.btn-secondary:hover { background: var(--charcoal); border-color: var(--charcoal); color: var(--cream); opacity: 0.88; } /* Selected provider — callback writes inline backgroundColor/borderColor/ color. With no !important on our side, the inline style wins. */ .quick-provider-btn:hover, .quick-tier-btn.btn-outline-secondary:hover { border-color: var(--border-strong); opacity: 0.85; } /* Switch row inside selector */ .cv-switch-row { margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--border-soft); } /* Model badge container with × remove button */ .model-badge-container { display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px 4px 4px; background: var(--cream); border: 1px solid var(--border-soft); border-radius: var(--r-pill); margin: 0 6px 6px 0; } .model-badge-container .model-badge { border-radius: var(--r-pill); padding: 3px 9px; } .remove-btn { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; background: rgba(28,28,28,0.06); color: var(--muted); font-size: 11px; line-height: 1; cursor: pointer; transition: background var(--t-fast), color var(--t-fast); } .remove-btn:hover { background: var(--charcoal); color: var(--cream); } /* ---- BOARD PAGE WRAP ---------------------------------------------------- */ .app-board { display: flex; flex-direction: column; gap: 0; padding-bottom: var(--s-9); } /* Section header (small caps + link) */ .app-section-head { display: flex; align-items: end; justify-content: space-between; margin: 56px 0 16px; padding-bottom: 12px; border-bottom: 1px solid var(--border-soft); } .app-section-title { font-size: var(--fs-h5); font-weight: 500; letter-spacing: -0.4px; color: var(--charcoal); } .app-section-link { font-size: var(--fs-small); font-weight: 500; color: var(--charcoal); text-decoration: underline; text-underline-offset: 2px; } .app-panel-wrap { margin-bottom: 14px; } /* ---- ASK (input area, dark card) ---------------------------------------- */ .app-ask { background: var(--charcoal); color: var(--cream); border-radius: var(--r-xl); padding: 22px 24px; box-shadow: var(--shadow-strong); margin-bottom: 14px; } .app-ask textarea, .app-ask .form-control, .app-ask .app-ask-textarea { background: transparent !important; border: 0 !important; color: var(--cream) !important; font-family: var(--font); /* !important needed: 92_combined ships `input,textarea,select { font-size: var(--font-size-base) !important }` (≈11–12px) that otherwise stomps this. Same trap as the em/i fix above. */ font-size: var(--fs-h5) !important; font-weight: 400; line-height: 1.4; padding: 4px 0 !important; resize: none !important; min-height: 80px; width: 100%; } .app-ask-attachments:empty { display: none; } .app-ask-attachments { margin: 8px 0 0; } .app-ask-attachments .badge, .app-ask-attachments img, .app-ask-attachments > * { display: inline-flex; align-items: center; margin: 6px 6px 0 0; } .app-ask textarea:focus, .app-ask .form-control:focus { background: transparent; border: 0; outline: 0; box-shadow: none; color: var(--cream); } .app-ask textarea::placeholder, .app-ask .form-control::placeholder { color: rgba(247,244,237,0.4); } .app-ask-bottom { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(247,244,237,0.10); } /* Inputs/buttons inside .app-ask take dark theme */ .app-ask .btn-outline-secondary, .app-ask .btn-outline-success { background: rgba(247,244,237,0.06); color: rgba(247,244,237,0.85); border: 1px solid rgba(247,244,237,0.18); border-radius: var(--r-pill) !important; } .app-ask .btn-outline-secondary:hover, .app-ask .btn-outline-success:hover { background: rgba(247,244,237,0.14); color: var(--cream); border-color: rgba(247,244,237,0.30); } .app-ask .btn-danger, .app-ask .btn-primary { background: var(--cream); color: var(--charcoal); border-color: var(--cream); border-radius: var(--r-pill) !important; padding: 8px 18px !important; font-weight: 600; } .app-ask .btn-danger:hover, .app-ask .btn-primary:hover { background: #fff; color: var(--charcoal); } .app-ask .form-select { background: rgba(247,244,237,0.06); border: 1px solid rgba(247,244,237,0.18); color: var(--cream); border-radius: var(--r-pill); padding: 6px 28px 6px 12px; font-size: var(--fs-tiny); } /* ---- RESPONSES GRID (stage 1) ------------------------------------------- */ .app-responses { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; } .app-response { background: var(--offwhite); border: 1px solid var(--border-soft); border-radius: var(--r-lg); padding: 16px 18px; transition: border-color var(--t-fast); } .app-response:hover { border-color: var(--border-strong); } /* ---- CONSENSUS BAND ----------------------------------------------------- */ .app-consensus { margin-top: 12px; background: linear-gradient(135deg, var(--cream) 0%, var(--offwhite) 100%); border: 1px solid var(--border-soft); border-radius: var(--r-xl); padding: 18px 22px; display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center; } .app-consensus-icon { width: 42px; height: 42px; border-radius: 50%; background: var(--charcoal); color: var(--cream); display: flex; align-items: center; justify-content: center; font-size: 18px; } .app-consensus-text { font-size: var(--fs-small); line-height: 1.45; } .app-consensus-text strong { font-weight: 600; } .app-consensus-text .sub { color: var(--muted); margin-top: 2px; display: block; } .app-consensus-score { text-align: right; } .app-consensus-score .num { font-size: 26px; font-weight: 500; letter-spacing: -0.6px; } .app-consensus-score .lbl { font-size: var(--fs-tiny); color: var(--muted); margin-top: 2px; } /* ---- QUESTION ROW (above stage 1) --------------------------------------- */ .app-question { background: var(--offwhite); border: 1px solid var(--border-soft); border-radius: var(--r-xl); padding: 18px 22px; margin-bottom: 14px; display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: center; } .app-question-tag { display: inline-block; font-size: 10px; font-weight: 700; color: var(--charcoal); padding: 3px 10px; background: var(--cream); border-radius: var(--r-pill); border: 1px solid var(--border-soft); letter-spacing: 0.04em; text-transform: uppercase; } .app-question-text { font-size: var(--fs-body); line-height: 1.5; font-weight: 400; color: var(--charcoal); } .app-question-time { font-size: var(--fs-tiny); color: var(--muted); white-space: nowrap; } /* ---- LIVE DOT / STATUS PILL --------------------------------------------- */ .app-pill { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-tiny); font-weight: 500; padding: 6px 12px; background: var(--offwhite); border: 1px solid var(--border-soft); border-radius: var(--r-pill); color: var(--charcoal); } .app-live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--good); animation: app-live 2s ease-in-out infinite; } @keyframes app-live { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } } /* ---- AVATAR -------------------------------------------------------------- */ .app-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--charcoal); color: var(--cream); display: inline-flex; align-items: center; justify-content: center; font-size: var(--fs-small); font-weight: 600; flex-shrink: 0; } /* ---- AUTH CARD ---------------------------------------------------------- */ .app-auth-shell { min-height: calc(100vh - 100px); padding: 8vh 0 var(--s-9); position: relative; overflow: hidden; } .app-auth-shell::before { content: ''; position: absolute; inset: -80px; background: radial-gradient(ellipse 600px 350px at 20% 30%, rgba(255,180,160,0.22) 0%, transparent 70%), radial-gradient(ellipse 500px 300px at 80% 70%, rgba(180,195,255,0.16) 0%, transparent 65%); pointer-events: none; z-index: 0; } .app-auth-shell > * { position: relative; z-index: 1; } .app-auth-card { max-width: 460px; margin: 0 auto; background: var(--offwhite); border: 1px solid var(--border-soft); border-radius: var(--r-xl); padding: 36px 36px 32px; box-shadow: var(--shadow-2); } .app-auth-title { text-align: center; margin-bottom: 4px; } .app-auth-subtitle { text-align: center; color: var(--muted); font-size: var(--fs-small); margin-bottom: 28px; } /* "Forgot password?" link sits on its own line under the password field, right-aligned, so it doesn't fight the terms-checkbox row for space. */ .app-auth-forgot-row { display: flex; justify-content: flex-end; margin: 4px 0 4px; } .app-auth-forgot { font-size: var(--fs-small); color: var(--muted); text-decoration: underline; text-underline-offset: 2px; } .app-auth-forgot:hover { color: var(--charcoal); opacity: 1; } /* Confirmation banner above the auth card (e.g. after password reset) */ .app-auth-banner { max-width: 460px; margin: 0 auto 14px; text-align: center; border-radius: var(--r-md); } /* Auth page brand block */ .app-auth-logo-link { display: flex; justify-content: center; margin-bottom: 28px; text-decoration: none; } .app-auth-icon-wrap { display: flex; justify-content: center; margin: 4px 0 18px; } .app-auth-icon { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(135deg, rgba(244,162,122,0.22) 0%, rgba(247,196,154,0.22) 100%); border: 1px solid rgba(244,162,122,0.45); color: var(--accent-amber); font-size: 22px; } .app-auth-icon.app-auth-icon--warn { background: linear-gradient(135deg, rgba(244,162,122,0.22) 0%, rgba(247,196,154,0.22) 100%); color: var(--accent-amber); } .app-auth-icon.app-auth-icon--danger { background: rgba(192,57,43,0.10); border-color: rgba(192,57,43,0.30); color: var(--danger); } .app-auth-foot-note { text-align: center; color: var(--muted); font-size: var(--fs-small); margin: 14px 0 0; } .app-auth-brand .app-brand-mark { font-size: 14px; padding: 2px 9px; } .app-auth-brand .app-brand-word { font-size: 18px; } .app-auth-back-wrap { text-align: center; margin-top: 28px; } .app-auth-back { color: var(--muted); font-size: var(--fs-small); text-decoration: none; } .app-auth-back:hover { color: var(--charcoal); } .app-link { color: var(--charcoal); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; font-weight: 500; } .app-link:hover { opacity: 0.65; } /* Auth tabs use the standard pill style (`app-tabs-pill` on the dbc.Tabs); `app-auth-tabs` only adds horizontal centering inside the card and a bottom margin before the form. */ .app-auth-tabs.app-tabs-pill { margin: 0 auto 22px; } .app-auth-card .tab-content { padding-top: 4px; } .app-auth-card .form-control { background: var(--cream); } .app-auth-card .form-control:focus { background: var(--offwhite); } /* Sign-in / Create-Account buttons in auth card */ .app-auth-card .btn-primary, .app-auth-card .btn-danger { width: 100%; padding: 12px 22px !important; font-size: var(--fs-body) !important; font-weight: 500; border-radius: var(--r-sm); margin-top: 6px; } /* Password requirement indicators */ .password-requirements { background: var(--cream); border: 1px solid var(--border-soft); border-radius: var(--r-md); padding: 12px 14px; margin-bottom: 14px; } .password-requirements > small { color: var(--muted); font-size: var(--fs-tiny); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 500; margin-bottom: 8px; } .pwd-list { margin-top: 8px; display: flex; flex-direction: column; gap: 4px; } .pwd-row { display: flex; align-items: center; } .pwd-bullet { font-size: 6px !important; color: var(--quiet); width: 12px; text-align: center; line-height: 1; } .pwd-text { font-size: var(--fs-small); color: var(--muted); } /* "Met" state — callback swaps fa-circle → fa-check and adds .met to .pwd-row */ .pwd-row.met .pwd-bullet, .pwd-row.met .fa-check { color: var(--good); font-size: 10px !important; } .pwd-row.met .pwd-text { color: var(--charcoal); } /* ---- HOMEPAGE-LIKE LANDINGS (about, hero on auth, etc.) ----------------- */ .app-page-hero { text-align: center; padding: var(--s-10) 0 var(--s-9); position: relative; overflow: hidden; } .app-page-hero::before { content: ''; position: absolute; inset: -80px; background: radial-gradient(ellipse 700px 400px at 20% 30%, rgba(255,180,160,0.22) 0%, transparent 70%), radial-gradient(ellipse 600px 350px at 80% 20%, rgba(255,210,140,0.16) 0%, transparent 65%), radial-gradient(ellipse 400px 250px at 60% 85%, rgba(180,195,255,0.14) 0%, transparent 65%); pointer-events: none; z-index: 0; } .app-page-hero > * { position: relative; z-index: 1; } .app-page-hero h1 { font-size: var(--fs-display); font-weight: 600; line-height: 1.08; letter-spacing: -1.5px; max-width: 780px; margin: 24px auto 18px; } .app-page-hero h1 em { position: relative; font-style: normal; font-weight: 600; display: inline-block; } .app-page-hero h1 em::after { content: ''; position: absolute; left: 0; right: 0; bottom: -3px; height: 3px; border-radius: var(--r-pill); background: linear-gradient(90deg, var(--accent-coral), var(--accent-warm)); opacity: 0.7; } .app-page-hero .lead { font-size: var(--fs-h5); color: var(--muted); line-height: 1.55; max-width: 540px; margin: 0 auto 36px; } /* ---- ACCOUNT PAGE ------------------------------------------------------- */ .app-account-page { max-width: 880px !important; margin: 0 auto; padding: var(--s-7) var(--s-6) var(--s-9) !important; } .app-account-header { margin-bottom: var(--s-7); padding-top: var(--s-3); } .app-account-title { font-size: clamp(28px, 4vw, 40px); font-weight: 600; letter-spacing: -1px; line-height: 1.1; margin-top: 12px; } .app-account-title em { font-style: italic; font-weight: 600; } .app-account-body { display: flex; flex-direction: column; gap: 18px; } .app-account-body .card { border-radius: var(--r-xl); } .app-account-body .card-header { font-size: var(--fs-h5); font-weight: 600; padding: 18px 22px; } .app-account-body .card-body { padding: 22px; } .app-account-logout { margin-top: 12px !important; } /* ---- ADMIN PAGE --------------------------------------------------------- */ .app-admin-shell { min-height: calc(100vh - 60px); } .app-admin-page { max-width: 1240px !important; margin: 0 auto; padding: var(--s-7) var(--s-6) var(--s-9) !important; } .app-admin-header { margin-bottom: var(--s-6); } .app-admin-title { font-size: clamp(28px, 4vw, 40px); font-weight: 600; letter-spacing: -1px; margin: 12px 0 8px; } .app-admin-title em { font-style: italic; font-weight: 600; } .app-admin-sub { color: var(--muted); font-size: var(--fs-h5); } .app-admin-period-row { display: flex; align-items: center; gap: 12px; margin: var(--s-6) 0 var(--s-5); } .app-admin-period-label { color: var(--charcoal); font-size: var(--fs-small); font-weight: 500; margin: 0; } .app-admin-period .Select-control, .app-admin-period .Select__control { background: var(--offwhite); border: 1px solid var(--border-soft); border-radius: var(--r-sm); min-width: 220px; color: var(--charcoal); } .app-admin-period .Select-value-label, .app-admin-period .Select__single-value { color: var(--charcoal); } .app-admin-tab { padding-top: var(--s-5); } .app-admin-placeholder { color: var(--muted); padding: var(--s-7); text-align: center; background: var(--offwhite); border: 1px solid var(--border-soft); border-radius: var(--r-lg); } /* Cards inside admin tabs (rendered by callbacks with various class names) */ .app-admin-tab .card { background: var(--offwhite); border-color: var(--border-soft); } .app-admin-tab .card-body { color: var(--charcoal); } .app-admin-tab .table thead th { color: var(--muted); } /* ---- LEGAL PAGES -------------------------------------------------------- */ .app-legal-page { padding-bottom: var(--s-9); } .app-legal-header { text-align: center; padding: var(--s-7) 0 var(--s-6); border-bottom: 1px solid var(--border-soft); margin-bottom: var(--s-6); } .app-legal-title { font-size: clamp(28px, 4vw, 40px); font-weight: 600; letter-spacing: -1px; margin-top: 12px; } .app-legal-body { max-width: 880px; margin: 0 auto; } .app-legal-card { background: var(--offwhite); border: 1px solid var(--border-soft); border-radius: var(--r-xl); padding: var(--s-7); box-shadow: var(--shadow-1); color: var(--charcoal); line-height: 1.65; font-size: var(--fs-body); } .app-legal-card h1, .app-legal-card h2, .app-legal-card h3 { color: var(--charcoal); margin: var(--s-5) 0 var(--s-3); } .app-legal-card p, .app-legal-card li { color: var(--charcoal); } .app-legal-card a { color: var(--charcoal); text-decoration: underline; text-underline-offset: 2px; } /* Termly policy embed — rendered inside an iframe so the SDK script can actually load. The iframe is given a generous min-height so the policy text shows without a tiny scrollbox; the policy itself scrolls if longer. */ .app-legal-iframe { width: 100%; min-height: 70vh; border: 1px solid var(--border-soft); border-radius: var(--r-xl); background: var(--offwhite); box-shadow: var(--shadow-1); } /* ---- BILLING PAGE ------------------------------------------------------- */ .app-billing-page { max-width: 880px !important; margin: 0 auto; padding: var(--s-7) var(--s-6) var(--s-9) !important; } .app-billing-header { text-align: center; margin: 12px 0 var(--s-6); } .app-billing-title { font-size: clamp(28px, 4vw, 40px); font-weight: 600; letter-spacing: -1px; line-height: 1.1; margin: 12px 0 8px; } .app-billing-title em { font-style: italic; font-weight: 600; } .app-billing-sub { color: var(--muted); font-size: var(--fs-h5); } .app-billing-feedback { max-width: 640px; margin: 0 auto var(--s-4); } .app-billing-tabs-wrap { display: flex; flex-direction: column; } /* The pill-segmented container is `width: fit-content`, so centering uses auto-margins (not `justify-content`, which would no-op on a shrink-wrapped flex container). */ .app-billing-tabs-wrap .app-tabs-pill { margin-left: auto; margin-right: auto; } .app-billing-tab-intro { color: var(--muted); text-align: center; margin: var(--s-4) 0 var(--s-3); font-size: var(--fs-small); } .app-billing-back { text-align: center; margin-top: var(--s-7); padding-bottom: var(--s-7); } /* Plan / topup cards (selectors used by existing components) */ .app-billing-page .card { border-radius: var(--r-xl); } .app-billing-page .card.shadow-lg, .app-billing-page .card.border-primary { border-color: var(--charcoal) !important; box-shadow: var(--shadow-2); } /* ---- ABOUT PAGE BODY (long-form) ---------------------------------------- */ .app-prose { max-width: 720px; margin: 0 auto; padding: var(--s-8) var(--s-6) var(--s-9); color: var(--charcoal); } .app-prose h2 { font-size: var(--fs-h2); margin-top: var(--s-9); margin-bottom: var(--s-4); letter-spacing: -1px; } .app-prose h3 { font-size: var(--fs-h3); margin-top: var(--s-6); margin-bottom: var(--s-3); } .app-prose p { font-size: var(--fs-body); color: var(--charcoal); margin-bottom: var(--s-4); line-height: 1.65; } .app-prose p em { color: var(--muted); } .app-prose .pull-center { text-align: center; color: var(--muted); font-style: italic; margin: var(--s-7) 0; font-size: var(--fs-h5); } .app-prose hr { margin: var(--s-7) 0; } /* ---- BANNERS ------------------------------------------------------------- */ #usage-warning-banner .alert, .usage-warning-banner .alert { border-radius: var(--r-md); margin-bottom: 14px; } /* Validation pending banner — soft coral */ .app-banner-warning { display: flex; gap: 12px; align-items: center; background: linear-gradient(135deg, rgba(244,162,122,0.12) 0%, rgba(247,196,154,0.12) 100%); border: 1px solid rgba(244,162,122,0.35); border-radius: var(--r-md); padding: 14px 18px; color: var(--charcoal); font-size: var(--fs-small); margin-bottom: 14px; } .app-banner-warning .icon { width: 32px; height: 32px; border-radius: 50%; background: var(--accent-coral); color: var(--cream); display: inline-flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; } /* ---- FOOTER ------------------------------------------------------------- */ .app-footer { margin-top: var(--s-9); padding: var(--s-6) 0 var(--s-4); border-top: 1px solid var(--border-soft); color: var(--muted); font-size: var(--fs-tiny); line-height: 1.6; text-align: center; } .app-footer a { color: var(--muted); text-decoration: underline; text-underline-offset: 2px; } .app-footer a:hover { color: var(--charcoal); } /* ============================================================================= 6. MARKDOWN CONTENT ============================================================================= */ .markdown-content { color: var(--charcoal); font-size: var(--fs-body); line-height: 1.65; } .markdown-content > *:first-child { margin-top: 0 !important; } .markdown-content > *:last-child { margin-bottom: 0 !important; } .markdown-content h1 { font-size: 22px; margin: 16px 0 10px; letter-spacing: -0.5px; } .markdown-content h2 { font-size: 19px; margin: 14px 0 8px; letter-spacing: -0.4px; } .markdown-content h3 { font-size: 16px; margin: 12px 0 6px; } .markdown-content h4, .markdown-content h5, .markdown-content h6 { font-size: var(--fs-small); margin: 10px 0 4px; } .markdown-content p { margin: 0 0 10px; } .markdown-content ul, .markdown-content ol { margin: 0 0 10px; padding-left: 22px; } .markdown-content li { margin-bottom: 4px; } .markdown-content strong { color: var(--charcoal); font-weight: 600; } .markdown-content em { color: inherit; } .markdown-content code { font-family: var(--font-mono); font-size: 13px; padding: 1px 6px; background: var(--cream); border: 1px solid var(--border-soft); border-radius: var(--r-xs); color: var(--charcoal); } .markdown-content pre { background: var(--cream); border: 1px solid var(--border-soft); border-radius: var(--r-md); padding: 12px 14px; overflow-x: auto; margin: 0 0 10px; } .markdown-content pre code { border: 0; padding: 0; background: transparent; font-size: 13px; } .markdown-content blockquote { border-left: 3px solid var(--accent-coral); margin: 10px 0; padding: 4px 0 4px 14px; color: var(--muted); font-style: italic; } .markdown-content table { width: 100%; border-collapse: collapse; margin: 10px 0; } .markdown-content th, .markdown-content td { border: 1px solid var(--border-soft); padding: 8px 12px; font-size: var(--fs-small); text-align: left; } .markdown-content th { background: var(--cream); font-weight: 600; } .markdown-content a { color: var(--charcoal); text-decoration: underline; text-underline-offset: 2px; } .markdown-content a:hover { opacity: 0.7; } /* Font-size re-assertion ------------------------------------------------------ 92_combined.min.css ships a global `body, body * { font-size: var(--font-size-base) !important }` (12px desktop / 10px mobile). Because it targets every descendant *directly* with !important, it beats the inherited sizes declared above and flattens all answer text to 12px — this is why the answer read as "very small". Re-declare the scale with !important on the text-bearing elements themselves so the intended hierarchy renders. Body copy is bound to the same token as the question input (.app-ask-textarea → var(--fs-h5), see §forms) so the answer reads at the same size as the prompt the user typed. Same `body *` trap documented at the em/i fix (§2) and the chat-bubble fix (§conversation thread). */ .markdown-content, .markdown-content p, .markdown-content li, .markdown-content blockquote { font-size: var(--fs-h5) !important; } /* 15px / 16px mobile — matches the question input */ .markdown-content h1 { font-size: 22px !important; } .markdown-content h2 { font-size: 19px !important; } .markdown-content h3 { font-size: 16px !important; } .markdown-content h4, .markdown-content h5, .markdown-content h6 { font-size: var(--fs-small) !important; } .markdown-content th, .markdown-content td { font-size: var(--fs-small) !important; } .markdown-content code, .markdown-content pre code { font-size: 13px !important; } /* Stage-2 review snippets are intentionally de-emphasised (rendered with className "markdown-content small"); keep their prose a notch below the primary answer rather than matching it. Higher specificity (.small) wins. */ .markdown-content.small, .markdown-content.small p, .markdown-content.small li { font-size: var(--fs-small) !important; } /* ============================================================================= 7. RESPONSIVE ============================================================================= */ @media (max-width: 992px) { main, .app-main { padding: var(--s-7) 0 var(--s-9); } .app-hero h1 { font-size: 36px; letter-spacing: -1px; } .app-responses { grid-template-columns: 1fr; } .app-consensus, .app-question { grid-template-columns: 1fr; text-align: left; gap: 8px; } .app-consensus-score { text-align: left; } } @media (max-width: 768px) { .container, .container-fluid { padding: 0 16px; } .navbar .container { padding: 0 16px; } .nav-pills .nav-link { padding: 5px 11px !important; font-size: var(--fs-tiny); } .app-page-hero { padding: var(--s-9) 0 var(--s-8); } .app-page-hero h1 { letter-spacing: -0.7px; } .app-prose { padding: var(--s-7) var(--s-4) var(--s-8); } .app-auth-shell { padding: 4vh 0 var(--s-8); } .app-auth-card { padding: 28px 22px; } .app-ask { padding: 18px 18px; } /* Bump these two on mobile beyond --fs-body: the hero sub is muted gray and the ask textarea is light-on-dark — both feel smaller than they are at 16px due to low contrast. 17px reads comfortably. !important needed to beat 92_combined's `p`/`textarea`/`.form-control` !important rules — see comment block at top of section 2. */ .app-hero .sub { font-size: 17px !important; } .app-ask textarea, .app-ask .form-control { font-size: 17px !important; } } /* ============================================================================= PRINT ============================================================================= */ @media print { .navbar, .app-footer, .app-ask, footer { display: none !important; } body { background: #fff; color: #000; } .card, .response-card { border: 1px solid #ccc; box-shadow: none; } } /* ============================================================== */ /* Radio + checkbox alignment / spacing — APP-WIDE. */ /* Targets bare inputs (Dash dcc.RadioItems / dcc.Checklist render*/ /* plain <input type="radio">), explicitly NOT Bootstrap's */ /* `.form-check-input` which has its own positioning above. */ /* Fixes two visible bugs in vertically-stacked option lists: */ /* - circle touching text with no gap */ /* - circle centre sitting above text x-height (looks unaligned)*/ /* ============================================================== */ input[type="radio"]:not(.form-check-input), input[type="checkbox"]:not(.form-check-input) { margin-right: 8px !important; margin-left: 0 !important; vertical-align: middle !important; position: relative; top: -1px; /* fine-tune so it lines up with x-height */ cursor: pointer; } /* Vertical option lists need breathing room between rows. Dash's class name varies by version (kebab-case in newer builds, PascalCase in older) — match either. */ .dash-radio-items label, .dash-checklist label, [class*="RadioItems"] label, [class*="Checklist"] label { line-height: 1.55; margin-bottom: 6px; } /* ============================================================== */ /* Survey form (/survey) */ /* Bootstrap's default form-label is ~14px which reads as small */ /* on a 720px-wide column with multi-line questions. Bump it up, */ /* scoped under .survey-form so the rest of the app is unchanged. */ /* ============================================================== */ /* All sizes use !important because Bootstrap (and the existing app theme) ship deeper-specificity selectors that otherwise win. */ .survey-form .form-label { font-size: 1.3rem !important; /* ~20.8px — question text */ font-weight: 600 !important; line-height: 1.4 !important; color: #1f1d1a !important; margin-bottom: 8px !important; } .survey-form .form-text { font-size: 1.02rem !important; /* ~16.3px — sub-label hint */ color: #6c6862 !important; margin-top: 4px !important; } .survey-form textarea { font-size: 1.08rem !important; /* ~17.3px — typing area */ line-height: 1.5 !important; padding: 12px 14px !important; border-radius: 6px !important; } .survey-form input[type='radio'] + label, .survey-form input[type='checkbox'] + label, .survey-form .dash-radio-items label, .survey-form .dash-checklist label, .survey-form label { font-size: 1.05rem !important; /* ~16.8px — option labels */ margin-right: 14px !important; } .survey-form .badge { font-size: 1rem !important; padding: 0.55rem 0.95rem !important; } @media (max-width: 480px) { .survey-form .form-label { font-size: 1.18rem !important; } .survey-form .form-text { font-size: 0.98rem !important; } .survey-form textarea { font-size: 1.05rem !important; } } /* ============================================================== */ /* Conversation thread ("Previous in this conversation") */ /* The chat bubbles previously had no CSS at all, so they read as */ /* transparent blocks with body text. Give them a clear outline, */ /* a slight background tint vs body, and a readable font size. */ /* 92_combined.min.css ships `body * { font-size: ... !important }` */ /* so every font-size here must use !important to win. */ /* ============================================================== */ #conversation-thread-view .chat-bubble { /* Match the .app-panel look (model selector card): soft border, soft shadow, generous radius, off-white surface. */ background: var(--offwhite); border: 1px solid var(--border-soft); border-radius: var(--r-xl); box-shadow: var(--shadow-1); padding: 14px 18px !important; /* override Bootstrap .p-2 */ font-size: 0.95rem !important; /* ~15.2px — bigger than .small (13px) */ line-height: 1.55; /* Prevent expanded "Show more" content from overflowing the bubble's flex parent on narrow screens. min-width:0 lets the bubble shrink below its intrinsic content width; max-width:100% keeps it inside the 85%-capped wrapper; overflow-wrap handles long URLs/tokens. */ min-width: 0; max-width: 100%; overflow-wrap: anywhere; word-break: break-word; } /* Same for the flex wrappers around each bubble — without min-width:0, a non-wrapping child (pre/table) forces the flex item wider than 85%. */ #conversation-thread-view .d-flex { min-width: 0; } /* Markdown content that doesn't wrap naturally: code blocks, tables, and images. Scroll horizontally inside the bubble instead of pushing the whole card past the viewport. */ #conversation-thread-view .chat-bubble pre, #conversation-thread-view .chat-bubble table { max-width: 100%; overflow-x: auto; } #conversation-thread-view .chat-bubble code { white-space: pre-wrap; word-break: break-word; } #conversation-thread-view .chat-bubble img { max-width: 100%; height: auto; } #conversation-thread-view .chat-bubble *:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6):not(small) { /* `.small` (13px) is used on the question text and the answer's markdown wrapper; bump descendants back up to body-ish size. Excludes headings (keep their own sizing) and the <small> elements used for the bottom metadata row (timestamp + models-used). */ font-size: 0.95rem !important; } #conversation-thread-view .chat-bubble-meta { font-size: 0.7rem !important; color: var(--muted) !important; cursor: default; } /* Both question and answer bubbles share the .app-panel look defined above. Right-alignment (set by the parent flex container) is enough to distinguish the user's question from the panel's answer. */ #conversation-thread-view > div:first-child h6 { /* Small muted label above the conversation history. */ font-size: 0.75rem !important; color: var(--muted); letter-spacing: 0; } /* Collapsed long answers. The markdown is rendered ONCE; this class caps the height and fades the cut-off edge into the bubble background. The server toggle callback only swaps this class on/off (no second copy of the content, unlike the old collapsed/expanded dual-render). */ #conversation-thread-view .thread-answer-collapsed { max-height: 240px; overflow: hidden; position: relative; } #conversation-thread-view .thread-answer-collapsed::after { content: ""; position: absolute; left: 0; right: 0; /* Anchor the fade to the clamp line (240px max-height − 56px), NOT to bottom:0 — when a >500-char answer happens to render shorter than the clamp, the gradient then falls outside the element and is clipped by overflow:hidden instead of washing out fully visible text. */ top: calc(240px - 56px); height: 56px; background: linear-gradient(180deg, transparent, var(--offwhite)); pointer-events: none; } /* Full-screen "Loading conversation…" overlay. Toggled client-side via the `running=` parameter of the open/show-earlier callbacks, so it appears the instant a conversation is clicked — before the server responds — and is visible regardless of scroll position (position: fixed). */ #thread-loading-overlay { display: none; } #thread-loading-overlay.thread-overlay-visible { display: flex; position: fixed; inset: 0; z-index: 2000; align-items: center; justify-content: center; background: rgba(28, 28, 28, 0.35); /* Feedback only, never a gate: clicks pass through, so even a stray overlay (e.g. a phantom round trip outlasting the debounce below) can't block interaction. */ pointer-events: none; /* Debounce: Dash re-fires the click listeners with phantom (None) triggers whenever the sidebar/thread is rebuilt; those requests resolve in a fast PreventUpdate but still toggle this class via `running=`. Fading in after 250ms means only genuinely slow loads ever show the overlay — phantom round trips finish before it appears. */ opacity: 0; animation: thread-overlay-fade 0.15s ease-out 0.25s forwards; } @keyframes thread-overlay-fade { to { opacity: 1; } } /* Sidebar rebuilds (and their phantom refires) only happen while the conversations drawer is open; a REAL conversation click always closes the drawer instantly (clientside toggle). Suppressing the overlay while the drawer shows removes the remaining phantom-flash window without hiding it during a real load. */ body:has(#conversation-modal.show) #thread-loading-overlay { display: none !important; } #thread-loading-overlay .thread-overlay-card { display: flex; align-items: center; background: var(--charcoal, #1c1c1c); color: #fff; border-radius: var(--r-xl, 16px); box-shadow: var(--shadow-1); padding: 14px 22px; font-size: 0.95rem; } /* Board-deliberation expander attached under the newest answer bubble. It is a SIBLING of .chat-bubble (not a descendant), so it escapes the ".chat-bubble *" font-normalizer and its nested stage cards keep their own sizing. Keep it visually subtle (flush accordion, muted toggle) and make sure wide content (tabs, tables, code) scrolls inside instead of blowing out the 85%-capped column. */ #conversation-thread-view .bubble-deliberation { min-width: 0; max-width: 100%; overflow-x: auto; } #conversation-thread-view .bubble-deliberation .accordion-button { font-size: 0.8rem !important; color: var(--muted); padding: 6px 10px; background: transparent; } #conversation-thread-view .bubble-deliberation .accordion-button:not(.collapsed) { color: var(--charcoal); box-shadow: none; } #conversation-thread-view .bubble-deliberation .accordion-item { background: transparent; border: 0; } #conversation-thread-view .bubble-deliberation .accordion-body { padding: 10px 4px 4px; } /* Keep the nested review/response cards from overflowing the column. */ #conversation-thread-view .bubble-deliberation .response-card { max-width: 100%; } #conversation-thread-view .bubble-deliberation pre, #conversation-thread-view .bubble-deliberation table { max-width: 100%; overflow-x: auto; } /* ============================================================== */ /* Conversations drawer (#conversation-modal) — mobile width */ /* Bootstrap's offcanvas-start defaults to 100% width below 576px,*/ /* which on phones reads as a full-screen takeover. Cap it so the */ /* drawer feels like a panel, not a page. */ /* ============================================================== */ @media (max-width: 575.98px) { #conversation-modal.offcanvas-start { width: 55vw !important; max-width: 55vw !important; min-width: 240px; /* don't get unreadably narrow on tiny screens */ } } /* Conversation list items inside the drawer — bump up from the default .small (13px) / <small> tag size so titles and dates are easier to read. Needs !important to defeat 92_combined.min.css. */ #conversation-list .small, #conversation-list p.small { font-size: 0.95rem !important; } #conversation-list small { font-size: 0.85rem !important; }