/* ===== Compact look ===== One lighter style for the overview pages and the parts they share: the page title, the tab row, the summary strip, panels and the buttons in a page's heading. Chris found the earlier cards "big and bulky", so everything here is smaller: a 24px title, underline tabs, one slim bordered strip instead of a wall of tall tiles, flat panels with 16px of padding. Loaded last of the shared sheets. The older rules are heavy (many are !important and some reach 5 classes), so every selector here starts with "#app .app-layout:not(.mfg-shell) .page-content": an id outranks any number of classes, which keeps these rules simple. ".mfg-shell" (Job Shop) is left alone on purpose. Names to avoid when adding markup that uses these classes: the shared sheets grab class names by their ending (-card, -panel, -head, -header, -actions, -meta, -row, -title, -label, -item, -list, -section, -tabs, -status, -value, -summary ...). The kit uses ov-strip, ov-cell, ov-k, ov-v for that reason. */ /* ---------- scale ---------- */ #app .app-layout:not(.mfg-shell) .page-content { --km-page-gap: 14px; --km-panel-pad: 16px; --km-radius-panel: 10px; } #app .app-layout:not(.mfg-shell) .page-content > :is(.km-page, [class$="-page"], [class*="-page "], [class$="-workspace"], [class*="-workspace "]) { gap: 14px !important; } /* ---------- page title and the line under it ---------- */ #app .app-layout:not(.mfg-shell) .page-content h1 { margin: 0 !important; font-size: 1.45rem !important; font-weight: 650 !important; line-height: 1.2 !important; letter-spacing: -.015em !important; } #app .app-layout:not(.mfg-shell) .page-content h1 + p { max-width: 100ch; margin: 3px 0 0 !important; color: var(--km2-muted) !important; font-size: .84rem !important; line-height: 1.45 !important; } #app .app-layout:not(.mfg-shell) .page-content :is(.km-page-heading, .it-header, .workspace-hub-hero, .overview-header, .jobs-page-header, [class$="-page-header"]) { display: flex !important; flex-wrap: wrap; align-items: center !important; justify-content: space-between !important; gap: 8px 16px !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; } #app .app-layout:not(.mfg-shell) .page-content :is(.km-page-heading, .it-header, .workspace-hub-hero, .overview-header, .jobs-page-header, [class$="-page-header"]) > div:first-child { min-width: 0; } @media (max-width: 900px) { #app .app-layout:not(.mfg-shell) .page-content :is(.km-page-heading, .it-header, .workspace-hub-hero, .overview-header, .jobs-page-header, [class$="-page-header"]) { align-items: stretch !important; } } #app .app-layout:not(.mfg-shell) .page-content .overview-header .overview-eyebrow, #app .app-layout:not(.mfg-shell) .page-content .workspace-hub-hero > div > span { display: none !important; } #app .app-layout:not(.mfg-shell) .page-content .workspace-hub-hero { padding-left: 12px !important; border-left: 3px solid var(--hub-accent, var(--km2-accent)) !important; } #app .app-layout:not(.mfg-shell) .page-content .workspace-hub-hero::after { display: none !important; } /* buttons in a page heading: smaller, no glow */ #app .app-layout:not(.mfg-shell) .page-content :is(.km-page-heading, .overview-header, .jobs-page-header, .workspace-hub-hero) :is(button, a.btn, a.km-button, a[class*="-btn"], .km-button) { min-height: 32px !important; padding: 4px 12px !important; border-radius: 8px !important; font-size: .8rem !important; box-shadow: none !important; transform: none !important; } /* ---------- tab row: text with an underline, not boxes ---------- */ #app .app-layout:not(.mfg-shell) .page-content :is(.page-section-tabs, .portfolio-tabs) { display: flex !important; flex-wrap: wrap !important; gap: 0 2px !important; width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; border: 0 !important; border-bottom: 1px solid var(--km2-border) !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } #app .app-layout:not(.mfg-shell) .page-content :is(.page-section-tabs, .portfolio-tabs) > :is(button, a) { flex: 0 0 auto !important; min-height: 34px !important; margin: 0 0 -1px !important; padding: 5px 12px !important; border: 0 !important; border-bottom: 2px solid transparent !important; border-radius: 0 !important; background: transparent !important; color: var(--km2-muted) !important; -webkit-text-fill-color: currentColor !important; font-size: .82rem !important; font-weight: 600 !important; line-height: 1.2 !important; text-decoration: none !important; box-shadow: none !important; transform: none !important; } #app .app-layout:not(.mfg-shell) .page-content :is(.page-section-tabs, .portfolio-tabs) > :is(button, a):hover { background: transparent !important; color: var(--km2-text) !important; } #app .app-layout:not(.mfg-shell) .page-content :is(.page-section-tabs, .portfolio-tabs) > :is(button, a).active, #app .app-layout:not(.mfg-shell) .page-content :is(.page-section-tabs, .portfolio-tabs) > [aria-selected="true"] { border-bottom-color: var(--km2-accent) !important; background: transparent !important; color: var(--km2-accent) !important; } /* ---------- summary strip: one slim bordered band, a thin line between the cells ---------- Cells are the direct children. By position: 1st child is the label, 2nd the value, 3rd on a short note. */ #app .app-layout:not(.mfg-shell) .page-content :is(.ov-strip, .workspace-hub-metrics, .overview-metrics, .jobs-stats-grid, .invoice-summary, .customer-module-stats, .receivables-summary, .document-stats, .inventory-stats-grid, .mfg-stats, .it-stats, .fundraising-summary, .team-summary, .client-it-metrics, .forms-metrics, .site-service-metrics, .recurring-stats, .quote-summary, .banking-summary, .payables-summary, .expenses-summary, .collection-stats, .prospect-stats, .time-off-summary, .leases-summary, .agreements-summary, .cases-summary, .memberships-summary, .grants-summary, .assets-summary, .maintenance-summary, .hr-summary, .financial-kpis, .stats) { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important; gap: 0 !important; align-items: stretch !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; border: 1px solid var(--km2-border) !important; border-radius: 10px !important; background: var(--km2-surface) !important; box-shadow: none !important; } #app .app-layout:not(.mfg-shell) .page-content :is(.ov-strip, .workspace-hub-metrics, .overview-metrics, .jobs-stats-grid, .invoice-summary, .customer-module-stats, .receivables-summary, .document-stats, .inventory-stats-grid, .mfg-stats, .it-stats, .fundraising-summary, .team-summary, .client-it-metrics, .forms-metrics, .site-service-metrics, .recurring-stats, .quote-summary, .banking-summary, .payables-summary, .expenses-summary, .collection-stats, .prospect-stats, .time-off-summary, .leases-summary, .agreements-summary, .cases-summary, .memberships-summary, .grants-summary, .assets-summary, .maintenance-summary, .hr-summary, .financial-kpis, .stats) > * { display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: center !important; gap: 1px !important; width: auto !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 9px 14px !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: -1px 0 0 0 var(--km2-border), 0 -1px 0 0 var(--km2-border) !important; color: var(--km2-text) !important; -webkit-text-fill-color: currentColor !important; text-align: left !important; text-decoration: none !important; font: inherit; line-height: 1.25 !important; transform: none !important; } #app .app-layout:not(.mfg-shell) .page-content :is(.ov-strip, .workspace-hub-metrics, .overview-metrics, .jobs-stats-grid, .invoice-summary, .customer-module-stats, .receivables-summary, .document-stats, .inventory-stats-grid, .mfg-stats, .it-stats, .fundraising-summary, .team-summary, .client-it-metrics, .forms-metrics, .site-service-metrics, .recurring-stats, .quote-summary, .banking-summary, .payables-summary, .expenses-summary, .collection-stats, .prospect-stats, .time-off-summary, .leases-summary, .agreements-summary, .cases-summary, .memberships-summary, .grants-summary, .assets-summary, .maintenance-summary, .hr-summary, .financial-kpis, .stats) > :is(a, button, [role="link"], [role="button"]) { cursor: pointer; } #app .app-layout:not(.mfg-shell) .page-content :is(.ov-strip, .workspace-hub-metrics, .overview-metrics, .jobs-stats-grid, .invoice-summary, .customer-module-stats, .receivables-summary, .document-stats, .inventory-stats-grid, .mfg-stats, .it-stats, .fundraising-summary, .team-summary, .client-it-metrics, .forms-metrics, .site-service-metrics, .recurring-stats, .quote-summary, .banking-summary, .payables-summary, .expenses-summary, .collection-stats, .prospect-stats, .time-off-summary, .leases-summary, .agreements-summary, .cases-summary, .memberships-summary, .grants-summary, .assets-summary, .maintenance-summary, .hr-summary, .financial-kpis, .stats) > :is(a, button, [role="link"], [role="button"]):hover { background: color-mix(in srgb, var(--km2-accent) 7%, var(--km2-surface)) !important; } #app .app-layout:not(.mfg-shell) .page-content :is(.ov-strip, .workspace-hub-metrics, .overview-metrics, .jobs-stats-grid, .invoice-summary, .customer-module-stats, .receivables-summary, .document-stats, .inventory-stats-grid, .mfg-stats, .it-stats, .fundraising-summary, .team-summary, .client-it-metrics, .forms-metrics, .site-service-metrics, .recurring-stats, .quote-summary, .banking-summary, .payables-summary, .expenses-summary, .collection-stats, .prospect-stats, .time-off-summary, .leases-summary, .agreements-summary, .cases-summary, .memberships-summary, .grants-summary, .assets-summary, .maintenance-summary, .hr-summary, .financial-kpis, .stats) > :is(a, button, [role="link"], [role="button"]):focus-visible { outline: 2px solid var(--km2-accent) !important; outline-offset: -2px !important; } /* a chosen filter cell (Jobs and Invoices use it as a filter) */ #app .app-layout:not(.mfg-shell) .page-content :is(.ov-strip, .workspace-hub-metrics, .overview-metrics, .jobs-stats-grid, .invoice-summary, .customer-module-stats, .receivables-summary, .document-stats, .inventory-stats-grid, .mfg-stats, .it-stats, .fundraising-summary, .team-summary, .client-it-metrics, .forms-metrics, .site-service-metrics, .recurring-stats, .quote-summary, .banking-summary, .payables-summary, .expenses-summary, .collection-stats, .prospect-stats, .time-off-summary, .leases-summary, .agreements-summary, .cases-summary, .memberships-summary, .grants-summary, .assets-summary, .maintenance-summary, .hr-summary, .financial-kpis, .stats) > :is(.active, .selected, [aria-pressed="true"]) { background: color-mix(in srgb, var(--km2-accent) 11%, var(--km2-surface)) !important; } /* label, value, note */ #app .app-layout:not(.mfg-shell) .page-content :is(.ov-strip, .workspace-hub-metrics, .overview-metrics, .jobs-stats-grid, .invoice-summary, .customer-module-stats, .receivables-summary, .document-stats, .inventory-stats-grid, .mfg-stats, .it-stats, .fundraising-summary, .team-summary, .client-it-metrics, .forms-metrics, .site-service-metrics, .recurring-stats, .quote-summary, .banking-summary, .payables-summary, .expenses-summary, .collection-stats, .prospect-stats, .time-off-summary, .leases-summary, .agreements-summary, .cases-summary, .memberships-summary, .grants-summary, .assets-summary, .maintenance-summary, .hr-summary, .financial-kpis, .stats) > * > :nth-child(1) { margin: 0 !important; padding: 0 !important; color: var(--km2-muted) !important; -webkit-text-fill-color: currentColor !important; font-size: .72rem !important; font-weight: 600 !important; letter-spacing: .01em !important; line-height: 1.3 !important; text-transform: none !important; text-align: left !important; } #app .app-layout:not(.mfg-shell) .page-content :is(.ov-strip, .workspace-hub-metrics, .overview-metrics, .jobs-stats-grid, .invoice-summary, .customer-module-stats, .receivables-summary, .document-stats, .inventory-stats-grid, .mfg-stats, .it-stats, .fundraising-summary, .team-summary, .client-it-metrics, .forms-metrics, .site-service-metrics, .recurring-stats, .quote-summary, .banking-summary, .payables-summary, .expenses-summary, .collection-stats, .prospect-stats, .time-off-summary, .leases-summary, .agreements-summary, .cases-summary, .memberships-summary, .grants-summary, .assets-summary, .maintenance-summary, .hr-summary, .financial-kpis, .stats) > * > :nth-child(2) { margin: 0 !important; padding: 0 !important; overflow: hidden; color: var(--km2-text) !important; -webkit-text-fill-color: currentColor !important; font-size: 1.2rem !important; font-weight: 650 !important; line-height: 1.2 !important; letter-spacing: 0 !important; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; text-align: left !important; } #app .app-layout:not(.mfg-shell) .page-content :is(.ov-strip, .workspace-hub-metrics, .overview-metrics, .jobs-stats-grid, .invoice-summary, .customer-module-stats, .receivables-summary, .document-stats, .inventory-stats-grid, .mfg-stats, .it-stats, .fundraising-summary, .team-summary, .client-it-metrics, .forms-metrics, .site-service-metrics, .recurring-stats, .quote-summary, .banking-summary, .payables-summary, .expenses-summary, .collection-stats, .prospect-stats, .time-off-summary, .leases-summary, .agreements-summary, .cases-summary, .memberships-summary, .grants-summary, .assets-summary, .maintenance-summary, .hr-summary, .financial-kpis, .stats) > * > :nth-child(n+3) { max-width: 100%; margin: 0 !important; padding: 0 !important; overflow: hidden; color: var(--km2-muted) !important; -webkit-text-fill-color: currentColor !important; font-size: .68rem !important; font-weight: 500 !important; line-height: 1.3 !important; text-overflow: ellipsis; white-space: nowrap; text-align: left !important; } /* the notes under the hub and dashboard numbers only repeat the label, so those two bands show label and number only (the full wording is the tooltip) */ #app .app-layout:not(.mfg-shell) .page-content :is(.workspace-hub-metrics, .overview-metrics) > * > :nth-child(n+3) { display: none !important; } /* text values (not numbers) are a touch smaller */ #app .app-layout:not(.mfg-shell) .page-content .ov-strip > * > .ov-v.is-text { font-size: .95rem !important; line-height: 1.45 !important; } /* tone: a number that needs a look */ #app .app-layout:not(.mfg-shell) .page-content .ov-strip > .is-warn > :nth-child(2), #app .app-layout:not(.mfg-shell) .page-content :is(.workspace-hub-metrics > a.warning, .mfg-stat.warn) > :nth-child(2) { color: var(--km2-warning) !important; } #app .app-layout:not(.mfg-shell) .page-content .ov-strip > .is-bad > :nth-child(2), #app .app-layout:not(.mfg-shell) .page-content .mfg-stat.bad > :nth-child(2) { color: var(--km2-danger) !important; } /* many cells: even rows instead of a lonely last row */ @media (min-width: 901px) { #app .app-layout:not(.mfg-shell) .page-content :is(.mfg-stats, .ov-strip, .it-stats):has(> :nth-child(7)) { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } #app .app-layout:not(.mfg-shell) .page-content :is(.mfg-stats, .ov-strip, .it-stats):has(> :nth-child(9)) { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; } #app .app-layout:not(.mfg-shell) .page-content :is(.mfg-stats, .ov-strip, .it-stats):has(> :nth-child(11)) { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; } } @media (max-width: 560px) { #app .app-layout:not(.mfg-shell) .page-content :is(.ov-strip, .workspace-hub-metrics, .overview-metrics, .jobs-stats-grid, .invoice-summary, .customer-module-stats, .receivables-summary, .document-stats, .inventory-stats-grid, .mfg-stats, .it-stats, .fundraising-summary, .team-summary, .client-it-metrics, .forms-metrics, .site-service-metrics, .recurring-stats, .quote-summary, .banking-summary, .payables-summary, .expenses-summary, .collection-stats, .prospect-stats, .time-off-summary, .leases-summary, .agreements-summary, .cases-summary, .memberships-summary, .grants-summary, .assets-summary, .maintenance-summary, .hr-summary, .financial-kpis, .stats) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } #app .app-layout:not(.mfg-shell) .page-content :is(.ov-strip, .workspace-hub-metrics, .overview-metrics, .jobs-stats-grid, .invoice-summary, .customer-module-stats, .receivables-summary, .document-stats, .inventory-stats-grid, .mfg-stats, .it-stats, .fundraising-summary, .team-summary, .client-it-metrics, .forms-metrics, .site-service-metrics, .recurring-stats, .quote-summary, .banking-summary, .payables-summary, .expenses-summary, .collection-stats, .prospect-stats, .time-off-summary, .leases-summary, .agreements-summary, .cases-summary, .memberships-summary, .grants-summary, .assets-summary, .maintenance-summary, .hr-summary, .financial-kpis, .stats) > :last-child:nth-child(odd) { grid-column: 1 / -1; } #app .app-layout:not(.mfg-shell) .page-content h1 { font-size: 1.3rem !important; } } /* ---------- the "ov" kit: the summary strip and button used by the IT overview (more pages can use them) ---------- */ #app .app-layout:not(.mfg-shell) .page-content .ov { display: grid; gap: 14px; min-width: 0; } #app .app-layout:not(.mfg-shell) .page-content .ov-cell { font-family: inherit; } #app .app-layout:not(.mfg-shell) .page-content .ov-none { padding: 18px 14px; color: var(--km2-muted); font-size: .86rem; } /* ---------- workspace hubs: Accounting, Work, Customers, Resources, Team, Manage ---------- */ #app .app-layout:not(.mfg-shell) .page-content .workspace-hub { gap: 14px !important; } #app .app-layout:not(.mfg-shell) .page-content .workspace-hub-section-heading { display: flex !important; flex-wrap: wrap; align-items: baseline !important; justify-content: space-between; gap: 2px 16px; margin: 0 0 8px !important; padding: 0 !important; } #app .app-layout:not(.mfg-shell) .page-content .workspace-hub-section-heading h2 { margin: 0 !important; font-size: .95rem !important; font-weight: 650 !important; line-height: 1.3 !important; } #app .app-layout:not(.mfg-shell) .page-content .workspace-hub-section-heading > p { max-width: 62ch !important; margin: 0 !important; color: var(--km2-muted) !important; font-size: .76rem !important; line-height: 1.4 !important; text-align: right !important; } /* what needs attention: a thin amber-edged band with one line per item */ #app .app-layout:not(.mfg-shell) .page-content .workspace-hub-attention { padding: 10px 14px !important; border: 1px solid var(--km2-border) !important; border-left: 3px solid var(--km2-warning) !important; border-radius: 10px !important; background: var(--km2-surface) !important; box-shadow: none !important; } #app .app-layout:not(.mfg-shell) .page-content .workspace-hub-attention .workspace-hub-section-heading { margin: 0 0 6px !important; } #app .app-layout:not(.mfg-shell) .page-content .workspace-hub-attention .hub-attention { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important; gap: 6px !important; margin: 0 !important; } #app .app-layout:not(.mfg-shell) .page-content .workspace-hub-attention .hub-attention a { display: grid !important; grid-template-columns: 96px minmax(0, 1fr) auto !important; align-items: center !important; column-gap: 10px !important; min-height: 34px !important; padding: 5px 10px !important; border: 0 !important; border-left: 3px solid var(--hub-accent, var(--km2-accent)) !important; border-radius: 6px !important; background: var(--km2-surface-2) !important; box-shadow: none !important; transform: none !important; } #app .app-layout:not(.mfg-shell) .page-content .workspace-hub-attention .hub-attention a.warning { border-left-color: var(--km2-warning) !important; } #app .app-layout:not(.mfg-shell) .page-content .workspace-hub-attention .hub-attention a.urgent { border-left-color: var(--km2-danger) !important; } #app .app-layout:not(.mfg-shell) .page-content .workspace-hub-attention .hub-attention a span { grid-column: auto !important; color: var(--km2-muted) !important; -webkit-text-fill-color: currentColor !important; font-size: .68rem !important; font-weight: 700 !important; letter-spacing: .02em; text-transform: uppercase; } #app .app-layout:not(.mfg-shell) .page-content .workspace-hub-attention .hub-attention a strong { grid-column: auto !important; color: var(--km2-text) !important; font-size: .82rem !important; font-weight: 600 !important; line-height: 1.3 !important; } #app .app-layout:not(.mfg-shell) .page-content .workspace-hub-attention .hub-attention a b { grid-column: auto !important; grid-row: auto !important; color: var(--km2-accent) !important; font-size: 1rem !important; } /* the places to go: short tiles */ #app .app-layout:not(.mfg-shell) .page-content .workspace-hub-tools .workspace-hub-links { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)) !important; gap: 8px !important; } #app .app-layout:not(.mfg-shell) .page-content .workspace-hub-links > a { display: grid !important; grid-template-columns: 32px minmax(0, 1fr) auto auto !important; align-items: center !important; gap: 10px !important; min-height: 0 !important; padding: 9px 12px !important; border: 1px solid var(--km2-border) !important; border-radius: 10px !important; background: var(--km2-surface) !important; box-shadow: none !important; transform: none !important; } #app .app-layout:not(.mfg-shell) .page-content .workspace-hub-links > a.accent { border-left: 3px solid var(--hub-accent, var(--km2-accent)) !important; } #app .app-layout:not(.mfg-shell) .page-content .workspace-hub-links > a:hover { border-color: color-mix(in srgb, var(--hub-accent, var(--km2-accent)) 60%, var(--km2-border)) !important; background: color-mix(in srgb, var(--hub-accent, var(--km2-accent)) 5%, var(--km2-surface)) !important; } #app .app-layout:not(.mfg-shell) .page-content .hub-link-icon { width: 32px !important; height: 32px !important; border-radius: 8px !important; font-size: .95rem !important; } #app .app-layout:not(.mfg-shell) .page-content .workspace-hub-links a > div strong { margin: 0 0 1px !important; font-size: .86rem !important; font-weight: 650 !important; line-height: 1.3 !important; } #app .app-layout:not(.mfg-shell) .page-content .workspace-hub-links a > div p { margin: 0 !important; color: var(--km2-muted) !important; font-size: .74rem !important; line-height: 1.35 !important; } #app .app-layout:not(.mfg-shell) .page-content .workspace-hub-links a > b { font-size: 1.05rem !important; } /* Accounting's three small charts */ #app .app-layout:not(.mfg-shell) .page-content .accounting-visual-grid { gap: 10px !important; } #app .app-layout:not(.mfg-shell) .page-content .accounting-visual-grid > article { padding: 12px 14px !important; } #app .app-layout:not(.mfg-shell) .page-content .accounting-visual-grid header h2 { margin: 0 !important; font-size: .95rem !important; font-weight: 650 !important; } #app .app-layout:not(.mfg-shell) .page-content .accounting-bars { height: 140px !important; padding-top: 8px !important; } #app .app-layout:not(.mfg-shell) .page-content .profit-ring { width: 104px !important; height: 104px !important; margin: 8px 0 !important; } #app .app-layout:not(.mfg-shell) .page-content .profit-ring::after { inset: 11px !important; } #app .app-layout:not(.mfg-shell) .page-content .profit-ring strong { font-size: 1.2rem !important; } #app .app-layout:not(.mfg-shell) .page-content .cash-flow-line { margin-top: 10px !important; } #app .app-layout:not(.mfg-shell) .page-content .cash-net { margin: 12px 0 10px !important; padding: 8px 10px !important; } /* ---------- the workspace overview (Dashboard) and Today ---------- */ #app .app-layout:not(.mfg-shell) .page-content .overview-page { gap: 14px !important; } #app .app-layout:not(.mfg-shell) .page-content .overview-date { padding-top: 8px !important; font-size: .76rem !important; } #app .app-layout:not(.mfg-shell) .page-content .overview-main-grid { gap: 14px !important; } #app .app-layout:not(.mfg-shell) .page-content .overview-panel { padding: 12px 16px !important; border-radius: 10px !important; box-shadow: none !important; } #app .app-layout:not(.mfg-shell) .page-content .overview-section-heading { margin-bottom: 8px !important; } #app .app-layout:not(.mfg-shell) .page-content .overview-section-heading .overview-eyebrow { display: none !important; } #app .app-layout:not(.mfg-shell) .page-content .overview-section-heading h2 { margin-top: 0 !important; font-size: .95rem !important; font-weight: 650 !important; } #app .app-layout:not(.mfg-shell) .page-content .overview-count { min-width: 22px !important; min-height: 22px !important; font-size: .72rem !important; border-radius: 6px !important; } #app .app-layout:not(.mfg-shell) .page-content .overview-caption { font-size: .72rem !important; } #app .app-layout:not(.mfg-shell) .page-content :is(.overview-queue-tabs, .overview-activity-tabs) { gap: 4px !important; margin-bottom: 8px !important; } #app .app-layout:not(.mfg-shell) .page-content :is(.overview-queue-tabs, .overview-activity-tabs) button { min-height: 28px !important; padding: 3px 10px !important; border-radius: 8px !important; font-size: .74rem !important; box-shadow: none !important; } #app .app-layout:not(.mfg-shell) .page-content .overview-priority { grid-template-columns: 38px minmax(0, 1fr) auto !important; gap: 10px !important; padding: 8px 0 !important; } #app .app-layout:not(.mfg-shell) .page-content .overview-priority-number { min-height: 30px !important; font-size: .9rem !important; } #app .app-layout:not(.mfg-shell) .page-content .overview-priority > div { gap: 2px !important; } #app .app-layout:not(.mfg-shell) .page-content .overview-priority strong { font-size: .84rem !important; } #app .app-layout:not(.mfg-shell) .page-content .overview-priority small { font-size: .74rem !important; line-height: 1.35 !important; } #app .app-layout:not(.mfg-shell) .page-content .overview-team-total { gap: 3px !important; margin-bottom: 8px !important; } #app .app-layout:not(.mfg-shell) .page-content .overview-team-total > strong { font-size: 1.5rem !important; } #app .app-layout:not(.mfg-shell) .page-content :is(.overview-team-list > a, .overview-team-links > a) { padding: 8px 0 !important; gap: 2px !important; } #app .app-layout:not(.mfg-shell) .page-content .overview-team-links { margin-top: 10px !important; } #app .app-layout:not(.mfg-shell) .page-content :is(.overview-activity-list > a, .overview-module-list > a) { padding: 9px 0 !important; } #app .app-layout:not(.mfg-shell) .page-content .overview-footer { padding-top: 4px !important; } #app .app-layout:not(.mfg-shell) .page-content .today-page .today-grid { gap: 10px !important; margin-top: 0 !important; } #app .app-layout:not(.mfg-shell) .page-content .today-page .today-card { padding: 10px 14px !important; border-radius: 10px !important; } #app .app-layout:not(.mfg-shell) .page-content .today-page .today-card h2 { font-size: .92rem !important; font-weight: 650 !important; } #app .app-layout:not(.mfg-shell) .page-content .today-page .today-card li a { padding: 5px 8px !important; } #app .app-layout:not(.mfg-shell) .page-content .overview-activity-heading { padding: 4px 0 8px !important; font-size: .84rem !important; } #app .app-layout:not(.mfg-shell) .page-content :is(.overview-activity-list, .overview-module-list) > a > div { gap: 2px !important; } #app .app-layout:not(.mfg-shell) .page-content :is(.overview-activity-list, .overview-module-list) > a strong { font-size: .86rem !important; line-height: 1.3 !important; } #app .app-layout:not(.mfg-shell) .page-content :is(.overview-activity-list, .overview-module-list) > a small { font-size: .76rem !important; line-height: 1.3 !important; } #app .app-layout:not(.mfg-shell) .page-content .overview-activity-list > a { gap: 14px !important; } /* ---------- panels, record lists and the filter row above them ---------- */ #app .app-layout:not(.mfg-shell) .page-content :is(.km-panel, .panel) > :is(.section-heading, .panel-header, .km-panel-head) :is(h2, h3) { margin: 0 !important; font-size: .95rem !important; font-weight: 650 !important; line-height: 1.3 !important; } #app .app-layout:not(.mfg-shell) .page-content :is(.km-panel, .panel) > :is(.section-heading, .panel-header, .km-panel-head) p { margin: 1px 0 0 !important; color: var(--km2-muted) !important; font-size: .76rem !important; line-height: 1.4 !important; } #app .app-layout:not(.mfg-shell) .page-content .record-list { gap: 6px !important; } #app .app-layout:not(.mfg-shell) .page-content .job-row { gap: 10px !important; padding: 8px 12px !important; border-radius: 8px !important; box-shadow: none !important; } #app .app-layout:not(.mfg-shell) .page-content a.job-row:hover { transform: none !important; box-shadow: none !important; } #app .app-layout:not(.mfg-shell) .page-content .job-row > div { gap: 1px !important; } #app .app-layout:not(.mfg-shell) .page-content .job-row strong { font-size: .88rem !important; } #app .app-layout:not(.mfg-shell) .page-content .job-row small { font-size: .74rem !important; } #app .app-layout:not(.mfg-shell) .page-content .property-list-tools { gap: 8px !important; margin: 10px 0 !important; } #app .app-layout:not(.mfg-shell) .page-content .km-panel:has(> .section-heading) > :is(.record-list, .property-list-tools) { padding-left: 14px !important; padding-right: 14px !important; } #app .app-layout:not(.mfg-shell) .page-content .km-panel:has(> .section-heading) > .record-list { padding-bottom: 14px !important; } #app .app-layout:not(.mfg-shell) .page-content .km-panel:has(> .section-heading) > .empty { padding: 14px 16px !important; } #app .app-layout:not(.mfg-shell) .page-content .property-list-tools > input[type="search"] { flex: 1 1 260px; width: auto !important; height: 34px !important; min-height: 34px !important; } #app .app-layout:not(.mfg-shell) .page-content .property-list-tools > select { flex: 0 0 auto; width: auto !important; height: 34px !important; min-height: 34px !important; } #app .app-layout:not(.mfg-shell) .page-content .mfg-toolbar > :is(input, select) { height: 34px !important; min-height: 34px !important; padding: 4px 10px !important; font-size: .84rem !important; } #app .app-layout:not(.mfg-shell) .page-content .mfg-toolbar > .km-button { min-height: 32px !important; padding: 4px 12px !important; border-radius: 8px !important; font-size: .8rem !important; } /* ---------- list pages: the band above a list (title and filters), and flat panels ---------- */ #app .app-layout:not(.mfg-shell) .page-content :is(.km-panel, .panel, .jobs-panel, .overview-panel, [class$="-panel"]):not(.invoice-paper):not(.document-paper):not(.word-page) { box-shadow: none !important; } #app .app-layout:not(.mfg-shell) .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: 0 !important; padding: 10px 14px !important; gap: 8px 14px !important; } #app .app-layout:not(.mfg-shell) .page-content :is(.customer-accounts-workspace, .employee-directory-workspace, .invoice-worklist, .receivables-workspace) > :is(.toolbar, .section-heading, .invoice-toolbar, .receivables-toolbar) :is(h2, h3) { margin: 0 !important; font-size: .95rem !important; font-weight: 650 !important; line-height: 1.3 !important; } #app .app-layout:not(.mfg-shell) .page-content :is(.customer-accounts-workspace, .employee-directory-workspace, .invoice-worklist, .receivables-workspace) > :is(.toolbar, .section-heading, .invoice-toolbar, .receivables-toolbar) p { margin: 1px 0 0 !important; color: var(--km2-muted) !important; font-size: .76rem !important; line-height: 1.4 !important; } #app .app-layout:not(.mfg-shell) .page-content :is(.customer-accounts-workspace, .employee-directory-workspace, .invoice-worklist, .receivables-workspace) > :is(.toolbar, .section-heading, .invoice-toolbar, .receivables-toolbar) :is(input, select) { height: 34px !important; min-height: 34px !important; padding: 4px 10px !important; font-size: .84rem !important; } /* Jobs */ #app .app-layout:not(.mfg-shell) .page-content .jobs-panel { padding: 12px 14px !important; } #app .app-layout:not(.mfg-shell) .page-content .jobs-panel-header { min-height: 0 !important; margin: 0 !important; padding: 0 !important; } #app .app-layout:not(.mfg-shell) .page-content .jobs-panel-header-action { align-items: center !important; gap: 8px 14px !important; margin: 0 0 10px !important; } #app .app-layout:not(.mfg-shell) .page-content .jobs-list-heading { gap: 6px !important; } #app .app-layout:not(.mfg-shell) .page-content .jobs-page .jobs-filters-row :is(input, select, button) { height: 34px !important; min-height: 34px !important; padding-top: 4px !important; padding-bottom: 4px !important; font-size: .84rem !important; } #app .app-layout:not(.mfg-shell) .page-content .jobs-view-tabs { padding: 2px !important; } #app .app-layout:not(.mfg-shell) .page-content .jobs-view-tabs button { min-height: 28px !important; padding: 3px 12px !important; font-size: .78rem !important; } #app .app-layout:not(.mfg-shell) .page-content .jobs-empty-state { padding: 22px 14px !important; } /* ---------- helper pages (the Insights lists): the same short tiles as the hubs ---------- */ #app .app-layout:not(.mfg-shell) .page-content .insights-page .insights-group { margin: 0 0 14px !important; } #app .app-layout:not(.mfg-shell) .page-content .insights-page .insights-group h2 { margin: 0 0 8px !important; font-size: .95rem !important; font-weight: 650 !important; line-height: 1.3 !important; } #app .app-layout:not(.mfg-shell) .page-content .insights-page .insights-links { margin: 0 !important; } #app .app-layout:not(.mfg-shell) .page-content .insights-page .insights-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)) !important; gap: 8px !important; } #app .app-layout:not(.mfg-shell) .page-content .insights-page .insight-card { gap: 10px !important; min-height: 0 !important; padding: 9px 12px !important; border-radius: 10px !important; box-shadow: none !important; } #app .app-layout:not(.mfg-shell) .page-content .insights-page .insight-icon { width: 32px !important; height: 32px !important; border-radius: 8px !important; font-size: .95rem; } #app .app-layout:not(.mfg-shell) .page-content .insights-page .insight-body { gap: 1px !important; } #app .app-layout:not(.mfg-shell) .page-content .insights-page .insight-body strong { font-size: .86rem !important; line-height: 1.3 !important; } #app .app-layout:not(.mfg-shell) .page-content .insights-page .insight-body span { font-size: .74rem !important; line-height: 1.35 !important; } #app .app-layout:not(.mfg-shell) .page-content .insights-page .insight-count { min-width: 1.4rem; padding: 0 .45rem; font-size: .72rem; } /* a number that is good, bad or needs a look, for the pages that mark it with a class */ #app .app-layout:not(.mfg-shell) .page-content :is(.ov-strip, .workspace-hub-metrics, .overview-metrics, .jobs-stats-grid, .invoice-summary, .customer-module-stats, .receivables-summary, .document-stats, .inventory-stats-grid, .mfg-stats, .it-stats, .fundraising-summary, .team-summary, .client-it-metrics, .forms-metrics, .site-service-metrics, .recurring-stats, .quote-summary, .banking-summary, .payables-summary, .expenses-summary, .collection-stats, .prospect-stats, .time-off-summary, .leases-summary, .agreements-summary, .cases-summary, .memberships-summary, .grants-summary, .assets-summary, .maintenance-summary, .hr-summary, .financial-kpis, .stats) > * > :is(.positive, .good) { color: var(--km2-accent) !important; } #app .app-layout:not(.mfg-shell) .page-content :is(.ov-strip, .workspace-hub-metrics, .overview-metrics, .jobs-stats-grid, .invoice-summary, .customer-module-stats, .receivables-summary, .document-stats, .inventory-stats-grid, .mfg-stats, .it-stats, .fundraising-summary, .team-summary, .client-it-metrics, .forms-metrics, .site-service-metrics, .recurring-stats, .quote-summary, .banking-summary, .payables-summary, .expenses-summary, .collection-stats, .prospect-stats, .time-off-summary, .leases-summary, .agreements-summary, .cases-summary, .memberships-summary, .grants-summary, .assets-summary, .maintenance-summary, .hr-summary, .financial-kpis, .stats) > * > :is(.negative, .bad) { color: var(--km2-danger) !important; } #app .app-layout:not(.mfg-shell) .page-content :is(.ov-strip, .workspace-hub-metrics, .overview-metrics, .jobs-stats-grid, .invoice-summary, .customer-module-stats, .receivables-summary, .document-stats, .inventory-stats-grid, .mfg-stats, .it-stats, .fundraising-summary, .team-summary, .client-it-metrics, .forms-metrics, .site-service-metrics, .recurring-stats, .quote-summary, .banking-summary, .payables-summary, .expenses-summary, .collection-stats, .prospect-stats, .time-off-summary, .leases-summary, .agreements-summary, .cases-summary, .memberships-summary, .grants-summary, .assets-summary, .maintenance-summary, .hr-summary, .financial-kpis, .stats) > :is(.attention, .warning, .warn) > :nth-child(2) { color: var(--km2-warning) !important; } #app .app-layout:not(.mfg-shell) .page-content :is(.ov-strip, .workspace-hub-metrics, .overview-metrics, .jobs-stats-grid, .invoice-summary, .customer-module-stats, .receivables-summary, .document-stats, .inventory-stats-grid, .mfg-stats, .it-stats, .fundraising-summary, .team-summary, .client-it-metrics, .forms-metrics, .site-service-metrics, .recurring-stats, .quote-summary, .banking-summary, .payables-summary, .expenses-summary, .collection-stats, .prospect-stats, .time-off-summary, .leases-summary, .agreements-summary, .cases-summary, .memberships-summary, .grants-summary, .assets-summary, .maintenance-summary, .hr-summary, .financial-kpis, .stats) > :is(.urgent, .overdue) > :nth-child(2) { color: var(--km2-danger) !important; }