/* Custom styles for Portfolio Manager Dashboard */ /* ============================================================ SHIMMER SKELETON — loading placeholder for heavy containers ============================================================ */ @keyframes shimmer { 0% { background-position: -600px 0; } 100% { background-position: 600px 0; } } .skeleton-line { background: linear-gradient(90deg, #1e2d42 25%, #2a3f5a 50%, #1e2d42 75%); background-size: 600px 100%; animation: shimmer 1.4s ease-in-out infinite; border-radius: 4px; margin-bottom: 8px; } /* Pre-built skeleton blocks of different sizes */ .skeleton-title { height: 18px; width: 40%; } .skeleton-row-lg { height: 14px; width: 95%; } .skeleton-row-md { height: 14px; width: 70%; } .skeleton-row-sm { height: 14px; width: 50%; } .skeleton-table { height: 12px; width: 100%; margin-bottom: 4px; } /* Wrapper: shows skeleton, hides content while loading */ .skeleton-wrapper { padding: 8px 0; } /* Dash _dash-loading class is set while any callback Output targeting the same container is in-flight. We use it to show a skeleton placeholder inside dcc.Loading. */ ._dash-loading .skeleton-wrapper { display: block !important; } ._dash-loading > *:not(.skeleton-wrapper) { visibility: hidden; } /* ============================================================ COMPACT DatePickerSingle — match 28px button/input height ============================================================ */ .compact-datepicker .DateInput, .compact-datepicker .SingleDatePickerInput { height: 28px !important; } .compact-datepicker .DateInput_input { height: 28px !important; padding: 2px 8px !important; font-size: 12px !important; line-height: 24px !important; } .compact-datepicker .SingleDatePickerInput__withBorder { border-radius: 4px !important; } /* Marquee animation for auto-scrolling pills */ @keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } .marquee-container { animation: marquee 60s linear infinite; display: inline-flex; flex-wrap: nowrap; gap: 12px; flex-shrink: 0; white-space: nowrap; width: auto; } .marquee-container:hover { animation-play-state: paused; } /* ============================================================ COMPACT DATATABLE ROWS Root cause: Dash DataTable bundle injects: .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner tr { min-height: 30px; height: 30px; } We must override this with equal or higher specificity + !important. ============================================================ */ /* Override the 30px row height baked into Dash DataTable bundle */ .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner tr { min-height: 0 !important; height: auto !important; } /* Lock padding, font-size, line-height — overrides Bootstrap 5 and DataTable bundle */ .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner td.dash-cell { padding: 1px 5px !important; font-size: 12px !important; line-height: 1.2 !important; } .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner th.dash-header { padding: 3px 5px !important; font-size: 11px !important; line-height: 1.2 !important; } /* Zero out inner content div padding and min-height */ .dash-spreadsheet .dash-cell-value, .dash-spreadsheet .dash-cell-value-container { padding: 0 !important; line-height: 1.2 !important; min-height: 0 !important; } /* Markdown cells: remove default element margins/padding that bloat row height */ /* Covers:

,