/* CSP Screener styles (doc 07 §3). Theme-specific styling lives in static/theme/.
   Verdict colours, kind badges and density tweaks arrive with the pages that use them. */

/* Header fund switcher (doc 19 §3.3): never squeezed by the freshness line; on phones it sits
   at the top of the page instead (layout/fund_switcher.html). */
#fund-switcher { flex-shrink: 0; }
#fund-switcher .form-select { min-width: 9rem; max-width: 16rem; }
#fund-switcher-sm .form-select { flex: 1 1 auto; }

/* Toasts sit above the sticky topbar. */
#toast-container {
  z-index: 1100;
}

/* The theme toggle shows the icon of the theme it will switch to. */
body[data-theme="dark"] .theme-icon-to-dark,
body[data-theme="light"] .theme-icon-to-light {
  display: none;
}

/* Verdict row colours (tables.py `_class`); translucent so they read in both themes. */
.table > tbody > tr.verdict-CLOSE { --bs-table-bg: rgba(224, 82, 82, 0.22); }
.table > tbody > tr.verdict-REPLACE { --bs-table-bg: rgba(242, 166, 90, 0.22); }
.table > tbody > tr.verdict-REVIEW { --bs-table-bg: rgba(150, 150, 150, 0.2); }
.table > tbody > tr.verdict-HOLD { --bs-table-bg: rgba(76, 175, 120, 0.12); }

/* Badges inside tables keep a compact size. */
table .badge { font-weight: 600; letter-spacing: 0.02em; }

/* DataTables: compact toolbar, no wrapping headers. */
div.dataTables_wrapper div.dataTables_filter input { margin-left: 0.5rem; }
table.dataTable thead th { white-space: nowrap; }

/* Chart tooltip (built by app.js with DOM nodes). */
.csp-chart { min-height: 120px; }
.csp-tooltip { padding: 0.5rem 0.75rem; font-size: 0.8125rem; }
.csp-tooltip-title { font-weight: 600; margin-bottom: 0.25rem; }
.csp-tooltip-row { display: flex; align-items: center; gap: 0.4rem; }
.csp-tooltip-dot { display: inline-block; width: 0.6rem; height: 0.6rem; border-radius: 50%; }
.apexcharts-tooltip-title:empty { display: none; }

/* Dashboard: executive summary block wraps long lines; action cards stay compact. */
.csp-summary { white-space: pre-wrap; word-break: break-word; font-size: 0.8125rem; }

/* Action-card order ticket: one row per leg; the side label is fixed-width so legs align. */
.csp-ticket-side { min-width: 6.5rem; }

/* Unmanaged positions: assigned shares. */
.table > tbody > tr.row-assigned { --bs-table-bg: rgba(242, 166, 90, 0.26); }

/* Text wordmark in the brand box (stands in for artwork; doc DECISIONS U9). The brand box is
   dark in both themes, so the text is always light. */
