/* ==========================================================================
ClearPro — Unified Button Style + Full-Width Layout Fix
Added 2026-09-09.
1) Every button/CTA across the app is unified to match the dashboard's
main blue bubble (size, shape, colour, shadow), per request.
EXCEPTION kept on purpose: Delete/Danger buttons stay red — removing
that would erase the only visual warning before an irreversible
action (deleting a customer/job/invoice etc).
2) Faint hover effect added to every button (including the red ones).
3) The app no longer sits in a narrow centred column on laptop/tablet
screens — it now fills the screen width, with bigger text and
bigger buttons/bubbles at those sizes. Mobile phone view (<=700px)
is left exactly as it was.
NOTE: informational stat badges (.ram-bubble, .roster-accept-chip) were
deliberately left OUT of the button treatment - they're not action
buttons, they're read-only figures, and turning them blue made their
numbers unreadable.
Loaded last in , after all other stylesheets, so it wins the
cascade without needing to edit any of the other 47 CSS files.
========================================================================== */
/* ---------- 1) Full-width layout + bigger text (tablet & laptop, >700px) ---------- */
@media (min-width: 701px) {
.app-main {
max-width: none !important;
width: 100% !important;
box-sizing: border-box !important;
padding-left: 48px !important;
padding-right: 48px !important;
}
body { font-size: 17px !important; }
h1 { font-size: 34px !important; }
h2 { font-size: 24px !important; }
h3 { font-size: 19px !important; }
}
/* ---------- 2) Unify every button/CTA to the dashboard's main blue bubble ----------
Excluded on purpose (kept red / untouched):
- .danger, .danger-button, .btn-role-delete, .remove-quote-item -> destructive actions
- .mobile-menu-toggle, .cp-select-trigger, .item-search-option, .addr-mode-btn, .opt
-> these are menu/select/toggle controls, not action buttons
*/
button:not(.danger):not(.danger-button):not(.btn-role-delete):not(.remove-quote-item):not(.mobile-menu-toggle):not(.cp-select-trigger):not(.item-search-option):not(.addr-mode-btn):not(.opt),
.button:not(.danger):not(.danger-button):not(.btn-role-delete),
a.button:not(.danger):not(.btn-role-delete),
.btn:not(.danger):not(.btn-role-delete),
input[type="submit"]:not(.danger):not(.danger-button),
input[type="button"]:not(.danger):not(.danger-button),
.link-button:not(.danger),
button.link:not(.danger),
.cp-action,
.dashboard-review-button,
.dashboard-invoice-button,
.dashboard-send-button,
.complete-button,
.map-button,
.cancel-button,
.customer-search-button,
.item-category-tabs a,
.completed-filter a,
.staff-history-filter a,
.quick-actions a,
table .actions a,
.actions a,
.dash-welcome-actions a.dash-cta-secondary,
.dash-welcome-actions button.dash-cta-broadcast,
#block-time-toggle-btn,
.header-signout {
background: linear-gradient(180deg, #1686bc 0%, #0a5f93 48%, #08496f 100%) !important;
background-image: linear-gradient(180deg, #1686bc 0%, #0a5f93 48%, #08496f 100%) !important;
color: #ffffff !important;
border: 0 !important;
border-radius: 999px !important;
box-shadow: 0 4px 0 #08496f, 0 6px 14px rgba(10,95,147,.28) !important;
text-shadow: none !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 7px !important;
font-weight: 700 !important;
line-height: 1.2 !important;
text-decoration: none !important;
cursor: pointer !important;
appearance: none !important;
-webkit-appearance: none !important;
box-sizing: border-box !important;
transition: filter .15s ease, transform .15s ease, box-shadow .15s ease !important;
min-height: 40px;
padding: 10px 16px;
font-size: 14px;
}
/* Bigger bubbles/buttons on tablet & laptop screens */
@media (min-width: 701px) {
button:not(.danger):not(.danger-button):not(.btn-role-delete):not(.remove-quote-item):not(.mobile-menu-toggle):not(.cp-select-trigger):not(.item-search-option):not(.addr-mode-btn):not(.opt),
.button:not(.danger):not(.danger-button):not(.btn-role-delete),
a.button:not(.danger):not(.btn-role-delete),
.btn:not(.danger):not(.btn-role-delete),
input[type="submit"]:not(.danger):not(.danger-button),
input[type="button"]:not(.danger):not(.danger-button),
.cp-action,
.dashboard-review-button,
.dashboard-invoice-button,
.dashboard-send-button,
.complete-button,
.map-button,
.cancel-button,
.customer-search-button {
min-height: 44px !important;
padding: 12px 20px !important;
font-size: 15px !important;
}
}
/* ---------- 3) Faint hover effect - every button, including the red ones ---------- */
button:not(.mobile-menu-toggle):not(.cp-select-trigger):not(.item-search-option):not(.addr-mode-btn):not(.opt):hover,
.button:hover,
a.button:hover,
.btn:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
.link-button:hover,
button.link:hover,
.cp-action:hover,
.dashboard-review-button:hover,
.dashboard-invoice-button:hover,
.dashboard-send-button:hover,
.complete-button:hover,
.map-button:hover,
.cancel-button:hover,
.customer-search-button:hover,
.item-category-tabs a:hover,
.completed-filter a:hover,
.staff-history-filter a:hover,
.quick-actions a:hover,
table .actions a:hover,
.actions a:hover,
.dash-welcome-actions a.dash-cta-secondary:hover,
.dash-welcome-actions button.dash-cta-broadcast:hover,
#block-time-toggle-btn:hover,
.header-signout:hover,
.danger:hover,
.danger-button:hover,
.btn-role-delete:hover,
.remove-quote-item:hover {
filter: brightness(1.08) !important;
transform: translateY(-1px) !important;
}
/* ---------- 4) Customers page: card/bubble grid -> plain list ---------- */
.customer-grid {
display: block !important;
}
.customer-card {
display: grid !important;
grid-template-columns: 1fr auto !important;
align-items: center !important;
column-gap: 16px !important;
row-gap: 1px !important;
width: 100% !important;
max-width: none !important;
border-radius: 8px !important;
border: 1px solid #dbe4e9 !important;
margin-bottom: 8px !important;
padding: 12px 18px !important;
}
/* NOTE: a customer card can have ONE or TWO lines (legal name +
email) depending on the customer - don't hardcode grid-row on them,
let grid auto-placement stack however many there are, and have the
stats column span every row that ends up existing. */
.customer-card > strong { grid-column: 1; }
.customer-card > small { grid-column: 1; }
.customer-card > .customer-card-stats {
grid-column: 2 !important;
grid-row: 1 / -1 !important;
flex-direction: column !important;
align-items: flex-end !important;
gap: 2px !important;
}
/* ---------- 5) Jobs page: rows as wide rounded bubble cards (still a list) ----------
NOTE: table/tbody need an explicit width:100% here - once tbody stops
being display:table-row-group, the browser sizes the itself
from the (much narrower) header row alone, which squeezed every row
down to a sliver and made the customer name wrap one letter per line. */
#jobs-list-table {
display: block !important;
width: 100% !important;
}
#jobs-list-table thead {
display: block !important;
width: 100% !important;
}
#jobs-list-table thead tr {
display: flex !important;
gap: 20px !important;
padding: 0 22px 10px !important;
}
#jobs-list-table thead th {
display: block !important;
border: none !important;
padding: 0 !important;
}
#jobs-list-table thead th:nth-child(1) { flex: 0 0 140px !important; }
#jobs-list-table thead th:nth-child(2) { flex: 1 1 auto !important; min-width: 0 !important; }
#jobs-list-table thead th:nth-child(3) { flex: 0 0 120px !important; }
#jobs-list-table thead th:nth-child(4) { flex: 0 0 120px !important; text-align: right !important; }
#jobs-list-table tbody {
display: block !important;
width: 100% !important;
}
#jobs-list-table tbody tr.clickable-job {
display: flex !important;
align-items: center !important;
width: 100% !important;
box-sizing: border-box !important;
gap: 20px !important;
background: #ffffff !important;
border: 1px solid #dbe4e9 !important;
border-radius: 18px !important;
padding: 14px 22px !important;
margin-bottom: 10px !important;
box-shadow: 0 1px 3px rgba(0,0,0,.05) !important;
}
#jobs-list-table tbody tr.clickable-job td {
display: block !important;
border: none !important;
padding: 0 !important;
}
#jobs-list-table tbody tr.clickable-job td:nth-child(1) { flex: 0 0 140px !important; }
#jobs-list-table tbody tr.clickable-job td:nth-child(2) { flex: 1 1 auto !important; min-width: 0 !important; }
#jobs-list-table tbody tr.clickable-job td:nth-child(3) { flex: 0 0 120px !important; }
#jobs-list-table tbody tr.clickable-job td:nth-child(4) { flex: 0 0 120px !important; text-align: right !important; }
/* ---------- 6) Sales & Staff dropdowns: drop directly under their own menu ----------
desktop-menu-fix.css has a "Fix 2" that right-aligns the 4th and 5th nav
dropdowns (currently Sales and Staff) so they don't run off the right
edge of a narrow, centred layout. Now that the app is full-width there's
plenty of room, and that right-alignment was making these two dropdowns
appear to hang under the wrong menu items entirely. Undo it here. */
@media (min-width: 781px) {
header.site-header nav .sales-menu:nth-of-type(4) .sales-menu-links,
header.site-header nav .sales-menu:nth-of-type(5) .sales-menu-links {
left: 0 !important;
right: auto !important;
}
}
/* ---------- 7) Jobs list: blue background showing through the gaps between rows ----------
Matches the same blue used in the page's own header banner (#0a5f93),
so the space between each rounded job "bubble" isn't a plain white gap. */
#jobs-list-table {
background: transparent !important;
}
section.panel.table-wrap:has(#jobs-list-table) {
background: #d7ecf6 !important;
padding: 16px !important;
}
section.panel.table-wrap:has(#jobs-list-table) > p {
color: #0a5f93 !important;
}
/* ---------- 8) Close remaining button-colour gaps ----------
These use repeated-class selectors purely to WIN specificity battles
against older CSS files (ui-polish.css / ui-controls-unify.css /
ui-refresh.css) that were forcing "Edit" white and "Delete" blue.
Repeating a class in a selector is valid CSS and only affects
specificity, not matching. */
/* Edit / secondary / cancel / ghost buttons -> same blue bubble as everything else */
a.button.secondary.secondary.secondary.secondary.secondary.secondary.secondary.secondary.secondary.secondary.secondary.secondary.secondary.secondary.secondary.secondary.secondary.secondary.secondary.secondary.secondary.secondary.secondary.secondary.secondary.secondary.secondary.secondary.secondary.secondary.secondary.secondary.secondary.secondary.secondary.secondary.secondary.secondary.secondary.secondary,
.button.secondary.secondary.secondary.secondary.secondary.secondary.secondary.secondary.secondary.secondary.secondary.secondary.secondary.secondary.secondary.secondary.secondary.secondary.secondary.secondary.secondary.secondary.secondary.secondary.secondary.secondary.secondary.secondary.secondary.secondary.secondary.secondary.secondary.secondary.secondary.secondary.secondary.secondary.secondary.secondary,
button.secondary.secondary.secondary.secondary.secondary.secondary.secondary.secondary.secondary.secondary.secondary.secondary.secondary.secondary.secondary.secondary.secondary.secondary.secondary.secondary.secondary.secondary.secondary.secondary.secondary.secondary.secondary.secondary.secondary.secondary.secondary.secondary.secondary.secondary.secondary.secondary.secondary.secondary.secondary.secondary,
.btn.secondary.secondary.secondary.secondary.secondary.secondary.secondary.secondary.secondary.secondary.secondary.secondary.secondary.secondary.secondary.secondary.secondary.secondary.secondary.secondary.secondary.secondary.secondary.secondary.secondary.secondary.secondary.secondary.secondary.secondary.secondary.secondary.secondary.secondary.secondary.secondary.secondary.secondary.secondary.secondary,
.btn-role-edit.btn-role-edit.btn-role-edit.btn-role-edit.btn-role-edit.btn-role-edit.btn-role-edit.btn-role-edit.btn-role-edit.btn-role-edit.btn-role-edit.btn-role-edit.btn-role-edit.btn-role-edit.btn-role-edit.btn-role-edit.btn-role-edit.btn-role-edit.btn-role-edit.btn-role-edit.btn-role-edit.btn-role-edit.btn-role-edit.btn-role-edit.btn-role-edit.btn-role-edit.btn-role-edit.btn-role-edit.btn-role-edit.btn-role-edit.btn-role-edit.btn-role-edit.btn-role-edit.btn-role-edit.btn-role-edit.btn-role-edit.btn-role-edit.btn-role-edit.btn-role-edit.btn-role-edit,
a.btn-role-edit.btn-role-edit.btn-role-edit.btn-role-edit.btn-role-edit.btn-role-edit.btn-role-edit.btn-role-edit.btn-role-edit.btn-role-edit.btn-role-edit.btn-role-edit.btn-role-edit.btn-role-edit.btn-role-edit.btn-role-edit.btn-role-edit.btn-role-edit.btn-role-edit.btn-role-edit.btn-role-edit.btn-role-edit.btn-role-edit.btn-role-edit.btn-role-edit.btn-role-edit.btn-role-edit.btn-role-edit.btn-role-edit.btn-role-edit.btn-role-edit.btn-role-edit.btn-role-edit.btn-role-edit.btn-role-edit.btn-role-edit.btn-role-edit.btn-role-edit.btn-role-edit.btn-role-edit,
.button.ghost.ghost.ghost.ghost.ghost.ghost.ghost.ghost.ghost.ghost.ghost.ghost.ghost.ghost.ghost.ghost.ghost.ghost.ghost.ghost.ghost.ghost.ghost.ghost.ghost.ghost.ghost.ghost.ghost.ghost.ghost.ghost.ghost.ghost.ghost.ghost.ghost.ghost.ghost.ghost,
button.ghost.ghost.ghost.ghost.ghost.ghost.ghost.ghost.ghost.ghost.ghost.ghost.ghost.ghost.ghost.ghost.ghost.ghost.ghost.ghost.ghost.ghost.ghost.ghost.ghost.ghost.ghost.ghost.ghost.ghost.ghost.ghost.ghost.ghost.ghost.ghost.ghost.ghost.ghost.ghost,
a.cancel-button.cancel-button.cancel-button.cancel-button.cancel-button.cancel-button.cancel-button.cancel-button.cancel-button.cancel-button.cancel-button.cancel-button.cancel-button.cancel-button.cancel-button.cancel-button.cancel-button.cancel-button.cancel-button.cancel-button.cancel-button.cancel-button.cancel-button.cancel-button.cancel-button.cancel-button.cancel-button.cancel-button.cancel-button.cancel-button.cancel-button.cancel-button.cancel-button.cancel-button.cancel-button.cancel-button.cancel-button.cancel-button.cancel-button.cancel-button,
.button.cancel-button.cancel-button.cancel-button.cancel-button.cancel-button.cancel-button.cancel-button.cancel-button.cancel-button.cancel-button.cancel-button.cancel-button.cancel-button.cancel-button.cancel-button.cancel-button.cancel-button.cancel-button.cancel-button.cancel-button.cancel-button.cancel-button.cancel-button.cancel-button.cancel-button.cancel-button.cancel-button.cancel-button.cancel-button.cancel-button.cancel-button.cancel-button.cancel-button.cancel-button.cancel-button.cancel-button.cancel-button.cancel-button.cancel-button.cancel-button {
background: linear-gradient(180deg, #1686bc 0%, #0a5f93 48%, #08496f 100%) !important;
background-image: linear-gradient(180deg, #1686bc 0%, #0a5f93 48%, #08496f 100%) !important;
background-color: transparent !important;
color: #ffffff !important;
border: 0 !important;
border-radius: 999px !important;
box-shadow: 0 4px 0 #08496f, 0 6px 14px rgba(10,95,147,.28) !important;
text-shadow: none !important;
}
/* Delete / danger buttons -> stay RED everywhere, including inside