/* App-wide layout polish
   This is the final visual contract. It intentionally normalizes spacing and
   alignment after the older module styles without changing page behavior.
   --km-layout-*/--km-panel-*/--km-control-* tokens now live in
   css/tokens.css (single source of truth). */

.app-layout .page-content,
.app-layout .page-content * { box-sizing: border-box; }

.app-layout .page-content { min-width: 0; }

/* Page navigation belongs to the page it controls. An earlier layout lifted tabs
   into the global Back-button strip on desktop, disconnecting them from the title
   and making each module's opening area read differently. Keep tabs in normal
   document flow at every width. Manufacturing has its own shell and stylesheet. */
.app-layout:not(.mfg-shell) .page-content .page-section-tabs {
    position: static !important;
    inset: auto !important;
    z-index: auto;
    display: flex !important;
    align-items: center;
    flex-wrap: nowrap !important;
    gap: 5px !important;
    width: max-content;
    max-width: 100%;
    min-width: 0;
    min-height: 46px;
    margin: 0 !important;
    padding: 4px !important;
    overflow-x: auto;
    overflow-y: hidden;
    border: 1px solid var(--km2-border);
    border-radius: 12px;
    background: color-mix(in srgb, var(--km2-surface) 84%, var(--km2-panel));
    scrollbar-width: thin;
}

.app-layout:not(.mfg-shell) .page-content .page-section-tabs > :is(button, a) {
    flex: 0 0 auto;
    min-height: 36px;
    padding: 7px 13px !important;
    border: 1px solid transparent !important;
    border-radius: 8px !important;
    white-space: nowrap;
}

.app-layout:not(.mfg-shell) .page-content .page-section-tabs > :is(button, a).active,
.app-layout:not(.mfg-shell) .page-content .page-section-tabs > [aria-selected="true"] {
    border-color: color-mix(in srgb, var(--km2-accent) 55%, var(--km2-border)) !important;
    background: color-mix(in srgb, var(--km2-accent) 13%, var(--km2-surface)) !important;
    color: var(--km2-accent) !important;
    box-shadow: inset 0 -2px 0 var(--km2-accent) !important;
}

/* Every routed workspace uses the same usable width and vertical rhythm. */
.app-layout .page-content > :is(
    .km-page,
    [class$="-page"], [class*="-page "],
    [class$="-workspace"], [class*="-workspace "]
) {
    width: min(100%, var(--km-layout-width));
    min-width: 0;
    margin-inline: auto;
    padding: 0 !important;
}

.app-layout .page-content > :is(
    .km-page,
    [class$="-page"], [class*="-page "],
    [class$="-workspace"], [class*="-workspace "]
) {
    display: grid;
    align-content: start;
    gap: var(--km-page-gap);
}

.app-layout .page-content > :is(
    .km-page,
    [class$="-page"], [class*="-page "],
    [class$="-workspace"], [class*="-workspace "]
) > :not(style):not(script):not(dialog) {
    margin-block: 0 !important;
}

/* Older global rules added margins between sections in addition to grid gaps. */
.app-layout .page-content :is(.panel, .dashboard-panel, [class$="-panel"], section, article)
    + :is(.panel, .dashboard-panel, [class$="-panel"], section, article) {
    margin-top: 0 !important;
}

/* Page headings align to one baseline and never create oversized hero gaps. */
.app-layout .page-content :is(
    .km-page-heading,
    [class$="-page-header"], [class*="-page-header "],
    [class$="-detail-heading"], [class*="-detail-heading "],
    .report-detail-header
) {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px 28px;
    min-width: 0;
    margin: 0 !important;
    padding: 0 !important;
}

.app-layout .page-content > :is([class$="-page"], [class*="-page "]) > header:first-child,
.app-layout .page-content > :is([class$="-workspace"], [class*="-workspace "]) > header:first-child {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px 28px;
    min-width: 0;
    margin: 0;
}

.app-layout .page-content :is(.km-page-heading, [class$="-page-header"], [class*="-page-header "]) h1,
.app-layout .page-content > :is([class$="-page"], [class*="-page "]) > header:first-child h1 {
    margin: 3px 0 4px !important;
}

.app-layout .page-content :is(.km-page-heading, [class$="-page-header"], [class*="-page-header "]) p,
.app-layout .page-content > :is([class$="-page"], [class*="-page "]) > header:first-child p {
    margin-block: 0 !important;
    max-width: 760px;
    line-height: 1.5;
}

/* Containers share one edge treatment. Shadows stay subtle and predictable. */
.app-layout .page-content :is(
    .km-panel, .panel, .dashboard-panel,
    [class$="-panel"], [class*="-panel "],
    [class$="-card"], [class*="-card "],
    .card
):not(.invoice-paper):not(.document-paper):not(.word-page) {
    min-width: 0;
    border: 1px solid var(--km2-border) !important;
    border-radius: var(--km-radius-panel) !important;
    background: var(--km2-surface) !important;
    color: var(--km2-text) !important;
    box-shadow: 0 6px 22px color-mix(in srgb, #000 7%, transparent) !important;
}

html[data-theme="dark"] .app-layout .page-content :is(
    .km-panel, .panel, .dashboard-panel,
    [class$="-panel"], [class*="-panel "],
    [class$="-card"], [class*="-card "], .card
):not(.invoice-paper):not(.document-paper):not(.word-page) {
    box-shadow: 0 8px 24px rgba(0, 0, 0, .16) !important;
}

.app-layout .page-content :is(.panel, .km-panel, [class$="-panel"], [class*="-panel "]):has(> :is(
    .toolbar, .panel-header, .panel-title, .section-heading, .km-panel-head,
    [class$="-panel-header"], [class*="-panel-header "],
    [class$="-panel-head"], [class*="-panel-head "],
    [class$="-form-header"], [class*="-form-header "]
)) {
    padding: 0 !important;
    overflow: hidden;
}

.app-layout .page-content :is(.panel, .km-panel, [class$="-panel"], [class*="-panel "]):not(:has(> :is(
    .toolbar, .panel-header, .panel-title, .section-heading, .km-panel-head,
    [class$="-panel-header"], [class*="-panel-header "],
    [class$="-panel-head"], [class*="-panel-head "],
    [class$="-form-header"], [class*="-form-header "]
))) {
    padding: var(--km-panel-pad) !important;
}

/* Panel headers and toolbars use the same inset and flex behavior. */
.app-layout .page-content :is(.panel-title, .manual-lines-title, .quote-lines-title) {
    font: inherit !important;
    line-height: normal !important;
    letter-spacing: normal !important;
}

.app-layout .page-content :is(.panel, .km-panel, [class$="-panel"], [class*="-panel "]) > :is(
    .toolbar, .panel-header, .panel-title, .section-heading, .km-panel-head,
    [class$="-panel-header"], [class*="-panel-header "],
    [class$="-panel-head"], [class*="-panel-head "]
) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px 20px;
    min-width: 0;
    margin: 0 !important;
    padding: var(--km-panel-pad) !important;
    border-bottom: 1px solid var(--km2-border) !important;
    background: transparent !important;
}

.app-layout .page-content :is(.panel, .km-panel, [class$="-panel"], [class*="-panel "]) > :is(
    .toolbar, .panel-header, .panel-title, .section-heading, .km-panel-head,
    [class$="-panel-header"], [class*="-panel-header "]
) :is(h2, h3, p) { margin-block: 0 !important; }

.app-layout .page-content :is(.panel-title, .manual-lines-title, .quote-lines-title) p {
    font-size: .84rem !important;
    font-weight: 400 !important;
    line-height: 1.45 !important;
    letter-spacing: normal !important;
}

.app-layout .page-content :is(.panel, .km-panel, [class$="-panel"], [class*="-panel "]) > :is(
    .form-grid, [class$="-form-grid"], [class*="-form-grid "],
    .km-panel-body
) { padding: var(--km-panel-pad) !important; }

.app-layout .page-content :is(.panel, .km-panel, [class$="-panel"], [class*="-panel "]) > .actions {
    margin: 0 !important;
    padding: 14px var(--km-panel-pad) var(--km-panel-pad) !important;
    border-top: 1px solid var(--km2-border);
}

/* Grids stretch their children evenly instead of producing ragged cards. */
.app-layout .page-content :is(
    .stats, .metrics,
    [class*="stats-grid"], [class*="summary-grid"],
    [class*="metric-grid"], [class*="cards-grid"],
    [class$="-grid"], [class*="-grid "]
) {
    min-width: 0;
    gap: 18px !important;
    align-items: stretch;
}

.app-layout .page-content :is(
    .stats, .metrics,
    [class*="stats-grid"], [class*="summary-grid"],
    [class*="metric-grid"], [class*="cards-grid"]
) > :is(article, .card, [class$="-card"], [class*="-card "]) {
    height: 100%;
    min-width: 0;
    margin: 0 !important;
}

/* Every page grew its own "stat card" naming (jobs-stat-card,
   locations-stat-card, mytime-stat-card, users-stat-card, ...) instead of
   sharing one component, so each drifted to its own cramped padding and
   height. Catching the shared [class$="-card"] suffix here — alongside the
   plain <article> tiles other pages already use — normalizes all of them
   to one generous scale in a single place instead of per-page. */
.app-layout .page-content :is(
    .stats, .metrics,
    [class*="stats-grid"], [class*="summary-grid"], [class*="metric-grid"]
) > :is(article, [class$="-card"], [class*="-card "]) {
    display: grid;
    align-content: start;
    gap: 7px;
    min-height: 116px !important;
    padding: 20px 22px !important;
    border: 1px solid var(--km2-border) !important;
    border-radius: 14px !important;
    background: var(--km2-surface) !important;
}

.app-layout .page-content :is(.stats, .metrics, [class*="stats-grid"], [class*="summary-grid"]) > article :is(p, small) {
    margin: 0 !important;
}

/* Forms: consistent height, text contrast, and label rhythm app-wide. */
.app-layout .page-content :is(form, .form-grid, [class$="-form-grid"], [class*="-form-grid "]) label,
.app-layout .page-content label:has(> input, > select, > textarea) {
    min-width: 0;
}

.app-layout .page-content label:has(> input:not([type="checkbox"]):not([type="radio"]), > select, > textarea) {
    display: grid;
    align-content: start;
    gap: 9px;
}

/* Vertical forms that do not use one of the shared grid classes still need a
   clear boundary between one control and the next field label. */
.app-layout .page-content :is(form, fieldset) > label:has(> input:not([type="checkbox"]):not([type="radio"]), > select, > textarea)
    + label:has(> input:not([type="checkbox"]):not([type="radio"]), > select, > textarea) {
    margin-top: 20px;
}

.app-layout .page-content label > :is(span, strong):first-child {
    line-height: 1.3;
}

.app-layout .page-content :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select, textarea) {
    width: 100%;
    max-width: 100%;
    padding: 9px 12px !important;
    border: 1px solid var(--km2-border-strong) !important;
    border-radius: var(--km-radius-control) !important;
    background: var(--km2-surface-2) !important;
    color: var(--km2-text) !important;
    -webkit-text-fill-color: var(--km2-text) !important;
    box-shadow: none !important;
}

.app-layout .page-content :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select) {
    height: var(--km-control-height) !important;
    min-height: var(--km-control-height) !important;
}

.app-layout .page-content textarea {
    min-height: 104px;
    line-height: 1.5;
    resize: vertical;
}

.app-layout .page-content :is(input, select, textarea):focus {
    border-color: var(--km2-accent) !important;
    outline: 3px solid color-mix(in srgb, var(--km2-accent) 18%, transparent) !important;
    outline-offset: 0 !important;
}

.app-layout .page-content :is(input, select, textarea):disabled {
    opacity: .72;
    cursor: not-allowed;
}

.app-layout .page-content input:is([type="checkbox"], [type="radio"]) {
    flex: 0 0 auto;
    width: 18px !important;
    height: 18px !important;
    margin: 0;
    accent-color: var(--km2-accent);
}

.app-layout .page-content label:has(> input[type="checkbox"], > input[type="radio"]) {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 42px;
    padding: 10px 12px;
    border: 1px solid var(--km2-border);
    border-radius: var(--km-radius-control);
    background: var(--km2-surface-2) !important;
    color: var(--km2-text) !important;
    cursor: pointer;
    transition: background-color .1s ease, border-color .1s ease, transform .1s ease;
}

/* An option card previously looked identical whether its checkbox/radio was
   checked or not, so users had no way to tell what they had selected. */
.app-layout .page-content label:has(> input[type="checkbox"]:checked, > input[type="radio"]:checked) {
    background: var(--km-green-soft) !important;
    border-color: var(--km-green) !important;
    box-shadow: inset 0 0 0 1.5px var(--km-green) !important;
}

.app-layout .page-content label:has(> input[type="checkbox"], > input[type="radio"]):hover {
    border-color: var(--km2-border-strong);
}

.app-layout .page-content label:has(> input[type="checkbox"], > input[type="radio"]):active {
    transform: scale(.985);
    filter: brightness(.96);
}

/* Buttons and links align, wrap, and use one control scale. */
.app-layout .page-content :is(
    button, .btn, .km-button, [role="button"],
    a.primary, a.secondary,
    button[class*="-btn"], a[class*="-btn"],
    button[class*="-button"], a[class*="-button"]
) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 38px !important;
    padding: 8px 13px !important;
    border-radius: var(--km-radius-control) !important;
    line-height: 1.15;
    text-align: center;
    white-space: normal;
}

.app-layout .page-content :is(button, .btn, .km-button, [role="button"]):disabled {
    opacity: .52;
    transform: none !important;
    cursor: not-allowed;
}

/* Every button/link previously had a hover color at best and nothing at all
   for the moment of a click, so users had no confirmation a click registered
   until whatever it triggered finished loading. */
.app-layout .page-content :is(
    button, .btn, .km-button, [role="button"],
    a.primary, a.secondary,
    button[class*="-btn"], a[class*="-btn"],
    button[class*="-button"], a[class*="-button"]
):not(:disabled):active {
    transform: translateY(1px) scale(.98) !important;
    filter: brightness(.92);
}

/* Generic highlight for any button/link/toggle that reports its own selected
   state via aria-pressed/aria-selected or a .selected/.is-selected class, for
   the many option toggles outside the tab strips that already had one. */
.app-layout .page-content :is(
    button, .btn, .km-button, [role="button"],
    a.primary, a.secondary,
    button[class*="-btn"], a[class*="-btn"],
    button[class*="-button"], a[class*="-button"]
):is(.selected, .is-selected, [aria-pressed="true"], [aria-selected="true"]) {
    background: var(--km-green-soft) !important;
    border-color: var(--km-green) !important;
    color: var(--km-green) !important;
    box-shadow: inset 0 0 0 1.5px var(--km-green) !important;
}

.app-layout .page-content :is(
    .actions, .km-actions, [class$="-actions"], [class*="-actions "],
    .button-row, [class$="-buttons"], [class*="-buttons "]
) {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px !important;
    min-width: 0;
}

/* Search and filtering controls never become giant blocks at narrow widths. */
.app-layout .page-content :is(.toolbar, [class$="-toolbar"], [class*="-toolbar "]) {
    min-width: 0;
}

.app-layout .page-content :is(.filters, [class$="-filters"], [class*="-filters "]) {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
    align-items: end;
    gap: 9px !important;
    min-width: 0;
}

.app-layout .page-content :is(.toolbar, [class$="-toolbar"], [class*="-toolbar "])
    :is(input[type="search"], input:not([type]), select) {
    min-width: 0 !important;
    max-width: 340px;
}

/* The customer directory is a high-use workspace; keep its title, filters,
   and actions on a deliberate grid instead of allowing controls to drift. */
