/* 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; } .response-card.border-warning { /* the final card */ background: var(--charcoal); color: var(--cream); border-color: var(--charcoal) !important; border-radius: var(--r-xl); padding: 8px 12px; } .response-card.border-warning .card-body { color: var(--cream); padding: 28px 32px; } .response-card.border-warning .text-muted { color: rgba(247,244,237,0.55) !important; } .response-card.border-warning .markdown-content { color: rgba(247,244,237,0.92); } .response-card.border-warning .markdown-content h1, .response-card.border-warning .markdown-content h2, .response-card.border-warning .markdown-content h3, .response-card.border-warning .markdown-content h4, .response-card.border-warning .markdown-content h5, .response-card.border-warning .markdown-content h6, .response-card.border-warning .markdown-content strong { color: var(--cream); } .response-card.border-warning a { color: var(--cream); text-decoration: underline; } /* ---- 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; } /* Markdown tables inside the dark answer card (.response-card.border-warning): `.markdown-content th { background: var(--cream) }` paired with the light text color the dark card forces on .markdown-content makes the header row light-on-light. Pin th text to charcoal so cream-bg headers stay readable; td cells already inherit the dark card bg with cream text and are fine. */ .response-card.border-warning .markdown-content th { color: var(--charcoal); } /* ---- 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; } /* ============================================================================= 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; } .response-card.border-warning .card-body { padding: 22px 22px; } } @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; } .response-card.border-warning .card-body { padding: 20px 18px; } } /* ============================================================================= 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; } /* ============================================================== */ /* 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; }