elements, so by default each auto-sizes its own columns from its own content and
their dollar columns don't line up. table-layout:fixed with no explicit widths splits a table's columns
evenly by count instead - since every one of these tables has the same 9-column shape (the Grand Total's
first cell uses colspan=6 to match), that makes every column land at the same horizontal position in
every table. */
table.report.report-byclient-table {
table-layout: fixed;
}
/* Sales Tax - Detail/By District (rsalestaxdetail.js, rsalestaxbydistrict.js): each group's heading is a
full-width row inside the report's single table - give it the spacing the old standalone
had. */
table.report tr.report-group-row td {
padding-top: 12px;
}
/* Sales Tax - Detail: the district + rate sub-section heading under each customer. */
table.report tr.report-subgroup-row td {
padding-top: 8px;
}
table.report tr.report-subgroup-row h4 {
font-size: 1.1rem;
font-weight: bold;
margin-bottom: 2px;
}
table.report tr {
}
table.report tr td {
}
body {
font-size: 16px;
color: #333333;
}
table {
}
th {
font-weight: bold;
color: #111111;
background-color: #eeeeee;
}
/* Dashboard widgets and other .card panels (core/widget.php's dispWidgetTop()) - a soft shadow and
slightly larger corner radius so they read as distinct, lifted panels against the page background
instead of just a thin flat-bordered box, same spirit as the dark nav frame above. */
.card {
border-radius: 6px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.card-header {
border-top-left-radius: 6px !important;
border-top-right-radius: 6px !important;
}
/* A small lift on hover for primary buttons - purely decorative, reinforces that it's clickable. */
.btn-primary:hover {
box-shadow: 0 2px 4px rgba(51, 122, 183, 0.35);
}
/* Every page's title (View::writeTitle(), core/view.php) renders as `h1.page-header` - a bare BS3
class BS5 never defines (same dead-class pattern as `.btn-default`/`.divider` elsewhere in this
file), so it rendered as a completely plain, unstyled heading with nothing setting it apart from
the content below. Restoring a page-header treatment - generous bottom padding plus a rule line
- but with the primary blue as that rule instead of BS3's original plain gray, tying it to the
rest of this visual refresh rather than just reproducing the old default. */
h1.page-header {
margin: 10px 0 25px;
padding-bottom: 12px;
border-bottom: 3px solid var(--bs-primary);
}
/* Expense Quick Entry grid (views/vexpensequickentry.php) - flat, borderless fields until focused, so
a page full of inputs reads as a dense spreadsheet rather than a stack of separate form controls. */
table.qe-table td {
padding: 2px 4px;
vertical-align: middle;
}
table.qe-table input,
table.qe-table select {
border: 1px solid transparent;
background-color: transparent;
}
table.qe-table input:focus,
table.qe-table select:focus {
border-color: #337ab7;
background-color: #fff;
}
table.qe-table .qe-status-cell {
white-space: nowrap;
}
table.qe-table .qe-status {
display: inline-block;
width: 16px;
text-align: center;
}
/* Whole-row tint for a row's save state (set in vexpensequickentry.js's setRowStatus()) - a small icon
alone in the last column was too easy to tab right past without noticing a row had failed to save. */
table.qe-table tr.qe-row-saving {
background-color: #f5f5f5;
}
table.qe-table tr.qe-row-saved {
background-color: #eaf6ea;
}
table.qe-table tr.qe-row-error {
background-color: #fdecea;
box-shadow: inset 3px 0 0 #c0392b;
}
/* The single trailing blank row (vexpensequickentry.js's wireRow()) - looks like a placeholder, not a
real row, until the user actually starts typing into it (handleRowBecameDirty() removes this). */
table.qe-table tr.qe-row-blank {
opacity: 0.5;
}
/* ============================================================================================
Collapsible sidebar (issue #137) - toggleSidebar() in js/common.js flips `sidebar-collapsed` on
(and remembers it in a cookie so core/view.php can render it already-collapsed server-side,
no flash of the full-width sidebar first). Narrows the sidebar down to icon-only; a top-level item
with sub-items (everything except Dashboard/System Admin) shows them as a flyout panel next to its
icon instead of pushing them in below, since sub-items have no icon of their own and need real text.
Scoped to the same >=768px breakpoint the sidebar's own absolute-positioned layout already uses
(sb-admin-2.css) - below that, the existing navbar-toggler collapse is the right mobile behavior,
so the new toggle button is hidden there instead of fighting it.
============================================================================================ */
@media (max-width: 767px) {
#sidebarToggle {
display: none;
}
}
.btn-sidebar-toggle {
background: none;
border: none;
color: var(--app-frame-text);
font-size: 18px;
padding: 15px;
cursor: pointer;
}
.btn-sidebar-toggle:hover,
.btn-sidebar-toggle:focus {
color: #fff;
}
@media (min-width: 768px) {
body.sidebar-collapsed #wrapper {
background: linear-gradient(to right, var(--app-frame-bg) 70px, transparent 70px);
}
body.sidebar-collapsed #page-wrapper {
margin-left: 70px;
}
body.sidebar-collapsed .sidebar {
width: 70px;
}
}
body.sidebar-collapsed .sidebar .sidebar-search {
display: none;
}
body.sidebar-collapsed .sidebar .nav > li > a > .nav-label,
body.sidebar-collapsed .sidebar .nav > li > a > .fa.arrow {
display: none;
}
body.sidebar-collapsed .sidebar .nav > li > a {
text-align: center;
padding-left: 0;
padding-right: 0;
}
body.sidebar-collapsed .sidebar .nav > li {
position: relative;
}
/* Position every top-level group's submenu as a flyout instead of pushing it inline below the icon
(which would look broken in a ~70px column) - applies whether it ends up visible via hover (below)
or via metisMenu's own click-driven mm-show class (e.g. the branch matching the current page, marked
active server-side - see core/view.php). */
body.sidebar-collapsed .sidebar .nav > li > ul.nav-second-level {
position: absolute;
left: 70px;
top: 0;
min-width: 220px;
margin: 0;
background-color: var(--app-frame-bg-nested);
box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.35);
z-index: 1050;
}
/* Mouse-only quick access - reveals the flyout on hover without clicking first. Higher specificity than
metisMenu's own `.mm-collapse:not(.mm-show) { display: none; }` (metisMenu.min.css), so this wins
regardless of load order. A third-level group inside the flyout (e.g. Reports' own sub-groups) still
expands inline, exactly like the non-collapsed sidebar - it's full text at that point, nothing left
to turn into a flyout. */
body.sidebar-collapsed .sidebar .nav > li:hover > ul.nav-second-level {
display: block;
}