.app-layout .page-content .customer-accounts-workspace > .toolbar {
    display: grid !important;
    grid-template-columns: minmax(210px, .65fr) minmax(520px, 1.35fr);
    align-items: end !important;
}

.app-layout .page-content .customer-accounts-workspace .accounts-toolbar-actions {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: end;
    gap: 8px !important;
    width: 100%;
}

.app-layout .page-content .customer-accounts-workspace .accounts-toolbar-actions .filters {
    grid-template-columns: minmax(220px, 1fr) minmax(150px, 200px) !important;
    width: 100% !important;
}

@media (max-width: 1120px) {
    .app-layout .page-content .customer-accounts-workspace > .toolbar {
        grid-template-columns: 1fr;
        align-items: stretch !important;
    }
}

/* Tables and row workspaces share predictable alignment. */
.app-layout .page-content :is(.table-wrap, .table-responsive, [class$="-table-wrap"], [class*="-table-wrap "]) {
    width: 100%;
    min-width: 0;
    overflow-x: auto;
    border: 1px solid var(--km2-border);
    border-radius: 12px;
    background: var(--km2-surface);
}

.app-layout .page-content table {
    width: 100%;
    margin: 0 !important;
    border-collapse: collapse;
}

.app-layout .page-content table :is(th, td) {
    padding: 11px 13px !important;
    vertical-align: middle;
}

.app-layout .page-content table th {
    height: 42px;
    font-size: .68rem !important;
    line-height: 1.2;
    letter-spacing: .065em;
    text-transform: uppercase;
    white-space: nowrap;
}

.app-layout .page-content table td {
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.app-layout .page-content :is(
    .record-list, [class$="-list"], [class*="-list "],
    .history-table, [class$="-table"], [class*="-table "]
) { min-width: 0; }

.app-layout .page-content :is(
    .record-row, [class$="-row"], [class*="-row "]
):not(.form-row):not(.button-row) {
    min-width: 0;
}

.app-layout .page-content :is(
    .record-row, [class$="-row"], [class*="-row "]
) > * { min-width: 0; }

.app-layout .page-content :is(
    .record-row, [class$="-row"], [class*="-row "]
) :is(strong, span, small, a) { overflow-wrap: anywhere; }

/* Status labels remain legible in both themes. */
.app-layout .page-content :is(
    .status, .status-pill, .status-badge, .invoice-status,
    [class$="-status"], [class*="-status "]
):not(select):not(input) {
    max-width: 100%;
    line-height: 1.2;
}

/* Notices and empty states use a compact, consistent inset. */
.app-layout .page-content :is(.notice, .alert, [class$="-notice"], [class*="-notice "]) {
    margin: 0;
    padding: 12px 14px !important;
    border: 1px solid var(--km2-border);
    border-radius: 10px !important;
}

.app-layout .page-content :is(.empty, [class$="-empty"], [class*="-empty "]) {
    min-height: 76px;
    margin: 0 !important;
    padding: 18px !important;
    display: grid;
    place-content: center;
    gap: 4px;
    text-align: center;
}

/* One reusable "create/edit in a modal" pattern, shared by every page that
   used to toggle a bare create/edit form inline into the record list itself
   (pushing every existing row down the page while open). That pattern
   duplicated the "surface, backdrop, close" wiring per page and made simple
   record creation feel like part of the page's clutter instead of a
   short-lived task layered on top of it - the pattern virtually every
   comparable app (job/field-service, CRM, or otherwise) uses instead is a
   centered dialog over a dimmed backdrop. `.km-modal-backdrop` / `.km-modal`
   are that shared pair: the backdrop's own [class$="-backdrop"] suffix and
   the modal's [class$="-modal"] suffix already pick up the sizing/scroll
   rules below for free, so pages only need these two classes plus whatever
   @onclick already toggles their boolean - no new state, no bespoke CSS. */
.km-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(6, 12, 10, .55);
}
html[data-theme="light"] .km-modal-backdrop { background: rgba(10, 20, 16, .38); }
.km-modal {
    width: min(640px, 100%);
    border: 1px solid var(--km2-border) !important;
    border-radius: var(--km-radius-panel) !important;
    background: var(--km2-surface) !important;
    box-shadow: var(--km2-shadow-menu) !important;
}
.km-modal .jobs-panel-header,
.km-modal .assets-panel-header,
.km-modal .panel-header {
    position: relative;
}
.km-modal-close {
    width: 32px;
    height: 32px;
    margin-left: auto;
    display: grid;
    place-items: center;
    border: 1px solid var(--km2-border);
    border-radius: 9px;
    background: var(--km2-surface-2);
    color: var(--km2-muted);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
}
.km-modal-close:hover { color: var(--km2-text); background: var(--km2-surface-3); }

/* Expanded inventory is a centered workspace, not a drawer pushed right by
   the sidebar offset. Keep its own table scrolling within the viewport. */
.app-layout .page-content .inventory-list-workspace.is-expanded {
    position: fixed !important;
    /* Above the app header, below quick views and task dialogs. */
    z-index: 140;
    top: 20px !important;
    right: auto !important;
    bottom: 20px !important;
    left: 50% !important;
    width: min(1560px, calc(100vw - 40px)) !important;
    max-width: none !important;
    height: auto !important;
    transform: translateX(-50%);
    border: 1px solid var(--km2-border) !important;
    border-radius: 14px !important;
    box-shadow: 0 0 0 100vmax rgba(5, 12, 11, .55), 0 22px 70px rgba(0, 0, 0, .3) !important;
}
@media (max-width: 680px) {
    .app-layout .page-content .inventory-list-workspace.is-expanded {
        top: 0 !important;
        bottom: 0 !important;
        width: 100vw !important;
        border-radius: 0 !important;
    }
}

/* All pop-out forms share a usable viewport and their own scroll area. */
:is(
    [class$="-backdrop"], [class*="-backdrop "],
    [class$="-overlay"], [class*="-overlay "]
):has(> :is([class$="-modal"], [class*="-modal "], [class$="-dialog"], [class*="-dialog "])) {
    overflow: hidden;
    overscroll-behavior: contain;
    padding: 16px !important;
    animation: km-backdrop-in .16s ease both;
}

:is(
    [class$="-modal"], [class*="-modal "],
    [class$="-dialog"], [class*="-dialog "]
):not(.modal-title) {
    max-width: min(980px, 100%);
    max-height: calc(100dvh - 32px) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    animation: km-modal-in .18s cubic-bezier(.2, .8, .3, 1) both;
}

@keyframes km-backdrop-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes km-modal-in {
    from { opacity: 0; transform: translateY(6px) scale(.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
    :is([class$="-backdrop"], [class*="-backdrop "], [class$="-overlay"], [class*="-overlay "]),
    :is([class$="-modal"], [class*="-modal "], [class$="-dialog"], [class*="-dialog "]) { animation: none; }
}

:is([class$="-modal"], [class*="-modal "]) > footer,
:is([class$="-dialog"], [class*="-dialog "]) > footer {
    position: sticky;
    bottom: 0;
    z-index: 2;
    background: var(--km2-surface) !important;
}

/* Printed invoice and rich-document paper are intentionally exempt. */
.app-layout .page-content :is(.invoice-paper, .document-paper, .word-page) {
    box-sizing: border-box;
}

@media (max-width: 900px) {
    :root { --km-page-gap: 15px; --km-panel-pad: 15px; }

    .app-layout .page-content,
    .density-compact .page-content,
    .app-layout.density-compact .page-content {
        padding: 16px 12px calc(70px + env(safe-area-inset-bottom)) !important;
    }

    .app-layout .page-content :is(
        .km-page-heading,
        [class$="-page-header"], [class*="-page-header "],
        [class$="-detail-heading"], [class*="-detail-heading "],
        .report-detail-header
    ),
    .app-layout .page-content > :is([class$="-page"], [class*="-page "]) > header:first-child,
    .app-layout .page-content > :is([class$="-workspace"], [class*="-workspace "]) > header:first-child {
        align-items: flex-start;
        flex-direction: column;
    }

    .app-layout .page-content :is(
        .km-page-heading,
        [class$="-page-header"], [class*="-page-header "],
        [class$="-detail-heading"], [class*="-detail-heading "]
    ) > :last-child,
    .app-layout .page-content > :is([class$="-page"], [class*="-page "]) > header:first-child > :last-child {
        width: 100%;
    }

    .app-layout .page-content :is(.toolbar, [class$="-toolbar"], [class*="-toolbar "]) {
        align-items: stretch !important;
        flex-direction: column;
    }

    .app-layout .page-content :is(.toolbar, [class$="-toolbar"], [class*="-toolbar "]) > * {
        width: 100%;
    }

    .app-layout .page-content :is(.toolbar, [class$="-toolbar"], [class*="-toolbar "])
        :is(input[type="search"], input:not([type]), select) {
        width: 100% !important;
        max-width: none;
    }

    .app-layout .page-content .customer-accounts-workspace .accounts-toolbar-actions {
        grid-template-columns: minmax(0, 1fr) auto !important;
    }

    .app-layout .page-content .customer-accounts-workspace .accounts-toolbar-actions .filters {
        grid-column: 1 / -1;
    }

    .app-layout .page-content :is(
        .form-grid, [class$="-form-grid"], [class*="-form-grid "],
        [class$="-fields"], [class*="-fields "]
    ) {
        grid-template-columns: 1fr !important;
    }

    .app-layout .page-content :is(
        .form-grid, [class$="-form-grid"], [class*="-form-grid "],
        [class$="-fields"], [class*="-fields "]
    ) > :is(.wide, [class*="span-2"]) { grid-column: auto !important; }

    .app-layout .page-content :is(
        .actions, .km-actions, [class$="-actions"], [class*="-actions "],
        .button-row, [class$="-buttons"], [class*="-buttons "]
    ) { justify-content: flex-start; }

    .app-layout .page-content table { min-width: 680px; }
}

@media (max-width: 620px) {
    :root { --km-page-gap: 13px; --km-panel-pad: 13px; --km-control-height: 42px; }

    .app-layout .page-content :is(
        .stats, .metrics,
        [class*="stats-grid"], [class*="summary-grid"], [class*="metric-grid"]
    ) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }

    .app-layout .page-content :is(
        [class*="cards-grid"], .workspace-grid, .dashboard-main-grid,
        .employee-layout, .job-workspace-grid
    ) { grid-template-columns: 1fr !important; }

    .app-layout .page-content :is(
        .stats, .metrics,
        [class*="stats-grid"], [class*="summary-grid"], [class*="metric-grid"]
    ) > article {
        min-height: 88px !important;
        padding: 12px !important;
    }

    .app-layout .page-content :is(
        .actions, .km-actions, [class$="-actions"], [class*="-actions "],
        .button-row, [class$="-buttons"], [class*="-buttons "]
    ) > :is(button, a, .km-button) { flex: 1 1 140px; }

    .app-layout .page-content .customer-accounts-workspace .accounts-toolbar-actions,
    .app-layout .page-content .customer-accounts-workspace .accounts-toolbar-actions .filters {
        grid-template-columns: 1fr !important;
    }

    .app-layout .page-content .customer-accounts-workspace .accounts-toolbar-actions .workspace-action {
        width: 100%;
    }

    :is(
        [class$="-backdrop"], [class*="-backdrop "],
        [class$="-overlay"], [class*="-overlay "]
    ):has(> :is([class$="-modal"], [class*="-modal "], [class$="-dialog"], [class*="-dialog "])) {
        align-items: end !important;
        padding: 5px !important;
    }

    :is(
        [class$="-modal"], [class*="-modal "],
        [class$="-dialog"], [class*="-dialog "]
    ):not(.modal-title) {
        width: 100% !important;
        max-height: calc(100dvh - 10px) !important;
        border-radius: 16px 16px 0 0 !important;
    }
}

/* -------------------------------------------------------------------------
   Alignment correction
   Full-width work rows are not ordinary centered buttons. Empty information
   is supporting copy, so it follows the same left edge as the panel content.
   ------------------------------------------------------------------------- */

.app-layout .page-content :is(.empty, [class$="-empty"], [class*="-empty "]):not(.invoice-paper):not(.document-paper) {
    justify-items: start !important;
    place-content: start !important;
    min-height: 0 !important;
    text-align: left !important;
}

.app-layout .page-content :is(
    .myprofile-empty, .invoice-empty, .receivables-empty,
    .banking-empty, .dashboard-today-empty
) {
    display: block !important;
    width: 100%;
    padding: 14px 16px !important;
    text-align: left !important;
}

/* Profile panels use the same left edge from heading through content. */
.app-layout .myprofile-panel {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-width: 0;
    padding: 0 !important;
    overflow: hidden;
}

.app-layout .myprofile-panel-header {
    min-height: 72px;
    margin: 0 !important;
    padding: 18px 20px !important;
    border-bottom: 1px solid var(--km2-border);
}

.app-layout .myprofile-panel > :not(.myprofile-panel-header) {
    margin-left: 22px;
    margin-right: 22px;
}

.app-layout .myprofile-panel > :last-child { margin-bottom: 20px; }

.app-layout .myprofile-hours-bar { margin-top: 20px; }
.app-layout .myprofile-hours-caption { margin-top: 10px !important; margin-bottom: 10px !important; }

.app-layout .myprofile-time-list .myprofile-empty {
    margin: 0 !important;
    padding: 10px 0 !important;
    border: 0 !important;
    background: transparent !important;
}

.app-layout .myprofile-actions {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    align-items: stretch !important;
    gap: 9px !important;
    margin-top: 14px !important;
}

.app-layout .page-content .myprofile-actions > button {
    width: 100%;
    justify-content: flex-start !important;
    text-align: left !important;
}

/* Ticket overview is a compact work queue with stable columns. */
.app-layout .it-page { gap: 14px !important; }

.app-layout .msp-dashboard-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: start !important;
    gap: 12px !important;
}

.app-layout .msp-queue { padding: 0 !important; overflow: hidden; }

.app-layout .msp-queue > header {
    min-height: 76px;
    margin: 0 !important;
    padding: 15px 18px !important;
    border-bottom: 1px solid var(--km2-border);
}

.app-layout .page-content button.msp-ticket {
    display: grid !important;
    grid-template-columns: minmax(260px, 1.6fr) minmax(160px, .8fr) minmax(140px, .7fr) auto !important;
    align-items: center !important;
    justify-content: stretch !important;
    gap: 14px !important;
    width: 100% !important;
    min-height: 66px !important;
    margin: 0 !important;
    padding: 10px 16px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--km2-border) !important;
    border-left: 4px solid var(--km2-accent) !important;
    border-radius: 0 !important;
    background: var(--km2-surface) !important;
    color: var(--km2-text) !important;
    text-align: left !important;
    box-shadow: none !important;
    transform: none !important;
}

.app-layout .page-content button.msp-ticket:last-of-type { border-bottom: 0 !important; }
.app-layout .page-content button.msp-ticket:hover { background: var(--km2-surface-2) !important; }

.app-layout .msp-ticket > span {
    display: grid;
    justify-items: start;
    gap: 2px;
    min-width: 0;
    text-align: left !important;
}