.csp-wordmark,
.csp-wordmark:hover {
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none;
  white-space: nowrap;
}
.csp-wordmark .logo-sm,
.csp-wordmark .logo-lg { font-size: 1.15rem; }
.csp-wordmark-accent { color: #7f93f0; font-weight: 600; }

/* ---- Theme tuning --------------------------------------------------------------------------
   The template's compiled Bootstrap keeps the light values for several Bootstrap 5.3 variables
   in dark mode, and its app CSS turns .bg-* into pale tints. The rules below make muted text,
   subtle backgrounds, badges and alerts readable in both themes. */

body[data-theme="dark"] {
  --bs-secondary-color: #8f9ab5;
  --bs-tertiary-color: #79859c;
  --bs-emphasis-color: #eff2f7;
  --bs-secondary-bg: #2d3448;
  --bs-secondary-bg-rgb: 45, 52, 72;
  --bs-tertiary-bg: #2d3448;
  --bs-tertiary-bg-rgb: 45, 52, 72;
  --bs-border-color: #32394e;
  --bs-primary-bg-subtle: rgba(88, 103, 195, 0.28);
  --bs-primary-text-emphasis: #a9b4f0;
}
body[data-theme="light"] {
  --bs-secondary-color: #6b7488;
}

.text-muted { color: var(--bs-secondary-color) !important; }
.csp-summary { color: var(--bs-body-color); }
body[data-theme="dark"] .csp-summary { color: #cfd5e6; }
body[data-theme="light"] .csp-summary { color: #343a40; }

/* Badges: solid fills with a fixed text colour (white or near-black, >= 4.5:1 in both themes). */
.badge.bg-primary { background-color: #4a59b3 !important; color: #fff; }
.badge.bg-secondary { background-color: #667085 !important; color: #fff; }
.badge.bg-success { background-color: #1b8760 !important; color: #fff; }
.badge.bg-danger { background-color: #cf3a32 !important; color: #fff; }
.badge.bg-warning { background-color: #f9c341 !important; color: #1d222e; }
.badge.bg-info { background-color: #00c5dc !important; color: #1d222e; }
.badge.bg-light { background-color: #e9ecef !important; color: #1d222e; }
.badge.bg-dark { background-color: #2a3042 !important; color: #fff; }
.badge.text-dark { color: #1d222e !important; }

/* Alerts: tinted backgrounds that follow the theme. */
.alert { border-width: 1px; }
body[data-theme="dark"] .alert-warning { background-color: rgba(249, 195, 65, 0.16); border-color: rgba(249, 195, 65, 0.4); color: #f6d58a; }
body[data-theme="dark"] .alert-danger { background-color: rgba(254, 84, 75, 0.16); border-color: rgba(254, 84, 75, 0.4); color: #ffb0ab; }
body[data-theme="dark"] .alert-success { background-color: rgba(52, 195, 143, 0.16); border-color: rgba(52, 195, 143, 0.4); color: #8fe3c2; }
body[data-theme="dark"] .alert-info { background-color: rgba(0, 197, 220, 0.14); border-color: rgba(0, 197, 220, 0.4); color: #7fe2ee; }
body[data-theme="dark"] .alert .btn-close { filter: invert(1) grayscale(1); }
body[data-theme="light"] .alert-warning { background-color: #fff3cd; border-color: #ffe69c; color: #664d03; }
body[data-theme="light"] .alert-danger { background-color: #f8d7da; border-color: #f1aeb5; color: #842029; }
body[data-theme="light"] .alert-success { background-color: #d1e7dd; border-color: #a3cfbb; color: #0f5132; }
body[data-theme="light"] .alert-info { background-color: #cff4fc; border-color: #9eeaf9; color: #055160; }

/* Toasts: solid backgrounds with white text in both themes. */
.toast.text-bg-warning { background-color: #f9c341 !important; color: #1d222e !important; }
.toast.text-bg-warning .btn-close { filter: none; }
.toast.text-bg-success { background-color: #1b8760 !important; color: #fff !important; }
.toast.text-bg-danger { background-color: #cf3a32 !important; color: #fff !important; }
.toast.text-bg-info { background-color: #0e8fa0 !important; color: #fff !important; }

/* Verdict tints per theme (the rows keep the table's own text colour). */
body[data-theme="dark"] .table > tbody > tr.verdict-CLOSE { --bs-table-bg: rgba(254, 84, 75, 0.2); }
body[data-theme="dark"] .table > tbody > tr.verdict-REPLACE { --bs-table-bg: rgba(249, 195, 65, 0.16); }
body[data-theme="dark"] .table > tbody > tr.verdict-REVIEW { --bs-table-bg: rgba(145, 155, 174, 0.14); }
body[data-theme="dark"] .table > tbody > tr.verdict-HOLD { --bs-table-bg: rgba(52, 195, 143, 0.1); }
body[data-theme="dark"] .table > tbody > tr.row-assigned { --bs-table-bg: rgba(249, 195, 65, 0.2); }
body[data-theme="light"] .table > tbody > tr.verdict-CLOSE { --bs-table-bg: rgba(220, 53, 69, 0.14); }
body[data-theme="light"] .table > tbody > tr.verdict-REPLACE { --bs-table-bg: rgba(255, 193, 7, 0.22); }
body[data-theme="light"] .table > tbody > tr.verdict-REVIEW { --bs-table-bg: rgba(108, 117, 125, 0.12); }
body[data-theme="light"] .table > tbody > tr.verdict-HOLD { --bs-table-bg: rgba(25, 135, 84, 0.1); }
body[data-theme="light"] .table > tbody > tr.row-assigned { --bs-table-bg: rgba(255, 193, 7, 0.28); }

/* The template anchors the footer at the sidebar's width; below the breakpoint the sidebar is
   off-canvas, so the footer spans the page. */
@media (max-width: 991.98px) {
  .footer { left: 0 !important; }
}

/* P&L statement (doc 15 §7.2): totals ruled above, Net boxed like the owner's spreadsheet.
   Borders use currentColor so they read in both themes. */
.pnl-statement td.text-end { white-space: nowrap; }
.pnl-statement tr.pnl-total > td { border-top: 1px solid currentColor; font-weight: 600; }
.pnl-statement tr.pnl-net > th, .pnl-statement tr.pnl-net > td {
  border-top: 2px solid currentColor;
  border-bottom: 3px double currentColor;
  font-weight: 700;
}
.pnl-statement tr.pnl-section > th { padding-top: 0.75rem; }

/* Alerts bell (doc 16 §9.1): badge on the icon, severity dots, a dropdown that fits a phone. */
.csp-bell-badge { top: 0.9rem; left: 55%; font-size: 0.65rem; padding: 0.2em 0.45em; }
.csp-bell-menu { min-width: 20rem; max-width: calc(100vw - 1rem); }
.csp-dot { display: inline-block; flex: 0 0 auto; width: 0.6rem; height: 0.6rem; margin-top: 0.4rem; border-radius: 50%; }
.csp-bell-item .text-wrap { word-break: break-word; }

/* Alert detail: the fact tables keep numbers aligned and labels muted. */
.csp-facts th { font-weight: 500; color: var(--bs-secondary-color, #8a8f98); width: 34%; }
.csp-facts td { font-variant-numeric: tabular-nums; }

/* Settings → Funds book editor: compact weight fields, a readable strategy select. */
.fund-book .csp-weight { width: 5.5rem; }
.fund-book .fund-book-add select { min-width: 11rem; }

/* Strategies page (doc 20 H7): legend badges at reading size; label badges wrap in cells. */
.csp-legend-badge { font-size: 0.75rem; }
.csp-results .badge { white-space: normal; text-align: left; }

/* Sidebar Strategies group: a thin guide line down the sub-items, as in a nested tree. */
#sidebar-menu ul li ul.csp-sub-menu { position: relative; margin-left: 2.1rem; border-left: 1px solid rgba(128, 128, 128, 0.35); }
#sidebar-menu ul li ul.csp-sub-menu li a { padding-left: 1.1rem; }
.vertical-collpsed #sidebar-menu ul li ul.csp-sub-menu { margin-left: 0; border-left: 0; }

/* Strategy pages: the guide's tagline and lists at reading size. */
.csp-guide-tagline { font-size: 1.05rem; }
.csp-guide-list { padding-left: 1.1rem; }
.csp-guide-list li + li { margin-top: 0.35rem; }