/* Custom CSS for FO Shiny App */
/* DIAGNOSTIC: If you can see a red border on the body, this CSS is loading */
/* Version: 2026-02-20-10-25-NUCLEAR-FIX */
/* ============================================================
TOOLTIP THEME STYLES (consolidated from app_ui.R inline CSS)
============================================================ */
/* Consistent tooltip styling for both regular tooltips and DataTable tooltips */
.tooltip-inner,
.dataTables_wrapper .tooltip-inner {
background-color: rgba(0, 0, 0, 0.9);
color: white;
border-radius: 6px;
padding: 5px 8px;
font-size: 11px;
max-width: 220px;
}
/* ============================================================
DARK MODE TOOLTIP STYLING - ULTRA-AGGRESSIVE FIX
============================================================ */
/* IMPORTANT: Tooltips are appended as CHILDREN of body, not siblings!
Bootstrap creates: ...
So we use descendant selector: body.dark-mode .tooltip
NOT sibling selector: body.dark-mode ~ .tooltip (doesn't work!)
*/
/* ULTRA-SPECIFIC: When body has dark-mode class, style ALL tooltip-inner elements */
/* Using multiple selectors to catch all possible cases */
body.dark-mode .tooltip .tooltip-inner,
html body.dark-mode .tooltip .tooltip-inner,
body.dark-mode > .tooltip .tooltip-inner,
body.dark-mode .tooltip-inner,
body.dark-mode .dataTables_wrapper .tooltip .tooltip-inner {
background-color: rgba(255, 255, 255, 0.95) !important;
color: #000000 !important;
border: none !important;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}
/* Also support dark-mode-tooltip class added by JavaScript (fallback) */
html .dark-mode-tooltip .tooltip-inner,
.dark-mode-tooltip .tooltip-inner,
.tooltip.dark-mode-tooltip .tooltip-inner {
background-color: rgba(255, 255, 255, 0.95) !important;
color: #000000 !important;
border: none !important;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}
/* Tooltip arrow consistency */
.tooltip.bs-tooltip-top .arrow::before,
.dataTables_wrapper .tooltip.bs-tooltip-top .arrow::before {
border-top-color: rgba(0, 0, 0, 0.9);
}
/* Dark mode arrows - ULTRA-AGGRESSIVE with multiple selectors */
body.dark-mode .tooltip.bs-tooltip-top .arrow::before,
html body.dark-mode .tooltip.bs-tooltip-top .arrow::before,
body.dark-mode > .tooltip.bs-tooltip-top .arrow::before,
html .dark-mode-tooltip.bs-tooltip-top .arrow::before,
.dark-mode-tooltip.bs-tooltip-top .arrow::before {
border-top-color: rgba(255, 255, 255, 0.95) !important;
}
/* Other arrow directions */
.tooltip.bs-tooltip-bottom .arrow::before {
border-bottom-color: rgba(0, 0, 0, 0.9);
}
body.dark-mode .tooltip.bs-tooltip-bottom .arrow::before,
html body.dark-mode .tooltip.bs-tooltip-bottom .arrow::before,
body.dark-mode > .tooltip.bs-tooltip-bottom .arrow::before,
html .dark-mode-tooltip.bs-tooltip-bottom .arrow::before,
.dark-mode-tooltip.bs-tooltip-bottom .arrow::before {
border-bottom-color: rgba(255, 255, 255, 0.95) !important;
}
.tooltip.bs-tooltip-left .arrow::before {
border-left-color: rgba(0, 0, 0, 0.9);
}
body.dark-mode .tooltip.bs-tooltip-left .arrow::before,
html body.dark-mode .tooltip.bs-tooltip-left .arrow::before,
body.dark-mode > .tooltip.bs-tooltip-left .arrow::before,
html .dark-mode-tooltip.bs-tooltip-left .arrow::before,
.dark-mode-tooltip.bs-tooltip-left .arrow::before {
border-left-color: rgba(255, 255, 255, 0.95) !important;
}
.tooltip.bs-tooltip-right .arrow::before {
border-right-color: rgba(0, 0, 0, 0.9);
}
body.dark-mode .tooltip.bs-tooltip-right .arrow::before,
html body.dark-mode .tooltip.bs-tooltip-right .arrow::before,
body.dark-mode > .tooltip.bs-tooltip-right .arrow::before,
html .dark-mode-tooltip.bs-tooltip-right .arrow::before,
.dark-mode-tooltip.bs-tooltip-right .arrow::before {
border-right-color: rgba(255, 255, 255, 0.95) !important;
}
/* ============================================================
END TOOLTIP THEME STYLES
============================================================ */
/* Fix selectize dropdown arrow visibility in dark mode */
/* Only change the arrow color to white in dark mode, keep all other styling as default */
/* Dark mode - make the dropdown arrow white */
body.dark-mode .selectize-control .selectize-input::after {
border-color: rgba(255, 255, 255, 0.8) transparent transparent transparent !important;
}
/* Pastel-green highlighting for "Add X" options in selectize dropdown.
* Uses the unified `--fo-asset` pastel-green (release `5.0.0.9063`,
* Items 1 + 2 palette unification) so the affirmative-action colour
* reads the same as the Dashboard pastel triad app-wide. */
/* Light mode - apply to dropdown options */
.selectize-dropdown .selectize-add-option {
color: var(--fo-asset) !important;
font-weight: 500;
}
/* Light mode - apply to selected item */
.selectize-control .selectize-input .selectize-add-option {
color: var(--fo-asset) !important;
font-weight: 500;
}
/* Dark mode - apply to dropdown options */
body.dark-mode .selectize-dropdown .selectize-add-option {
color: var(--fo-asset) !important;
font-weight: 500;
}
/* Dark mode - apply to selected item */
body.dark-mode .selectize-control .selectize-input .selectize-add-option {
color: var(--fo-asset) !important;
font-weight: 500;
}
/* Conditional Tooltips - Simplified since JavaScript handles visibility */
/* Basic rule for tooltips - keep interactive */
body [data-toggle="tooltip"] {
pointer-events: auto;
}
/* TOOLTIP ICON VISIBILITY CONTROL */
/* Handles two patterns:
1. tooltip() function:
2. DataTables:
*/
/* Hide tooltip icons when help mode is NOT active */
/* Pattern 1: Icon inside element with data-toggle */
body:not(.help-mode-active) [data-toggle="tooltip"] i.fa-info-circle,
body:not(.help-mode-active) [data-toggle="tooltip"] i.fa.fa-info-circle,
body:not(.help-mode-active) span[data-toggle="tooltip"] i.fa-info-circle,
body:not(.help-mode-active) span[data-toggle="tooltip"] i.fa.fa-info-circle,
/* Pattern 2: Icon itself has data-toggle (DataTables) */
body:not(.help-mode-active) i.fa-info-circle[data-toggle="tooltip"],
body:not(.help-mode-active) i.fa.fa-info-circle[data-toggle="tooltip"],
body:not(.help-mode-active) i[class*="fa-info-circle"][data-toggle="tooltip"],
/* Pattern 3: Icons in box headers, card headers, and other containers */
body:not(.help-mode-active) .card-title [data-toggle="tooltip"] i.fa-info-circle,
body:not(.help-mode-active) .card-title span[data-toggle="tooltip"],
body:not(.help-mode-active) .box-title [data-toggle="tooltip"] i.fa-info-circle,
body:not(.help-mode-active) .box-title span[data-toggle="tooltip"],
body:not(.help-mode-active) h3 [data-toggle="tooltip"] i.fa-info-circle,
body:not(.help-mode-active) h3 span[data-toggle="tooltip"],
body:not(.help-mode-active) h4 [data-toggle="tooltip"] i.fa-info-circle,
body:not(.help-mode-active) h4 span[data-toggle="tooltip"],
/* Pattern 4: Icons in input labels and form controls */
body:not(.help-mode-active) label [data-toggle="tooltip"] i.fa-info-circle,
body:not(.help-mode-active) label span[data-toggle="tooltip"],
body:not(.help-mode-active) .form-group label [data-toggle="tooltip"] i.fa-info-circle,
body:not(.help-mode-active) .form-group label span[data-toggle="tooltip"],
body:not(.help-mode-active) .control-label [data-toggle="tooltip"] i.fa-info-circle,
body:not(.help-mode-active) .control-label span[data-toggle="tooltip"],
body:not(.help-mode-active) .shiny-input-container label [data-toggle="tooltip"] i.fa-info-circle,
body:not(.help-mode-active) .shiny-input-container label span[data-toggle="tooltip"] {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
/* font-size: 0 removed - was conflicting with tooltip sizing CSS */
width: 0 !important;
height: 0 !important;
}
/* Hide pseudo-elements for tooltip icons when help mode is NOT active */
body:not(.help-mode-active) [data-toggle="tooltip"] i.fa-info-circle::before,
body:not(.help-mode-active) [data-toggle="tooltip"] i.fa.fa-info-circle::before,
body:not(.help-mode-active) span[data-toggle="tooltip"] i.fa-info-circle::before,
body:not(.help-mode-active) span[data-toggle="tooltip"] i.fa.fa-info-circle::before,
body:not(.help-mode-active) i.fa-info-circle[data-toggle="tooltip"]::before,
body:not(.help-mode-active) i.fa.fa-info-circle[data-toggle="tooltip"]::before,
/* Box headers and titles */
body:not(.help-mode-active) .card-title [data-toggle="tooltip"]::before,
body:not(.help-mode-active) .card-title span[data-toggle="tooltip"]::before,
body:not(.help-mode-active) .box-title [data-toggle="tooltip"]::before,
body:not(.help-mode-active) .box-title span[data-toggle="tooltip"]::before,
body:not(.help-mode-active) h3 [data-toggle="tooltip"]::before,
body:not(.help-mode-active) h3 span[data-toggle="tooltip"]::before,
body:not(.help-mode-active) h4 [data-toggle="tooltip"]::before,
body:not(.help-mode-active) h4 span[data-toggle="tooltip"]::before,
/* Labels and form controls */
body:not(.help-mode-active) label [data-toggle="tooltip"]::before,
body:not(.help-mode-active) label span[data-toggle="tooltip"] i.fa-info-circle::before,
body:not(.help-mode-active) .form-group label [data-toggle="tooltip"]::before,
body:not(.help-mode-active) .form-group label span[data-toggle="tooltip"]::before,
body:not(.help-mode-active) .control-label [data-toggle="tooltip"]::before,
body:not(.help-mode-active) .control-label span[data-toggle="tooltip"]::before,
body:not(.help-mode-active) .shiny-input-container label [data-toggle="tooltip"]::before,
body:not(.help-mode-active) .shiny-input-container label span[data-toggle="tooltip"]::before {
content: none !important;
display: none !important;
}
/* When help mode is OFF, hide the icon inside [data-toggle="tooltip"]
spans -- but NEVER the parent span itself. The parent may legitimately
contain user-visible text (e.g. the summary page wraps "Assets",
"Liabilities", etc. in tt_span() which renders
Assets).
Hiding the span erased that text; we only hide the icon child. */
body:not(.help-mode-active) span[data-toggle="tooltip"] > i.fa-info-circle,
body:not(.help-mode-active) span[data-toggle="tooltip"] > i.fa.fa-info-circle {
display: none !important;
visibility: hidden !important;
}
/* SHOW tooltip icons when help mode IS active */
/* Pattern 1: Icon inside element with data-toggle */
body.help-mode-active [data-toggle="tooltip"] i.fa-info-circle,
body.help-mode-active [data-toggle="tooltip"] i.fa.fa-info-circle,
body.help-mode-active span[data-toggle="tooltip"] i.fa-info-circle,
body.help-mode-active span[data-toggle="tooltip"] i.fa.fa-info-circle,
/* Pattern 2: Icon itself has data-toggle (DataTables) */
body.help-mode-active i.fa-info-circle[data-toggle="tooltip"],
body.help-mode-active i.fa.fa-info-circle[data-toggle="tooltip"],
body.help-mode-active i[class*="fa-info-circle"][data-toggle="tooltip"],
/* Pattern 3: Icons in box headers and titles */
body.help-mode-active .card-title [data-toggle="tooltip"] i.fa-info-circle,
body.help-mode-active .card-title span[data-toggle="tooltip"],
body.help-mode-active .box-title [data-toggle="tooltip"] i.fa-info-circle,
body.help-mode-active .box-title span[data-toggle="tooltip"],
body.help-mode-active h3 [data-toggle="tooltip"] i.fa-info-circle,
body.help-mode-active h3 span[data-toggle="tooltip"],
body.help-mode-active h4 [data-toggle="tooltip"] i.fa-info-circle,
body.help-mode-active h4 span[data-toggle="tooltip"],
/* Pattern 4: Icons in input labels and form controls */
body.help-mode-active label [data-toggle="tooltip"] i.fa-info-circle,
body.help-mode-active label span[data-toggle="tooltip"],
body.help-mode-active .form-group label [data-toggle="tooltip"] i.fa-info-circle,
body.help-mode-active .form-group label span[data-toggle="tooltip"],
body.help-mode-active .control-label [data-toggle="tooltip"] i.fa-info-circle,
body.help-mode-active .control-label span[data-toggle="tooltip"],
body.help-mode-active .shiny-input-container label [data-toggle="tooltip"] i.fa-info-circle,
body.help-mode-active .shiny-input-container label span[data-toggle="tooltip"] {
display: inline-block !important;
visibility: visible !important;
opacity: 1 !important;
width: auto !important;
height: auto !important;
/* CRITICAL: Add sizing properties for maximum specificity */
font-size: 0.65em !important;
vertical-align: super !important;
position: relative !important;
top: -0.3em !important;
line-height: 0 !important;
margin-left: 3px !important;
cursor: help !important;
}
/* Show pseudo-elements for tooltip icons when help mode IS active */
body.help-mode-active [data-toggle="tooltip"] i.fa-info-circle::before,
body.help-mode-active [data-toggle="tooltip"] i.fa.fa-info-circle::before,
body.help-mode-active span[data-toggle="tooltip"] i.fa-info-circle::before,
body.help-mode-active span[data-toggle="tooltip"] i.fa.fa-info-circle::before,
body.help-mode-active i.fa-info-circle[data-toggle="tooltip"]::before,
body.help-mode-active i.fa.fa-info-circle[data-toggle="tooltip"]::before,
/* Box headers and titles */
body.help-mode-active .card-title [data-toggle="tooltip"]::before,
body.help-mode-active .card-title span[data-toggle="tooltip"] i.fa-info-circle::before,
body.help-mode-active .box-title [data-toggle="tooltip"]::before,
body.help-mode-active .box-title span[data-toggle="tooltip"] i.fa-info-circle::before,
body.help-mode-active h3 [data-toggle="tooltip"]::before,
body.help-mode-active h3 span[data-toggle="tooltip"] i.fa-info-circle::before,
body.help-mode-active h4 [data-toggle="tooltip"]::before,
body.help-mode-active h4 span[data-toggle="tooltip"] i.fa-info-circle::before,
/* Labels and form controls */
body.help-mode-active label [data-toggle="tooltip"]::before,
body.help-mode-active label span[data-toggle="tooltip"] i.fa-info-circle::before,
body.help-mode-active .form-group label [data-toggle="tooltip"]::before,
body.help-mode-active .form-group label span[data-toggle="tooltip"]::before,
body.help-mode-active .control-label [data-toggle="tooltip"]::before,
body.help-mode-active .control-label span[data-toggle="tooltip"]::before,
body.help-mode-active .shiny-input-container label [data-toggle="tooltip"]::before,
body.help-mode-active .shiny-input-container label span[data-toggle="tooltip"]::before {
display: inline-block !important;
visibility: visible !important;
}
/* Visual indicator when help mode is active */
body.help-mode-active [data-toggle="tooltip"] {
cursor: help;
}
/* Hover effect for tooltip icons when help mode is active */
body.help-mode-active [data-toggle="tooltip"] i.fa-info-circle:hover,
body.help-mode-active [data-toggle="tooltip"] i.fa.fa-info-circle:hover {
opacity: 0.8;
}
/* ============================================================
TOOLTIP ICON SIZING - UNIVERSAL RULE
============================================================ */
/* ULTRA-AGGRESSIVE TOOLTIP ICON SIZING */
/* Using maximum CSS specificity with body prefix */
/* This MUST override any other CSS including Font Awesome defaults */
/* NUCLEAR OPTION: Target ALL fa-info-circle icons */
body i.fa-info-circle,
body i.fa.fa-info-circle {
font-size: 0.65em !important;
vertical-align: super !important;
position: relative !important;
top: -0.3em !important;
line-height: 0 !important;
margin-left: 3px !important;
cursor: help !important;
}
/* Extra specificity for tooltip contexts */
body [data-toggle="tooltip"] i.fa-info-circle,
body [data-toggle="tooltip"] i.fa.fa-info-circle,
body span[data-toggle="tooltip"] i.fa-info-circle,
body span[data-toggle="tooltip"] i.fa.fa-info-circle,
body i.fa-info-circle[data-toggle="tooltip"],
body i.fa.fa-info-circle[data-toggle="tooltip"],
/* Table context with body prefix */
body table i.fa-info-circle,
body thead i.fa-info-circle,
body th i.fa-info-circle,
body td i.fa-info-circle,
/* Box/card title context with body prefix */
body .card-title i.fa-info-circle,
body .box-title i.fa-info-circle,
body .card-header i.fa-info-circle,
body h3 i.fa-info-circle,
body h4 i.fa-info-circle,
/* Label context with body prefix */
body label i.fa-info-circle,
body .form-group i.fa-info-circle,
body .control-label i.fa-info-circle,
body .shiny-input-container i.fa-info-circle {
font-size: 0.65em !important;
vertical-align: super !important;
position: relative !important;
top: -0.3em !important;
line-height: 0 !important;
margin-left: 3px !important;
cursor: help !important;
}
/* ============================================================
END TOOLTIP ICON SIZING
============================================================ */
/* Class used by JavaScript (not currently used but keeping for compatibility) */
.tooltip-icon-hidden {
display: none !important;
visibility: hidden !important;
}
/* Visual debugging indicator - only show when authenticated */
body[data-app-state="authenticated"].help-mode-active::before {
content: "Help Mode: ON";
position: fixed;
bottom: 10px;
right: 10px;
background-color: #17a2b8;
color: white;
padding: 5px 10px;
border-radius: 4px;
font-size: 12px;
z-index: 99999;
opacity: 0.8;
}
body[data-app-state="authenticated"]:not(.help-mode-active)::before {
content: "Help Mode: OFF";
position: fixed;
bottom: 10px;
right: 10px;
background-color: var(--fo-liability);
color: white;
padding: 5px 10px;
border-radius: 4px;
font-size: 12px;
z-index: 99999;
opacity: 0.8;
}
/* ============================================================
TOPBAR NAVIGATION ICONS
============================================================ */
/* Hide bs4Dash's built-in dark-mode switch widget entirely. We provide
our own icon-only #fo_dark_mode_btn instead; the bs4Dash checkbox is
still in the DOM (so input$dark_mode and click-delegation keep
working) — it's just visually removed. We cover both bs4Dash 2.x
shapes: the custom-switch (#theme_switch / #dark_mode_switcher inside
a .custom-control.custom-switch) and the [data-widget="navbar-dark-mode"]
anchor. */
.main-header .custom-control.custom-switch:has(#theme_switch),
.main-header .custom-control.custom-switch:has(#dark_mode_switcher),
.main-header [data-widget="navbar-dark-mode"],
.main-header .dark-mode-toggle {
display: none !important;
}
/* Fallback for browsers without :has() — hide the checkbox + its label
and any sibling icon so nothing is visible even if the wrapper remains. */
.main-header #theme_switch,
.main-header #dark_mode_switcher,
.main-header label[for="theme_switch"],
.main-header label[for="dark_mode_switcher"],
.main-header .dark-theme-icon {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
opacity: 0 !important;
pointer-events: none !important;
}
/* Custom dark/light mode icon (sun <-> moon). */
.fo-dark-mode-icon > i {
font-size: 1.05rem;
line-height: 1;
}
/* Custom help-mode icon (question-mark circle). Dim while OFF, brightens
while ON. The hidden #help_switch checkbox lives inside the anchor and
must never be visible. */
.fo-help-switch-hidden {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
opacity: 0 !important;
pointer-events: none !important;
}
.fo-help-icon > i {
font-size: 1.05rem;
line-height: 1;
transition: color 0.2s ease, transform 0.2s ease;
}
/* OFF state — same dim white as other topbar icons. */
.fo-help-icon > i { color: rgba(255, 255, 255, 0.85); }
/* ON state — match the teal "Help Mode: ON" bubble (#17a2b8). */
.fo-help-icon.fo-help-icon-active > i {
color: #17a2b8;
}
.fo-help-icon.fo-help-icon-active {
/* Keep the white nav-link colour but ensure the icon's teal shows. */
color: white !important;
}
/* All nav-link items in the header are white when authenticated.
AdminLTE's default navbar color (rgba(0,0,0,.5)) is invisible against
the dark primary header background; this overrides it. */
body[data-app-state="authenticated"] .main-header .nav-link,
body[data-app-state="authenticated"] .main-header .nav-link i,
body[data-app-state="authenticated"] .main-header .nav-link svg {
color: white !important;
}
/* Topbar navigation icon buttons */
.topbar-nav-icon {
transition: opacity 0.2s ease;
opacity: 0.85;
color: white !important;
}
.topbar-nav-icon:hover {
opacity: 1;
text-decoration: none;
color: white !important;
}
/* Hide topbar nav icons on pre-auth pages */
body:not([data-app-state="authenticated"]) .topbar-nav-icon {
display: none !important;
}
/* ------------------------------------------------------------------
bs4Dash → bslib migration: PR #4 (release 5.0.0.9004, "rc.4").
Under the bslib outer shell (FO.bslib_shell = TRUE), the dark-mode
toggle is `bslib::input_dark_mode()` — a ``
custom element with shadow DOM. The default rendering does NOT
visually match the icon-only Contact / Help / Logout affordances
that sit next to it in the topbar (different size, default colour,
block-ish alignment).
`app_ui()` wraps the custom element in
``. The
`.topbar-nav-icon` rules above already supply the shared topbar
icon contract (white colour, hover opacity, hide-when-unauth).
The rules below add the bslib-specific tweaks: inline alignment so
the toggle sits on the same baseline as the other icons, a
consistent icon-sized footprint, and a `currentColor` hand-off so
the bslib element inherits the white topbar colour through its
`--bs-emphasis-color` / `color` custom properties.
These selectors only match the bslib branch — the legacy bs4Dash
shell is unaffected. */
.fo-bslib-dark-mode {
display: inline-flex;
align-items: center;
padding: 8px 12px;
line-height: 1;
}
.fo-bslib-dark-mode > bslib-input-dark-mode {
/* Match the ~1.05rem icon size of `.fo-dark-mode-icon > i` and
`.fo-help-icon > i` so all three topbar icons share a footprint. */
font-size: 1.05rem;
line-height: 1;
/* PR follow-up — drop the explicit `#007bff` colouring. The sun /
moon glyph now inherits `currentColor` from the surrounding
`.topbar-nav-icon` wrapper, so it tracks the other topbar icons
(Contact, Help, Logout) — white in dark mode, dark in light mode
via the existing `html[data-bs-theme="light"] body[data-app-state=
"authenticated"] .topbar-nav-icon` override block. Keep the
bslib custom-element `--bs-*` hand-off properties bound to
`currentColor` so the shadow-DOM SVGs continue to paint with the
same colour as the host. */
color: currentColor;
--bs-emphasis-color: currentColor;
--bs-body-color: currentColor;
vertical-align: middle;
}
/* Legacy #help_switch slider styling removed — the checkbox is now
visually hidden (see .fo-help-switch-hidden above) and the affordance
is the #fo_help_mode_btn icon in the topbar. */
/* Hide sidebar menu items that are only for topbar navigation */
.topbar-only-tab {
display: none !important;
visibility: hidden !important;
height: 0 !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
}
/* ============================================================
SIDEBAR AND LAYOUT STYLES (moved from app_ui.R inline CSS)
============================================================ */
.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link.active {
background-color: #007bff !important;
color: white !important;
}
.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-treeview > .nav-item > .nav-link.active {
background-color: rgba(0, 123, 255, 0.8) !important;
color: white !important;
}
.sidebar-dark-primary .nav-sidebar > .nav-item.menu-open > .nav-link {
background-color: rgba(0, 123, 255, 0.4) !important;
}
/* Hide sidebar when not logged in - dark mode */
.main-sidebar.sidebar-hidden {
background-color: #343a40 !important;
border-right: none !important;
}
/* Hide sidebar when not logged in - light mode */
body:not(.dark-mode) .main-sidebar.sidebar-hidden {
background-color: #f4f6f9 !important;
}
/* Hide all sidebar content when sidebar-hidden class is present */
.main-sidebar.sidebar-hidden .brand-link,
.main-sidebar.sidebar-hidden .brand-image,
.main-sidebar.sidebar-hidden .brand-text,
.main-sidebar.sidebar-hidden .nav-sidebar {
visibility: hidden !important;
}
/* Ensure brand-link fills the full sidebar width with no left gap */
.brand-link {
padding-left: 0.8125rem !important;
margin-left: 0 !important;
left: 0 !important;
}
/* Only force 250px width when sidebar is NOT in mini-collapsed state */
body:not(.sidebar-mini) .brand-link,
body.sidebar-mini:not(.sidebar-collapse) .brand-link {
width: 250px !important;
}
/* Landing page overlay styles */
#landing-page-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 10000;
background-color: #0b0e14;
overflow-y: auto;
/* Explicitly set visible state as default */
opacity: 1;
visibility: visible;
pointer-events: auto;
transition: opacity 0.15s ease-in-out, visibility 0.15s ease-in-out, pointer-events 0.15s ease-in-out;
}
#landing-page-overlay.hidden {
opacity: 0;
visibility: hidden;
pointer-events: none;
}
/* Hide help button when landing page is visible */
#landing-page-overlay:not(.hidden) ~ * [data-widget='control-sidebar'],
body:has(#landing-page-overlay:not(.hidden)) [data-widget='control-sidebar'] {
display: none !important;
}
/* ============================================================
LOGIN/SIGNUP/FORGOT PASSWORD PAGE STYLES
============================================================ */
/* Hide card headers on login/signup/forgot-password pages */
.box.box-solid.box-primary > .card-header,
#sign_up_page_div > .card-header {
display: none !important;
}
/* ============================================================
WELCOME PAGE STYLES
============================================================ */
/* Hide card header on welcome page */
#welcome_page > .box > .card-header {
display: none !important;
}
/* ============================================================
SUMMARY PAGE STYLES
============================================================ */
#summary-summary_text { white-space: pre-wrap; }
body.dark-mode #summary-summary_text { color: white !important; }
body.dark-mode #summary-summary_text { color: white !important; }
/* Fix dark mode for DataTable */
body.dark-mode .dataTables_wrapper .dataTables_length,
body.dark-mode .dataTables_wrapper .dataTables_filter,
body.dark-mode .dataTables_wrapper .dataTables_info,
body.dark-mode .dataTables_wrapper .dataTables_paginate {
color: white !important;
}
body.dark-mode .dataTables_wrapper .dataTables_length,
body.dark-mode .dataTables_wrapper .dataTables_filter,
body.dark-mode .dataTables_wrapper .dataTables_info,
body.dark-mode .dataTables_wrapper .dataTables_paginate {
color: white !important;
}
/* Fix dark mode for table headers */
body.dark-mode table.dataTable thead th,
body.dark-mode table.dataTable thead td {
color: white !important;
}
body.dark-mode table.dataTable thead th,
body.dark-mode table.dataTable thead td {
color: white !important;
}
/* Fix dark mode for table body */
body.dark-mode table.dataTable tbody td,
body.dark-mode table.dataTable tbody td {
color: white !important;
}
/* ============================================================
LIGHT MODE TEXT COLORS - Ensure text visibility
============================================================ */
/* Light mode text colors for DataTable body cells */
body:not(.dark-mode) table.dataTable tbody td {
color: #212529 !important;
}
/* Light mode text colors for DataTable headers */
body:not(.dark-mode) table.dataTable thead th,
body:not(.dark-mode) table.dataTable thead td {
color: #212529 !important;
}
/* Light mode text colors for DataTable wrapper elements */
body:not(.dark-mode) .dataTables_wrapper .dataTables_length,
body:not(.dark-mode) .dataTables_wrapper .dataTables_filter,
body:not(.dark-mode) .dataTables_wrapper .dataTables_info,
body:not(.dark-mode) .dataTables_wrapper .dataTables_paginate {
color: #212529 !important;
}
/* Fix column alignment in summary table */
#summary-summary_combined_table table.dataTable tbody td:nth-child(1) {
text-align: left !important;
width: auto !important;
}
#summary-summary_combined_table table.dataTable tbody td:nth-child(2) {
text-align: left !important;
}
#summary-summary_combined_table table.dataTable tbody td:nth-child(3),
#summary-summary_combined_table table.dataTable tbody td:nth-child(4),
#summary-summary_combined_table table.dataTable tbody td:nth-child(5),
#summary-summary_combined_table table.dataTable tbody td:nth-child(6) {
text-align: right !important;
}
#summary-summary_combined_table table.dataTable thead th:nth-child(1) {
text-align: left !important;
width: auto !important;
}
#summary-summary_combined_table table.dataTable thead th:nth-child(2) {
text-align: left !important;
}
#summary-summary_combined_table table.dataTable thead th:nth-child(3),
#summary-summary_combined_table table.dataTable thead th:nth-child(4),
#summary-summary_combined_table table.dataTable thead th:nth-child(5),
#summary-summary_combined_table table.dataTable thead th:nth-child(6) {
text-align: right !important;
}
/* Dark mode styling for reporting date selector */
body.dark-mode #summary-summary_reporting_date,
body.dark-mode #summary-summary_reporting_date {
background-color: #343a40 !important;
color: white !important;
border-color: #6c757d !important;
}
body.dark-mode .selectize-input,
body.dark-mode .selectize-input {
background-color: #343a40 !important;
color: white !important;
border-color: #6c757d !important;
}
body.dark-mode .selectize-dropdown,
body.dark-mode .selectize-dropdown {
background-color: #343a40 !important;
color: white !important;
border-color: #6c757d !important;
}
body.dark-mode .selectize-dropdown-content .option,
body.dark-mode .selectize-dropdown-content .option {
color: white !important;
}
body.dark-mode .selectize-dropdown-content .option.active,
body.dark-mode .selectize-dropdown-content .option:hover,
body.dark-mode .selectize-dropdown-content [data-selectable].active,
body.dark-mode .selectize-dropdown-content [data-selectable]:hover,
body.dark-mode .selectize-dropdown .active {
background-color: #495057 !important;
color: #ffffff !important;
}
/* Light mode text colors for selectize inputs and dropdowns */
body:not(.dark-mode) .selectize-input {
background-color: #ffffff !important;
color: #212529 !important;
border-color: #ced4da !important;
}
body:not(.dark-mode) .selectize-dropdown {
background-color: #ffffff !important;
color: #212529 !important;
border-color: #ced4da !important;
}
body:not(.dark-mode) .selectize-dropdown-content .option {
color: #212529 !important;
}
body:not(.dark-mode) .selectize-dropdown-content .option.active,
body:not(.dark-mode) .selectize-dropdown-content .option:hover,
body:not(.dark-mode) .selectize-dropdown-content [data-selectable].active,
body:not(.dark-mode) .selectize-dropdown-content [data-selectable]:hover {
background-color: #e9ecef !important;
color: #212529 !important;
}
/* Light mode text colors for summary page elements */
body:not(.dark-mode) #summary-summary_text {
color: #212529 !important;
}
body:not(.dark-mode) #summary-summary_reporting_date {
background-color: #ffffff !important;
color: #212529 !important;
border-color: #ced4da !important;
}
/* Summary page inline select styling */
.summary-text-container {
position: relative;
font-family: monospace;
}
.summary-inline-row {
display: block;
margin: 0;
padding: 0;
}
.summary-inline-select-wrapper {
display: inline-block;
vertical-align: baseline;
white-space: nowrap;
margin: 0;
position: relative;
}
/* Style the select input to look like monospace text */
.summary-inline-select-wrapper .selectize-input {
font-family: monospace !important;
font-size: 1em !important;
padding: 0 20px 0 2px !important;
border: none !important;
background: transparent !important;
box-shadow: none !important;
display: inline-block !important;
min-height: auto !important;
line-height: 1.2 !important;
vertical-align: baseline !important;
white-space: nowrap !important;
}
.summary-inline-select-wrapper .selectize-input input {
font-family: monospace !important;
font-size: 1em !important;
}
.summary-inline-select-wrapper .selectize-input .item {
line-height: 1.2 !important;
padding: 0 !important;
}
/* Make dropdown arrow visible and positioned correctly */
.summary-inline-select-wrapper .selectize-input::after {
content: '\25bc' !important;
border: none !important;
position: absolute;
right: 2px;
top: 50%;
transform: translateY(-50%);
font-size: 0.6em;
opacity: 0.6;
}
/* Style dropdown to match */
.summary-inline-select-wrapper .selectize-dropdown {
font-family: monospace !important;
font-size: 0.9em !important;
}
.summary-inline-select-wrapper .selectize-dropdown .option {
padding: 5px 8px !important;
white-space: nowrap !important;
}
.summary-text-before,
.summary-text-after {
display: inline;
white-space: normal;
font-family: monospace;
}
.summary-financial-data {
display: block;
white-space: pre;
margin-top: 0;
font-family: monospace;
}
/* Light mode text colors for summary page text elements */
body:not(.dark-mode) .summary-text-before,
body:not(.dark-mode) .summary-text-after,
body:not(.dark-mode) .summary-financial-data {
color: #212529 !important;
}
/* Tooltip icon inside the summary inline row: keep it compact and aligned */
.summary-inline-row [data-toggle="tooltip"] i.fa-info-circle,
.summary-inline-row [data-toggle="tooltip"] i.fa.fa-info-circle,
.summary-inline-row [data-toggle="tooltip"] i[class*="fa-info-circle"],
.summary-inline-row [data-toggle="tooltip"] svg[data-icon="circle-info"] {
font-size: 0.55em !important;
vertical-align: middle !important;
position: relative !important;
top: 0 !important;
line-height: 1 !important;
margin-left: 3px !important;
cursor: help !important;
}
/* ============================================================
EXTRACTED INLINE STYLES
============================================================ */
/* Page centering wrapper for login/signup/forgot-password pages */
.fo-page-center {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 100vh;
padding-top: 20px;
padding-bottom: 20px;
overflow-y: auto;
}
/* "Back to Home" link styling. Colour consumed via --fo-link (PR
* #12.e.4.21) — light #007bff / dark #6aa9ff (mirrors --fo-brand
* under each theme). */
.fo-back-link {
color: var(--fo-link);
font-size: 14px;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 5px;
}
/* Centered button containers */
.fo-btn-center {
text-align: center;
}
/* Centered button container with bottom margin (10px) */
.fo-btn-center-mb-10 {
text-align: center;
margin-bottom: 10px;
}
/* Centered button container with bottom margin (15px) */
.fo-btn-center-mb-15 {
text-align: center;
margin-bottom: 15px;
}
/* Red error messages. Colour consumed via --fo-danger (PR #12.e.4.21)
* — theme-invariant #EF4444 (drift vs the pre-PR `red` literal
* #FF0000 is intentional: --fo-danger is the palette-wide token used
* by `.welcome-note-box` and any future error surfaces). */
.fo-error-msg {
color: var(--fo-danger);
font-weight: 600;
padding-top: 5px;
font-size: 16px;
}
/* Green success messages. Colour consumed via --fo-success (PR
* #12.e.4.21) — light #008000 (byte-equivalent to the pre-PR `green`
* literal) / dark #8ad6a6 (matches --fo-asset, the pastel green used
* for positive deltas / asset rows on dark surfaces). */
.fo-success-msg {
color: var(--fo-success);
font-weight: 600;
padding-top: 5px;
font-size: 16px;
}
/* Secondary/gray text for additional information */
.fo-secondary-text {
color: #666;
padding-top: 5px;
font-size: 14px;
}
/* Configuration error messages (darker red) */
.fo-config-error-msg {
color: #d9534f;
font-weight: 600;
padding-top: 5px;
font-size: 16px;
}
/* "Logged as: username" text shown on the right side of the footer */
.fo-logged-as {
margin-right: 10px;
color: inherit;
font-weight: normal;
}
/* Flex row containers in expense/cash/ticker UIs */
.fo-form-row {
display: flex;
flex-wrap: wrap;
align-items: center;
margin-bottom: 10px;
}
/* Action button group container (add/remove buttons) */
.fo-action-btn-group {
display: flex;
align-items: flex-end;
padding-bottom: 15px;
}
/* Gap styling for button groups */
.fo-btn-gap {
display: flex;
gap: 5px;
}
/* Small margin-right for buttons */
.fo-btn-mr-sm {
margin-right: 5px;
}
/* Readonly display fields that look like form inputs */
.fo-input-like-display {
margin-bottom: 15px;
cursor: default;
}
/* Padding on selectize dropdown options */
.fo-selectize-option {
padding-left: 10px;
}
/* Expense row styles (moved from inline