.app-layout .msp-ticket-main > b,
.app-layout .msp-ticket-context > b {
    width: 100%;
    overflow: hidden;
    color: var(--km2-text) !important;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-layout .msp-ticket-main > small,
.app-layout .msp-ticket-context > small {
    color: var(--km2-muted) !important;
    font-size: .68rem !important;
    font-style: normal;
    font-weight: 750;
    letter-spacing: .045em;
    text-transform: uppercase;
}

.app-layout .msp-ticket > i {
    justify-self: end;
    min-width: 70px;
    padding: 6px 9px;
    text-align: center;
    white-space: nowrap;
}

/* The full ticket table is a ledger, including the quick-close action. */
.app-layout .ticket-toolbar {
    grid-template-columns: minmax(260px, 1fr) repeat(3, minmax(150px, 220px)) !important;
    align-items: center !important;
    gap: 9px !important;
    padding: 14px 16px !important;
    border-bottom: 1px solid var(--km2-border);
}

.app-layout .ticket-view-switch {
    justify-content: flex-end !important;
    gap: 8px !important;
    min-height: 54px;
    padding: 9px 16px !important;
    border-bottom: 1px solid var(--km2-border);
}

.app-layout .ticket-closed-toggle { margin-right: auto; }

.app-layout .ticket-table .ticket-row {
    display: grid !important;
    grid-template-columns: minmax(230px, 1.6fr) minmax(150px, 1fr) 120px 90px minmax(130px, .8fr) minmax(145px, .75fr) 44px !important;
    align-items: center !important;
    justify-content: stretch !important;
    gap: 12px !important;
    width: 100% !important;
    min-height: 62px;
    text-align: left !important;
}

.app-layout .ticket-table .ticket-row > * { min-width: 0; }
.app-layout .ticket-table .ticket-row > span {
    display: block;
    justify-self: stretch !important;
    text-align: left !important;
}

/* Inventory is a dense stock ledger. Actions must never make a row taller. */
.app-layout .inventory-list-workspace .inventory-table-wrap {
    overflow-x: auto !important;
}

.app-layout .inventory-list-workspace .inventory-table {
    min-width: 980px;
}

.app-layout .inventory-list-workspace .inventory-table tbody tr {
    height: 64px !important;
}

.app-layout .inventory-list-workspace .inventory-table th,
.app-layout .inventory-list-workspace .inventory-table td {
    height: auto !important;
    padding: 9px 12px !important;
    vertical-align: middle !important;
}

.app-layout .inventory-list-workspace .inventory-table th:last-child,
.app-layout .inventory-list-workspace .inventory-table td:last-child {
    width: 210px !important;
    min-width: 210px !important;
}

.app-layout .inventory-list-workspace .inventory-table-actions {
    display: flex !important;
    flex-flow: row nowrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 6px !important;
    width: 100%;
}

.app-layout .page-content .inventory-table-actions > .inventory-inline-btn {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 34px !important;
    height: 34px !important;
    padding: 6px 10px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}

.app-layout .page-content button.inventory-record-trigger {
    display: inline !important;
    width: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--km2-text) !important;
    line-height: 1.35;
    text-align: left !important;
}

.app-layout .page-content button.inventory-record-trigger:hover {
    color: var(--km2-accent) !important;
    text-decoration: underline;
}

@media (max-width: 1080px) {
    .app-layout .msp-dashboard-grid { grid-template-columns: 1fr !important; }
    .app-layout .msp-actions { display: none !important; }

    .app-layout .page-content button.msp-ticket {
        grid-template-columns: minmax(220px, 1.5fr) minmax(150px, 1fr) auto !important;
    }
    .app-layout .msp-ticket-context:nth-of-type(3) { display: none; }

    .app-layout .ticket-toolbar {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 700px) {
    .app-layout .myprofile-actions { grid-template-columns: 1fr !important; }

    .app-layout .page-content button.msp-ticket {
        grid-template-columns: minmax(0, 1fr) auto !important;
        gap: 6px 10px !important;
        padding: 12px !important;
    }
    .app-layout .msp-ticket-context { grid-column: 1; }
    .app-layout .msp-ticket-context:nth-of-type(3) { display: grid; }
    .app-layout .msp-ticket > i { grid-column: 2; grid-row: 1; }

    .app-layout .ticket-toolbar { grid-template-columns: 1fr !important; }
    .app-layout .ticket-view-switch { justify-content: flex-start !important; }
    .app-layout .ticket-closed-toggle { width: 100%; margin-right: 0; }

    .app-layout .inventory-list-workspace .inventory-table {
        min-width: 0;
    }

    .app-layout .inventory-list-workspace .inventory-table tbody tr {
        height: auto !important;
    }

    .app-layout .inventory-list-workspace .inventory-table th:last-child,
    .app-layout .inventory-list-workspace .inventory-table td:last-child {
        width: auto !important;
        min-width: 0 !important;
    }

    .app-layout .inventory-list-workspace .inventory-table-actions {
        justify-content: flex-start !important;
    }
}

/* Quick actions belong in the page controls, not in a competing dashboard card. */
.app-layout .dashboard-header-actions {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
}

.app-layout .dashboard-quick-menu { position: relative; z-index: 25; }

.app-layout .dashboard-quick-menu > summary {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 38px;
    padding: 8px 12px;
    border: 1px solid var(--km2-border-strong);
    border-radius: var(--km-radius-control);
    background: var(--km2-surface);
    color: var(--km2-text);
    font-size: .82rem;
    font-weight: 800;
    line-height: 1.15;
    list-style: none;
    cursor: pointer;
    user-select: none;
}

.app-layout .dashboard-quick-menu > summary::-webkit-details-marker { display: none; }
.app-layout .dashboard-quick-menu > summary span { color: var(--km2-accent); transition: transform .15s ease; }
.app-layout .dashboard-quick-menu[open] > summary span { transform: rotate(180deg); }

.app-layout .dashboard-quick-menu > nav {
    position: absolute;
    top: calc(100% + 7px);
    right: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(165px, 1fr));
    gap: 5px;
    width: min(390px, calc(100vw - 30px));
    padding: 8px;
    border: 1px solid var(--km2-border-strong);
    border-radius: 12px;
    background: var(--km2-surface);
    box-shadow: 0 16px 38px rgba(0, 0, 0, .22);
}

.app-layout .dashboard-quick-menu > nav > a {
    display: grid;
    gap: 2px;
    min-width: 0;
    min-height: 52px;
    padding: 8px 10px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: var(--km2-text);
    text-align: left;
    text-decoration: none;
}

.app-layout .dashboard-quick-menu > nav > a:hover {
    border-color: var(--km2-border);
    background: var(--km2-surface-2);
}

.app-layout .dashboard-quick-menu > nav span {
    color: var(--km2-muted);
    font-size: .64rem;
    font-weight: 800;
    letter-spacing: .055em;
    text-transform: uppercase;
}

.app-layout .dashboard-quick-menu > nav strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-layout .dashboard-main-grid:empty { display: none !important; }
.app-layout .dashboard-main-grid:has(> :only-child) { grid-template-columns: minmax(0, 1fr) !important; }

@media (max-width: 900px) {
    .app-layout .dashboard-header-actions {
        justify-content: flex-start;
        width: 100%;
    }
}

@media (max-width: 520px) {
    .app-layout .dashboard-header-actions > a { flex: 1 1 120px; }
    .app-layout .dashboard-quick-menu { width: 100%; }
    .app-layout .dashboard-quick-menu > summary { width: 100%; }
    .app-layout .dashboard-quick-menu > nav {
        right: auto;
        left: 0;
        grid-template-columns: 1fr;
        width: 100%;
    }
}

