/* Bootstrap 4 behaviour the templates still rely on (ROADMAP 4.5 S2+S3).
   Loaded right after Bootstrap 5; remove with the redesign (ROADMAP 3.3). */

/* Bootstrap 5 underlines every link; Bootstrap 4 only on hover. */
a { text-decoration: none; }
a:hover { text-decoration: underline; }

/* Bootstrap 5 makes every direct child of .row full width with gutter padding;
   Bootstrap 4 sized only .col-* children. Headings, labels, inputs and buttons
   placed straight in a .row keep their Bootstrap 4 size, and their own padding
   (a zero gutter removes only the grid's). */
.row > :not([class*="col"]):not(.row) { flex-shrink: 1; width: auto; max-width: none; --bs-gutter-x: 0; }
.row > .row { flex-shrink: 1; width: auto; max-width: none; padding-right: 0; padding-left: 0; }

/* The menu arrows were Font Awesome glyphs (style.css .sf-arrows, which loads after
   this file): draw them with Bootstrap Icons. "html" outranks style.css's rule. */
html .sf-arrows .sf-with-ul:after { font-family: "bootstrap-icons"; content: "\F282"; }
html .sf-arrows ul .sf-with-ul:after { content: "\F285"; }

/* Report money cells (style="text-align:right") stay on one line: "$( -150,000 )". */
td[style*="text-align"][style*="right"] { white-space: nowrap; }

/* Phones: tables scroll sideways inside .table-scroll (main.js wraps them); report tables
   (DataTables) keep their first column pinned, like a frozen spreadsheet column. */
@media (max-width: 767.98px) {
  .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .table-scroll > table th, .table-scroll > table td { white-space: nowrap; }
  .table-scroll > table.dataTable th:first-child,
  .table-scroll > table.dataTable td:first-child {
    position: sticky; left: 0; z-index: 1; background-color: var(--bs-body-bg);
    white-space: normal; min-width: 7rem; max-width: 9rem;
  }
}

/* Header (4.5 S4). Bootstrap 3's .pull-left / .pull-right (the logged-in home's logo, rt_home.html) float again,
   so its menu sits beside the logo, not under the header. On the inner pages (logo and menu in a .row of
   two .col-6) the logo keeps its natural width and the menu takes the rest, so the logo stays on one line
   on phones and the menu (with its envelope) on one line; 769-991 px uses the phone logo size and tighter menu spacing
   ("html": style.css loads after this file). */
.pull-left { float: left; }
.pull-right { float: right; }
#header .row > #logo { flex: 0 0 auto; width: auto; }
#header .row > #logo + .pull-right { flex: 1 1 0; width: auto; min-width: 0; }
#header #logo h1 { white-space: nowrap; }
@media (min-width: 769px) and (max-width: 991.98px) {
  html #header #logo h1 { font-size: 34px; }
  html .nav-menu > li { margin-left: 4px; }
  html .nav-menu > li > a { padding-left: 6px; padding-right: 6px; }
}

/* Phone menu (main.js clones the desktop menu). Where the menu carries Bootstrap's .nav class (display:flex)
   the list shrank to its text, so the submenu chevron sat beside the label instead of at the right edge. */
#mobile-nav.nav > ul { width: 100%; }

/* A DataTables container placed straight in a .row spans the row, as Bootstrap 5 sizes any .row child; the
   Bootstrap 4 sizing rule above would shrink it to its table, which then ran wider than a phone screen. */
.row > .dt-container:not([class*="col"]):not(.row) { flex-shrink: 0; width: 100%; max-width: 100%; }

/* DataTables 2 styles the report columnDefs' dt-body-* classes (DataTables 1.10 with Bootstrap 4 left them unstyled).
   The report tables give the first column both dt-body-right ('_all') and dt-body-left (target 0): left wins, as meant
   (this file loads before DataTables' CSS, hence html body). */
html body table.dataTable tbody th.dt-body-left, html body table.dataTable tbody td.dt-body-left { text-align: left; }

/* Date picker (flatpickr) at 85%, shrinking toward its field; no opening slide (it would fight the scale). */
.flatpickr-calendar { transform: scale(0.85); transform-origin: top left; }
.flatpickr-calendar.arrowBottom { transform-origin: bottom left; }
.flatpickr-calendar.arrowRight { transform-origin: top right; }
.flatpickr-calendar.arrowBottom.arrowRight { transform-origin: bottom right; }
.flatpickr-calendar.animate.open { animation: none; }