:root {
    --app-navy: rgb(22, 19, 46);
    --app-accent: rgb(220, 190, 38);
    --app-page: #f5f5f5;
    --app-surface: #ffffff;
    --app-text: #24222d;
    --app-muted: #6b6b6b;
    --app-border: #d8d6df;
    --app-radius: 8px;
    --app-shadow: 0 5px 20px rgba(0, 0, 0, .1);
    --app-primary: #34305f;
    --app-primary-hover: #211e43;
    --app-success: #247a4d;
    --app-success-hover: #195d39;
    --app-danger: #b33a3a;
    --app-danger-hover: #8f2929;
    --app-info: #286a9b;
    --app-info-hover: #1d527a;
    --app-warning: #8a6410;
    --app-warning-bg: #fff8dc;
    --app-warning-border: #e1c45a;
    --app-danger-bg: #fff0f0;
    --app-danger-border: #e2a4a4;
    --app-success-bg: #edf9f2;
    --app-success-border: #9bcdb0;
    --app-info-bg: #edf6fc;
    --app-info-border: #9fc4dd;
    --app-control-height: 42px;
    --app-control-radius: 8px;
}

/* Shared plan-usage display */
.pageUsageMeter { width: min(620px, 100%); margin: 14px auto 22px; }
.usageCard { padding: 17px; border: 1px solid #dcd9e3; border-left: 4px solid var(--app-success); border-radius: 10px; background: var(--app-surface); box-shadow: 0 4px 14px rgba(22,19,46,.06); }
.usageCard--warning { border-left-color: #c49319; }
.usageCard--critical { border-left-color: #d56b20; }
.usageCard--limit { border-left-color: var(--app-danger); }
.usageCard__top, .usageCard__numbers { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; }
.usageCard__eyebrow { margin: 0 0 4px; color: var(--app-muted); font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.usageCard h3 { margin: 0; color: var(--app-navy); font-size: 1rem; }
.usageCard__top > strong { color: var(--app-success); font-size: .88rem; white-space: nowrap; }
.usageCard--warning .usageCard__top > strong { color: #8a6410; }
.usageCard--critical .usageCard__top > strong { color: #a34c12; }
.usageCard--limit .usageCard__top > strong { color: var(--app-danger); }
.usageCard__numbers { margin-top: 14px; color: #686371; font-size: .78rem; }
.usageProgress { height: 7px; margin-top: 7px; overflow: hidden; border-radius: 999px; background: #eceaf0; }
.usageProgress > span { display: block; height: 100%; min-width: 2px; border-radius: inherit; background: var(--app-success); }
.usageCard--warning .usageProgress > span { background: #c49319; }
.usageCard--critical .usageProgress > span { background: #d56b20; }
.usageCard--limit .usageProgress > span { background: var(--app-danger); }
.usageCard__help { margin: 11px 0 0; color: #716c79; font-size: .77rem; line-height: 1.45; }

[hidden] {
    display: none !important;
}

.settingsAccessPending body {
    visibility: hidden;
    pointer-events: none;
}

.permissionAccessPending body {
    visibility: hidden;
    pointer-events: none;
}

.accessPending body {
    visibility: hidden;
    pointer-events: none;
}

/* All application pages with back navigation share the Add Vehicle shell.
   Centre cards, forms and reports inside this shell—not the main element. */
@media screen {
    body > main:has(.backButton) {
        width: 100% !important;
        max-width: none !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
        padding-right: 40px !important;
        padding-left: 40px !important;
    }
}

html {
    min-width: 320px;
}

body {
    color: var(--app-text);
    text-rendering: optimizeLegibility;
}

.headContainer {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    height: 68px !important;
    min-height: 68px !important;
    margin: 0 !important;
    padding: 14px 40px !important;
    box-sizing: border-box !important;
    background: var(--app-navy) !important;
}

.headContainer,
.headContainer * {
    box-sizing: border-box;
}

.nuvationLogo {
    display: block !important;
    width: auto !important;
    height: 40px !important;
    max-width: none !important;
    margin: 0 !important;
}

.profilesSVG {
    display: block !important;
    width: 30px !important;
    height: 30px !important;
    margin: 0 !important;
    visibility: hidden;
    transition: transform .2s ease, opacity .2s ease;
}

a:has(> .profilesSVG:not(.accountIconReady)) {
    visibility: hidden;
    pointer-events: none;
}

.profilesSVG.accountIconReady {
    visibility: visible;
}

.profilesSVG:hover {
    opacity: .82;
    transform: scale(1.04);
}

.headContainer .goBack,
.headContainer .createUser {
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: color .2s ease;
}

.headContainer .goBack:hover,
.headContainer .createUser:hover {
    color: var(--app-accent);
}

button,
input,
select,
textarea {
    font: inherit;
}

/* Every application search field follows the clear User Guide control style. */
body > main input:is(
    [type="search"],
    [id^="search"],
    [id$="Search"],
    [placeholder^="Search"]
) {
    box-sizing: border-box !important;
    min-height: 48px !important;
    padding: 10px 13px !important;
    border: 1px solid #bbb8c9 !important;
    border-radius: 10px !important;
    background: #fff !important;
    color: var(--app-text) !important;
    box-shadow: none !important;
    font: inherit !important;
}

body > main input:is(
    [type="search"],
    [id^="search"],
    [id$="Search"],
    [placeholder^="Search"]
):focus {
    border-color: var(--app-primary) !important;
    outline: 3px solid rgba(63, 57, 118, .16) !important;
    outline-offset: 1px !important;
}

button,
a,
input,
select,
textarea {
    -webkit-tap-highlight-color: transparent;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid rgba(220, 190, 38, .55);
    outline-offset: 2px;
}

/* Shared application controls */

button:not(.socialBtn),
.appButton {
    min-height: var(--app-control-height);
    padding: 10px 18px;
    border: 1px solid transparent;
    border-radius: var(--app-control-radius);
    background: var(--app-primary);
    color: #fff;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    cursor: pointer;
    box-shadow: 0 2px 7px rgba(22, 19, 46, .14);
    transition:
        background-color .18s ease,
        border-color .18s ease,
        box-shadow .18s ease,
        transform .18s ease,
        opacity .18s ease;
}

/* Action-label alignment: one-line actions are always centred. */
button:not(.socialBtn),
.appButton,
td a:is(.editBtn, .deleteBtn, .pdfBtn, .convertBtn) {
    text-align: center !important;
}

.mobileActionBreak {
    display: none;
}

button:not(.socialBtn):hover,
.appButton:hover {
    background: var(--app-primary-hover);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 5px 12px rgba(22, 19, 46, .18);
}

button:not(.socialBtn):active,
.appButton:active {
    transform: translateY(0);
    box-shadow: 0 2px 5px rgba(22, 19, 46, .14);
}

button:not(.socialBtn):disabled,
.appButton:disabled {
    cursor: not-allowed;
    opacity: .55;
    transform: none;
    box-shadow: none;
}

/* Semantic button variants; existing class names are supported automatically. */

.editBtn,
.deleteBtn,
.paymentDeleteBtn,
.pdfBtn,
.convertBtn {
    width: auto !important;
    min-width: 0 !important;
    min-height: 34px !important;
    margin-top: 0 !important;
    padding: 8px 14px !important;
    border-width: 1px !important;
    border-style: solid !important;
    border-radius: 6px !important;
    box-shadow: none !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 16px !important;
    white-space: nowrap;
}

.editBtn {
    background: var(--app-accent) !important;
    border-color: var(--app-accent) !important;
    color: var(--app-navy) !important;
}

.editBtn:hover {
    background: #c9a91c !important;
    border-color: #c9a91c !important;
    color: var(--app-navy) !important;
}

td .editBtn:not(:last-child),
td .pdfBtn:not(:last-child),
td .convertBtn:not(:last-child),
td .deleteBtn:not(:last-child),
td .paymentDeleteBtn:not(:last-child) {
    margin-right: 8px !important;
}

.deleteBtn,
.paymentDeleteBtn,
#deleteAccountButton {
    background: var(--app-danger) !important;
    border-color: var(--app-danger) !important;
    color: #fff !important;
}

.deleteBtn:hover,
.paymentDeleteBtn:hover,
#deleteAccountButton:hover {
    background: var(--app-danger-hover) !important;
    border-color: var(--app-danger-hover) !important;
}

.pdfBtn,
.convertBtn,
#generatePdfButton,
#printButton {
    background: var(--app-info) !important;
    border-color: var(--app-info) !important;
    color: #fff !important;
}

.pdfBtn:hover,
.convertBtn:hover,
#generatePdfButton:hover,
#printButton:hover {
    background: var(--app-info-hover) !important;
    border-color: var(--app-info-hover) !important;
}

#saveChanges,
#saveSettings,
#saveInventory,
#createInvoiceButton,
#createQuoteButton,
#addPayment,
#adjustStock {
    background: var(--app-success) !important;
    border-color: var(--app-success) !important;
    color: #fff !important;
}

#saveChanges:hover,
#saveSettings:hover,
#saveInventory:hover,
#createInvoiceButton:hover,
#createQuoteButton:hover,
#addPayment:hover,
#adjustStock:hover {
    background: var(--app-success-hover) !important;
    border-color: var(--app-success-hover) !important;
}

#cancelEdit,
#finishInvoiceButton,
#finishQuoteButton,
#logoutButton,
.backButton {
    background: #fff !important;
    border-color: var(--app-border) !important;
    color: var(--app-text) !important;
    box-shadow: 0 2px 7px rgba(22, 19, 46, .08);
}

/* "Log out" is a short, deliberate action label. Never split it across lines
   when a narrow mobile action grid changes a button's available width. */
#logoutButton {
    white-space: nowrap !important;
    overflow-wrap: normal !important;
    word-break: keep-all !important;
}

/* One application-wide back control, matching Add Vehicle. Page-specific
   styles must not resize, centre, recolour, or reposition this link. */
a.backButton {
    display: inline-flex !important;
    align-items: center;
    justify-content: flex-start;
    align-self: flex-start !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 40px;
    margin: 0 0 25px 0 !important;
    padding: 9px 14px !important;
    border: 1px solid var(--app-border) !important;
    border-radius: var(--app-control-radius) !important;
    background: var(--app-surface) !important;
    color: var(--app-navy) !important;
    box-shadow: 0 2px 7px rgba(22, 19, 46, .08);
    font-size: 15px;
    font-weight: 700 !important;
    line-height: 20px;
    text-align: left !important;
    text-decoration: none !important;
    white-space: nowrap;
    cursor: pointer;
}

@media screen and (max-width: 700px) {
    body > main:has(.backButton) {
        padding-right: 12px !important;
        padding-left: 12px !important;
    }
}

@media screen and (max-width: 430px) {
    body.responsiveWorkspacePage > main.analyticsMain {
        width: 100% !important;
        max-width: 100% !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
    }

    .mobileActionBreak {
        display: block;
    }
}

#cancelEdit:hover,
#finishInvoiceButton:hover,
#finishQuoteButton:hover,
#logoutButton:hover,
.backButton:hover {
    background: var(--app-accent) !important;
    border-color: var(--app-accent) !important;
    color: var(--app-navy) !important;
}

/* Shared feedback messages */

.registrationWarning,
.statusMessage,
.errorStatus,
.appAlert,
[role="alert"] {
    display: block;
    width: 100%;
    margin: 12px 0;
    padding: 12px 14px;
    border: 1px solid var(--app-warning-border);
    border-left-width: 4px;
    border-radius: var(--app-control-radius);
    background: var(--app-warning-bg);
    color: #604707;
    font-size: 14px;
    font-weight: 650;
    line-height: 1.45;
    box-sizing: border-box;
}

.errorStatus,
.appAlert--error,
.statusMessage.error {
    border-color: var(--app-danger-border);
    background: var(--app-danger-bg);
    color: #862727;
}

.appAlert--success,
.statusMessage.success {
    border-color: var(--app-success-border);
    background: var(--app-success-bg);
    color: #195d39;
}

.appAlert--info,
.statusMessage.info {
    border-color: var(--app-info-border);
    background: var(--app-info-bg);
    color: #1d527a;
}

.statusMessage:empty,
.errorStatus:empty,
.appAlert:empty,
[role="alert"]:empty {
    display: none;
}

/* Status labels and compact badges */

.statusBadge,
.badge,
[data-status] {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 4px 9px;
    border: 1px solid var(--app-border);
    border-radius: 999px;
    background: #f2f1f5;
    color: var(--app-text);
    font-size: 12px;
    font-weight: 750;
    line-height: 1;
}

@media (max-width: 600px) {
    button:not(.socialBtn),
    .appButton {
        min-height: 44px;
    }
}

.accountLogoutAction {
    color: white;
    text-decoration: none;
    font-weight: 700;
    padding: 8px 12px;
    border: 1px solid rgba(255, 255, 255, .65);
    border-radius: 6px;
}

.accountLogoutAction:hover {
    color: rgb(22, 19, 46);
    background: white;
}

.professionalVerificationNotice {
    margin: 0 40px 28px;
    padding: 14px 16px;
    border: 1px solid var(--app-warning-border);
    border-left-width: 5px;
    border-radius: var(--app-control-radius);
    background: var(--app-warning-bg);
    color: #604707;
    font-size: 13px;
    line-height: 1.55;
}

.professionalVerificationNotice strong {
    display: block;
    margin-bottom: 3px;
}

/* ================================================================
   Application-wide visual system
   Keep module layouts specialised, but make their visual language
   consistent: spacing, typography, controls, surfaces and tables.
   ================================================================ */

@media screen {
    body {
        margin: 0;
        background: var(--app-page);
        color: var(--app-text);
        font-family: Arial, Helvetica, sans-serif;
    }

    body > main {
        box-sizing: border-box;
        width: 100%;
        padding: 40px;
    }

    body:has(> .professionalVerificationNotice) > main {
        padding-bottom: 24px;
    }

    body:has(> .professionalVerificationNotice) > main > :last-child {
        margin-bottom: 0 !important;
    }

    body > main h1 {
        margin-top: 0;
        color: var(--app-navy);
        font-size: clamp(1.75rem, 3vw, 2.25rem);
        line-height: 1.15;
    }

    body > main h2,
    body > main h3 {
        color: var(--app-navy);
        line-height: 1.25;
    }

    body > main p {
        line-height: 1.5;
    }

    body > main label {
        color: #45424e;
        font-weight: 700;
    }

    body > main input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
    body > main select,
    body > main textarea {
        box-sizing: border-box;
        width: 100%;
        min-height: var(--app-control-height);
        padding: 10px 12px;
        border: 1px solid var(--app-border);
        border-radius: var(--app-control-radius);
        background: var(--app-surface);
        color: var(--app-text);
        box-shadow: none;
        transition: border-color .18s ease, box-shadow .18s ease;
    }

    body > main input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):focus,
    body > main select:focus,
    body > main textarea:focus {
        border-color: var(--app-primary);
        outline: none;
        box-shadow: 0 0 0 3px rgba(52, 48, 95, .12);
    }

    body > main textarea {
        min-height: 90px;
        line-height: 1.45;
        resize: vertical;
    }

    body > main input::placeholder,
    body > main textarea::placeholder {
        color: #85818e;
        opacity: 1;
    }

    .panel,
    .inventoryCard,
    .supplierCard,
    .orderCard,
    .statCard,
    .infoCard {
        border: 1px solid rgba(22, 19, 46, .07);
        border-radius: 12px;
        background: var(--app-surface);
        box-shadow: 0 4px 15px rgba(22, 19, 46, .09);
    }

    .deliveryToolbar,
    .maintenanceControls,
    .reportControls .filters {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 22px;
    }

    .deliveryToolbar input,
    .deliveryToolbar select,
    .maintenanceControls input,
    .maintenanceControls select {
        width: min(320px, 100%);
        margin: 0;
    }

    .tableWrapper,
    .maintenanceTableWrapper {
        overflow-x: auto;
        border: 1px solid rgba(22, 19, 46, .07);
        border-radius: 10px;
        background: var(--app-surface);
        box-shadow: 0 3px 12px rgba(22, 19, 46, .08);
    }

    body > main table {
        width: 100%;
        border-collapse: collapse;
        background: var(--app-surface);
    }

    body > main th {
        padding: 14px 16px;
        border: 0;
        background: var(--app-navy);
        color: #fff;
        font-size: 14px;
        font-weight: 750;
        line-height: 1.25;
        text-align: left;
        white-space: nowrap;
    }

    body > main td {
        padding: 14px 16px;
        border: 0;
        border-bottom: 1px solid #e7e5eb;
        color: var(--app-text);
        line-height: 1.4;
        vertical-align: middle;
    }

    body > main tbody tr:last-child td {
        border-bottom: 0;
    }

    body > main tbody tr:hover {
        background: #faf9fc;
    }

    body > main dialog {
        color: var(--app-text);
        border: 0;
        border-radius: 12px;
        background: var(--app-surface);
        box-shadow: 0 18px 55px rgba(22, 19, 46, .28);
    }
}

@media screen and (min-width: 701px) and (max-width: 900px) {
    .professionalVerificationNotice {
        margin-right: 25px;
        margin-left: 25px;
    }

    body:has(> .professionalVerificationNotice) > main,
    body:has(> .professionalVerificationNotice) > main:has(.backButton) {
        padding-bottom: 20px !important;
    }

    body > main,
    body > main:has(.backButton) {
        padding: 22px 24px 28px !important;
    }

    body > main > h1 {
        margin-bottom: 20px !important;
    }

    body > main .backButton {
        margin-bottom: 18px !important;
    }
}

/* Individual module hubs: deliberate tablet/laptop density. */
@media screen and (min-width: 701px) and (max-width: 1199px) {
    .inventoryOptions {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        width: min(100%, 900px) !important;
        margin-right: auto !important;
        margin-left: auto !important;
        gap: 18px !important;
    }

    .inventoryCard {
        width: 100% !important;
        min-height: 190px !important;
        padding: 22px !important;
        text-align: left !important;
    }

    .inventoryCard h2 {
        margin-bottom: 10px !important;
        font-size: 1.12rem !important;
    }

    .inventoryCard p {
        margin-bottom: 18px !important;
        line-height: 1.45;
    }
}

@media screen and (min-width: 901px) and (max-width: 1199px) {
    body > main,
    body > main:has(.backButton) {
        padding: 24px 28px 30px !important;
    }

    body > main > h1 {
        margin-bottom: 20px !important;
    }

    body > main .backButton {
        margin-bottom: 18px !important;
    }

    .inventoryCard {
        min-height: 180px !important;
        padding: 20px !important;
    }
}

@media screen and (min-width: 771px) and (max-width: 1199px) {
    .inventoryOptions:has(> :last-child:nth-child(3)) {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    .inventoryOptions .inventoryCard > a > button {
        height: 54px !important;
        min-height: 54px !important;
        max-height: 54px !important;
        padding: 9px 12px !important;
        font-size: .86rem !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
        overflow-wrap: normal !important;
    }

    .inventoryOptions .inventoryCard .mobileActionBreak {
        display: none !important;
    }
}

@media screen and (min-width: 901px) and (max-width: 1199px) {
    .inventoryOptions:has(> :last-child:nth-child(4)) {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
}

/* Wide screens retain a desktop composition without oversized empty gaps. */
@media screen and (min-width: 1200px) {
    body > main,
    body > main:has(.backButton) {
        padding: 26px 34px 32px !important;
    }

    body > main > h1 {
        margin-bottom: 22px !important;
    }

    body > main .backButton {
        margin-bottom: 20px !important;
    }

    .inventoryOptions {
        display: grid !important;
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
        width: min(100%, 1200px) !important;
        margin-right: auto !important;
        margin-left: auto !important;
        gap: 18px !important;
    }

    .inventoryCard {
        width: 100% !important;
        min-height: 180px !important;
        padding: 20px !important;
        text-align: left !important;
    }

    .inventoryOptions .inventoryCard > a > button {
        height: 54px !important;
        min-height: 54px !important;
        max-height: 54px !important;
        padding: 9px 12px !important;
        font-size: .9rem !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
        overflow-wrap: normal !important;
    }

    .inventoryOptions .inventoryCard .mobileActionBreak {
        display: none !important;
    }

    /* Customer hub: three compact desktop cards instead of stretched panels. */
    .customerHubPage .inventoryOptions {
        grid-template-columns: repeat(3, minmax(0, 300px)) !important;
        justify-content: center !important;
        width: min(100%, 1000px) !important;
        gap: 22px !important;
    }

    .customerHubPage .inventoryCard {
        min-height: 240px !important;
        padding: 24px !important;
    }
}

.documentVerificationNotice {
    margin-top: 18px;
    padding: 10px 12px;
    border-left: 4px solid var(--app-accent);
    background: var(--app-warning-bg);
    color: #604707;
    font-size: 11px;
    line-height: 1.45;
}

@media print {
    .professionalVerificationNotice {
        display: block !important;
        margin: 6mm 0 0 !important;
        padding: 3mm 4mm !important;
        border: 1px solid #8a6410 !important;
        border-left-width: 4px !important;
        background: #fff !important;
        color: #332500 !important;
        font-size: 9pt !important;
        line-height: 1.35 !important;
        break-inside: avoid;
    }
}

@media (max-width: 600px) {
    .headContainer {
        padding-right: 20px !important;
        padding-left: 20px !important;
    }

    .nuvationLogo {
        height: 34px !important;
    }

    .professionalVerificationNotice {
        margin: 0 14px 18px;
    }

    body:has(> .professionalVerificationNotice) > main {
        padding-bottom: 6px !important;
    }

    body > main {
        padding: 24px 18px;
    }

    .deliveryToolbar,
    .maintenanceControls,
    .reportControls .filters {
        align-items: stretch;
        flex-direction: column;
    }

    .deliveryToolbar input,
    .deliveryToolbar select,
    .maintenanceControls input,
    .maintenanceControls select,
    .reportControls .filters > * {
        width: 100%;
        max-width: none;
    }
}
.identityLockNotice {
    box-sizing: border-box;
    margin: 0.75rem 0 1.25rem;
    padding: 0.8rem 1rem;
    max-width: 760px;
    border: 1px solid rgba(124, 144, 165, 0.45);
    border-radius: 10px;
    background: rgba(235, 241, 247, 0.72);
    color: #334155;
    font-size: 0.92rem;
    line-height: 1.45;
}

.fleetCardIcon {
    display: block;
    margin-bottom: 10px;
    font-size: 1.6rem;
    line-height: 1;
}

.inventoryOptions .inventoryCard {
    align-items: stretch;
}

.inventoryOptions .inventoryCard > a {
    display: block;
    width: 100%;
    margin-top: auto;
}

.inventoryOptions .inventoryCard > a > button {
    width: 100% !important;
    min-width: 0 !important;
    height: 44px;
    min-height: 44px;
    margin: 0 !important;
    box-sizing: border-box;
}

input[readonly],
select:disabled {
    cursor: not-allowed;
    opacity: 0.78;
}

/* ================================================================
   Deliberate phone and small-tablet application layouts
   Preserve every workflow while replacing fixed desktop dimensions.
   ================================================================ */

@media screen and (max-width: 700px) {
    html,
    body {
        max-width: 100%;
        overflow-x: hidden;
    }

    body > main,
    body > main:has(.backButton) {
        width: 100% !important;
        max-width: 100% !important;
        padding: 22px 14px 36px !important;
    }

    body > main > h1 {
        margin-bottom: 24px;
        overflow-wrap: anywhere;
        text-align: left;
    }

    .welcomeContainer,
    .welcomeHeader,
    .welcomeHeader > div,
    .statsContainer,
    .informationContainer,
    .sideColumn,
    .modulesSection,
    .moduleContainer,
    .inventoryOptions,
    .inventoryCard,
    .infoCard,
    .statCard,
    .panel,
    .formCard,
    .supplierCard,
    .orderCard {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .welcomeHeader > div {
        width: 100% !important;
    }

    #welcomeMessage,
    #displayNameGreeting,
    #businessName,
    .moduleText,
    .moduleText h3,
    .moduleText p {
        max-width: 100%;
        overflow-wrap: break-word;
        word-break: normal;
    }

    #welcomeMessage,
    #displayNameGreeting {
        line-height: 1.18;
        text-wrap: balance;
    }

    .statsContainer {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    .statCard {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 100% !important;
        height: auto !important;
        min-height: 84px;
        padding: 12px !important;
    }

    .statCard h3 {
        margin-bottom: 10px;
        overflow-wrap: anywhere;
        font-size: .74rem !important;
        line-height: 1.3;
    }

    .statCard p {
        overflow-wrap: anywhere;
        font-size: 1.08rem !important;
    }

    .informationContainer {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 14px !important;
    }

    .informationContainer > .sideColumn {
        gap: 14px !important;
    }

    .infoCard {
        width: 100% !important;
        padding: 18px !important;
    }

    .dashboardDisclosure {
        padding: 0 !important;
    }

    .dashboardDisclosure > summary {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        min-height: 58px;
        padding: 14px 16px;
        cursor: pointer;
        list-style: none;
    }

    .dashboardDisclosure > summary::-webkit-details-marker {
        display: none;
    }

    .dashboardDisclosure > summary::after {
        content: "+";
        display: grid;
        place-items: center;
        flex: 0 0 30px;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background: #efedf4;
        color: var(--app-navy);
        font-size: 1.2rem;
        font-weight: 500;
    }

    .dashboardDisclosure[open] > summary::after {
        content: "−";
    }

    .dashboardDisclosure > summary h2 {
        margin: 0 !important;
        font-size: 1rem;
    }

    .dashboardDisclosure > summary + * {
        box-sizing: border-box;
        width: calc(100% - 32px) !important;
        margin-right: 16px;
        margin-bottom: 16px;
        margin-left: 16px;
    }

    .activityList li,
    .lowStockContainer p {
        max-width: 100%;
        overflow-wrap: break-word;
        word-break: normal;
        white-space: normal;
    }

    .businessInfo,
    .lowStockContainer,
    .activityList {
        width: 100%;
        max-height: none !important;
        overflow: visible !important;
        padding-right: 0 !important;
    }

    .infoRow {
        display: grid !important;
        grid-template-columns: minmax(108px, .8fr) minmax(0, 1.2fr);
        gap: 12px;
        align-items: start;
    }

    .infoRow > span {
        min-width: 0;
        overflow-wrap: anywhere;
        word-break: normal;
    }

    .infoRow > span:first-child {
        color: var(--app-muted);
        font-size: .82rem;
        font-weight: 700;
    }

    .infoRow > span:last-child {
        text-align: right;
    }

    .sideColumn .infoCard {
        height: auto !important;
        min-height: 0 !important;
    }

    .moduleContainer,
    .inventoryOptions {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        width: 100% !important;
        gap: 10px !important;
    }

    .moduleContainer {
        grid-auto-rows: 1fr;
    }

    .moduleCard {
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start;
        align-items: flex-start;
        width: 100% !important;
        height: 100%;
        min-height: 104px;
        padding: 13px 10px !important;
        gap: 8px !important;
        text-align: left !important;
    }

    .moduleIcon {
        font-size: 1.35rem !important;
        text-align: left;
    }

    .moduleText {
        display: grid;
        place-items: start;
        width: 100%;
        min-width: 0;
    }

    .moduleText h3 {
        margin: 0;
        font-size: .84rem !important;
        line-height: 1.3;
        text-align: left;
        overflow-wrap: break-word;
        word-break: normal;
        hyphens: none;
    }

    .moduleText p {
        display: none;
    }

    .inventoryCard {
        display: flex !important;
        width: 100% !important;
        min-height: 0 !important;
        padding: 16px 12px !important;
        text-align: left !important;
    }

    .inventoryCard h2 {
        margin-bottom: 8px !important;
        font-size: 1rem !important;
    }

    .inventoryCard p {
        font-size: .82rem;
        line-height: 1.4;
    }

    .inventoryCard p {
        margin-bottom: 12px;
    }

    .inventoryCard a {
        display: block;
        width: 100%;
        margin-top: auto;
    }

    .inventoryCard a > button {
        width: 100%;
        min-height: 46px;
    }

    .inventoryOptions > :last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }

    .formCard,
    form.formCard {
        width: 100% !important;
        max-width: 100% !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
        padding: 22px 17px !important;
    }

    #searchCustomer,
    #searchInventory,
    [id^="search"] {
        width: 100% !important;
        max-width: 100% !important;
        min-height: 46px;
        margin-bottom: 16px;
    }

    /* Older list pages place tables directly in main. Make the table itself
       the horizontal scroll surface so the page and its navigation never clip. */
    body > main table {
        display: block;
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        border: 1px solid rgba(22, 19, 46, .1);
        border-radius: 10px;
        box-shadow: 0 3px 12px rgba(22, 19, 46, .08);
        -webkit-overflow-scrolling: touch;
    }

    body > main thead,
    body > main tbody {
        min-width: max-content;
    }

    body > main th,
    body > main td {
        min-width: 120px;
        padding: 12px !important;
    }

    body > main th:last-child,
    body > main td:last-child {
        min-width: 168px;
    }

    body > main td .editBtn,
    body > main td .deleteBtn,
    body > main td .pdfBtn,
    body > main td .convertBtn,
    body > main td .paymentDeleteBtn {
        height: 58px !important;
        min-height: 58px !important;
        max-height: 58px !important;
        margin-top: 4px !important;
        margin-bottom: 4px !important;
        padding: 10px 14px !important;
        line-height: 18px !important;
        text-align: left !important;
        white-space: normal !important;
    }

    /* Final small-screen action sizing. Individual module styles must not
       create a mixture of short, tall, centred and left-aligned controls. */
    body > main button:not(.socialBtn),
    body > main .appButton,
    body > main input[type="button"],
    body > main input[type="submit"] {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        height: 58px !important;
        min-height: 58px !important;
        max-height: 58px !important;
        padding: 10px 14px !important;
        font-size: 14px !important;
        line-height: 18px !important;
        text-align: left !important;
        white-space: normal !important;
        overflow-wrap: normal !important;
        word-break: keep-all !important;
    }

    /* Only genuinely icon-sized controls remain compact. */
    body > main button[aria-label="Close"],
    body > main button[data-seat-change] {
        width: auto !important;
        height: 46px !important;
        min-height: 46px !important;
        max-height: 46px !important;
    }

    #editContainer,
    dialog,
    [role="dialog"] {
        width: calc(100% - 24px) !important;
        max-width: calc(100% - 24px) !important;
        max-height: calc(100dvh - 24px) !important;
        padding: 20px 16px !important;
        overflow-y: auto !important;
    }

    .switchLabel {
        gap: 16px;
    }

    /* This must remain last in the phone cascade. Module pages with a
       back button otherwise restore the shared 36px main bottom padding. */
    html body:has(> .professionalVerificationNotice) > main,
    html body:has(> .professionalVerificationNotice) > main:has(.backButton) {
        padding-bottom: 16px !important;
    }

    html body:has(.modulesSection):has(> .professionalVerificationNotice) > main {
        padding-bottom: 16px !important;
    }

}

@media screen and (max-width: 430px) {
    body > main table.mobileRecordTable,
    body > main .tableWrapper:has(> table.mobileRecordTable),
    body > main .maintenanceTableWrapper:has(> table.mobileRecordTable) {
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow: visible !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    body > main table.mobileRecordTable {
        display: block !important;
    }

    body > main table.mobileRecordTable thead {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        min-width: 0 !important;
        overflow: hidden !important;
        clip: rect(0 0 0 0) !important;
        white-space: nowrap !important;
    }

    body > main table.mobileRecordTable tbody {
        display: grid !important;
        width: 100% !important;
        min-width: 0 !important;
        gap: 10px !important;
    }

    body > main table.mobileRecordTable tbody tr {
        display: block !important;
        box-sizing: border-box !important;
        width: 100% !important;
        min-width: 0 !important;
        padding: 12px !important;
        overflow: hidden !important;
        border: 1px solid #e3e6ec !important;
        border-radius: 14px !important;
        background: #fff !important;
        box-shadow: 0 6px 18px rgba(22, 19, 46, .06) !important;
    }

    body > main table.mobileRecordTable tbody td {
        display: grid !important;
        box-sizing: border-box !important;
        grid-template-columns: minmax(78px, .8fr) minmax(0, 1.2fr) !important;
        gap: 9px !important;
        width: 100% !important;
        min-width: 0 !important;
        padding: 7px 0 !important;
        border: 0 !important;
        border-bottom: 1px solid #edf0f4 !important;
        font-size: .78rem !important;
        line-height: 1.35 !important;
        text-align: right !important;
        overflow-wrap: anywhere !important;
        white-space: normal !important;
    }

    body > main table.mobileRecordTable tbody td::before {
        content: attr(data-mobile-label);
        color: #747986;
        font-size: .62rem;
        font-weight: 800;
        letter-spacing: .035em;
        text-align: left;
        text-transform: uppercase;
    }

    body > main table.mobileRecordTable tbody td:last-child {
        border-bottom: 0 !important;
    }

    body > main table.mobileRecordTable tbody td.mobileRecordActions {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 6px !important;
        padding-top: 10px !important;
    }

    body > main table.mobileRecordTable tbody td.mobileRecordActions::before {
        grid-column: 1 / -1;
    }

    body > main table.mobileRecordTable tbody td.mobileRecordActions button,
    body > main table.mobileRecordTable tbody td.mobileRecordActions a {
        width: 100% !important;
        min-width: 0 !important;
        height: 54px !important;
        min-height: 54px !important;
        margin: 0 !important;
        padding: 6px 4px !important;
        font-size: .72rem !important;
        line-height: 1.18 !important;
        white-space: normal !important;
    }

    body > main table.mobileRecordTable tbody td.mobileRecordEmpty {
        display: block !important;
        padding: 16px 8px !important;
        color: #747986 !important;
        text-align: center !important;
    }

    body > main table.mobileRecordTable tbody td.mobileRecordEmpty::before {
        content: none !important;
    }

    body:has(#invoicesTable) #invoicesTable td:last-child,
    body:has(#quotesTable) #quotesTable td:last-child {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 6px !important;
    }

    body:has(#invoicesTable) #invoicesTable td:last-child::before,
    body:has(#quotesTable) #quotesTable td:last-child::before {
        grid-column: 1 / -1 !important;
    }

    body:has(#invoicesTable) #invoicesTable td:last-child button,
    body:has(#quotesTable) #quotesTable td:last-child button {
        width: 100% !important;
        min-width: 0 !important;
        height: 58px !important;
        min-height: 58px !important;
        max-height: 58px !important;
        margin: 0 !important;
        padding: 7px 5px !important;
        font-size: .72rem !important;
        line-height: 1.2 !important;
        white-space: normal !important;
    }

    body:has(#receivablesTable),
    body:has(#receivablesTable) > main {
        height: auto !important;
        min-height: 0 !important;
    }

    html:has(#receivablesTable),
    body:has(#receivablesTable) {
        padding-bottom: 0 !important;
    }

    body:has(#receivablesTable) > main,
    body:has(#receivablesTable) > main:has(.backButton) {
        padding-bottom: 8px !important;
    }

    body:has(#receivablesTable) .tableWrapper {
        margin-bottom: 0 !important;
    }

    body:has(#receivablesTable) > .professionalVerificationNotice,
    body:has(#receivablesTable) > main > .professionalVerificationNotice {
        margin-top: 8px !important;
        margin-bottom: 0 !important;
    }

    body:has(#receivablesTable) > main > .professionalVerificationNotice {
        width: auto !important;
        max-width: none !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
    }

    body:has(#receivablesTable) #paymentDialog:not([open]) {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
    }


    .welcomeContainer {
        margin-bottom: 16px !important;
    }

    .inventoryCard h2 {
        width: 100%;
        min-height: 1.2em;
        margin-bottom: 8px !important;
        font-size: .72rem !important;
        line-height: 1.2 !important;
        letter-spacing: -.01em;
        white-space: nowrap;
    }

    .inventoryCard p {
        font-size: .7rem !important;
        line-height: 1.35 !important;
    }

    .infoRow {
        grid-template-columns: minmax(0, 1fr);
        gap: 4px;
    }

    .infoRow > span:last-child {
        text-align: left;
    }
}

@media screen and (max-width: 430px) {
    :is(.fleetLandingPage, .resourceHubPage) > main,
    :is(.fleetLandingPage, .resourceHubPage) > main:has(.backButton) {
        padding: 22px 14px 16px !important;
    }

    :is(.fleetLandingPage, .resourceHubPage) > main > h1 {
        margin-bottom: 24px !important;
        font-size: 1.75rem !important;
        line-height: 1.15 !important;
        text-align: left !important;
    }

    :is(.fleetLandingPage, .resourceHubPage) .fleetOptions {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    :is(.fleetLandingPage, .resourceHubPage) .fleetCard {
        min-height: 176px !important;
        padding: 11px 9px !important;
        border-top: 3px solid var(--app-accent);
    }

    :is(.fleetLandingPage, .resourceHubPage) .fleetCardIcon {
        margin-bottom: 7px;
        font-size: 1.2rem;
    }

    :is(.fleetLandingPage, .resourceHubPage) .fleetCard h2 {
        margin-bottom: 7px !important;
        font-size: .68rem !important;
    }

    :is(.fleetLandingPage, .resourceHubPage) .fleetCard p {
        margin-bottom: 9px;
        font-size: .65rem !important;
        line-height: 1.32 !important;
    }

    :is(.fleetLandingPage, .resourceHubPage) .fleetCard a {
        margin-top: auto;
    }
}

@media screen and (min-width: 431px) and (max-width: 770px) {
    .statsContainer {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 12px !important;
    }

    .statsContainer .statCard {
        height: 104px !important;
        min-height: 104px !important;
        padding: 14px !important;
    }

    .statsContainer .statCard h3 {
        margin-bottom: 10px !important;
        font-size: .78rem !important;
        line-height: 1.3 !important;
    }

    .statsContainer .statCard p {
        font-size: 1.2rem !important;
        line-height: 1.2 !important;
    }

    .modulesSection .moduleContainer {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 12px !important;
    }

    .modulesSection .moduleCard {
        min-width: 0 !important;
        padding: 14px 12px !important;
        gap: 10px !important;
    }

    .modulesSection .moduleIcon {
        flex: 0 0 auto;
        font-size: 1.5rem !important;
    }

    .modulesSection .moduleText h3 {
        font-size: .86rem !important;
        line-height: 1.3 !important;
    }

    .modulesSection .moduleText p {
        font-size: .72rem !important;
        line-height: 1.35 !important;
    }

    :is(.fleetLandingPage, .resourceHubPage) > main,
    :is(.fleetLandingPage, .resourceHubPage) > main:has(.backButton) {
        padding: 24px 20px 18px !important;
    }

    :is(.fleetLandingPage, .resourceHubPage) > main > h1 {
        margin-bottom: 24px !important;
        font-size: 1.8rem !important;
        line-height: 1.15 !important;
        text-align: left !important;
    }

    :is(.fleetLandingPage, .resourceHubPage) .fleetOptions {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        width: 100% !important;
        gap: 12px !important;
    }

    :is(.fleetLandingPage, .resourceHubPage) .fleetOptions:has(> :last-child:nth-child(3)),
    .inventoryOptions:not(.fleetOptions):has(> :last-child:nth-child(3)) {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    :is(.fleetLandingPage, .resourceHubPage) .fleetCard {
        min-height: 184px !important;
        padding: 14px 12px !important;
        border-top: 3px solid var(--app-accent);
    }

    :is(.fleetLandingPage, .resourceHubPage) .fleetCardIcon {
        margin-bottom: 8px;
        font-size: 1.3rem;
    }

    :is(.fleetLandingPage, .resourceHubPage) .fleetCard h2 {
        margin-bottom: 8px !important;
        font-size: .78rem !important;
        line-height: 1.25 !important;
    }

    :is(.fleetLandingPage, .resourceHubPage) .fleetCard p {
        margin-bottom: 10px;
        font-size: .72rem !important;
        line-height: 1.38 !important;
    }

    :is(.fleetLandingPage, .resourceHubPage) .fleetCard a {
        margin-top: auto;
    }

    .inventoryOptions .inventoryCard .mobileActionBreak {
        display: none !important;
    }

    .inventoryOptions .inventoryCard button {
        width: 100% !important;
        min-height: 54px !important;
        padding: 7px 9px !important;
        font-size: .72rem !important;
        line-height: 1.2 !important;
        text-align: center !important;
        white-space: nowrap !important;
    }
}

/* Remaining ERP screens follow the approved Customers rhythm. These rules are
   opt-in through auth.js, so Dashboard and every Customers screen stay locked. */
.responsiveModulePage,
.responsiveModulePage * {
    box-sizing: border-box;
}

.responsiveModulePage {
    --responsive-page-x: 40px;
    --responsive-page-top: 40px;
    --responsive-page-bottom: 36px;
    --responsive-section-gap: 24px;
    --responsive-card-gap: 18px;
    --responsive-card-padding: 24px;
    --responsive-field-gap: 16px;
    --responsive-notice-gap: 18px;
}

.responsiveModulePage > main {
    width: 100%;
    min-width: 0;
    padding: var(--responsive-page-top) var(--responsive-page-x) var(--responsive-page-bottom) !important;
}

.responsiveModulePage :is(.pageHeading, .pageIntro, .analyticsIntro) {
    width: min(100%, 760px);
    margin-right: auto;
    margin-left: auto;
}

.responsiveModulePage :is(.panel, .formCard, .maintenancePanel) {
    width: min(100%, 760px);
    min-width: 0;
    margin-right: auto;
    margin-left: auto;
}

.responsiveModulePage :is(.panel, .formCard, .maintenancePanel, .settingsSection,
    .accountCard, .workspaceCard, .configurationSection, .orderSummary, .tableCard) {
    padding: var(--responsive-card-padding);
}

.responsiveModulePage :is(.formGrid, .maintenanceForm, .itemInputs, .summaryGrid,
    .actionGrid, .workspaceGrid, .teamGrid, .includedGrid, .registrationGrid) {
    gap: var(--responsive-field-gap);
}

.responsiveModulePage :is(.pageHeading, .pageIntro, .analyticsIntro,
    .periodPanel, .summaryGrid, .actionGrid, .deliveryToolbar,
    .maintenanceControls, .calendarFilters, .tableWrapper, .tableWrap,
    .maintenanceTableWrapper, .tableCard) {
    margin-bottom: var(--responsive-section-gap);
}

.responsiveModulePage :is(input, select, textarea) {
    max-width: 100%;
    min-width: 0;
}

.responsiveModulePage :is(.formGrid, .maintenanceForm) > *,
.responsiveModulePage :is(.deliveryToolbar, .maintenanceControls, .calendarFilters) > * {
    min-width: 0;
}

.responsiveModulePage :is(.tableWrapper, .tableWrap, .maintenanceTableWrapper) {
    max-width: 100%;
}

.responsiveModulePage > main > br,
.responsiveListPage :is(.deliveryToolbar, .maintenanceControls, .calendarFilters) + br,
.responsiveListPage :is(.deliveryToolbar, .maintenanceControls, .calendarFilters) + br + br {
    display: none;
}

.responsiveModulePage > main > :last-child {
    margin-bottom: 0 !important;
}

.responsiveFormPage :is(#editContainer, .stockAdjustmentSection) > br {
    display: none;
}

.responsiveFormPage :is(#editContainer, .stockAdjustmentSection) > label {
    display: block;
    margin: var(--responsive-field-gap) 0 7px;
}

.responsiveFormPage :is(#editContainer, .stockAdjustmentSection) > :is(input, select, textarea) {
    margin-bottom: 0;
}

.responsiveFormPage #editContainer > button {
    margin-top: var(--responsive-field-gap);
}

.responsiveFormPage #editContainer > button + button {
    margin-left: 8px;
}

.responsiveFormPage .stockAdjustmentSection {
    margin-top: var(--responsive-section-gap);
    padding-top: var(--responsive-section-gap);
    border-top: 1px solid var(--app-border);
}

/* Match the existing NuVation switches used for VAT and registration. */
.resourceAvailabilitySwitch {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    width: 100% !important;
    min-height: 44px;
    margin: var(--responsive-field-gap, 16px) 0 0 !important;
    padding: 0 !important;
}

.resourceAvailabilitySwitch > span:first-child {
    min-width: 0;
    font-size: .86rem;
    font-weight: 700;
    line-height: 1.35;
}

.resourceAvailabilitySwitch .switch {
    position: relative;
    display: inline-block !important;
    flex: 0 0 50px;
    width: 50px !important;
    height: 26px;
    margin: 0 !important;
}

.resourceAvailabilitySwitch .switch input {
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    opacity: 0;
}

.resourceAvailabilitySwitch .slider {
    position: absolute;
    inset: 0;
    border-radius: 26px;
    background: #ccc;
    cursor: pointer;
    transition: .3s;
}

.resourceAvailabilitySwitch .slider::before {
    content: "";
    position: absolute;
    bottom: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    transition: .3s;
}

.resourceAvailabilitySwitch .switch input:checked + .slider {
    background: var(--app-navy);
}

.resourceAvailabilitySwitch .switch input:checked + .slider::before {
    transform: translateX(24px);
}

.resourceAvailabilitySwitch .switch input:focus-visible + .slider {
    outline: 3px solid rgba(220, 190, 38, .55);
    outline-offset: 2px;
}

.responsiveModulePage :is(.identityLockNotice, .responsibilityNotice, .analyticsNotice,
    .trackerNotice, .formHint, .registrationWarning, .appComplianceNotice) {
    clear: both;
    margin-top: var(--responsive-notice-gap);
    margin-bottom: var(--responsive-notice-gap);
}

.responsiveHubPage .inventoryOptions {
    align-items: stretch;
    gap: var(--responsive-card-gap);
}

.responsiveHubPage .inventoryCard {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.responsiveHubPage .inventoryCard > a {
    width: 100%;
    margin-top: auto;
}

.responsiveWorkspacePage :is(.settingsPage, .teamAccessMain, .accountPage,
    .professionalMain, .recordsMain, .analyticsMain, .subscriptionPage,
    .invitationMain) {
    width: min(calc(100% - 32px), 1180px);
    min-width: 0;
    margin-right: auto;
    margin-left: auto;
}

@media screen and (max-width: 430px) {
    .responsiveModulePage {
        --responsive-page-x: 12px;
        --responsive-page-top: 20px;
        --responsive-page-bottom: 20px;
        --responsive-section-gap: 16px;
        --responsive-card-gap: 10px;
        --responsive-card-padding: 14px;
        --responsive-field-gap: 12px;
        --responsive-notice-gap: 16px;
    }

    .responsiveModulePage > main:has(.backButton) {
        padding: var(--responsive-page-top) var(--responsive-page-x) var(--responsive-page-bottom) !important;
    }

    .responsiveModulePage :is(.pageHeading, .pageIntro, .analyticsIntro) {
        margin-bottom: 18px !important;
        text-align: left !important;
    }

    .responsiveModulePage :is(.pageHeading, .pageIntro, .analyticsIntro) h1,
    .responsiveModulePage > main > h1 {
        margin-bottom: 8px !important;
        font-size: 1.45rem !important;
        line-height: 1.16 !important;
        text-align: left !important;
    }

    .responsiveModulePage :is(.pageHeading, .pageIntro, .analyticsIntro) p {
        font-size: .82rem !important;
        line-height: 1.45 !important;
    }

    .responsiveFormPage :is(.panel, .formCard, .maintenancePanel,
        .invoiceContainer, .quoteContainer) {
        width: 100% !important;
        max-width: 100% !important;
        padding: 16px 14px !important;
        border-radius: 12px !important;
    }

    .responsiveFormPage :is(.formGrid, .maintenanceForm, .itemInputs) {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 13px !important;
    }

    .responsiveFormPage :is(label, .formHint) {
        font-size: .8rem;
        line-height: 1.4;
    }

    .responsiveFormPage :is(input, select, textarea) {
        width: 100% !important;
        font-size: 16px !important;
    }

    .responsiveFormPage :is(.formActions, .actionSection, .actions, .jobCardFormActions) {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 10px !important;
        margin-top: 26px !important;
    }

    .responsiveFormPage :is(.formActions, .actionSection, .actions, .jobCardFormActions) button {
        width: 100% !important;
        min-height: 48px !important;
        margin: 0 !important;
        padding: 9px 10px !important;
        font-size: .78rem !important;
        text-align: center !important;
    }

    .responsiveFormPage #editContainer > button {
        display: block;
        width: 100% !important;
        margin: 10px 0 0 !important;
        text-align: center !important;
    }

    .resourceAvailabilitySwitch > span:first-child {
        font-size: .78rem;
    }

    .responsiveListPage :is(.deliveryToolbar, .maintenanceControls, .calendarFilters) {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 10px !important;
        width: 100% !important;
        margin: 0 0 16px !important;
    }

    .responsiveListPage :is(.deliveryToolbar, .maintenanceControls, .calendarFilters)
        :is(input, select, button) {
        width: 100% !important;
        margin: 0 !important;
    }

    .responsiveModulePage :is(.identityLockNotice, .responsibilityNotice, .analyticsNotice,
        .trackerNotice, .formHint, .registrationWarning, .appComplianceNotice) {
        margin-top: 16px !important;
        margin-bottom: 16px !important;
        padding: 11px 12px !important;
        font-size: .76rem !important;
        line-height: 1.45 !important;
    }

    .responsiveHubPage .inventoryOptions {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: var(--responsive-card-gap) !important;
        width: 100% !important;
    }

    .responsiveHubPage .inventoryCard {
        width: auto !important;
        min-height: 180px !important;
        padding: 13px 11px !important;
    }

    .responsiveHubPage .inventoryCard h2 {
        margin-bottom: 7px !important;
        font-size: .78rem !important;
        line-height: 1.25 !important;
    }

    .responsiveHubPage .inventoryCard p {
        margin-bottom: 10px !important;
        font-size: .7rem !important;
        line-height: 1.38 !important;
    }

    .responsiveWorkspacePage :is(.settingsPage, .teamAccessMain, .accountPage,
        .professionalMain, .recordsMain, .analyticsMain, .subscriptionPage,
        .invitationMain) {
        width: calc(100% - 24px) !important;
        padding-top: 22px !important;
        padding-bottom: 22px !important;
    }

    .responsiveWorkspacePage :is(.settingsSection, .panel, .accountCard,
        .workspaceCard, .configurationSection, .orderSummary) {
        min-width: 0 !important;
        padding: 16px 14px !important;
        border-radius: 12px !important;
    }

    .responsiveWorkspacePage :is(.summaryGrid, .workspaceGrid, .teamGrid,
        .usageSummary, .includedGrid, .registrationGrid) {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

@media screen and (min-width: 431px) and (max-width: 770px) {
    .responsiveModulePage {
        --responsive-page-x: 20px;
        --responsive-page-top: 24px;
        --responsive-page-bottom: 24px;
        --responsive-section-gap: 20px;
        --responsive-card-gap: 14px;
        --responsive-card-padding: 20px;
        --responsive-field-gap: 16px;
        --responsive-notice-gap: 18px;
    }

    .responsiveModulePage > main:has(.backButton) {
        padding: var(--responsive-page-top) var(--responsive-page-x) var(--responsive-page-bottom) !important;
    }

    .responsiveModulePage :is(.pageHeading, .pageIntro, .analyticsIntro) h1,
    .responsiveModulePage > main > h1 {
        font-size: 1.8rem !important;
        line-height: 1.2 !important;
    }

    .responsiveFormPage :is(.panel, .formCard, .maintenancePanel,
        .invoiceContainer, .quoteContainer) {
        width: min(100%, 700px) !important;
        padding: 22px !important;
    }

    .responsiveFormPage :is(.formGrid, .maintenanceForm) {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 16px !important;
    }

    .responsiveFormPage :is(.wide, .fullWidth, .formActions, .actionSection,
        .jobCardFormActions) {
        grid-column: 1 / -1 !important;
    }

    .responsiveFormPage :is(.formActions, .actionSection, .jobCardFormActions) {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    .responsiveFormPage :is(.formActions, .actionSection, .jobCardFormActions) button {
        width: 100% !important;
        min-height: 48px !important;
        margin: 0 !important;
        text-align: center !important;
    }

    .responsiveListPage :is(.deliveryToolbar, .maintenanceControls, .calendarFilters) {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
        width: 100% !important;
        margin-bottom: 18px !important;
    }

    .responsiveHubPage .inventoryOptions {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: var(--responsive-card-gap) !important;
        width: 100% !important;
    }

    .responsiveHubPage .inventoryOptions:has(> :last-child:nth-child(3)) {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    .responsiveHubPage .inventoryCard {
        width: auto !important;
        min-height: 190px !important;
        padding: 16px 14px !important;
    }

    .responsiveWorkspacePage :is(.settingsPage, .teamAccessMain, .accountPage,
        .professionalMain, .recordsMain, .analyticsMain, .subscriptionPage,
        .invitationMain) {
        width: calc(100% - 40px) !important;
    }
}

@media screen and (min-width: 771px) and (max-width: 1199px) {
    .responsiveModulePage {
        --responsive-page-x: 28px;
        --responsive-page-top: 30px;
        --responsive-page-bottom: 28px;
        --responsive-section-gap: 22px;
        --responsive-card-gap: 16px;
        --responsive-card-padding: 22px;
        --responsive-field-gap: 16px;
        --responsive-notice-gap: 18px;
    }

    .responsiveModulePage > main:has(.backButton) {
        padding: var(--responsive-page-top) var(--responsive-page-x) var(--responsive-page-bottom) !important;
    }

    .responsiveFormPage :is(.panel, .formCard, .maintenancePanel) {
        width: min(100%, 760px) !important;
    }

    .responsiveListPage :is(.deliveryToolbar, .maintenanceControls, .calendarFilters) {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 12px !important;
        margin-bottom: 20px !important;
    }

    .responsiveHubPage .inventoryOptions {
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: var(--responsive-card-gap) !important;
        width: 100% !important;
    }

    .responsiveHubPage .inventoryOptions:has(> :last-child:nth-child(3)) {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    .responsiveHubPage .inventoryCard {
        width: auto !important;
        min-height: 210px !important;
    }
}

@media screen and (min-width: 1200px) {
    .responsiveModulePage {
        --responsive-page-x: 40px;
        --responsive-page-top: 40px;
        --responsive-page-bottom: 36px;
        --responsive-section-gap: 24px;
        --responsive-card-gap: 18px;
        --responsive-card-padding: 24px;
        --responsive-field-gap: 18px;
        --responsive-notice-gap: 20px;
    }

    .responsiveModulePage > main:has(.backButton) {
        padding: var(--responsive-page-top) var(--responsive-page-x) var(--responsive-page-bottom) !important;
    }

    .responsiveModulePage :is(.pageHeading, .pageIntro, .analyticsIntro) {
        margin-bottom: 28px;
    }

    .responsiveHubPage .inventoryCard > a {
        margin-top: auto !important;
        padding-top: 20px;
    }

    .responsiveHubPage .inventoryCard p {
        margin-bottom: 0 !important;
    }

    .responsiveModulePage :is(.formCard, .panel, .maintenancePanel,
        .settingsSection, .accountCard, .workspaceCard, .configurationSection,
        .orderSummary, .tableCard) :is(p, small, .formHint) + button,
    .responsiveModulePage :is(.formCard, .panel, .maintenancePanel,
        .settingsSection, .accountCard, .workspaceCard, .configurationSection,
        .orderSummary, .tableCard) :is(p, small, .formHint) + .appButton,
    .responsiveModulePage .actionSection {
        margin-top: 20px !important;
    }

    .responsiveModulePage :is(.formActions, .actions, .jobCardFormActions) {
        margin-top: 20px !important;
    }

    body:has(#receivablesTable) .tableWrapper,
    body:has(#receivablesTable) .tableWrapper > table {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow: visible !important;
    }

    body:has(#receivablesTable) .tableWrapper > table {
        table-layout: fixed !important;
    }

    body:has(#receivablesTable) .tableWrapper th:last-child,
    body:has(#receivablesTable) #receivablesTable td:last-child {
        width: 124px !important;
        min-width: 124px !important;
    }

    body:has(#receivablesTable) #receivablesTable td:last-child {
        display: flex !important;
        flex-direction: column !important;
        gap: 6px !important;
        white-space: normal !important;
    }

    body:has(#receivablesTable) #receivablesTable td:last-child :is(.editBtn, .paymentBtn) {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        min-width: 0 !important;
        height: 38px !important;
        min-height: 38px !important;
        max-height: 38px !important;
        margin: 0 !important;
        padding: 8px 10px !important;
        border-radius: 6px !important;
        font-size: .68rem !important;
        line-height: 1.2 !important;
        text-align: center !important;
        white-space: nowrap !important;
        overflow: visible !important;
    }
}

@media screen and (max-width: 430px) {
    .inventoryOptions .inventoryCard button,
    body > main table.mobileRecordTable tbody td.mobileRecordActions button,
    button:not(.socialBtn),
    .appButton,
    body > main input[type="button"],
    body > main input[type="submit"] {
        justify-content: center !important;
        text-align: center !important;
    }

    html:has(#receivablesTable),
    body:has(#receivablesTable),
    body:has(#receivablesTable) > main {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: clip !important;
    }

    body:has(#receivablesTable) .tableWrapper {
        width: 100% !important;
        max-width: 100% !important;
        overflow: visible !important;
    }

    body:has(#receivablesTable) #receivablesTable td.mobileRecordActions {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    body:has(#receivablesTable) #receivablesTable td.mobileRecordActions :is(.editBtn, .paymentBtn) {
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        justify-content: center !important;
        text-align: center !important;
    }
}

/* Laptop application lists stay fully visible without widening the page or
   requiring horizontal scrolling. Wide text wraps inside compact columns.
   Documents, PDFs, reports and line-item tables are excluded by the labeller. */
@media screen and (min-width: 771px) and (max-width: 1199px) {
    body > main table.mobileRecordTable {
        box-sizing: border-box;
        display: table;
        width: 100% !important;
        max-width: 100% !important;
        table-layout: fixed;
        overflow: visible;
    }

    body > main table.mobileRecordTable thead,
    body > main table.mobileRecordTable tbody {
        min-width: 0 !important;
    }

    body > main .tableWrapper,
    body > main .maintenanceTableWrapper {
        width: 100%;
        max-width: 100%;
        overflow: visible;
    }

    body > main .tableWrapper > table.mobileRecordTable,
    body > main .maintenanceTableWrapper > table.mobileRecordTable {
        display: table;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        overflow: visible;
    }

    body > main table.mobileRecordTable th,
    body > main table.mobileRecordTable td {
        min-width: 0 !important;
        max-width: none !important;
        padding: 8px 6px !important;
        font-size: .7rem !important;
        line-height: 1.3 !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        word-break: normal !important;
    }

    body > main table.mobileRecordTable th:last-child,
    body > main table.mobileRecordTable td:last-child {
        width: 108px !important;
    }

    body > main table.mobileRecordTable td.mobileRecordActions button,
    body > main table.mobileRecordTable td.mobileRecordActions a {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 34px !important;
        margin: 3px 0 !important;
        padding: 5px 4px !important;
        font-size: .75rem !important;
        line-height: 1.2 !important;
        text-align: center !important;
        white-space: normal !important;
    }

    body:has(#receivablesTable) #receivablesTable th:last-child,
    body:has(#receivablesTable) #receivablesTable td:last-child {
        width: 118px !important;
    }

    body:has(#receivablesTable) #receivablesTable td:last-child :is(.editBtn, .paymentBtn) {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        min-width: 0 !important;
        height: 40px !important;
        min-height: 40px !important;
        max-height: 40px !important;
        margin: 3px 0 !important;
        padding: 7px 6px !important;
        border-radius: 6px !important;
        font-size: .72rem !important;
        line-height: 1.2 !important;
        text-align: center !important;
        white-space: normal !important;
    }
}

/* Phones and tablets use readable record cards instead of horizontally
   scrolling application lists. Document, report and PDF tables are excluded
   by the shared table labeller. */
@media screen and (min-width: 431px) and (max-width: 770px) {
    body.responsiveWorkspacePage > main.analyticsMain {
        width: 100% !important;
        max-width: 100% !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
    }

    body > main table.mobileRecordTable,
    body > main .tableWrapper:has(> table.mobileRecordTable),
    body > main .maintenanceTableWrapper:has(> table.mobileRecordTable) {
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow: visible !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    body > main table.mobileRecordTable {
        display: block !important;
    }

    body > main table.mobileRecordTable thead {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        min-width: 0 !important;
        overflow: hidden !important;
        clip: rect(0 0 0 0) !important;
        white-space: nowrap !important;
    }

    body > main table.mobileRecordTable tbody {
        display: grid !important;
        width: 100% !important;
        min-width: 0 !important;
        gap: 12px !important;
    }

    body > main table.mobileRecordTable tbody tr {
        display: block !important;
        box-sizing: border-box !important;
        width: 100% !important;
        min-width: 0 !important;
        padding: 14px 16px !important;
        overflow: hidden !important;
        border: 1px solid #e3e6ec !important;
        border-radius: 14px !important;
        background: #fff !important;
        box-shadow: 0 6px 18px rgba(22, 19, 46, .06) !important;
    }

    body > main table.mobileRecordTable tbody td {
        display: grid !important;
        box-sizing: border-box !important;
        grid-template-columns: minmax(120px, .8fr) minmax(0, 1.2fr) !important;
        gap: 14px !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        padding: 8px 0 !important;
        border: 0 !important;
        border-bottom: 1px solid #edf0f4 !important;
        font-size: .84rem !important;
        line-height: 1.4 !important;
        text-align: right !important;
        overflow-wrap: anywhere !important;
        white-space: normal !important;
    }

    body > main table.mobileRecordTable tbody td::before {
        content: attr(data-mobile-label);
        color: #747986;
        font-size: .68rem;
        font-weight: 800;
        letter-spacing: .04em;
        text-align: left;
        text-transform: uppercase;
    }

    body > main table.mobileRecordTable tbody td:last-child {
        border-bottom: 0 !important;
    }

    body > main table.mobileRecordTable tbody td.mobileRecordActions {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 8px !important;
        padding-top: 12px !important;
    }

    body > main table.mobileRecordTable tbody td.mobileRecordActions::before {
        grid-column: 1 / -1;
    }

    body > main table.mobileRecordTable tbody td.mobileRecordActions button,
    body > main table.mobileRecordTable tbody td.mobileRecordActions a {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 50px !important;
        margin: 0 !important;
        padding: 7px 8px !important;
        font-size: .82rem !important;
        line-height: 1.2 !important;
        text-align: center !important;
        white-space: nowrap !important;
    }

    body > main table.mobileRecordTable tbody td.mobileRecordEmpty {
        display: block !important;
        padding: 18px 10px !important;
        color: #747986 !important;
        text-align: center !important;
    }

    body > main table.mobileRecordTable tbody td.mobileRecordEmpty::before {
        content: none !important;
    }
}

/* Final targeted override: this is a wide form submission, so its label follows
   the form's left edge at every supported viewport. */
body > main #saveTransaction {
    justify-content: flex-start !important;
    text-align: left !important;
}

/* Consistent create/edit form exit. Cancel abandons unsaved fields and returns
   to the module without performing a mutation. */
.formActions,
.actionSection,
.jobCardFormActions {
    /* Separate the final form field from its primary actions on every screen. */
    margin-top: 26px !important;
}

.formActions {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    gap: 10px;
}

.formActions > :is(button, .appButton) {
    min-width: 150px;
    margin: 0 !important;
}

/* Final form rhythm: every primary save/action area must visibly clear the
   last field. Page styles often define their own action layouts, so this rule
   is deliberately explicit and applies on phone, tablet, laptop and desktop. */
body main :is(.formActions, .actionSection, .jobCardFormActions) {
    margin-top: 32px !important;
    padding-top: 1px;
}

body main .formCard > button {
    margin-top: 32px !important;
}

.cancelAction {
    border-color: #aaa7b2 !important;
    background: #fff !important;
    color: #3f3c48 !important;
}

.cancelAction:hover {
    border-color: #77727f !important;
    background: #efedf2 !important;
    color: #24212c !important;
}

@media screen and (max-width: 770px) {
    .formActions {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        width: 100%;
    }

    .formActions > :is(button, .appButton) {
        width: 100% !important;
        min-width: 0 !important;
    }
}

@media screen and (max-width: 430px) {
    .formActions {
        grid-template-columns: 1fr !important;
    }
}

/* Desktop presentation tiers -------------------------------------------------
   Laptop and desktop screens retain dense horizontal tables and wide forms.
   Ultra-wide displays receive a larger workspace instead of a small 1440px
   interface floating in the middle of the screen. Document pages keep their
   own physical A4 dimensions. */

@media screen and (min-width: 771px) and (max-width: 1199px) {
    .responsiveModulePage > main {
        max-width: 1180px;
        margin-right: auto;
        margin-left: auto;
    }

    body > main table.mobileRecordTable th,
    body > main table.mobileRecordTable td {
        padding: 10px 8px !important;
        font-size: .78rem !important;
        line-height: 1.35 !important;
    }

    body > main table.mobileRecordTable th:last-child,
    body > main table.mobileRecordTable td:last-child {
        width: 124px !important;
    }

    body > main table.mobileRecordTable td.mobileRecordActions button,
    body > main table.mobileRecordTable td.mobileRecordActions a {
        min-height: 38px !important;
        padding: 7px 6px !important;
        font-size: .78rem !important;
    }
}

@media screen and (min-width: 1200px) and (max-width: 1919px) {
    .responsiveModulePage > main {
        max-width: 1400px;
        margin-right: auto;
        margin-left: auto;
    }

    .responsiveFormPage :is(.panel, .formCard, .maintenancePanel) {
        width: min(100%, 900px) !important;
    }

    body > main table.mobileRecordTable th,
    body > main table.mobileRecordTable td {
        padding: 13px 12px;
        font-size: .88rem;
        line-height: 1.4;
    }

    body > main table.mobileRecordTable th:last-child,
    body > main table.mobileRecordTable td:last-child {
        width: 142px;
    }

    body > main table.mobileRecordTable td.mobileRecordActions button,
    body > main table.mobileRecordTable td.mobileRecordActions a {
        min-height: 40px;
        margin: 3px 0;
        padding: 8px 10px;
        font-size: .82rem;
    }
}

@media screen and (min-width: 1920px) {
    body.responsiveWorkspacePage > main.analyticsMain {
        margin-right: auto !important;
        margin-left: auto !important;
    }

    body {
        font-size: 18px;
    }

    .headContainer {
        min-height: 86px;
        padding: 18px max(64px, calc((100vw - 2100px) / 2));
    }

    .headContainer .nuvationLogo {
        height: 54px;
    }

    .headContainer .profilesSVG {
        height: 48px;
    }

    .responsiveModulePage {
        --responsive-page-x: 64px;
        --responsive-page-top: 56px;
        --responsive-page-bottom: 52px;
        --responsive-section-gap: 32px;
        --responsive-card-gap: 24px;
        --responsive-card-padding: 32px;
        --responsive-field-gap: 22px;
        --responsive-notice-gap: 24px;
    }

    .responsiveModulePage > main {
        max-width: 2100px;
        margin-right: auto;
        margin-left: auto;
    }

    .responsiveModulePage :is(.pageHeading, .pageIntro, .analyticsIntro) {
        width: min(100%, 1100px);
        margin-bottom: 36px;
    }

    .responsiveModulePage :is(.pageHeading, .pageIntro, .analyticsIntro) h1,
    .responsiveModulePage > main > h1 {
        font-size: 2.65rem !important;
        line-height: 1.15 !important;
    }

    .responsiveModulePage :is(.pageHeading, .pageIntro, .analyticsIntro) p {
        font-size: 1.08rem;
        line-height: 1.55;
    }

    .responsiveFormPage :is(.panel, .formCard, .maintenancePanel,
        .invoiceContainer, .quoteContainer) {
        width: min(100%, 1180px) !important;
        padding: 36px !important;
        border-radius: 18px !important;
    }

    .responsiveFormPage :is(.formGrid, .maintenanceForm) {
        gap: 22px !important;
    }

    .responsiveModulePage :is(input, select, textarea) {
        min-height: 52px;
        padding: 12px 14px;
        font-size: 1rem;
    }

    .responsiveModulePage textarea {
        min-height: 132px;
    }

    .responsiveModulePage button:not(.socialBtn),
    .responsiveModulePage .appButton {
        min-height: 50px;
        padding: 12px 20px;
        font-size: .96rem;
    }

    .responsiveHubPage .inventoryOptions {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 24px !important;
    }

    .responsiveHubPage .inventoryOptions:has(> :last-child:nth-child(3)) {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        max-width: 1500px;
        margin-right: auto;
        margin-left: auto;
    }

    .responsiveHubPage .inventoryCard {
        min-height: 270px !important;
        padding: 30px !important;
        border-radius: 18px !important;
    }

    .responsiveHubPage .inventoryCard h2 {
        font-size: 1.45rem !important;
    }

    .responsiveHubPage .inventoryCard p {
        font-size: 1rem !important;
        line-height: 1.5 !important;
    }

    body > main table.mobileRecordTable th,
    body > main table.mobileRecordTable td {
        padding: 16px 15px !important;
        font-size: 1rem !important;
        line-height: 1.45 !important;
    }

    body > main table.mobileRecordTable th:last-child,
    body > main table.mobileRecordTable td:last-child {
        width: 170px !important;
    }

    body > main table.mobileRecordTable td.mobileRecordActions button,
    body > main table.mobileRecordTable td.mobileRecordActions a {
        min-height: 46px !important;
        margin: 4px 0 !important;
        padding: 10px 12px !important;
        font-size: .9rem !important;
    }

    .responsiveWorkspacePage :is(.settingsPage, .teamAccessMain, .accountPage,
        .professionalMain, .recordsMain, .analyticsMain, .subscriptionPage,
        .invitationMain) {
        width: min(calc(100% - 80px), 2000px) !important;
        max-width: 2000px !important;
    }

    /* Approved Dashboard and Customers pages keep their established design,
       but make proper use of a 4K canvas. */
    body:has(.welcomeContainer) > main,
    .customerHubPage > main,
    .desktopScalePage > main {
        max-width: 1900px;
        padding: 58px 64px;
    }

    .desktopScalePage:not(.customerHubPage) > main :is(input, select, textarea) {
        min-height: 52px;
        padding: 12px 14px;
        font-size: 1rem;
    }

    .desktopScalePage:not(.customerHubPage) > main button:not(.socialBtn),
    .desktopScalePage:not(.customerHubPage) > main .appButton {
        min-height: 50px;
        padding: 12px 20px;
        font-size: .96rem;
    }

    body:has(.welcomeContainer) .welcomeHeader h1,
    .customerHubPage > main > h1 {
        font-size: 2.65rem;
    }

    body:has(.welcomeContainer) .statsContainer,
    body:has(.welcomeContainer) .modulesSection .moduleContainer {
        gap: 24px;
    }

    body:has(.welcomeContainer) .statCard {
        min-height: 150px;
        padding: 24px;
    }

    body:has(.welcomeContainer) .moduleCard {
        min-height: 125px;
        padding: 22px;
    }

    .customerHubPage .inventoryOptions {
        max-width: 1500px !important;
        gap: 28px !important;
    }

    .customerHubPage .inventoryCard {
        min-height: 290px !important;
        padding: 32px !important;
    }
}