/* Dropdown surfaces must remain opaque above every themed page. */
.app-layout .page-content .dashboard-quick-menu > nav {
    isolation: isolate;
    background-color: #ffffff !important;
    background-image: none !important;
    color: #15241f !important;
    opacity: 1 !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

.app-layout .page-content .dashboard-quick-menu > nav > a,
.app-layout .page-content .dashboard-quick-menu > nav > a strong {
    color: #15241f !important;
    -webkit-text-fill-color: #15241f !important;
}

.app-layout .page-content .dashboard-quick-menu > nav > a span {
    color: #62716c !important;
    -webkit-text-fill-color: #62716c !important;
}

.app-layout .page-content .dashboard-quick-menu > nav > a:hover {
    background-color: #eef5f2 !important;
}

html[data-theme="dark"] .app-layout .page-content .dashboard-quick-menu > nav {
    background-color: #171e28 !important;
    color: #edf3f0 !important;
    border-color: #3a4654 !important;
}

html[data-theme="dark"] .app-layout .page-content .dashboard-quick-menu > nav > a,
html[data-theme="dark"] .app-layout .page-content .dashboard-quick-menu > nav > a strong {
    color: #edf3f0 !important;
    -webkit-text-fill-color: #edf3f0 !important;
}

html[data-theme="dark"] .app-layout .page-content .dashboard-quick-menu > nav > a span {
    color: #9aa9a3 !important;
    -webkit-text-fill-color: #9aa9a3 !important;
}

html[data-theme="dark"] .app-layout .page-content .dashboard-quick-menu > nav > a:hover {
    background-color: #222b37 !important;
}

/* IT Support exposes the same quick-menu pattern at narrower widths. */
.app-layout .page-content .msp-tools-menu,
.app-layout .page-content .msp-tools-menu > summary,
.app-layout .page-content .msp-tools-menu > div {
    background-color: #ffffff !important;
    background-image: none !important;
    color: #15241f !important;
    opacity: 1 !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

.app-layout .page-content .msp-tools-menu > div {
    isolation: isolate;
    border-color: #cddbd5 !important;
    box-shadow: 0 16px 38px rgba(0, 0, 0, .2) !important;
}

.app-layout .page-content .msp-tools-menu > div > button {
    background-color: #f1f6f4 !important;
    background-image: none !important;
    color: #174f3d !important;
    -webkit-text-fill-color: #174f3d !important;
}

html[data-theme="dark"] .app-layout .page-content .msp-tools-menu,
html[data-theme="dark"] .app-layout .page-content .msp-tools-menu > summary,
html[data-theme="dark"] .app-layout .page-content .msp-tools-menu > div {
    background-color: #171e28 !important;
    color: #edf3f0 !important;
    border-color: #3a4654 !important;
}

html[data-theme="dark"] .app-layout .page-content .msp-tools-menu > div > button {
    background-color: #222b37 !important;
    color: #edf3f0 !important;
    -webkit-text-fill-color: #edf3f0 !important;
}

html[data-theme="dark"] .app-layout .page-content .msp-tools-menu > div > button:hover {
    background-color: #293542 !important;
}

/* Users is a compact access ledger. Status and action controls never drive
   column width or row height. */
.app-layout .users-page {
    display: grid !important;
    align-content: start;
    gap: 14px !important;
}

.app-layout .users-page-header {
    align-items: flex-end !important;
    gap: 16px !important;
    min-height: 64px;
    padding: 2px 2px 0 !important;
}

.app-layout .users-page-header h1 {
    margin: 0 0 3px !important;
    font-size: clamp(1.65rem, 2.35vw, 2.2rem) !important;
    line-height: 1.08 !important;
}

.app-layout .users-page-header p { margin: 0 !important; }

.app-layout .users-stats-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 10px !important;
}

.app-layout .users-stat-card {
    min-width: 0;
    min-height: 88px;
    padding: 14px 16px !important;
    border: 1px solid var(--km2-border) !important;
    border-radius: 12px !important;
    background: var(--km2-surface) !important;
    box-shadow: none !important;
}

.app-layout .users-stat-label { margin-bottom: 5px !important; }
.app-layout .users-stat-value { font-size: 1.55rem !important; line-height: 1.1; }

.app-layout .users-list-workspace {
    padding: 0 !important;
    overflow: hidden;
}

.app-layout .users-list-header {
    min-height: 76px;
    margin: 0 !important;
    padding: 14px 16px !important;
    border-bottom: 1px solid var(--km2-border);
}

.app-layout .users-list-filters {
    grid-template-columns: minmax(260px, 1fr) minmax(180px, 240px) !important;
    gap: 9px !important;
    margin: 0 !important;
    padding: 12px 16px !important;
    border-bottom: 1px solid var(--km2-border);
}

.app-layout .users-table-wrap {
    overflow-x: auto;
    border: 0 !important;
    border-radius: 0 !important;
}

.app-layout .users-table {
    min-width: 1120px;
    table-layout: fixed;
}

.app-layout .users-table th,
.app-layout .users-table td {
    padding: 11px 12px !important;
    vertical-align: middle !important;
    line-height: 1.35;
}

.app-layout .users-table tbody tr { height: 66px; }
.app-layout .users-table :is(th, td):nth-child(1) { width: 10%; }
.app-layout .users-table :is(th, td):nth-child(2) { width: 22%; }
.app-layout .users-table :is(th, td):nth-child(3) { width: 9%; }
.app-layout .users-table :is(th, td):nth-child(4) { width: 13%; }
.app-layout .users-table :is(th, td):nth-child(5) { width: 10%; }
.app-layout .users-table :is(th, td):nth-child(6) { width: 15%; }
.app-layout .users-table :is(th, td):nth-child(7) { width: 13%; }
.app-layout .users-table :is(th, td):nth-child(8) { width: 8%; min-width: 112px; }

.app-layout .users-table td:nth-child(2) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-layout .users-table :is(.users-badge, [class*="users-badge-"]) {
    display: inline-flex !important;
    align-items: center;
    width: max-content !important;
    max-width: 100%;
    min-height: 27px !important;
    padding: 4px 9px !important;
    border-radius: 999px !important;
    font-size: .72rem !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
}

.app-layout .user-actions-select {
    width: 100% !important;
    /* 108px clipped the "Actions…" placeholder option's own text against
       this select's native dropdown-arrow padding (28px right + 9px left),
       leaving no room for the label at .74rem/800 weight. */
    min-width: 148px;
    height: 36px !important;
    min-height: 36px !important;
    padding: 6px 28px 6px 9px !important;
    font-size: .74rem;
    font-weight: 800;
    white-space: nowrap;
}

.app-layout .users-managed-label {
    display: inline-block;
    color: var(--km2-muted);
    font-size: .72rem;
    line-height: 1.25;
}

.app-layout .users-module-option {
    align-items: center !important;
    min-height: 62px;
}

.app-layout .users-module-option:has(input:disabled) {
    opacity: .72;
    background: var(--km2-surface-2) !important;
}

@media (max-width: 900px) {
    .app-layout .users-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

@media (max-width: 760px) {
    .app-layout .users-page-header { align-items: stretch !important; flex-direction: column; }
    .app-layout .users-page-header > a { width: 100%; }
    .app-layout .users-list-filters { grid-template-columns: 1fr !important; }

    .app-layout .users-list-workspace .users-table,
    .app-layout .users-list-workspace .users-table tbody {
        min-width: 0 !important;
    }

    .app-layout .users-list-workspace .users-table tbody tr {
        height: auto;
    }

    .app-layout .users-list-workspace .users-table :is(th, td):nth-child(n) {
        width: auto !important;
        min-width: 0 !important;
    }

    .app-layout .users-list-workspace .users-table td:nth-child(2) {
        overflow: visible;
        white-space: normal;
    }

    .app-layout .user-actions-select { width: min(100%, 220px) !important; }
}

/* A desktop week calendar should read as a week, not as three oversized day
   panels with compressed event content. Keep all seven days available in one
   horizontal schedule and give each day enough room to remain legible. */
@media (min-width: 769px) {
    .app-layout .page-content:has(.jobcalendar-page) {
        max-width: none !important;
    }

    .app-layout .page-content .jobcalendar-week-grid {
        display: grid !important;
        grid-template-columns: repeat(7, minmax(210px, 1fr)) !important;
        gap: 12px !important;
        width: max(100%, 1542px) !important;
        padding: 0 0 8px !important;
        overflow: visible !important;
    }

    .app-layout .page-content .jobcalendar-main {
        min-width: 0 !important;
        overflow-x: auto !important;
        scrollbar-gutter: stable;
    }

    .app-layout .page-content .jobcalendar-day-column {
        min-width: 210px !important;
    }

    .app-layout .page-content .jobcalendar-job-card-button {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    .app-layout .page-content .jobcalendar-job-top {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: flex-start !important;
        gap: 8px !important;
    }

    .app-layout .page-content .jobcalendar-job-time {
        min-width: 0 !important;
        font-size: 11px !important;
        white-space: nowrap !important;
        text-align: left !important;
    }

    .app-layout .page-content :is(.jobcalendar-job-time, .jobcalendar-job-title, .jobcalendar-job-tech-text) {
        word-break: normal !important;
        overflow-wrap: break-word !important;
    }
}

/* Small admin/reference tables (Departments, Locations, Vendors, My Assets)
   render as bordered, labeled record cards on phones instead of a
   horizontally scrolled desktop grid. */
@media (max-width: 680px) {
    .app-layout :is(.departments-table, .locations-table, .vendors-table, .myassets-table),
    .app-layout :is(.departments-table, .locations-table, .vendors-table, .myassets-table) tbody {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
    }
    .app-layout :is(.departments-table, .locations-table, .vendors-table, .myassets-table) thead {
        display: none !important;
    }
    .app-layout :is(.departments-table, .locations-table, .vendors-table, .myassets-table) tr {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 5px;
        min-width: 0;
        margin-bottom: 9px;
        padding: 12px;
        border: 1px solid var(--km2-border, #e3e9e6);
        border-radius: 11px;
        background: var(--km2-surface, #fff);
    }
    .app-layout :is(.departments-table, .locations-table, .vendors-table, .myassets-table) tr:last-child {
        margin-bottom: 0;
    }
    .app-layout :is(.departments-table, .locations-table, .vendors-table, .myassets-table) td {
        display: block !important;
        min-width: 0;
        padding: 0 !important;
        border: 0 !important;
        font-size: 13px;
        white-space: normal;
        overflow-wrap: anywhere;
    }
    .app-layout :is(.departments-table, .locations-table, .vendors-table, .myassets-table) td[data-label]:not(:first-child)::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 2px;
        color: var(--km2-muted, #6b7280);
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .04em;
        text-transform: uppercase;
    }
    .app-layout :is(.departments-table, .locations-table, .vendors-table, .myassets-table) td:first-child {
        font-size: 15px;
        font-weight: 700;
    }
    .app-layout :is(.departments-table-actions, .locations-table-actions, .vendors-table-actions) {
        flex-wrap: wrap;
        margin-top: 4px;
    }
    .app-layout :is(.departments-inline-btn, .locations-inline-btn, .vendors-inline-btn) {
        min-height: 38px;
        padding: 8px 12px;
    }
}

/* Inventory item and asset detail-page history tables use the same
   labeled-card treatment on phones instead of a scrolled desktop table. */
@media (max-width: 680px) {
    .app-layout :is(.invdetails-table, .asset-table),
    .app-layout :is(.invdetails-table, .asset-table) tbody {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
    }
    .app-layout :is(.invdetails-table, .asset-table) thead { display: none !important; }
    .app-layout :is(.invdetails-table, .asset-table) tr {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 5px;
        min-width: 0;
        margin-bottom: 9px;
        padding: 12px;
        border: 1px solid var(--km2-border, #e3e9e6);
        border-radius: 11px;
        background: var(--km2-surface, #fff);
    }
    .app-layout :is(.invdetails-table, .asset-table) tr:last-child { margin-bottom: 0; }
    .app-layout :is(.invdetails-table, .asset-table) td {
        display: block !important;
        min-width: 0;
        padding: 0 !important;
        border: 0 !important;
        font-size: 13px;
        white-space: normal;
        overflow-wrap: anywhere;
    }
    .app-layout :is(.invdetails-table, .asset-table) td[data-label]::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 2px;
        color: var(--km2-muted, #6b7280);
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .04em;
        text-transform: uppercase;
    }
}

/* Job rows use one predictable action control at every width. */
.app-layout .job-row-actions {
    display: block !important;
    width: 100%;
    min-width: 138px;
    max-width: 180px;
    min-height: 38px;
    padding: 7px 32px 7px 10px;
    border: 1px solid var(--km2-border);
    border-radius: 9px;
    background: var(--km2-surface-2);
    color: var(--km2-text);
    font: inherit;
    font-size: .78rem;
    font-weight: 750;
}

@media (max-width: 760px) {
    .app-layout .job-row-actions {
        width: 100% !important;
        max-width: none;
        min-width: 0;
    }
}

/* Phone ticket lists are compact records, not squeezed desktop ledgers. */
@media (max-width: 760px) {
    .app-layout .page-content .ticket-table { overflow: visible !important; }
    .app-layout .page-content .ticket-table .ticket-head { display: none !important; }
    .app-layout .page-content .ticket-table .ticket-row:not(.ticket-head) {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px 14px !important;
        width: calc(100% - 1rem) !important;
        min-width: 0 !important;
        max-width: calc(100% - 1rem) !important;
        padding: 12px 52px 12px 12px !important;
        overflow: hidden;
    }
    .app-layout .page-content .ticket-table .ticket-row:not(.ticket-head) > span {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 2px;
        min-width: 0;
        font-size: .78rem !important;
        overflow-wrap: anywhere;
    }
    .app-layout .page-content .ticket-table .ticket-row:not(.ticket-head) > span::before {
        content: attr(data-label);
        color: var(--km2-muted);
        font-size: .58rem;
        font-weight: 750;
        letter-spacing: .075em;
        line-height: 1.1;
        text-transform: uppercase;
    }
    .app-layout .page-content .ticket-table .ticket-row:not(.ticket-head) > span:first-child,
    .app-layout .page-content .ticket-table .ticket-row:not(.ticket-head) > span:nth-child(6) { grid-column: 1 / -1; }
    .app-layout .page-content .ticket-table .ticket-row:not(.ticket-head) > span:first-child::before { display: none; }
    .app-layout .page-content .ticket-table .ticket-row:not(.ticket-head) .ticket-subject {
        white-space: normal !important;
        overflow-wrap: anywhere;
    }
    .app-layout .page-content .ticket-table .quick-ticket-close {
        position: absolute !important;
        top: 12px !important;
        right: 10px !important;
    }
}

@media (max-width: 390px) {
    .app-layout .page-content :is(
        .stats, .metrics,
        [class*="stats-grid"], [class*="summary-grid"], [class*="metric-grid"]
    ) { grid-template-columns: 1fr !important; }
}

/* -------------------------------------------------------------------------
   Page architecture pass
   The rules above normalize components. These rules make the modules read in
   the same order: heading, summary, primary workspace, supporting detail.
   ------------------------------------------------------------------------- */

/* Keep the opening content compact and aligned to the same content edge. */
.app-layout:not(.mfg-shell) .page-content > :is(
    .km-page, [class$="-page"], [class*="-page "],
    [class$="-workspace"], [class*="-workspace "]
) > :is(
    .dashboard-page-header, .documents-header,
    .customers-page > header, .people-page > header,
    .jobs-page-header, .inventory-page-header, .assets-page-header,
    .settings-page-header, .invoices-heading,
    .km-page-heading,
    [class$="-page-header"], [class*="-page-header "]
) {
    min-height: 0;
    padding: 2px 2px 17px !important;
    border-bottom: 1px solid var(--km2-border);
}

.app-layout:not(.mfg-shell) .page-content > :is(
    .km-page, [class$="-page"], [class*="-page "],
    [class$="-workspace"], [class*="-workspace "]
) > :is(
    .dashboard-page-header, .documents-header,
    .customers-page > header, .people-page > header,
    .jobs-page-header, .inventory-page-header, .assets-page-header,
    .settings-page-header, .invoices-heading,
    .km-page-heading,
    [class$="-page-header"], [class*="-page-header "]
) > :first-child { min-width: 0; }

.app-layout:not(.mfg-shell) .page-content > :is(
    .km-page, [class$="-page"], [class*="-page "],
    [class$="-workspace"], [class*="-workspace "]
) > :is(
    .dashboard-page-header, .documents-header,
    .customers-page > header, .people-page > header,
    .jobs-page-header, .inventory-page-header, .assets-page-header,
    .settings-page-header, .invoices-heading,
    .km-page-heading,
    [class$="-page-header"], [class*="-page-header "]
) :is(h1, .dashboard-title, .settings-title, .jobs-title, .inventory-title, .assets-title) {
    margin: 3px 0 5px !important;
    font-size: clamp(1.7rem, 2.35vw, 2.25rem) !important;
    line-height: 1.15 !important;
}

.app-layout .page-content :is(
    .dashboard-subtitle, .settings-subtitle, .jobs-subtitle,
    .inventory-subtitle, .assets-subtitle, .documents-header p,
    .customers-page > header p, .people-page > header p
) { margin: 0 !important; line-height: 1.5 !important; }

/* Primary page actions always sit in one predictable block. */
.app-layout:not(.mfg-shell) .page-content :is(
    .customer-import-actions, .jobs-header-actions,
    .inventory-import-actions, .assets-action-row,
    .invoice-heading-actions, .workspace-hub-hero-actions,
    .dashboard-header-actions, .people-heading-actions,
    .documents-desktop-create
) {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    min-width: 0;
    margin: 0 !important;
}

/* Summary bands use equal columns, equal heights, and a single visual scale. */
.app-layout:not(.mfg-shell) .page-content > :is(
    .km-page, [class$="-page"], [class*="-page "],
    [class$="-workspace"], [class*="-workspace "]
) > :is(
    .dashboard-stats-grid, .customer-module-stats, .jobs-stats-grid,
    .inventory-stats-grid, .document-stats, .invoice-summary,
    .receivables-summary, .payables-summary, .banking-summary,
    .workspace-hub-metrics, .settings-plan-card
) {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)) !important;
    align-items: stretch !important;
    gap: 10px !important;
    min-width: 0;
    margin: 0 !important;
}

.app-layout:not(.mfg-shell) .page-content > :is(
    .km-page, [class$="-page"], [class*="-page "],
    [class$="-workspace"], [class*="-workspace "]
) > :is(
    .dashboard-stats-grid, .customer-module-stats, .jobs-stats-grid,
    .inventory-stats-grid, .document-stats, .invoice-summary,
    .receivables-summary, .payables-summary, .banking-summary,
    .workspace-hub-metrics, .settings-plan-card
) > * {
    width: auto !important;
    min-width: 0 !important;
    min-height: 88px !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 15px 17px !important;
    border: 1px solid var(--km2-border) !important;
    border-radius: 14px !important;
    background: var(--km2-surface) !important;
    color: var(--km2-text) !important;
    box-shadow: none !important;
}

/* Only the ones that are actual links (e.g. workspace-hub-metrics) get hover
   feedback - a plain summary card (settings-plan-card, most dashboard stats)
   isn't clickable, so it stays static instead of implying it is. */
.app-layout .page-content :is(
    .dashboard-stats-grid, .customer-module-stats, .jobs-stats-grid,
    .inventory-stats-grid, .document-stats, .invoice-summary,
    .receivables-summary, .payables-summary, .banking-summary,
    .workspace-hub-metrics, .settings-plan-card
) > a {
    transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.app-layout .page-content :is(
    .dashboard-stats-grid, .customer-module-stats, .jobs-stats-grid,
    .inventory-stats-grid, .document-stats, .invoice-summary,
    .receivables-summary, .payables-summary, .banking-summary,
    .workspace-hub-metrics, .settings-plan-card
) > a:hover {
    border-color: var(--km2-accent) !important;
    box-shadow: var(--km2-shadow-hover);
    transform: translateY(-1px);
}
@media (prefers-reduced-motion: reduce) {
    .app-layout .page-content :is(
        .dashboard-stats-grid, .customer-module-stats, .jobs-stats-grid,
        .inventory-stats-grid, .document-stats, .invoice-summary,
        .receivables-summary, .payables-summary, .banking-summary,
        .workspace-hub-metrics, .settings-plan-card
    ) > a { transition: none; }
    .app-layout .page-content :is(
        .dashboard-stats-grid, .customer-module-stats, .jobs-stats-grid,
        .inventory-stats-grid, .document-stats, .invoice-summary,
        .receivables-summary, .payables-summary, .banking-summary,
        .workspace-hub-metrics, .settings-plan-card
    ) > a:hover { transform: none; }
}

/* Dashboard: strong overview without oversized decorative regions. */
.app-layout .dashboard-page { gap: 22px !important; }

/* Mockup #2 dashboard: a slim greeting line, a 5-card stat strip, then a
   two-column grid of Today's jobs + Needs attention - replacing the old
   dark hero, domain-card grid, work queue, alert strip and finance strip. */
.app-layout .dashboard-greeting-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    flex-wrap: wrap !important;
    padding: 24px 28px !important;
    border: 1px solid var(--km-border) !important;
    border-radius: var(--km-radius-panel) !important;
    background: var(--km-surface) !important;
}

.app-layout .dashboard-greeting-row p { margin: 4px 0 0 !important; color: var(--km-muted) !important; }
.app-layout .dashboard-greeting-actions { display: flex !important; gap: 8px !important; flex-wrap: wrap !important; }

.app-layout .dashboard-main-grid {
    grid-template-columns: minmax(0, 1.55fr) minmax(280px, .7fr) !important;
    align-items: start !important;
    gap: 20px !important;
}

.app-layout .dashboard-secondary-panel > summary { display: none; }
.app-layout .dashboard-secondary-panel:not([open]) > :not(summary) { display: block; }

.app-layout .dashboard-attention-list {
    display: flex !important;
    flex-direction: column !important;
    overflow-x: visible !important;
    gap: 10px !important;
}

.app-layout .dashboard-attention-list .dashboard-alert-item {
    min-width: 0 !important;
    flex: none !important;
}

.app-layout .dashboard-today-job:hover,
.app-layout .dashboard-today-job:focus-visible {
    background-color: #e8f4f0 !important;
    color: var(--km2-text) !important;
}

html[data-theme="dark"] .app-layout .dashboard-today-job:hover,
html[data-theme="dark"] .app-layout .dashboard-today-job:focus-visible {
    background-color: #222a35 !important;
}

.app-layout .dashboard-today-job:hover :is(strong, span),
.app-layout .dashboard-today-job:focus-visible :is(strong, span) {
    color: var(--km2-text) !important;
    -webkit-text-fill-color: var(--km2-text) !important;
}

.app-layout .dashboard-today-job:hover small,
.app-layout .dashboard-today-job:focus-visible small {
    color: var(--km2-muted) !important;
    -webkit-text-fill-color: var(--km2-muted) !important;
}

/* Dashboard tables fought their own .table-wrap overflow-x:auto scroll by
   forcing width:100%, so narrow columns wrapped mid-word instead of the
   table scrolling horizontally (the pattern the Inventory table already
   uses correctly). */
@media (max-width: 900px) {
    .app-layout .dashboard-table { width: max-content !important; min-width: 100% !important; }
}

/* Module hubs: a real two-column layout (link cards + a persistent
   "needs attention"/help side panel), with enough air between the hero,
   the stat strip, and the body that the page reads as distinct sections
   instead of one dense, undifferentiated column. */
.app-layout:not(.mfg-shell) .workspace-hub { gap: 18px !important; }

.app-layout:not(.mfg-shell) .workspace-hub-hero {
    min-height: 0 !important;
    padding: 20px 22px !important;
    margin: 0 !important;
    border-radius: 14px !important;
}

.app-layout:not(.mfg-shell) .workspace-hub-hero::after { display: none !important; }

.app-layout:not(.mfg-shell) .workspace-hub-hero h1 {
    margin: 6px 0 7px !important;
    font-size: clamp(1.7rem, 2.4vw, 2.2rem) !important;
}

/* The base .workspace-hub-layout grid (main content + a 260-340px aside)
   is defined once in kolmadia.css; kolmadia.css's own stray, later
   duplicate that used to flatten it to display:block has been removed,
   but this rule still sets real layout values (gap, margin, the
   1100px breakpoint below) and app-polish.css loads last, so it stays
   the authoritative source for this grid regardless of load order. */
.app-layout .workspace-hub-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
    gap: 22px !important;
    min-width: 0;
    margin: 0 !important;
}

@media (max-width: 1100px) {
    .app-layout .workspace-hub-layout { grid-template-columns: 1fr !important; }
}

.app-layout .workspace-hub-layout > main { min-width: 0; }

.app-layout .workspace-hub-section-heading {
    margin: 0 2px 14px !important;
    padding-top: 2px;
}

.app-layout .workspace-hub-links {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
}

.app-layout .workspace-hub-links > a {
    min-height: 92px !important;
    padding: 16px 18px !important;
    border-radius: 13px !important;
}

.app-layout .accounting-visual-grid {
    grid-template-columns: minmax(0, 1.6fr) repeat(2, minmax(230px, .7fr)) !important;
    align-items: stretch !important;
    gap: 10px !important;
    margin: 0 !important;
}

.app-layout .accounting-visual-grid > article { min-width: 0; height: 100%; }

/* Directories: title and filters form a clean top band; the records follow. */
.app-layout .page-content :is(
    .customer-accounts-workspace, .employee-directory-workspace,
    .inventory-list-workspace, .invoice-worklist,
    .receivables-workspace
) {
    min-width: 0;
    overflow: hidden;
}

.app-layout .page-content :is(
    .customer-accounts-workspace, .employee-directory-workspace,
    .inventory-list-workspace, .invoice-worklist,
    .receivables-workspace
) > :is(.toolbar, .section-heading, .inventory-list-header, .invoice-toolbar, .receivables-toolbar) {
    min-height: 78px;
    padding: 18px 22px !important;
    border-bottom: 1px solid var(--km2-border) !important;
}

/* .directory-columns (the header: empty avatar-spacer/Employee/Access/
   Location & status/Actions - 5 cells) and .people-list article (each
   employee row: .avatar/.identity/.access/.location/.row-actions - also 5)
   need identical column tracks to actually line up. This rule only ever
   matched the header: ".person" and ".employee-row" aren't classes this
   page's markup uses (People.razor's row element is a bare <article>), so
   rows were left with no explicit template at all and auto-sized 5
   implicit columns from content instead. The header's old template had
   only 4 tracks for its 5 cells, so "Actions" wrapped into an implicit
   second row sharing column 1's width with the empty avatar-spacer -
   rendering well below and to the left of the Edit/Archive buttons it's
   meant to label. Giving both selectors the same 5-track template fixes
   both problems at once. */
.app-layout .people-page .directory-columns,
.app-layout .people-page .people-list article {
    grid-template-columns: 40px minmax(200px, 1.4fr) minmax(140px, .7fr) minmax(160px, .8fr) auto !important;
    align-items: center !important;
    column-gap: 16px !important;
}

/* Jobs, inventory, and assets use the same header/workspace rhythm. */
.app-layout .page-content :is(.jobs-panel, .inventory-panel, .assets-panel) {
    margin: 0 !important;
}

.app-layout .page-content :is(.jobs-panel-header, .inventory-panel-header, .assets-panel-header) {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 12px 18px !important;
    min-height: 74px;
    padding: 18px 22px !important;
}

.app-layout .page-content :is(.jobs-filters-row, .inventory-filters-grid, .assets-filters-grid) {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
    align-items: end !important;
    gap: 14px !important;
}

/* .jobs-view-tabs (Active/Completed/Archived/All) is a nowrap flex group,
   not a single input, so a single auto-fit track (minmax(180px,1fr), ~200px
   at this row's width) is nowhere near enough for all four labels - the
   track sizing in an auto-fit grid comes from the minmax() floor and the
   1fr split, not from a item's own content width, so overriding min-width
   on the item itself has no effect on how wide its track becomes. The
   buttons were overflowing their track and getting visually clipped by the
   next column (the search box). Spanning two tracks gives it roughly
   double the width, which fits all four labels at this row's typical size.

   Scoped to min-width:701px (matching design-system.css's own 700px mobile
   breakpoint with no gap or overlap) rather than left unconditional: an
   earlier version of this fix applied at every width and, per this repo's
   automated review, would have let its !important beat design-system.css's
   non-!important mobile rule (.jobs-view-tabs { grid-column: 1 / -1 } under
   max-width:700px) - clobbering the already-correct, already-working
   full-width mobile tab layout with a span:2 rule that has no reason to
   apply once the row itself is down to a single mobile column. */
@media (min-width: 701px) {
    .app-layout .page-content .jobs-view-tabs {
        grid-column: span 2 !important;
        min-width: max-content !important;
    }
}

/* Documents read as a library, not a pile of unrelated cards. */
.app-layout .documents-page { gap: 22px !important; }
.app-layout .documents-page .tabs { margin: 0 !important; }
.app-layout .documents-page .document-toolbar { margin: 0 !important; }

.app-layout .documents-page .document-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    overflow: hidden;
    border: 1px solid var(--km2-border);
    border-radius: 11px;
}

.app-layout .documents-page .document-card {
    grid-template-columns: 42px minmax(220px, 1fr) auto !important;
    align-items: center !important;
    min-height: 78px !important;
    padding: 15px 18px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--km2-border) !important;
    border-radius: 0 !important;
    background: var(--km2-surface) !important;
}

.app-layout .documents-page .document-card:last-child { border-bottom: 0 !important; }
.app-layout .documents-page .doc-icon { width: 40px !important; height: 40px !important; }
.app-layout .documents-page .doc-actions { grid-column: 3 !important; justify-content: flex-end; }

/* Accounting workspaces share the same navigation, summary, and ledger width. */
.app-layout .page-content :is(.receivables-page, .payables-page, .banking-page, .invoices-page) {
    gap: 22px !important;
}

.app-layout .page-content :is(.receivables-tabs, .period-picker) {
    margin: 0 !important;
}

.app-layout .page-content :is(
    .receivables-table, .payables-table, .bank-transaction-table,
    .invoice-table, .recurring-expense-table, .history-section
) {
    min-width: 0;
    margin: 0 !important;
}

.app-layout .page-content :is(
    .receivables-row, .payables-row, .bank-transaction-row,
    .invoice-table-row, .history-row, .recurring-expense-row
) {
    min-height: 62px;
    padding: 11px 14px !important;
}

/* Keep clickable work-list rows inside the active theme. Several older page
   styles still use literal near-white hover colors, which produce a white
   flash (and unreadable text) in dark mode. This final shared rule deliberately
   wins over those page-level literals without changing buttons or status pills. */
.app-layout .page-content :is(
    a, button, [role="button"]
):is(
    [class$="-row"], [class*="-row "],
    [class$="-item"], [class*="-item "]
):hover {
    background-color: var(--km2-accent-soft) !important;
    color: var(--km2-text) !important;
}

.app-layout .banking-split {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: stretch !important;
    gap: 18px !important;
    margin: 0 !important;
}

/* Settings: generously spaced overview, then full-width grouped sections. */
.app-layout .settings-page { gap: 26px !important; }

.app-layout .settings-panel {
    margin: 0 !important;
    overflow: hidden;
}

.app-layout .settings-panel-header {
    min-height: 72px;
    padding: 20px 24px !important;
}

.app-layout .settings-panel > :not(.settings-panel-header) {
    margin-left: var(--km-panel-pad);
    margin-right: var(--km-panel-pad);
}

.app-layout .settings-panel > :last-child { margin-bottom: calc(var(--km-panel-pad) * 1.3) !important; }

/* These two buttons (module-recommendation flow) had no CSS anywhere,
   so they were rendering as unstyled browser-default buttons on the
   Settings page. Match the established .km-button/.km-button-primary
   treatment used everywhere else instead of inventing a new style. */
.app-layout .settings-secondary-button,
.app-layout .settings-primary-button {
    border-radius: 10px;
    padding: 9px 14px;
    font-weight: 700;
    font: inherit;
    cursor: pointer;
}
.app-layout .settings-secondary-button {
    border: 1px solid var(--km2-border);
    background: var(--km2-surface-2);
    color: var(--km2-text);
}
.app-layout .settings-secondary-button:hover { border-color: var(--km2-border-strong); }
.app-layout .settings-primary-button {
    border: 1px solid var(--km2-accent);
    background: var(--km2-accent);
    color: #05130f;
}
.app-layout .settings-primary-button:hover { background: var(--km2-accent-hover); border-color: var(--km2-accent-hover); }
.app-layout .settings-primary-button:disabled { opacity: .6; cursor: default; }

.app-layout .module-chip-grid {
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)) !important;
    gap: 14px !important;
}

