*
* so the form collected a gutter of its own, and the column's inline 15px stacked on top of it
* with nothing to cancel it - the row's negative margin had already been spent on the form. That
* is the ~15px by which the filter bar sat inside the page title. Note it is invisible to the
* gutter value: at 24px the chain is -12 +12 +15, at 30px it is -15 +15 +15, both +15. Zeroing
* the form is what actually fixes it, and then the 30px above makes the column's 15px cancel the
* row's -15px exactly, landing the form on the same -5px as the h2 and the ibox. */
.wrapper.row > .row > .form-inline,
.wrapper-content.row > .row > .form-inline { padding-left: 0; padding-right: 0; }
.nav > li { position: relative; display: block; }
.nav > li > a { position: relative; display: block; padding: 10px 15px; }
.dropdown-menu > li > a { display: block; padding: 3px 20px; clear: both; font-weight: 400; line-height: 1.42857143; white-space: nowrap; }
/* BS3 sized form controls at 14px/34px; BS5 uses 1rem (16px) and derives the height from
* padding + line-height, so every input, select and button grew. Inspinia only re-declares
* the padding, so the font-size came from BS5. Besides looking heavier, the extra width made
* the left half of the customer filter forms wrap onto a second line. */
.form-control { height: 34px; font-size: 14px; line-height: 1.42857143; }
textarea.form-control, select[multiple].form-control { height: auto; }
.form-select { height: 34px; font-size: 14px; padding-top: 6px; padding-bottom: 6px; }
/* Buttons were named in that same reasoning but never actually fixed. BS3's .btn was
* `padding:6px 12px;font-size:14px;line-height:1.42857143`; BS5's computes to the same padding
* (.375rem .75rem) but sets font-size to 1rem, i.e. 16px. Every button therefore renders ~12%
* wider than on stage - measured on /customers/devices, the CSV export button is 188px locally
* against 168px on stage, and Actualizar 93px against 81px - which also pushes the filter
* inputs out of place. Set the variables so .btn-sm/.btn-lg, which declare their own, still
* scale from BS5's own mechanism. */
.btn { --bs-btn-font-size: 14px; --bs-btn-line-height: 1.42857143; }
/* BS3 striped rows were #f9f9f9. BS5 computes them from --bs-table-striped-bg, which is
* rgba(0,0,0,.05) - about #f2f2f2, visibly darker than the old tables.
*
* The text colour needs the same treatment. BS3 let table cells inherit the body colour,
* which Inspinia sets to #676a6c. BS5 paints every cell explicitly
* (`.table>:not(caption)>*>*{color:var(--bs-table-color)}`), and --bs-table-color resolves
* to --bs-emphasis-color, i.e. pure #000 - so a direct rule replaced the inherited grey and
* every datatable turned black. The striped/hover/active states each swap in their own
* colour variable, so all four have to be set. Setting the variables keeps BS5's own
* mechanism in charge instead of fighting the rule that reads them. */
.table {
--bs-table-striped-bg: #f9f9f9;
--bs-table-color: #676a6c;
--bs-table-striped-color: #676a6c;
--bs-table-hover-color: #676a6c;
--bs-table-active-color: #676a6c;
}
/* BS3 styled inline forms through descendant rules on a marker class; BS5 removed
* .form-inline entirely in favour of flex utilities. Without these, the filter bar on
* the customer pages stacks vertically instead of sitting on one line. */
.form-inline .form-control { display: inline-block; width: auto; vertical-align: middle; }
.form-inline .form-group { display: inline-block; margin-bottom: 0; vertical-align: middle; }
.form-inline .control-label { margin-bottom: 0; vertical-align: middle; }
.form-inline .input-group { display: inline-table; vertical-align: middle; }
.form-inline .input-group .input-group-btn { width: auto; }
/* ---- Adaptations to NEW Bootstrap 5 behaviour (not BS3 restorations) ---- */
/* BS5 made .nav a wrapping flex container. BS3 had no flex, so the top links flowed
* inline on one line; here the long "Bienvenido,
" item wraps onto its own row.
* nowrap restores the single-line layout while keeping ms-auto working. */
.navbar-top-links { flex-wrap: nowrap; align-items: center; }
/* Dropping BS3's .navbar-right from that same in favour of .ms-auto also dropped a
* theme hook: Inspinia darkens top-bar links through `.nav.navbar-right>li>a{color:#999c9e}`,
* which outranks the sidebar's `.nav>li>a{color:#a7b1c2}`. Without it "Cerrar sesión" fell
* back to the pale sidebar grey. Re-hang the colour off .navbar-top-links - the class that
* actually identifies this bar - rather than resurrecting a Bootstrap 3 layout class. */
.nav.navbar-top-links > li > a { color: #999c9e; }
/* BS3's .col-* were floats, so they laid out side by side under any parent. BS5's are
* flex items (flex:0 0 auto;width:X%) and need a flex container. The two customer filter
* forms put their .col-* directly inside the