becomes its own card; every | renders as a small uppercase label (from its data-label
attribute, set once per column in the markup) above its content. Replaces the old
horizontal-scroll fallback, which read as clunky with this many columns on a touch device.
The row's left accent bar moves from the first | (a box-shadow, meaningless once that
cell is just the top item in a stacked card) to the card itself, as a real border. */
@media (max-width: 575.98px) {
.quids-table-wrap {
background: transparent;
border: none;
overflow: visible;
}
.quids-table-wrap table,
.quids-table-wrap tbody,
.quids-table-wrap tr,
.quids-table-wrap td {
display: block;
width: 100%;
}
.quids-table-wrap thead {
display: none;
}
.quids-table-wrap tbody tr {
background: var(--quids-surface);
border: 1px solid var(--bs-border-color);
border-left-width: 3px;
border-radius: 12px;
padding: 0.25rem 0.9rem;
margin-bottom: 0.75rem;
}
.quids-table-wrap tbody tr:last-child {
margin-bottom: 0;
}
.quids-table-wrap tbody td {
padding: 0.55rem 0;
}
.quids-table-wrap tbody tr td:first-child {
box-shadow: none; /* superseded by the card's own left border below */
}
/* Scoped to match (rather than lose to) .quids-table-wrap tbody tr's own border shorthand
above — a bare .quids-row-accent-* selector has lower specificity than that rule, so its
border-left-color was silently never winning and every card rendered with the same
neutral border regardless of status. */
.quids-table-wrap tbody tr.quids-row-accent-paid { border-left-color: var(--bs-success); }
.quids-table-wrap tbody tr.quids-row-accent-alert { border-left-color: var(--quids-burnt-rose); }
.quids-table-wrap tbody tr.quids-row-accent-upcoming { border-left-color: var(--quids-sand); }
.quids-table-wrap tbody tr.quids-row-accent-neutral { border-left-color: var(--bs-border-color); }
.quids-table-wrap tbody tr.quids-row-accent-primary { border-left-color: var(--quids-tech-blue); }
.quids-table-wrap td::before {
content: attr(data-label);
display: block;
font-size: 0.7rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--bs-secondary-color);
margin-bottom: 0.2rem;
}
.quids-table-wrap td:empty::before {
content: none; /* an empty cell (e.g. no Round Up this row) shouldn't show a bare label */
}
.quids-row-tag-editor {
min-width: 0; /* the table-layout floor doesn't apply once the cell is full-width */
}
}
/* ---- Global search (nav box, site.js) ---- */
.quids-global-search {
width: 100%;
max-width: 260px;
}
.quids-search-results {
position: absolute;
top: 100%;
left: 0;
right: 0;
z-index: 1050; /* above the navbar's own stacking context */
margin-top: 0.25rem;
background: var(--quids-surface);
border: 1px solid var(--bs-border-color);
border-radius: 12px;
box-shadow: 0 0.5rem 1rem rgba(4, 8, 15, 0.15);
max-height: 60vh;
overflow-y: auto;
}
.quids-search-group-label {
padding: 0.5rem 0.9rem 0.25rem;
font-size: 0.7rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--bs-secondary-color);
}
.quids-search-result {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 0.75rem;
padding: 0.5rem 0.9rem;
color: var(--bs-body-color);
text-decoration: none;
}
.quids-search-result:hover {
background-color: rgba(0, 89, 177, 0.06);
}
.quids-search-result-detail {
flex-shrink: 0;
font-size: 0.8rem;
color: var(--bs-secondary-color);
}
/* ---- Bootstrap Table (self-hosted, server-paginated lists) ----
Every list that can hold a meaningful amount of data (Spending, Budget, Income, the Savings
bucket/budget-item transaction-history modals, Admin Users) is a bootstrap-table instance
mounted inside the same .table-responsive.quids-table-wrap wrapper the old server-rendered
tables used, via window.quidsInitTable (quids-table.js). Its toolbar/pagination chrome renders
as plain Bootstrap form controls (form-control, .pagination, .btn-secondary) — this app never
themed most of those (only .btn-primary/.btn-outline-primary/.btn-danger), so left alone they
fall back to flat Bootstrap grey. These rules fill that gap, plus remove the double
border/radius bootstrap-table's own container adds (the wrapper already provides one) and give
its card-view output (used below the mobile breakpoint, toggled by quids-table.js) the same
look the old data-label media query gave a plain server-rendered table. */
.quids-table-wrap .fixed-table-container {
border: none;
background: transparent;
}
.quids-table-wrap .fixed-table-toolbar {
padding: 0.85rem 1rem 0;
}
.quids-table-wrap .fixed-table-toolbar .search input {
font-size: 0.85rem;
/* Bootstrap's .form-control defaults its background to --bs-body-bg (the page background),
not this surface panel's own --quids-surface — one shade darker than the bar it sits in,
which reads as a stray "hole" cut into it. */
background-color: var(--quids-surface);
border-color: var(--bs-border-color);
color: var(--bs-body-color);
}
.quids-table-wrap .fixed-table-pagination {
padding: 0.6rem 1rem 0.85rem;
border-top: 1px solid var(--bs-border-color);
margin-top: 0.5rem;
flex-wrap: wrap;
row-gap: 0.5rem;
}
/* Bootstrap's own un-themed defaults, not bootstrap-table's — this app only ever restyled
.btn-primary/.btn-danger, so the pagination Prev/Next/page-number buttons (Bootstrap's
.pagination component) and the "rows per page" dropdown trigger (a plain .btn-secondary)
both fall back to flat Bootstrap grey, which reads as a much more "boxed" panel than
anything else in the app. Reskin both the same way .btn-primary/.btn-outline-primary
already are elsewhere — local --bs-*/--bs-btn-* variable overrides, not fighting specificity
on the base Bootstrap rules directly. */
.quids-table-wrap {
--bs-pagination-bg: transparent;
--bs-pagination-color: var(--bs-body-color);
--bs-pagination-border-color: var(--bs-border-color);
--bs-pagination-hover-bg: rgba(0, 89, 177, 0.06);
--bs-pagination-hover-color: var(--bs-body-color);
--bs-pagination-hover-border-color: var(--bs-border-color);
--bs-pagination-active-bg: var(--quids-tech-blue);
--bs-pagination-active-border-color: var(--quids-tech-blue);
--bs-pagination-disabled-bg: transparent;
--bs-pagination-disabled-color: var(--bs-secondary-color);
--bs-pagination-disabled-border-color: var(--bs-border-color);
}
.quids-table-wrap .fixed-table-pagination .btn-secondary {
--bs-btn-bg: transparent;
--bs-btn-color: var(--bs-body-color);
--bs-btn-border-color: var(--bs-border-color);
--bs-btn-hover-bg: rgba(0, 89, 177, 0.06);
--bs-btn-hover-color: var(--bs-body-color);
--bs-btn-hover-border-color: var(--bs-border-color);
--bs-btn-active-bg: rgba(0, 89, 177, 0.1);
--bs-btn-active-color: var(--bs-body-color);
}
/* Card view (mobile) — mirrors the retired .quids-table-wrap media query 1:1, just targeting
bootstrap-table's own generated card markup (td.card-view/.card-view-title/.card-view-value)
instead of data-label. The accent-left-border still comes from the same quids-row-accent-*
class every rowStyle callback sets on |