.app-layout .module-chip {
    min-height: 76px !important;
    padding: 16px 18px !important;
}

.app-layout .settings-details-grid,
.app-layout .settings-color-grid,
.app-layout .workspace-preference-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
    gap: 16px !important;
}

@media (max-width: 1180px) {
    .app-layout .accounting-visual-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
    .app-layout .accounting-trend-chart { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
    .app-layout .dashboard-main-grid { grid-template-columns: 1fr !important; }

    .app-layout .workspace-hub-links,
    .app-layout .banking-split { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }

    .app-layout .people-page .directory-columns,
    .app-layout .people-page .people-list article { grid-template-columns: 1fr !important; }
}

@media (max-width: 620px) {
    .app-layout .dashboard-page { gap: 18px !important; }

    .app-layout .page-content :is(
        .dashboard-page-header, .documents-header,
        .customers-page > header, .people-page > header,
        .jobs-page-header, .inventory-page-header, .assets-page-header,
        .settings-page-header, .invoices-heading
    ) { min-height: 0; }

    .app-layout .page-content :is(
        .customer-import-actions, .jobs-header-actions,
        .inventory-import-actions, .assets-action-row,
        .invoice-heading-actions, .workspace-hub-hero-actions
    ) { justify-content: flex-start !important; width: 100%; }

    .app-layout .page-content :is(
        .customer-import-actions, .jobs-header-actions,
        .inventory-import-actions, .assets-action-row,
        .invoice-heading-actions, .workspace-hub-hero-actions
    ) > * { flex: 1 1 140px; }

    .app-layout .workspace-hub-hero { padding: 14px !important; }

    .app-layout .dashboard-page-header .dashboard-header-actions { display: none !important; }

    .app-layout .dashboard-page > .dashboard-setup-callout {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto 30px;
        align-items: center !important;
        gap: 9px !important;
        min-height: 48px;
        padding: 9px 10px !important;
    }
    .app-layout .dashboard-setup-callout > span { display: none; }
    .app-layout .dashboard-setup-callout > a { justify-self: end; }
    .app-layout .dashboard-setup-callout > button { justify-self: end; }

    .app-layout .dashboard-greeting-row {
        padding: 2px 0 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    .app-layout .dashboard-page > .dashboard-primary-grid { order: 3 !important; gap: 18px !important; }
    .app-layout .dashboard-primary-grid .dashboard-attention-panel { order: -1; }
    .app-layout .dashboard-page > .dashboard-stats-grid {
        order: 4 !important;
        display: flex !important;
        gap: 8px !important;
        overflow-x: auto;
        padding: 1px 1px 5px;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
    }
    .app-layout .dashboard-page > .dashboard-stats-grid::-webkit-scrollbar { display: none; }
    .app-layout .page-content .dashboard-page .dashboard-stats-grid > .stat-card {
        flex: 0 0 124px;
        box-sizing: border-box;
        height: 54px !important;
        min-height: 54px !important;
        padding: 7px 10px !important;
        scroll-snap-align: start;
    }
    .app-layout .dashboard-stats-grid .stat-label { font-size: .61rem !important; }
    .app-layout .dashboard-stats-grid .stat-value { font-size: 1.2rem !important; line-height: 1 !important; }
    .app-layout .dashboard-stats-grid .stat-meta { display: none !important; }

    .app-layout .dashboard-page > .dashboard-secondary-panel { order: 5 !important; padding: 0 !important; overflow: hidden; }
    .app-layout .dashboard-secondary-panel > summary {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto 24px;
        align-items: center;
        gap: 10px;
        min-height: 58px;
        padding: 13px 15px;
        cursor: pointer;
        list-style: none;
    }
    .app-layout .dashboard-secondary-panel > summary::-webkit-details-marker { display: none; }
    .app-layout .dashboard-secondary-panel > summary span { font-weight: 800; }
    .app-layout .dashboard-secondary-panel > summary small { color: var(--km-muted); font-size: .75rem; }
    .app-layout .dashboard-secondary-panel > summary b { color: var(--km-green); font-size: 1.4rem; text-align: center; transition: transform .16s ease; }
    .app-layout .dashboard-secondary-panel[open] > summary b { transform: rotate(90deg); }
    .app-layout .dashboard-secondary-panel:not([open]) > :not(summary) { display: none; }
    .app-layout .dashboard-secondary-panel[open] > summary { border-bottom: 1px solid var(--km-border); }

    .app-layout .workspace-hub-links,
    .app-layout .accounting-visual-grid,
    .app-layout .banking-split { grid-template-columns: 1fr !important; }

    .app-layout .dashboard-greeting-row { flex-direction: column !important; align-items: flex-start !important; }
    .app-layout .dashboard-greeting-actions { width: 100% !important; }
    .app-layout .dashboard-greeting-actions > a { flex: 1 1 auto !important; text-align: center !important; }

    .app-layout .accounting-trend-chart { grid-column: auto; }

    .app-layout .documents-page .document-card {
        grid-template-columns: 40px minmax(0, 1fr) !important;
    }
    .app-layout .documents-page .doc-actions {
        grid-column: 1 / -1 !important;
        justify-content: flex-start;
    }

    /* Personal mobile home: the first screen answers "what do I do next?".
       Job-title presets decide which links exist; this layout remains useful
       across trades, healthcare, warehouses, offices, and community teams. */
    .app-layout .personal-day-hero {
        order: 1 !important;
        display: grid;
        gap: 12px;
        padding: 15px;
        border: 1px solid var(--km-border);
        border-radius: 15px;
        background: var(--km-surface);
        box-shadow: var(--km-shadow-soft);
    }
    .app-layout .personal-day-hero h2 { margin: 3px 0 4px; font-size: 1.45rem; line-height: 1.08; }
    .app-layout .personal-day-hero p { margin: 0; color: var(--km-muted); font-size: .86rem; line-height: 1.42; }
    .app-layout .personal-day-actions { display: flex; gap: 8px; }
    .app-layout .personal-day-actions > * { flex: 1 1 0; min-width: 0; text-align: center; }
    .app-layout .personal-day-warning { margin: 0; }
    .app-layout .personal-day-warning { order: 2 !important; }
    .app-layout .personal-jobs-panel { order: 3 !important; padding: 0 !important; overflow: hidden; }
    .app-layout .personal-jobs-panel .dashboard-today-header { padding: 14px 14px 10px; }
    .app-layout .personal-jobs-panel .dashboard-today-header .km-button { min-height: 36px !important; padding: 7px 10px !important; }
    .app-layout .personal-jobs-panel .dashboard-today-list { border-top: 1px solid var(--km-border); }
    .app-layout .personal-job-card {
        display: grid !important;
        grid-template-columns: 50px minmax(0, 1fr) auto 14px !important;
        gap: 9px !important;
        align-items: center;
        min-height: 67px;
        padding: 10px 13px !important;
    }
    .app-layout .personal-job-card .dashboard-today-status { font-size: .67rem; }
    .app-layout .personal-job-open { color: var(--km-green); font-size: 1.3rem; font-weight: 800; }
    .app-layout .personal-work-links {
        order: 4 !important;
        display: grid;
        gap: 8px;
    }
    .app-layout .personal-work-links > a {
        display: grid;
        grid-template-columns: 36px minmax(0, 1fr) 16px;
        align-items: center;
        gap: 10px;
        min-height: 58px;
        padding: 9px 12px;
        border: 1px solid var(--km-border);
        border-radius: 13px;
        background: var(--km-surface);
        color: var(--km-text);
        text-decoration: none;
        box-shadow: var(--km-shadow-soft);
    }
    .app-layout .personal-work-links > a > span {
        display: grid;
        place-items: center;
        width: 36px;
        height: 36px;
        border-radius: 10px;
        background: var(--km-green-soft);
        color: var(--km-green);
        font-size: 1.05rem;
    }
    .app-layout .personal-work-links strong,
    .app-layout .personal-work-links small { display: block; }
    .app-layout .personal-work-links strong { font-size: .85rem; }
    .app-layout .personal-work-links small { margin-top: 2px; color: var(--km-muted); font-size: .7rem; }
    .app-layout .personal-work-links b { color: var(--km-green); font-size: 1.15rem; }
    .app-layout .personal-history-panel { order: 5 !important; padding: 0 !important; overflow: hidden; }
}

@media (min-width: 621px) {
    .app-layout .personal-day-hero {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 24px;
        padding: 24px;
        border: 1px solid var(--km-border);
        border-radius: 16px;
        background: var(--km-surface);
        box-shadow: var(--km-shadow-soft);
    }
    .app-layout .personal-day-hero h2 { margin: 4px 0; }
    .app-layout .personal-day-hero p { margin: 0; color: var(--km-muted); }
    .app-layout .personal-day-actions { display: flex; gap: 10px; }
    .app-layout .personal-work-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
    .app-layout .personal-work-links > a { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 10px; padding: 14px; border: 1px solid var(--km-border); border-radius: 13px; background: var(--km-surface); color: var(--km-text); text-decoration: none; }
    .app-layout .personal-work-links strong, .app-layout .personal-work-links small { display: block; }
    .app-layout .personal-work-links small { color: var(--km-muted); }
}

.app-layout .job-mobile-commandbar { display: none; }
.app-layout .job-mobile-brief,
.app-layout .job-mobile-records-menu,
.app-layout .job-primary-action,
.app-layout .job-forms-banner { display: none; }
.app-layout .jobdetails-mobile-upload { cursor: pointer; }
.app-layout .jobdetails-mobile-upload strong { color: var(--km-green); }
.app-layout .jobdetails-row-actions {
    display: inline-block;
    min-width: 128px;
    max-width: 168px;
    min-height: 36px;
    padding: 6px 28px 6px 9px;
    border: 1px solid var(--km-border);
    border-radius: 9px;
    background: var(--km-surface-muted);
    color: var(--km-text);
    font: inherit;
    font-size: .74rem;
    font-weight: 700;
}
.app-layout .jobdetails-table .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.app-layout .mytime-entry-list { display: grid; }
.app-layout .mytime-entry-list article { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 18px; padding: 12px 14px; border-top: 1px solid var(--km-border); }
.app-layout .mytime-entry-list article:first-child { border-top: 0; }
.app-layout .mytime-entry-list article div span,
.app-layout .mytime-entry-list article div strong { display: block; }
.app-layout .mytime-entry-list article div span { color: var(--km-muted); font-size: .72rem; }
.app-layout .mytime-entry-list article div strong { margin-top: 2px; font-size: .84rem; }
.app-layout .mytime-timeoff-list { display: grid; }
.app-layout .mytime-timeoff-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 18px; padding: 12px 14px; border-top: 1px solid var(--km-border); }
.app-layout .mytime-timeoff-item:first-child { border-top: 0; }
.app-layout .mytime-timeoff-item div span,
.app-layout .mytime-timeoff-item div strong { display: block; }
.app-layout .mytime-timeoff-item div span { color: var(--km-muted); font-size: .72rem; }
.app-layout .mytime-timeoff-item div strong { margin-top: 2px; font-size: .84rem; }
.app-layout .mytime-timeoff-note { color: #b45309; font-weight: 600; }

@media (max-width: 620px) {
    .app-layout .jobdetails-page { gap: 16px !important; }
    .app-layout .jobdetails-page > div:first-child { display: none; }
    .app-layout .job-workspace-header { gap: 10px; }
    .app-layout .job-workspace-header h1 { font-size: 1.55rem !important; line-height: 1.08; }
    .app-layout .job-workspace-actions { display: none !important; }
    .app-layout .job-mobile-commandbar {
        position: sticky;
        top: 58px;
        z-index: 22;
        display: flex;
        gap: 5px;
        padding: 6px;
        overflow-x: auto;
        border: 1px solid var(--km-border);
        border-radius: 14px;
        background: color-mix(in srgb, var(--km-surface) 94%, transparent);
        box-shadow: 0 8px 22px rgba(20, 44, 36, .12);
        backdrop-filter: blur(12px);
        scrollbar-width: none;
    }
    .app-layout .job-mobile-brief {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        padding: 12px;
        border: 1px solid var(--km-border);
        border-radius: 13px;
        background: var(--km-surface);
        box-shadow: var(--km-shadow-soft);
    }
    .app-layout .job-mobile-brief div { min-width: 0; }
    .app-layout .job-mobile-brief span,
    .app-layout .job-mobile-brief strong { display: block; }
    .app-layout .job-mobile-brief span { color: var(--km-muted); font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
    .app-layout .job-mobile-brief strong { margin-top: 3px; font-size: .78rem; line-height: 1.35; }
    .app-layout .job-mobile-brief a { align-self: end; color: var(--km-green); font-size: .78rem; font-weight: 800; }
    .app-layout .job-mobile-brief-instructions { grid-column: 1 / -1; }
    .app-layout .job-mobile-brief-instructions strong { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
    .app-layout .job-mobile-brief-links { grid-column: 1 / -1; display: flex; gap: 16px; }
    .app-layout .job-primary-action { display: block; margin-top: 2px; }
    .app-layout .job-primary-action-btn {
        display: block;
        width: 100%;
        box-sizing: border-box;
        min-height: 52px;
        padding: 14px;
        border: 0;
        border-radius: 13px;
        background: var(--km-green);
        color: #fff;
        font: inherit;
        font-size: .92rem;
        font-weight: 800;
        text-align: center;
        text-decoration: none;
        cursor: pointer;
        box-shadow: 0 10px 24px rgba(20, 120, 90, .25);
    }
    .app-layout .job-primary-action-btn:disabled { opacity: .7; cursor: wait; }
    .app-layout .job-primary-action-active { background: #b45309; box-shadow: 0 10px 24px rgba(180, 83, 9, .25); }
    .app-layout .job-primary-action-status { padding: 12px; border-radius: 12px; background: var(--km-surface-muted); color: var(--km-muted); font-size: .82rem; text-align: center; }
    .app-layout .job-primary-action-secondary {
        display: block;
        width: 100%;
        box-sizing: border-box;
        margin-top: 8px;
        min-height: 42px;
        padding: 10px;
        border: 1px solid var(--km-border);
        border-radius: 11px;
        background: transparent;
        color: var(--km-text);
        font: inherit;
        font-size: .8rem;
        font-weight: 700;
        cursor: pointer;
    }
    .app-layout .job-forms-banner {
        display: flex;
        flex-direction: column;
        gap: 3px;
        margin-top: 2px;
        padding: 11px 13px;
        border: 1px solid #f0c674;
        border-radius: 12px;
        background: #fff8e9;
        color: #74521b;
        text-decoration: none;
    }
    .app-layout .job-forms-banner strong { font-size: .84rem; }
    .app-layout .job-forms-banner span { font-size: .72rem; opacity: .85; overflow-wrap: anywhere; }
    .app-layout .job-form-item { display: block; text-decoration: none; color: inherit; }
    .app-layout .job-form-status { margin-left: 8px; padding: 2px 7px; border-radius: 99px; font-size: .62rem; font-weight: 800; text-transform: uppercase; background: var(--km-surface-muted); color: var(--km-muted); }
    .app-layout .job-form-status-submitted,
    .app-layout .job-form-status-approved { background: var(--km-green-soft); color: var(--km-green); }
    .app-layout .jobdetails-row-actions {
        width: 100%;
        max-width: none;
        min-width: 0;
        box-sizing: border-box;
        min-height: 42px;
        padding: 7px 28px 7px 9px;
    }
    .app-layout .job-mobile-commandbar::-webkit-scrollbar { display: none; }
    .app-layout .job-mobile-commandbar > :is(a, button) {
        flex: 1 0 59px;
        display: grid;
        place-items: center;
        gap: 2px;
        min-width: 59px;
        min-height: 50px;
        padding: 5px 6px;
        border: 0;
        border-radius: 10px;
        background: transparent;
        color: var(--km-text);
        text-decoration: none;
        font: inherit;
    }
    .app-layout .job-mobile-commandbar > :is(a, button):first-child { background: var(--km-green); color: #fff; }
    .app-layout .job-mobile-commandbar > button.active { background: var(--km-green-soft); color: var(--km-green); }
    .app-layout .job-mobile-commandbar span { font-size: 1rem; line-height: 1; }
    .app-layout .job-mobile-commandbar small { font-size: .63rem; font-weight: 800; white-space: nowrap; }
    .app-layout .job-workspace-stats {
        display: flex !important;
        gap: 7px !important;
        overflow-x: auto;
        padding-bottom: 3px;
        scrollbar-width: none;
    }
    .app-layout .job-workspace-stats::-webkit-scrollbar { display: none; }
    .app-layout .job-workspace-stats > div { flex: 0 0 112px; min-height: 50px; padding: 7px 9px !important; }
    .app-layout .jobdetails-card,
    .app-layout .jobdetails-panel { padding: 13px !important; }
    .app-layout .jobdetails-details-grid { gap: 7px !important; }
    .app-layout .jobdetails-detail-card { min-height: 0 !important; padding: 9px !important; }
    .app-layout .jobdetails-parts-header { scroll-margin-top: 126px; padding-top: 3px; }
    .app-layout .jobdetails-parts-subtitle { display: none; }
    .app-layout .jobdetails-mobile-upload {
        display: grid;
        grid-template-columns: 36px minmax(0, 1fr);
        gap: 2px 10px;
        align-items: center;
        min-height: 58px;
        padding: 10px 12px;
        border: 1px dashed var(--km-green);
        border-radius: 12px;
        background: var(--km-green-soft);
    }
    .app-layout .jobdetails-mobile-upload::before {
        content: "＋";
        grid-row: 1 / 3;
        display: grid;
        place-items: center;
        width: 36px;
        height: 36px;
        border-radius: 10px;
        background: var(--km-green);
        color: #fff;
        font-size: 1.2rem;
        font-weight: 800;
    }
    .app-layout .jobdetails-mobile-upload input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
    .app-layout .jobdetails-mobile-upload span { font-size: .68rem; }
    .app-layout .jobdetails-table-wrap { border-radius: 10px; }
    .app-layout .job-mobile-records-menu {
        display: block;
        overflow: hidden;
        border: 1px solid var(--km-border);
        border-radius: 13px;
        background: var(--km-surface);
        box-shadow: var(--km-shadow-soft);
    }
    .app-layout .job-mobile-records-menu > summary {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 2px 8px;
        align-items: center;
        min-height: 56px;
        padding: 10px 13px;
        list-style: none;
        cursor: pointer;
    }
    .app-layout .job-mobile-records-menu > summary::-webkit-details-marker { display: none; }
    .app-layout .job-mobile-records-menu > summary span { font-weight: 800; }
    .app-layout .job-mobile-records-menu > summary small { grid-column: 1; color: var(--km-muted); font-size: .67rem; }
    .app-layout .job-mobile-records-menu > summary b { grid-column: 2; grid-row: 1 / 3; color: var(--km-green); font-size: 1.2rem; transition: transform .16s ease; }
    .app-layout .job-mobile-records-menu[open] > summary b { transform: rotate(90deg); }
    .app-layout .job-mobile-records-menu nav { display: flex; gap: 7px; padding: 0 10px 10px; overflow-x: auto; scrollbar-width: none; }
    .app-layout .job-mobile-records-menu nav::-webkit-scrollbar { display: none; }
    .app-layout .job-mobile-records-menu button { flex: 0 0 auto; min-height: 36px; padding: 7px 10px; border: 1px solid var(--km-border); border-radius: 9px; background: var(--km-surface-muted); color: var(--km-text); font: inherit; font-size: .72rem; font-weight: 750; }
    .app-layout .job-mobile-records-menu button.active { border-color: var(--km-green); background: var(--km-green-soft); color: var(--km-green); }
    .app-layout .job-mobile-secondary { display: none !important; }
    .app-layout .job-mobile-secondary.mobile-open { display: block !important; }
    .app-layout .jobdetails-bottom-actions { display: none !important; }

    .app-layout .mytime-page { gap: 14px !important; }
    .app-layout .mytime-page-header { margin-bottom: 0 !important; }
    .app-layout .mytime-title { font-size: 1.55rem !important; }
    .app-layout .mytime-subtitle { margin-top: 3px; font-size: .82rem; }
    .app-layout .mytime-account-info { display: none !important; }
    .app-layout .mytime-clock-panel { padding: 14px !important; }
    .app-layout .mytime-status-banner { margin: 8px 0 10px; padding: 10px 12px; }
    .app-layout .mytime-action-row { display: block !important; }
    .app-layout .mytime-action-row > button { width: 100%; min-height: 48px; }
    .app-layout .mytime-stats-grid {
        display: flex !important;
        gap: 8px !important;
    }
    .app-layout .page-content .mytime-stats-grid > .mytime-stat-card {
        flex: 1 1 0;
        box-sizing: border-box;
        height: 68px !important;
        min-height: 68px !important;
        padding: 8px 11px !important;
    }
    .app-layout .mytime-stat-value { font-size: 1.25rem !important; }
    .app-layout .mytime-stat-meta { font-size: .67rem !important; }
    .app-layout .mytime-entry-list article { grid-template-columns: minmax(0, 1fr) auto; gap: 8px; padding: 11px 13px; }
    .app-layout .mytime-entry-list article > div:nth-child(2) { display: none; }
    .app-layout .mytime-entry-list .mytime-badge { justify-self: end; white-space: nowrap; }
    .app-layout .mytime-timeoff-item { grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 11px 13px; }
    .app-layout .mytime-timeoff-item .mytime-badge { justify-self: start; white-space: nowrap; }
}

/* IT support: compact header tools and a dedicated, non-overlapping ticket action column. */
.app-layout .page-content .it-quick-menu > nav > button {
    display: grid !important;
    justify-content: stretch !important;
    gap: 2px !important;
    min-width: 0 !important;
    min-height: 52px !important;
    padding: 8px 10px !important;
    border: 1px solid transparent !important;
    border-radius: 8px !important;
    background-color: transparent !important;
    background-image: none !important;
    color: #15241f !important;
    text-align: left !important;
    box-shadow: none !important;
}

.app-layout .page-content .it-quick-menu > nav > button:hover {
    border-color: #cddbd5 !important;
    background-color: #eef5f2 !important;
    transform: none !important;
}

.app-layout .page-content .it-quick-menu > nav > button strong {
    color: #15241f !important;
    -webkit-text-fill-color: #15241f !important;
}

.app-layout .page-content .it-quick-menu > nav > button span {
    color: #62716c !important;
    -webkit-text-fill-color: #62716c !important;
}

html[data-theme="dark"] .app-layout .page-content .it-quick-menu > nav > button,
html[data-theme="dark"] .app-layout .page-content .it-quick-menu > nav > button strong {
    color: #edf3f0 !important;
    -webkit-text-fill-color: #edf3f0 !important;
}

html[data-theme="dark"] .app-layout .page-content .it-quick-menu > nav > button span {
    color: #9aa9a3 !important;
    -webkit-text-fill-color: #9aa9a3 !important;
}

html[data-theme="dark"] .app-layout .page-content .it-quick-menu > nav > button:hover {
    border-color: #3a4654 !important;
    background-color: #222b37 !important;
}

.app-layout .page-content .ticket-table .ticket-action-heading {
    text-align: center !important;
}

.app-layout .page-content .ticket-table .quick-ticket-close {
    position: static !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    justify-self: end !important;
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 9px !important;
    transform: none !important;
}

.app-layout .page-content .ticket-table .quick-ticket-close:hover {
    transform: none !important;
}

/* Reduce visual fatigue without weakening document and invoice print typography. */
.app-layout .page-content :is(h1, h2) { font-weight: 700 !important; }
.app-layout .page-content :is(h3, h4, h5, h6) { font-weight: 650 !important; }
.app-layout .page-content :is(button, summary, label, th) { font-weight: 600 !important; }
.app-layout .page-content :is(strong, b) { font-weight: 650 !important; }
.app-layout .page-content :is(.eyebrow, .km-eyebrow) { font-weight: 700 !important; }

.app-layout .page-content :is(.invoice-paper, .document-paper, .word-page) :is(h1, h2, h3, h4, h5, h6, strong, b, th) {
    font-weight: revert !important;
}

/* Labor report headings should read as full section bars, not small floating pills. */
/* Purchasing overlays must stay opaque against the shared dark theme rules. */
.app-layout .page-content .purchasing-page .purchase-backdrop { background: rgba(0,0,0,.65) !important; }
.app-layout .page-content .purchasing-page .purchase-dialog,
.app-layout .page-content .purchasing-page .purchase-dialog > header,
.app-layout .page-content .purchasing-page .purchase-dialog > footer { background: var(--km2-surface) !important; }
.app-layout .page-content .purchasing-page label { display: grid !important; grid-template-columns: minmax(0,1fr) !important; text-align: left !important; }
.app-layout .page-content .purchasing-page :is(input,select) { height: 44px !important; min-height: 44px !important; }
.app-layout .page-content .purchasing-page th,
.app-layout .page-content .purchasing-page td { text-align: left !important; }
.app-layout .page-content .purchasing-page button { white-space: nowrap !important; }
.app-layout .page-content .report-block-header .report-title {
    flex: 1 1 auto !important;
    justify-content: flex-start !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 58px !important;
    padding: 10px 14px !important;
    border-radius: 9px !important;
    background-color: var(--km2-surface-2) !important;
    background-image: none !important;
    text-align: left !important;
}

.app-layout .page-content .report-block-header .report-title > span {
    flex: 1 1 auto;
    justify-items: start;
    text-align: left !important;
}

.app-layout .page-content .report-block-header .report-block-actions {
    flex: 0 0 auto;
}

@media (max-width: 760px) {
    .app-layout .page-content .report-block-header {
        flex-wrap: wrap !important;
    }

    .app-layout .page-content .report-block-header .report-title,
    .app-layout .page-content .report-block-header .report-block-actions {
        width: 100% !important;
    }

    /* Invoice stages are choices, not dashboard cards. Keep the phone workflow
       compact enough to scan without pushing the worklist below the fold. */
    .app-layout .page-content .invoice-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 9px !important;
    }

    .app-layout .page-content .invoice-summary > * {
        min-height: 72px !important;
        padding: 10px 12px !important;
    }

    .app-layout .page-content .invoice-empty {
        display: grid !important;
        gap: 5px !important;
    }
}

/* Phone summaries are a quick, swipeable status strip. This intentionally sits
   after the shared summary-card rules so they cannot enlarge these two lists. */
@media (max-width: 760px) {
    .app-layout .users-stats-grid,
    .app-layout .page-content .document-stats {
        display: flex !important;
        grid-template-columns: none !important;
        gap: 8px !important;
        max-width: 100%;
        padding: 0 0 3px !important;
        overflow-x: auto;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
    }

    .app-layout .users-stats-grid::-webkit-scrollbar,
    .app-layout .page-content .document-stats::-webkit-scrollbar { display: none; }

    .app-layout .users-stats-grid > *,
    .app-layout .page-content .document-stats > * {
        flex: 0 0 126px !important;
        width: 126px !important;
        min-width: 126px !important;
        min-height: 68px !important;
        height: 68px !important;
        padding: 9px 11px !important;
        border-radius: 10px !important;
        scroll-snap-align: start;
    }
}

/* Program details' section switcher: a plain wrapping button row rather than
   a horizontally-scrolling tab strip, so it never overflows at phone widths. */
.job-mobile-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 4px 0 2px;
}
.job-mobile-tabs button {
    min-height: 42px;
    padding: 8px 14px;
    border: 1px solid var(--km-border);
    border-radius: 10px;
    background: var(--km-surface);
    color: var(--km-muted);
    font-weight: 800;
    font-size: .82rem;
    white-space: nowrap;
}
.job-mobile-tabs button.active {
    background: var(--km-active);
    color: var(--km-text);
    border-color: var(--km-accent);
}

/* One Options menu per assignment row (check-in/out, complete, cancel), kept
   as a native <details> so it needs no extra script and closes on its own
   when a button inside it is chosen and the page re-renders. */
.programs-row-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.programs-options-menu { position: relative; }
.programs-options-menu > summary {
    list-style: none;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 1px solid var(--km-border);
    border-radius: 10px;
    background: var(--km-surface);
    color: var(--km-text);
    cursor: pointer;
}
.programs-options-menu > summary::-webkit-details-marker { display: none; }
.programs-options-menu > div {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    z-index: 5;
    display: grid;
    gap: 2px;
    min-width: 190px;
    padding: 6px;
    border: 1px solid var(--km-border);
    border-radius: 12px;
    background: var(--km-surface);
    box-shadow: var(--km-shadow, 0 8px 24px rgba(0,0,0,.18));
}
.programs-options-menu > div button {
    min-height: 42px;
    padding: 8px 10px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--km-text);
    text-align: left;
    font-weight: 700;
    font-size: .86rem;
}
.programs-options-menu > div button:hover { background: var(--km-active); }

/* Compact aligned list rows shared by Programs & Volunteers, Program details,
   Scheduling, Properties and Property details. These pages render
   .record-list / .job-row / .priority markup that previously only had a
   real definition scoped inside CustomerDetails.razor.css -- Blazor CSS
   isolation means that scoped stylesheet never reached any other page, so
   every one of these rows fell back to unstyled, unaligned stacked text.
   This is the shared, theme-aware version every page can render against. */
.app-layout .page-content .record-list { display: grid; gap: 9px; }
.app-layout .page-content .job-row {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    border: 1px solid var(--km-border);
    border-radius: 12px;
    padding: 13px;
    text-decoration: none;
    color: var(--km-text);
    background: var(--km-surface);
}
.app-layout .page-content a.job-row:hover { border-color: var(--km-accent); }
.app-layout .page-content .job-row > .priority {
    flex: 0 0 5px;
    align-self: stretch;
    border-radius: 10px;
    background: var(--km-active);
}
.app-layout .page-content .job-row > div { flex: 1 1 auto; min-width: 0; display: grid; gap: 4px; }
.app-layout .page-content .job-row small { color: var(--km-muted); font-size: .78rem; }
.app-layout .page-content .job-row > b {
    flex: 0 0 auto;
    color: var(--km-muted);
    font-size: .78rem;
    font-weight: 800;
    white-space: nowrap;
}
.app-layout .page-content .job-row > .programs-row-actions,
.app-layout .page-content .job-row > .programs-options-menu,
.app-layout .page-content .job-row > .scheduling-options-menu,
.app-layout .page-content .job-row > details { flex: 0 0 auto; }

@media (max-width: 700px) {
    .app-layout .page-content .job-row { flex-wrap: wrap; padding: 11px; }
    .app-layout .page-content .job-row > .priority { flex-basis: 100%; height: 4px; align-self: auto; order: -1; }
    .app-layout .page-content .job-row > div { flex-basis: 100%; }
    .app-layout .page-content .job-row > b { order: 3; }
}

/* -------------------------------------------------------------------------
   Micro-interactions
   Small, consistent hover/press feedback for the handful of elements shared
   across nearly every page (buttons, record rows, module chips), so the app
   feels responsive to the pointer instead of static. Motion only - no color
   or meaning changes - and skipped entirely under reduced-motion.
   ------------------------------------------------------------------------- */
.km-button, .km-button-primary {
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .1s ease;
}
.km-button:hover { box-shadow: var(--km2-shadow-hover); }
.km-button-primary:hover {
    box-shadow: 0 4px 14px color-mix(in srgb, var(--km2-accent) 35%, transparent);
    transform: translateY(-1px);
}
.km-button:active, .km-button-primary:active { transform: translateY(0) scale(.97); box-shadow: none; }

.app-layout .page-content .job-row {
    transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.app-layout .page-content a.job-row:hover {
    transform: translateY(-1px);
    box-shadow: var(--km2-shadow-hover);
}

.module-chip { transition: border-color .15s ease, box-shadow .15s ease; }
.module-chip:hover { border-color: var(--km2-accent); box-shadow: var(--km2-shadow-hover); }

@media (prefers-reduced-motion: reduce) {
    .km-button, .km-button-primary, .app-layout .page-content .job-row, .module-chip {
        transition: none;
    }
    .km-button-primary:hover, .app-layout .page-content a.job-row:hover { transform: none; }
}

/* An empty-state message inside a table (<td colspan> ... ) must stay a plain full-width cell: the generic
   "-empty" card styling above would otherwise turn it into a narrow grid box that covers only part of the row. */
.app-layout .page-content table td:is(.empty, [class*="-empty"]) {
  display: table-cell;
  background: transparent !important;
  border-radius: 0;
  box-shadow: none;
}

/* -------------------------------------------------------------------------
   Non-manufacturing opening hierarchy
   Back navigation, title/actions, local tabs, status, summary, then work.
   Keep this final and explicitly outside .mfg-shell so Job Shop retains its
   purpose-built interface even though both products share base components.
   ------------------------------------------------------------------------- */
.app-layout:not(.mfg-shell) .page-content {
    --km-page-gap: 18px;
    position: relative;
}

.app-layout:not(.mfg-shell) .page-content > .global-back-button {
    position: absolute;
    top: 25px;
    left: 0;
    z-index: 6;
    display: grid;
    place-items: center;
    width: 28px;
    min-width: 28px;
    height: 36px;
    min-height: 36px;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden;
    border-radius: 10px !important;
    background: var(--km2-surface) !important;
    color: var(--km2-muted) !important;
    font-size: 0 !important;
    line-height: 1;
    box-shadow: none !important;
}

.app-layout:not(.mfg-shell) .page-content > .global-back-button::after {
    content: "\2190";
    font-size: 1rem !important;
    font-weight: 900;
}

.app-layout:not(.mfg-shell) .page-content > .global-back-button:hover,
.app-layout:not(.mfg-shell) .page-content > .global-back-button:focus-visible {
    border-color: var(--km2-accent) !important;
    background: color-mix(in srgb, var(--km2-accent) 8%, var(--km2-surface)) !important;
    color: var(--km2-accent) !important;
}

/* Keep Back in the page's left padding gutter. It must never depend on each
   page's header markup or sit on top of a title, hero, panel, or filter row. */
@media (max-width: 760px) {
    .app-layout:not(.mfg-shell) .page-content > .global-back-button:not(.desktop-only-back) {
        position: static;
        width: 38px;
        min-width: 38px;
        height: 38px;
        min-height: 38px;
        margin: 0 0 12px !important;
    }
}

.app-layout:not(.mfg-shell) .page-content > :is(
    .km-page,
    [class$="-page"], [class*="-page "],
    [class$="-workspace"], [class*="-workspace "]
) {
    gap: 18px !important;
}

.app-layout:not(.mfg-shell) .page-content > :is(
    .km-page, [class$="-page"], [class*="-page "],
    [class$="-workspace"], [class*="-workspace "]
) > :is(
    .dashboard-stats-grid, .customer-module-stats, .jobs-stats-grid,
    .inventory-stats-grid, .document-stats, .invoice-summary,
    .receivables-summary, .payables-summary, .banking-summary,
    .workspace-hub-metrics, .settings-plan-card
) > * {
    height: auto !important;
    min-height: 78px !important;
    padding: 13px 15px !important;
}

/* Standalone settings navigation follows the same compact segmented pattern
   as module page tabs and sits immediately below the Settings heading. */
.app-layout:not(.mfg-shell) .page-content .settings-nav-tabs {
    display: flex !important;
    align-items: center;
    flex-wrap: nowrap;
    gap: 5px !important;
    width: max-content;
    max-width: 100%;
    margin: 0 !important;
    padding: 4px !important;
    overflow-x: auto;
    border: 1px solid var(--km2-border) !important;
    border-radius: 12px;
    background: color-mix(in srgb, var(--km2-surface) 84%, var(--km2-panel));
}

.app-layout:not(.mfg-shell) .page-content .settings-nav-tabs button {
    flex: 0 0 auto;
    min-height: 36px;
    padding: 7px 13px !important;
    border: 1px solid transparent !important;
    border-radius: 8px !important;
}

.app-layout:not(.mfg-shell) .page-content .settings-nav-tabs button.active {
    border-color: color-mix(in srgb, var(--km2-accent) 55%, var(--km2-border)) !important;
    background: color-mix(in srgb, var(--km2-accent) 13%, var(--km2-surface)) !important;
    color: var(--km2-accent) !important;
    box-shadow: inset 0 -2px 0 var(--km2-accent) !important;
}

/* Titles and their page-level actions are one clear row. Lists and forms below
   can keep their own local toolbars without visually competing with this row. */
.app-layout:not(.mfg-shell) .page-content > :is(
    .km-page, [class$="-page"], [class*="-page "],
    [class$="-workspace"], [class*="-workspace "]
) > :is(
    .km-page-heading,
    [class$="-page-header"], [class*="-page-header "],
    .customers-page > header:first-child,
    .people-page > header:first-child,
    .documents-page > header:first-child
) {
    align-items: center !important;
    gap: 14px 24px !important;
}

.app-layout:not(.mfg-shell) .page-content > :is(
    .km-page, [class$="-page"], [class*="-page "],
    [class$="-workspace"], [class*="-workspace "]
) > :is(
    .km-page-heading,
    [class$="-page-header"], [class*="-page-header "],
    .customers-page > header:first-child,
    .people-page > header:first-child,
    .documents-page > header:first-child
) > :last-child:not(:first-child) {
    flex: 0 0 auto;
}

.app-layout:not(.mfg-shell) .page-content > :is(
    .km-page, [class$="-page"], [class*="-page "],
    [class$="-workspace"], [class*="-workspace "]
) > :is(
    .km-page-heading,
    [class$="-page-header"], [class*="-page-header "],
    .customers-page > header:first-child,
    .people-page > header:first-child,
    .documents-page > header:first-child
) :is(p, .dashboard-subtitle, .settings-subtitle, .jobs-subtitle, .inventory-subtitle, .assets-subtitle) {
    max-width: 760px;
    color: var(--km2-muted) !important;
}

@media (max-width: 900px) {
    .app-layout:not(.mfg-shell) .page-content > :is(
        .km-page, [class$="-page"], [class*="-page "],
        [class$="-workspace"], [class*="-workspace "]
    ) > :is(
        .km-page-heading,
        [class$="-page-header"], [class*="-page-header "],
        .customers-page > header:first-child,
        .people-page > header:first-child,
        .documents-page > header:first-child
    ) {
        align-items: stretch !important;
        padding-bottom: 14px !important;
    }

    .app-layout:not(.mfg-shell) .page-content :is(
        .customer-import-actions, .jobs-header-actions,
        .inventory-import-actions, .assets-action-row,
        .invoice-heading-actions, .workspace-hub-hero-actions,
        .dashboard-header-actions, .people-heading-actions,
        .documents-desktop-create
    ) {
        justify-content: flex-start !important;
    }

    .app-layout:not(.mfg-shell) .page-content .page-section-tabs,
    .app-layout:not(.mfg-shell) .page-content .settings-nav-tabs {
        width: 100%;
    }
}

@media (max-width: 560px) {
    .app-layout:not(.mfg-shell) .page-content { --km-page-gap: 14px; }

    .app-layout:not(.mfg-shell) .page-content > :is(
        .km-page,
        [class$="-page"], [class*="-page "],
        [class$="-workspace"], [class*="-workspace "]
    ) { gap: 14px !important; }

    .app-layout:not(.mfg-shell) .page-content .page-section-tabs > :is(button, a),
    .app-layout:not(.mfg-shell) .page-content .settings-nav-tabs button {
        min-height: 38px;
        padding-inline: 11px !important;
    }

    .app-layout:not(.mfg-shell) .page-content > :is(
        .km-page, [class$="-page"], [class*="-page "],
        [class$="-workspace"], [class*="-workspace "]
    ) > :is(
        .customer-module-stats, .jobs-stats-grid, .inventory-stats-grid,
        .document-stats, .invoice-summary, .receivables-summary,
        .payables-summary, .banking-summary, .workspace-hub-metrics,
        .settings-plan-card
    ) {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .app-layout:not(.mfg-shell) .workspace-hub-hero { padding: 17px !important; }
}

@media (max-width: 340px) {
    .app-layout:not(.mfg-shell) .page-content > :is(
        .km-page, [class$="-page"], [class*="-page "],
        [class$="-workspace"], [class*="-workspace "]
    ) > :is(
        .customer-module-stats, .jobs-stats-grid, .inventory-stats-grid,
        .document-stats, .invoice-summary, .receivables-summary,
        .payables-summary, .banking-summary, .workspace-hub-metrics,
        .settings-plan-card
    ) { grid-template-columns: 1fr !important; }
}

/* Dashboard and workspace hubs: put decisions before summaries and keep every
   destination in one predictable navigation area. Manufacturing has its own
   shell and is intentionally excluded from this pass. */
.app-layout:not(.mfg-shell) .dashboard-page > .dashboard-primary-grid {
    order: 3 !important;
}

.app-layout:not(.mfg-shell) .dashboard-page > .dashboard-stats-grid {
    order: 4 !important;
}

.app-layout:not(.mfg-shell) .dashboard-page-header > div:first-child > p {
    max-width: 720px;
    margin: 6px 0 0;
    color: var(--km2-muted);
    line-height: 1.5;
}

.app-layout:not(.mfg-shell) .dashboard-header-actions {
    align-self: flex-start;
}

.app-layout:not(.mfg-shell) .workspace-hub-hero {
    display: block !important;
    border-left: 4px solid var(--hub-accent) !important;
    background: var(--km-surface) !important;
}

.app-layout:not(.mfg-shell) .workspace-hub-hero > div:first-child {
    max-width: 850px;
}

.app-layout:not(.mfg-shell) .workspace-hub-hero p {
    max-width: 760px;
}

.app-layout:not(.mfg-shell) .workspace-hub-attention,
.app-layout:not(.mfg-shell) .workspace-hub-tools {
    min-width: 0;
}

.app-layout:not(.mfg-shell) .workspace-hub-attention {
    padding: 18px 20px;
    border: 1px solid var(--km-border);
    border-left: 4px solid #d99317;
    border-radius: 14px;
    background: var(--km-surface);
}

.app-layout:not(.mfg-shell) .workspace-hub-attention .workspace-hub-section-heading {
    margin-bottom: 12px !important;
}

.app-layout:not(.mfg-shell) .workspace-hub-attention .hub-attention {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    margin: 0;
}

.app-layout:not(.mfg-shell) .workspace-hub-attention .hub-attention a {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 12px;
    min-height: 64px;
    padding: 11px 13px;
}

.app-layout:not(.mfg-shell) .workspace-hub-attention .hub-attention a span {
    grid-column: 1;
}

.app-layout:not(.mfg-shell) .workspace-hub-attention .hub-attention a strong {
    grid-column: 1;
    color: var(--km-text);
    font-size: .85rem;
    line-height: 1.35;
}

.app-layout:not(.mfg-shell) .workspace-hub-attention .hub-attention a b {
    grid-column: 2;
    grid-row: 1 / 3;
    color: var(--hub-accent);
    font-size: 1.15rem;
}

.app-layout:not(.mfg-shell) .workspace-hub-tools {
    width: 100%;
}

.app-layout:not(.mfg-shell) .workspace-hub-tools .workspace-hub-links {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

@media (max-width: 1180px) {
    .app-layout:not(.mfg-shell) .workspace-hub-tools .workspace-hub-links {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 700px) {
    .app-layout:not(.mfg-shell) .workspace-hub-section-heading {
        align-items: flex-start !important;
        flex-direction: column !important;
        gap: 5px !important;
    }

    .app-layout:not(.mfg-shell) .workspace-hub-section-heading > p {
        max-width: none;
        text-align: left !important;
    }

    .app-layout:not(.mfg-shell) .workspace-hub-tools .workspace-hub-links,
    .app-layout:not(.mfg-shell) .workspace-hub-attention .hub-attention {
        grid-template-columns: 1fr !important;
    }
}

/* -------------------------------------------------------------------------
   Calm layout (2026-10-01)
   Chris: pages had a lot going on; the main content should own the middle
   of the screen and spacing should be steadier. This final layer, for every
   page (Job Shop included unless noted):
   - one content width: pages fill the screen up to 1680px, then centre,
     instead of some pages stopping at 1540px with their own inner padding;
   - one vertical rhythm: 24px between page blocks (18px on phones);
   - no small uppercase "eyebrow" labels above page and section titles;
   - flat panels: one border, no drop shadows or tinted gradients;
   - summary cards read label, number, note, left to right, top to bottom;
   - side columns on record pages are capped so the main column gets the room.
   ------------------------------------------------------------------------- */
.app-layout .page-content > :is(
    .km-page, [class$="-page"], [class*="-page "],
    [class$="-workspace"], [class*="-workspace "], .mfg-page
) {
    width: 100%;
    max-width: 1680px !important;
    margin-inline: auto !important;
    padding-inline: 0 !important;
}

.app-layout:not(.mfg-shell) .page-content > :is(
    .km-page, [class$="-page"], [class*="-page "],
    [class$="-workspace"], [class*="-workspace "]
) {
    gap: 24px !important;
    padding-top: 0 !important;
}

/* Record pages that used their own outer padding now share the page edge. */
.app-layout .page-content > .customer-workspace { padding: 0 !important; }

/* Eyebrows repeat the title or the menu the person just used. Status chips and
   modal headings are untouched (they do not use these classes). */
.app-layout .page-content :is(
    header, [class*="heading"], [class*="-header"], [class*="-hero"],
    .section-heading, .panel-header, .km-panel-head
) :is(.km-eyebrow, .eyebrow, p.eyebrow) {
    display: none !important;
}

/* Titles: one size, close to their one-line description. */
.app-layout:not(.mfg-shell) .page-content > :is(
    .km-page, [class$="-page"], [class*="-page "],
    [class$="-workspace"], [class*="-workspace "]
) > :first-child h1 {
    margin: 0 !important;
    font-size: clamp(1.55rem, 1.2rem + 0.9vw, 1.9rem) !important;
    line-height: 1.15 !important;
    letter-spacing: -0.02em;
}

.app-layout:not(.mfg-shell) .page-content > :is(
    .km-page, [class$="-page"], [class*="-page "],
    [class$="-workspace"], [class*="-workspace "]
) > :first-child h1 + p {
    margin: 6px 0 0 !important;
    font-size: .9rem !important;
    line-height: 1.45 !important;
}

/* Flat panels and cards: a single hairline border is enough structure. */
.app-layout .page-content :is(
    .km-panel, .panel, .mfg-panel, .stat-card, .dashboard-panel,
    [class$="-panel"], [class*="-panel "], [class$="-card"], [class*="-card "],
    .customer-module-stats > *, .jobs-stats-grid > *, .inventory-stats-grid > *,
    .invoice-summary > *, .receivables-summary > *, .payables-summary > *,
    .workspace-hub-metrics > *, .metrics > *, .stats > *
):not(button):not(a.km-button) {
    box-shadow: none !important;
    background-image: none !important;
}

/* Summary cards: label, then the number, then the note, all left-aligned. */
.app-layout .page-content .stat-card {
    display: grid !important;
    grid-template-areas: none !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-content: start;
    justify-items: start;
    gap: 4px;
    text-align: left !important;
}
.app-layout .page-content .stat-card > * { grid-area: auto !important; justify-self: start !important; text-align: left !important; }
.app-layout .page-content .stat-card .stat-label { order: 1; }
.app-layout .page-content .stat-card .stat-value { order: 2; margin: 0 !important; font-size: 1.45rem !important; }
.app-layout .page-content .stat-card .stat-meta { order: 3; }

/* Record pages with a side column: the side column stays a narrow companion. */
@media (min-width: 1100px) {
    .app-layout .page-content .customer-workspace .workspace-grid {
        grid-template-columns: minmax(0, 1fr) minmax(280px, 340px) !important;
    }
}

@media (max-width: 560px) {
    .app-layout:not(.mfg-shell) .page-content > :is(
        .km-page, [class$="-page"], [class*="-page "],
        [class$="-workspace"], [class*="-workspace "]
    ) { gap: 18px !important; }
}
/* Dashboard "Team time" and "Inventory activity": on desktop their summary row
   was hidden while the closed <details> kept its content hidden too, so both
   rendered as a 2px line. They are one-line expanders at every width. */
.app-layout .dashboard-page > .dashboard-secondary-panel { padding: 0 !important; overflow: hidden; }
.app-layout .dashboard-secondary-panel > summary {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto 24px;
    align-items: center;
    gap: 10px;
    min-height: 52px;
    padding: 12px 16px;
    cursor: pointer;
    list-style: none;
}
.app-layout .dashboard-secondary-panel > summary::-webkit-details-marker { display: none; }
.app-layout .dashboard-secondary-panel > summary span { font-weight: 800; }
.app-layout .dashboard-secondary-panel > summary small { color: var(--km-muted); font-size: .78rem; }
.app-layout .dashboard-secondary-panel > summary b { color: var(--km-green); font-size: 1.3rem; text-align: center; transition: transform .16s ease; }
.app-layout .dashboard-secondary-panel[open] > summary b { transform: rotate(90deg); }
.app-layout .dashboard-secondary-panel:not([open]) > :not(summary) { display: none !important; }
.app-layout .dashboard-secondary-panel[open] > summary { border-bottom: 1px solid var(--km-border); }
/* Record pages show the round Back button in the page's left gutter. The gutter
   (23px) was narrower than the button (28px), so it sat on top of titles such
   as an invoice number. Give those pages a gutter the button fits in, and drop
   the duplicate "Back to invoices" text link above the invoice number. */
@media (min-width: 761px) {
    .app-layout:not(.mfg-shell) .page-content:has(> .global-back-button) { padding-left: 44px !important; }
}
.app-layout:not(.mfg-shell) .page-content:has(> .global-back-button) .invoice-detail-heading > div > a[href="/invoices"] { display: none !important; }
/* Every summary band reads the same way: label and number on the left. */
.app-layout .page-content :is(
    .customer-module-stats, .jobs-stats-grid, .inventory-stats-grid, .document-stats,
    .invoice-summary, .receivables-summary, .payables-summary, .banking-summary,
    .workspace-hub-metrics, .settings-plan-card, .mytime-stats-grid, .assets-stats-grid
) > * {
    text-align: left !important;
    justify-items: start !important;
    align-items: start !important;
}
.app-layout .page-content :is(
    .customer-module-stats, .jobs-stats-grid, .inventory-stats-grid, .document-stats,
    .invoice-summary, .receivables-summary, .payables-summary, .banking-summary,
    .workspace-hub-metrics, .settings-plan-card, .mytime-stats-grid, .assets-stats-grid
) > * > * {
    text-align: left !important;
    justify-self: start !important;
    margin-inline: 0 !important;
}
/* Phones: summaries are a compact two-column strip so the actual records start
   on the first screen; the notes under each number are left for wider screens. */
@media (max-width: 560px) {
    .app-layout .page-content .customer-workspace .metrics {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }
    .app-layout .page-content :is(.customer-workspace .metrics, .customer-module-stats, .jobs-stats-grid,
        .inventory-stats-grid, .invoice-summary, .receivables-summary, .payables-summary, .expenses-summary) > * {
        min-height: 0 !important;
        padding: 10px 12px !important;
    }
    .app-layout .page-content :is(.customer-workspace .metrics, .customer-module-stats, .jobs-stats-grid,
        .inventory-stats-grid, .invoice-summary, .receivables-summary, .payables-summary, .expenses-summary) > * :is(small, p) {
        display: none !important;
    }
    .app-layout .page-content .customer-workspace .customer-mark { display: none !important; }
}
/* Phones: the dashboard numbers are the slim swipe strip they were designed as
   (the shared 78px summary minimum further up was overriding it). */
@media (max-width: 620px) {
    .app-layout:not(.mfg-shell) .page-content > .dashboard-page > .dashboard-stats-grid > .stat-card {
        height: 54px !important;
        min-height: 54px !important;
        padding: 7px 10px !important;
        gap: 2px;
    }
    .app-layout:not(.mfg-shell) .page-content > .dashboard-page > .dashboard-stats-grid > .stat-card .stat-value { font-size: 1.2rem !important; }
}

/* Row actions are now a main button plus a "More" menu, so the action columns can be narrow and the
   rows fit the panel at laptop widths instead of running past its edge. Below these widths the
   stacked card layouts in kolmadia.css take over. */
@media (min-width: 981px) {
    .payables-row { grid-template-columns: minmax(150px, 1.4fr) 100px minmax(80px, .8fr) 98px 98px 110px minmax(138px, .7fr); gap: 10px; }
    .recurring-expense-row { grid-template-columns: minmax(140px, 1.3fr) minmax(100px, 1fr) 88px 92px 104px 104px 84px minmax(140px, .8fr); gap: 10px; }
}
@media (min-width: 1051px) {
    .bank-transaction-row { grid-template-columns: 104px minmax(170px, 1.25fr) 112px 104px minmax(150px, 1fr) minmax(150px, .7fr); gap: 12px; }
}
@media (min-width: 761px) {
    .receivables-row { grid-template-columns: minmax(180px, 1.25fr) 116px 86px 118px 128px minmax(190px, .9fr); gap: 12px; }
    .receivables-row .receivables-actions, .payables-row .receivables-actions, .bank-transaction-row .receivables-actions { flex-wrap: nowrap; justify-content: flex-end; }
}

/* Purchasing: reorder suggestions grouped by vendor. */
.reorder-group-head { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--km-line, #dfe6e3); }
.reorder-group-head:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.reorder-group-head strong { font-size: 1rem; }

/* Budget plan grid: the page-wide input rule would stretch these to the cell and squash them to 26px. */
.app-layout .page-content table.grid input:not([type="checkbox"]):not([type="radio"]) { width: 84px !important; padding: 6px 8px !important; text-align: right; }