/* Kolmadia workspace design system
   Loaded last so legacy module-specific styles share one consistent scale. */

:root {
    --ui-space-1: 4px;
    --ui-space-2: 8px;
    --ui-space-3: 12px;
    --ui-space-4: 16px;
    --ui-space-5: 20px;
    --ui-radius: 10px;
    --ui-radius-lg: 13px;
    --ui-border: #dce4df;
    --ui-surface: #ffffff;
    --ui-surface-soft: #f6f8f6;
    --ui-text: #142720;
    --ui-muted: #66766f;
    --ui-green: #116b50;
    --ui-shadow: 0 5px 18px rgba(19, 47, 37, .045);
}

/* Page rhythm and typography */
.app-layout .page-content {
    color: var(--ui-text);
    font-size: 15px;
    padding: 20px clamp(15px, 2vw, 28px) 40px !important;
}

.app-layout.density-compact .page-content {
    padding: 16px clamp(13px, 1.7vw, 23px) 32px !important;
}

.app-layout .page-content > :is(div, section)[class*="-page"] {
    gap: var(--ui-space-4);
}

/* The shell owns page padding. Older pages must not add a second wide gutter. */
.app-layout .page-content > :is(div, section)[class*="-page"] {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
}

.app-layout .page-content :is(.km-page-heading, [class*="-page-header"], .people-page > header,
    .customers-page > header, .billing-page > header, .documents-page > header) {
    gap: var(--ui-space-4);
    margin-bottom: var(--ui-space-4);
}

.app-layout .page-content :is(.km-page-heading, [class*="-page-header"], .people-page > header,
    .customers-page > header, .billing-page > header, .documents-page > header) h1,
.app-layout .page-content h1.dashboard-title {
    margin: 0;
    font-size: clamp(1.75rem, 2.3vw, 2.15rem);
    line-height: 1.08;
    letter-spacing: -.035em;
}

.app-layout .page-content h2 { font-size: clamp(1.25rem, 1.7vw, 1.55rem); }
.app-layout .page-content h3 { font-size: 1.05rem; }
.app-layout .page-content :is(h1, h2, h3) { color: var(--ui-text); }
.app-layout .page-content :is(.km-eyebrow, .eyebrow, [class*="-eyebrow"]) {
    font-size: .68rem;
    letter-spacing: .12em;
}

.app-layout .page-content :is(.dashboard-subtitle, [class*="-subtitle"], .panel-subtext,
    [class*="-page-header"] p, .people-page > header p, .customers-page > header p) {
    margin-top: var(--ui-space-1);
    font-size: .88rem;
    line-height: 1.4;
}

.app-layout .page-content :is(.dashboard-subtitle, [class*="-subtitle"], .panel-subtext,
    [class*="-page-header"] p, .people-page > header p, .customers-page > header p,
    .documents-header p, .equipment-header p) {
    color: var(--ui-muted);
    max-width: 720px;
}

/* One panel language instead of oversized module-specific cards */
.app-layout .page-content :is(.panel, .dashboard-panel, [class$="-panel"]) {
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-lg);
    box-shadow: var(--ui-shadow);
}

.app-layout.density-compact .page-content :is(.panel, .dashboard-panel, [class$="-panel"]) {
    padding: var(--ui-space-4);
}

.app-layout .page-content :is(.panel, .dashboard-panel, [class$="-panel"]) {
    margin-bottom: var(--ui-space-4);
}

.app-layout .page-content :is(.panel-header, [class*="-panel-header"], .section-heading, .panel-title, .toolbar) {
    gap: var(--ui-space-3);
    margin-bottom: var(--ui-space-3);
}

.app-layout .page-content :is(.panel-header, [class*="-panel-header"], .section-heading, .panel-title, .toolbar) h2,
.app-layout .page-content :is(.panel-header, [class*="-panel-header"], .section-heading, .panel-title, .toolbar) h3 {
    margin: 0;
}

/* Consistent compact controls */
.app-layout .page-content :is(button, .km-button, a.primary, a.secondary,
    [class*="-primary-btn"], [class*="-secondary-btn"], [class*="-toggle-btn"], [class*="-inline-btn"]) {
    min-height: 36px;
    border-radius: 9px;
    padding: 7px 12px;
    font-size: .88rem;
    line-height: 1.2;
}

.app-layout .page-content :is(button, .km-button, a.primary, a.secondary,
    [class*="-primary-btn"], [class*="-secondary-btn"], [class*="-toggle-btn"], [class*="-inline-btn"]) {
    width: auto;
}

.app-layout .page-content :is(.actions, .km-actions, [class*="-actions"]) {
    gap: var(--ui-space-2);
}

.app-layout .page-content :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
    border-color: #ccd8d1;
    border-radius: 9px;
    font-size: .92rem;
}

.app-layout .page-content :is(input:not([type="checkbox"]):not([type="radio"]), select) {
    min-height: 39px;
    padding: 7px 11px;
}

.app-layout .page-content textarea { padding: 9px 11px; }
.app-layout .page-content :is(.form-grid, .filters) { gap: var(--ui-space-3); }
.app-layout .page-content label > span { margin-bottom: 5px; font-size: .82rem; }

.app-layout .page-content :is(.form-grid, [class*="-form-grid"]) {
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    margin-top: var(--ui-space-3);
}

.app-layout .page-content :is(.filters, [class*="-filters-grid"], [class*="-filters-row"], .document-filters) {
    align-items: center;
    gap: var(--ui-space-2);
}

.app-layout .page-content :is([class*="-filters-grid"], .document-filters) {
    grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
}

.app-layout .page-content :is(.filters, [class*="-filters-row"]) {
    flex-wrap: wrap;
}

.app-layout .page-content :is(.filters, [class*="-filters-row"]) > :is(input, select) {
    min-width: 150px;
    flex: 1 1 170px;
}

/* Dense summaries reflow around whichever modules are visible. */
.app-layout .page-content :is(.dashboard-stats-grid, [class$="-stats-grid"]) {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--ui-space-3);
}

.app-layout .page-content :is(.stats, .document-stats, .myprofile-stats) {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--ui-space-3);
    margin-bottom: var(--ui-space-4);
}

.app-layout .page-content :is(.stats article, .document-stats article, .document-stats button, .myprofile-stat) {
    min-height: 0;
    padding: 13px 15px;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
    background: var(--ui-surface);
    box-shadow: 0 3px 13px rgba(19, 47, 37, .035);
}

.app-layout .page-content :is(.stats strong, .document-stats strong, .myprofile-stat strong) {
    font-size: 1.45rem;
    line-height: 1.05;
}

.app-layout .page-content :is(.stat-card, [class$="-stat-card"]) {
    min-height: 0;
    padding: 14px 16px;
    border-radius: var(--ui-radius);
    box-shadow: 0 3px 13px rgba(19, 47, 37, .035);
}

.app-layout .page-content :is(.stat-label, [class$="-stat-label"]) {
    margin: 0 0 6px;
    font-size: .67rem;
    letter-spacing: .075em;
}

.app-layout .page-content :is(.stat-value, [class$="-stat-value"]) {
    margin: 0 0 4px;
    font-size: clamp(1.45rem, 2vw, 1.8rem);
    line-height: 1;
}

.app-layout .page-content :is(.stat-meta, [class$="-stat-meta"]) {
    font-size: .76rem;
    line-height: 1.3;
}

/* Tables/lists are the default for information-heavy areas. */
.app-layout .page-content :is(.table-wrap, [class*="table-wrap"], [class*="-table"]) {
    scrollbar-width: thin;
}

.app-layout .page-content table th,
.app-layout .page-content table td {
    padding: 9px 10px;
    font-size: .84rem;
    vertical-align: middle;
}

.app-layout .page-content table th {
    font-size: .7rem;
    letter-spacing: .055em;
    text-transform: uppercase;
}

.app-layout .page-content :is(.empty, [class*="-empty"]) {
    min-height: 0;
    padding: 18px;
    border-radius: 9px;
    background: var(--ui-surface-soft);
    color: var(--ui-muted);
}

.app-layout .page-content :is(.row-actions, [class*="-table-actions"], .doc-actions, .invoice-actions) {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 5px;
}

.app-layout .page-content :is(.row-actions, [class*="-table-actions"], .doc-actions, .invoice-actions) :is(button, a) {
    min-height: 32px;
    padding: 5px 9px;
    font-size: .76rem;
    white-space: nowrap;
}

/* Shared dense page headers and toolbars. */
.app-layout .page-content :is(.people-page > header, .customers-page > header, .documents-header,
    .equipment-header, [class*="-page-header"]) {
    align-items: center;
}

.app-layout .page-content :is(.people-page > header, .customers-page > header, .documents-header,
    .equipment-header) h1 {
    margin: 0;
    font-size: clamp(1.75rem, 2.3vw, 2.15rem);
    line-height: 1.08;
    letter-spacing: -.035em;
}

.app-layout .page-content :is(.toolbar, [class*="-panel-header-action"], [class*="-list-header"],
    [class*="-workspace-actions"], .customer-import-actions, .header-actions) {
    align-items: center;
    gap: var(--ui-space-2);
}

/* Keep data records as rows, not oversized tiles. */
.app-layout .people-list article {
    min-height: 62px;
    padding: 8px 11px;
    column-gap: 12px;
}

.app-layout .people-list .avatar { width: 36px; height: 36px; border-radius: 9px; }
.app-layout :is(.job-list article, .invoice-list article, .record-list > *, .history-row, .timeline > *) {
    min-height: 46px;
    padding-top: 8px;
    padding-bottom: 8px;
}

.app-layout .difference {
    gap: 10px;
    margin-bottom: 13px;
    padding: 10px 13px;
    border-radius: 10px;
}

/* Dashboard: compact command view, not a wall of cards. */
.app-layout .dashboard-page { gap: 16px; }
.app-layout .dashboard-page > * { order: 7; }
.app-layout .dashboard-page > .dashboard-page-header { order: 0; }
.app-layout .dashboard-page > .dashboard-setup-callout { order: 1; }
.app-layout .dashboard-page > .dashboard-alert-strip { order: 2; }
.app-layout .dashboard-page > .dashboard-stats-grid { order: 3; }
.app-layout .dashboard-page > .dashboard-today-panel { order: 4; }
.app-layout .dashboard-page > .dashboard-work-queue { order: 5; }
.app-layout .dashboard-page > .dashboard-main-grid { order: 6; }
.app-layout .dashboard-page > .dashboard-reminders { order: 8; }
.app-layout .dashboard-page > .setup-modal-backdrop { order: 100; }
.app-layout .dashboard-page-header { margin-bottom: 0; }
.app-layout .dashboard-page-header .km-actions { justify-content: flex-end; }

.app-layout .dashboard-setup-callout {
    min-height: 42px;
    padding: 7px 11px;
    border-radius: 9px;
}

.app-layout .dashboard-alert-strip {
    grid-template-columns: 125px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
}

.app-layout .dashboard-alert-strip-title {
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.app-layout .dashboard-alert-list { gap: 7px; }
.app-layout .dashboard-alert-item {
    min-width: 210px;
    padding: 9px 11px;
    border-radius: 9px;
    box-shadow: none;
}

.app-layout .dashboard-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
}

.app-layout .dashboard-attention-card { grid-column: span 2; display: grid; grid-template-columns: 105px minmax(0,1fr); gap: 12px; align-items: center; border-left: 4px solid #d99317; }
.app-layout .dashboard-attention-items { display: grid; gap: 4px; }
.app-layout .dashboard-attention-items a { display: flex; justify-content: space-between; gap: 10px; color: var(--km-ink); text-decoration: none; font-size: .76rem; }
.app-layout .dashboard-attention-items a span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-layout .dashboard-attention-items a strong { color: var(--km-green-dark); white-space: nowrap; }

.app-layout .stat-card {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "label value" "meta value";
    column-gap: 12px;
    align-items: center;
    text-align: left;
}

.app-layout .stat-label { grid-area: label; align-self: end; }
.app-layout .stat-value { grid-area: value; font-size: 1.7rem; }
.app-layout .stat-meta { grid-area: meta; align-self: start; }
.app-layout .stat-card-button:hover { transform: translateY(-1px); }

.app-layout .dashboard-main-grid {
    grid-template-columns: minmax(0, 1.65fr) minmax(250px, .7fr);
    gap: var(--ui-space-3);
}

.app-layout .dashboard-work-queue { margin-bottom: 0; }
.app-layout .dashboard-work-queue-header { padding: 14px 16px 11px; }
.app-layout .dashboard-work-queue-columns { padding: 7px 16px; }
.app-layout .dashboard-work-queue-row { min-height: 50px; padding: 8px 16px; }
.app-layout .quick-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.app-layout .quick-action-btn { padding: 8px 10px; border-radius: 8px; }

.app-layout .dashboard-today-panel { margin-bottom: 0; }
.app-layout .dashboard-today-panel .dashboard-today-header { padding: 12px 16px; }
.app-layout .dashboard-today-columns { padding: 6px 16px; }
.app-layout .dashboard-today-job { min-height: 44px; padding: 7px 16px; }
.app-layout .dashboard-reminders { padding: 12px 14px; border-radius: 10px; }

/* High-use workspaces */
.app-layout .page-content :is(.inventory-panel, .jobs-panel, .jobcalendar-panel, .assets-panel,
    .equipment-panel, .users-panel, .timemgmt-panel, .mytime-panel, .settings-panel,
    .reports-panel, .departments-panel, .locations-panel, .invcat-panel) {
    padding: 15px 16px;
    border-radius: var(--ui-radius-lg);
}

.app-layout .page-content :is(.inventory-stats-grid, .jobs-stats-grid, .jobcalendar-stats-grid,
    .assets-stats-grid, .users-stats-grid, .timemgmt-stats-grid, .mytime-stats-grid,
    .departments-stats-grid, .locations-stats-grid) {
    margin-bottom: 0;
}

.app-layout .page-content :is(.inventory-stat-card, .jobs-stat-card, .jobcalendar-stat-card,
    .assets-stat-card, .users-stat-card, .timemgmt-stat-card, .mytime-stat-card,
    .departments-stat-card, .locations-stat-card) {
    min-height: 0;
    padding: 13px 15px;
}

.app-layout .page-content :is(.inventory-stat-value, .jobs-stat-value, .jobcalendar-stat-value,
    .assets-stat-value, .users-stat-value, .timemgmt-stat-value, .mytime-stat-value,
    .departments-stat-value, .locations-stat-value) {
    font-size: 1.55rem;
}

/* Customer and employee identity heroes should summarize, not dominate. */
.app-layout .page-content :is(.customer-hero, .myprofile-hero) {
    min-height: 0;
    padding: 16px 18px;
    border-radius: 13px;
}

.app-layout .myprofile-avatar,
.app-layout .customer-mark { width: 58px; height: 58px; border-radius: 13px; }
.app-layout .myprofile-identity h1,
.app-layout .customer-hero h1 { font-size: clamp(1.65rem, 2.2vw, 2rem); }
.app-layout .page-content .myprofile-hero .myprofile-identity h1 { color: #fff !important; }
.app-layout .myprofile-stats { margin-bottom: 0; }
.app-layout .myprofile-stat { padding: 11px 13px; }
.app-layout .myprofile-dashboard-grid { gap: 12px; }

/* Documents, settings, subscription, and reports stay information-dense. */
.app-layout .documents-page .tabs { margin-bottom: 13px; }
.app-layout .documents-page .tabs button { min-height: 38px; padding: 8px 12px; }
.app-layout .documents-page .document-stats { margin-bottom: 13px; }
.app-layout .documents-page .document-stats button { padding: 11px 13px; }
.app-layout .documents-page .document-toolbar { gap: 9px; }
.app-layout .documents-page .document-filters :is(input, select) { height: 37px; }
.app-layout .subscription-plan-grid { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 11px; }
.app-layout .subscription-plan-option { gap: 8px; padding: 14px; border-radius: 11px; }
.app-layout .report-toolbar { gap: 10px; padding: 10px 12px; }
.app-layout .report-export-actions { gap: 7px; }

.app-layout .report-hub-grid {
    grid-template-columns: repeat(auto-fit, minmax(235px, 1fr));
    gap: 11px;
}

.app-layout .report-hub-card {
    min-height: 0;
    padding: 15px 16px;
    border-radius: 11px;
    box-shadow: var(--ui-shadow);
}

.app-layout .report-hub-card p { margin: 6px 0 12px; font-size: .83rem; line-height: 1.4; }
.app-layout .report-hub-card b { margin-top: auto; font-size: .8rem; }

/* Equipment explanation is a compact legend, not another card grid. */
.app-layout .equipment-page .explainer {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    overflow: hidden;
    border: 1px solid var(--ui-border);
    border-radius: 10px;
    background: #fff;
}

.app-layout .equipment-page .explainer article {
    gap: 3px;
    padding: 11px 13px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.app-layout .equipment-page .explainer article + article { border-left: 1px solid var(--ui-border); }
.app-layout .equipment-page .explainer span { font-size: .78rem; line-height: 1.35; }
.app-layout .equipment-page .toolbar input { min-width: min(280px, 100%); }

/* Setup libraries use compact rows. */
.app-layout .category-page > .panel,
.app-layout .billing-page > .panel { padding: 15px 16px; border-radius: 12px; }
.app-layout .category-list { gap: 8px; }
.app-layout .category-group { border-radius: 10px; }
.app-layout .category-row { min-height: 44px; padding: 8px 11px; }
.app-layout .category-row.child { padding-left: 28px; }
.app-layout .billing-page .workflow { gap: 9px; margin-bottom: 13px; }
.app-layout .billing-page .workflow article { gap: 9px; padding: 11px 12px; border-radius: 10px; }

/* Help remains scannable without consuming a wide permanent column. */
.app-layout .helpguide-layout { grid-template-columns: 190px minmax(0, 1fr); gap: 14px; }
.app-layout .helpguide-sidebar { padding: 11px; border-radius: 10px; }
.app-layout .helpguide-sidebar button { min-height: 32px; padding: 6px 8px; }
.app-layout .helpguide-block { border-radius: 11px; }
.app-layout .helpguide-setup-row { min-height: 50px; padding: 9px 11px; }

/* Jobs are a dense working list, not a dashboard of oversized cards. */
.app-layout .jobs-page { gap: 13px; }
.app-layout .jobs-page-header { align-items: flex-end; }
.app-layout .jobs-header-actions { display: flex; gap: 7px; }
.app-layout .jobs-stats-grid { grid-template-columns: repeat(4, minmax(115px, 1fr)); gap: 9px; }
.app-layout .jobs-stat-card { box-shadow: none; border-radius: 10px; }
.app-layout .jobs-stat-label { margin-bottom: 4px; font-size: .7rem; }
.app-layout .jobs-stat-value { line-height: 1; }
.app-layout .jobs-panel-header { margin-bottom: 9px; }
.app-layout .jobs-panel-header h3 { font-size: 1rem; }
.app-layout .jobs-panel-header-action { display: grid; align-items: stretch; gap: 12px; }
.app-layout .jobs-filters-row { align-items: center; gap: 7px; }
.app-layout .jobs-list-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.app-layout .jobs-list-heading .jobs-panel-header { margin: 0; }
.app-layout .jobs-list-heading .jobs-panel-header p { margin: 2px 0 0; color: #6b7a75; font-size: .78rem; }
.app-layout .jobs-add-button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; padding: 7px 12px; background: #17785d; border-color: #17785d; color: #fff; white-space: nowrap; }
.app-layout .jobs-add-button span { font-size: 1rem; line-height: 1; }
.app-layout .jobs-view-tabs {
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    border: 1px solid var(--ui-border);
    border-radius: 9px;
    background: var(--ui-soft);
}
.app-layout .jobs-view-tabs button {
    min-height: 30px;
    padding: 5px 9px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--ui-muted);
    font-size: .72rem;
    font-weight: 700;
    cursor: pointer;
}
.app-layout .jobs-view-tabs button.active { background: #fff; color: var(--ui-green); box-shadow: 0 1px 4px rgba(10, 45, 35, .1); }
.app-layout .jobs-search-input { width: min(230px, 100%); }
.app-layout .jobs-filter-select { width: auto; min-width: 126px; }
.app-layout .jobs-archive-toggle { white-space: nowrap; font-size: .78rem; }
.app-layout .jobs-form-grid { gap: 10px 12px; }
.app-layout .jobs-label { margin-bottom: 4px; font-size: .74rem; }
.app-layout .jobs-textarea { min-height: 72px; }
.app-layout .jobs-field-help { margin: 0 0 6px; font-size: .74rem; }
.app-layout .jobs-field-link { display: inline-block; margin-top: 5px; color: var(--ui-green); font-size: .72rem; }
.app-layout .jobs-assignee-picker { gap: 5px; padding: 7px; }
.app-layout .jobs-assignee-picker label { min-height: 31px; padding: 5px 8px; }
.app-layout .jobs-optional-fields { padding: 8px 10px; border: 1px solid var(--ui-border); border-radius: 9px; background: #fff; }
.app-layout .jobs-optional-fields summary { cursor: pointer; color: var(--ui-green); font-size: .8rem; font-weight: 700; }
.app-layout .jobs-optional-fields[open] summary { margin-bottom: 10px; }
.app-layout .jobs-action-row { margin-top: 11px; }
.app-layout .jobs-table th,
.app-layout .jobs-table td { padding: 8px 9px; font-size: .78rem; vertical-align: middle; }
.app-layout .jobs-table-actions { flex-wrap: nowrap; }
.app-layout .jobs-inline-btn { min-height: 30px; padding: 5px 8px; font-size: .72rem; }
.app-layout .jobs-badge { padding: 3px 7px; font-size: .69rem; }
.app-layout .jobs-primary-btn:disabled,
.app-layout .jobs-secondary-btn:disabled { cursor: wait; opacity: .65; }

/* Customer accounts adapt to the workspace instead of reserving empty billing/job space. */
.app-layout .customers-page .stats,
.app-layout .customer-workspace .metrics {
    grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
    gap: 9px;
    margin-bottom: 14px;
}
.app-layout .customers-page .stats article,
.app-layout .customer-workspace .metrics article {
    padding: 12px 13px;
    gap: 4px;
    border-radius: 10px;
}
.app-layout .customers-page .stats strong,
.app-layout .customer-workspace .metrics strong { font-size: 1.22rem; }
.app-layout .customers-page .panel,
.app-layout .customer-workspace .panel { padding: 15px 16px; margin-bottom: 12px; border-radius: 11px; }
.app-layout .customers-page :is(.primary, .secondary),
.app-layout .customer-workspace :is(.primary, .secondary, .icon-btn, .invoice-actions button, .history-row button) {
    min-height: 32px;
    padding: 6px 10px;
    border-radius: 7px;
    font-size: .76rem;
}
.app-layout .customer-workspace .history-table.without-billing :is(.history-head, .history-row) {
    grid-template-columns: minmax(0, 2fr) minmax(120px, 1fr);
}

/* Inventory defaults to selling and stock decisions; expanded mode retains full detail. */
.app-layout .inventory-list-workspace .inventory-table th,
.app-layout .inventory-list-workspace .inventory-table td { padding: 8px 9px; font-size: .77rem; vertical-align: middle; }
.app-layout .inventory-list-workspace .inventory-table th { white-space: nowrap; }
.app-layout .inventory-list-workspace .inventory-row-tag { font-size: .65rem; }
.app-layout .inventory-list-workspace .inventory-table-actions { justify-content: flex-end; }
@media (max-width: 700px) {
    .app-layout .inventory-list-workspace .inventory-table-wrap { overflow: visible; }
    .app-layout .inventory-list-workspace .inventory-table,
    .app-layout .inventory-list-workspace .inventory-table tbody { display: grid; gap: 8px; }
    .app-layout .inventory-list-workspace .inventory-table thead { display: none; }
    .app-layout .inventory-list-workspace .inventory-table tr {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 0 12px;
        padding: 9px 11px;
        border: 1px solid var(--ui-border);
        border-radius: 9px;
        background: #fff;
    }
    .app-layout .inventory-list-workspace .inventory-table td {
        display: grid;
        grid-template-columns: minmax(72px, auto) minmax(0, 1fr);
        gap: 7px;
        align-items: start;
        padding: 5px 0;
        border: 0;
        white-space: normal;
        overflow-wrap: anywhere;
    }
    .app-layout .inventory-list-workspace .inventory-table td::before {
        content: attr(data-label);
        color: var(--ui-muted);
        font-size: .64rem;
        font-weight: 750;
        letter-spacing: .04em;
        text-transform: uppercase;
    }
    .app-layout .inventory-list-workspace .inventory-table td:first-child,
    .app-layout .inventory-list-workspace .inventory-table td[data-label="Actions"] { grid-column: 1 / -1; }
    .app-layout .inventory-list-workspace .inventory-table td:first-child { grid-template-columns: 1fr; padding-bottom: 7px; border-bottom: 1px solid var(--ui-border); }
    .app-layout .inventory-list-workspace .inventory-table td:first-child::before { display: none; }
    .app-layout .inventory-list-workspace .inventory-table td[data-label="Actions"] { display: block; padding-top: 8px; }
    .app-layout .inventory-list-workspace .inventory-table td[data-label="Actions"]::before { display: none; }
    .app-layout .inventory-list-workspace .inventory-table-actions { justify-content: flex-start; }
}

/* Job detail sections are operational records, so keep them close together. */
.app-layout .jobdetails-page { gap: 13px; }
.app-layout .jobdetails-panel { padding: 15px 16px; border-radius: 12px; }
.app-layout .jobdetails-work-panel { margin-bottom: 0; }
.app-layout .job-workspace-actions { gap: 6px; }
.app-layout .jobdetails-shift-status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid #efd39c;
    border-radius: 8px;
    background: #fff8e9;
    color: #74521b;
    font-size: .76rem;
}
.app-layout .jobdetails-shift-status.is-clocked-in { border-color: #acd9c8; background: #edf8f4; color: #185c47; }
.app-layout .jobdetails-shift-status a { color: inherit; font-weight: 700; white-space: nowrap; }
.app-layout .job-workspace-header h1 { color: #f5fffb; }
.app-layout .job-workspace-header .job-workspace-back { color: #bdeee0; }
.app-layout .job-workspace-header .jobs-badge { color: #f4fffb; }
.app-layout .jobdetails-arrived-btn {
    border: 1px solid #b8eadb;
    border-radius: 8px;
    background: #d9f7ed;
    color: #0d5942;
    padding: 9px 13px;
    font-weight: 700;
    cursor: pointer;
}
.app-layout .jobdetails-arrived-btn:disabled { opacity: .65; cursor: wait; }
.app-layout .jobdetails-bottom-actions {
    position: sticky;
    bottom: 10px;
    z-index: 30;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin: 16px 0 2px;
    padding: 10px;
    border: 1px solid var(--ui-border);
    border-radius: 11px;
    background: rgba(255,255,255,.96);
    box-shadow: 0 10px 30px rgba(21, 61, 48, .12);
    backdrop-filter: blur(8px);
}
.app-layout .jobdetails-bottom-actions a { display: inline-flex; align-items: center; text-decoration: none; }

/* Calendar controls and statistics should leave room for the calendar itself. */
.app-layout .jobcalendar-page { gap: 12px; }
.app-layout .jobcalendar-toolbar { padding: 11px 13px; border-radius: 11px; }
.app-layout .jobcalendar-stats-grid { grid-template-columns: repeat(auto-fit, minmax(135px, 1fr)); }
.app-layout .jobcalendar-month-grid { grid-auto-rows: auto 108px; }
.app-layout .jobcalendar-month-day {
    height: 108px;
    min-height: 0;
    padding: 5px 6px;
    overflow: hidden;
    box-sizing: border-box;
}
.app-layout .jobcalendar-month-day header {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 4px;
    min-height: 22px;
}
.app-layout .jobcalendar-month-date,
.app-layout .jobcalendar-month-add { padding: 1px 3px; font-size: .76rem; line-height: 1.1; }
.app-layout .jobcalendar-month-count {
    justify-self: start;
    min-width: 17px;
    padding: 1px 5px;
    border-radius: 999px;
    background: #e7f1ed;
    color: #5e7169;
    font-size: .58rem;
    line-height: 15px;
    text-align: center;
}
.app-layout .jobcalendar-month-preview { min-width: 0; }
.app-layout .jobcalendar-month-job,
.app-layout .jobcalendar-month-more {
    height: 22px;
    margin-top: 2px;
    padding: 2px 5px;
    font-size: .64rem;
    line-height: 1;
}
.app-layout .jobcalendar-month-job { display: flex; align-items: center; }
.app-layout .jobcalendar-month-job span { flex: 0 0 auto; }
.app-layout .jobcalendar-month-job strong {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
}
.app-layout .jobcalendar-month-more { height: 17px; margin-top: 0; font-weight: 700; }
.jobcalendar-day-popout-overlay { z-index: 1400; }
.jobcalendar-day-popout {
    width: min(620px, calc(100vw - 28px));
    max-height: min(720px, calc(100vh - 28px));
    padding: 18px;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 24px 70px rgba(14, 45, 35, .25);
    overflow: hidden;
}
.jobcalendar-day-popout > header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding-bottom: 13px;
    border-bottom: 1px solid var(--ui-border);
}
.jobcalendar-day-popout h2 { margin: 2px 0; font-size: 1.3rem; }
.jobcalendar-day-popout p { margin: 0; color: var(--ui-muted); font-size: .8rem; }
.jobcalendar-day-popout-actions { display: flex; align-items: center; gap: 8px; }
.jobcalendar-day-popout-list { display: grid; gap: 7px; max-height: 540px; padding-top: 12px; overflow-y: auto; }
.jobcalendar-day-popout-list .jobcalendar-focus-job { min-height: 46px; }
.app-layout .jobcalendar-gantt-track { min-height: 46px; }

/* My Profile keeps identity information in the hero instead of a second card. */
.app-layout .myprofile-contact-line {
    display: flex;
    flex-wrap: wrap;
    gap: 5px 14px;
    margin-top: 9px;
    color: #d8eee8;
    font-size: .78rem;
}

.app-layout .myprofile-contact-line :is(a, span) {
    color: inherit;
    overflow-wrap: anywhere;
    text-decoration: none;
}

.app-layout .myprofile-contact-line a:hover { color: #fff; text-decoration: underline; }

@media (max-width: 900px) {
    .app-layout .dashboard-main-grid { grid-template-columns: 1fr; }
    .app-layout .dashboard-alert-strip { grid-template-columns: 1fr; }
    .app-layout .dashboard-attention-card { grid-column: 1 / -1; grid-template-columns: 1fr; }
    .app-layout .dashboard-alert-strip-title { margin-bottom: -2px; }
    .app-layout .people-list article { grid-template-columns: 42px minmax(180px, 1fr) minmax(135px, .65fr) auto; }
    .app-layout .people-list .location { display: none; }
    .app-layout .helpguide-layout { grid-template-columns: 1fr; }
    .app-layout .helpguide-sidebar { display: flex; overflow-x: auto; }
    .app-layout .helpguide-sidebar > strong { display: none; }
    .app-layout .helpguide-sidebar button { flex: 0 0 auto; white-space: nowrap; }
}

@media (max-width: 700px) {
    .app-layout .page-content { font-size: 13px; }
    .app-layout .page-content :is(.km-page-heading, [class*="-page-header"], .people-page > header,
        .customers-page > header, .billing-page > header, .documents-page > header) {
        align-items: stretch;
        margin-bottom: 12px;
    }

    .app-layout .page-content :is(.people-page > header, .customers-page > header, .documents-header,
        .equipment-header, [class*="-page-header"], .toolbar, [class*="-panel-header-action"]) {
        align-items: stretch;
        flex-direction: column;
    }

    .app-layout .page-content :is(.km-page-heading, [class*="-page-header"], .people-page > header,
        .customers-page > header, .billing-page > header, .documents-page > header) h1,
    .app-layout .page-content h1.dashboard-title { font-size: 1.65rem; }

    .app-layout .page-content :is(button, .km-button, a.primary, a.secondary,
        [class*="-primary-btn"], [class*="-secondary-btn"], [class*="-toggle-btn"]) {
        min-height: 36px;
        padding: 6px 9px;
        font-size: .78rem;
    }

    .app-layout .page-content :is(.panel, .dashboard-panel, [class$="-panel"]),
    .app-layout.density-compact .page-content :is(.panel, .dashboard-panel, [class$="-panel"]) {
        padding: 13px;
        border-radius: 11px;
    }

    .app-layout .page-content :is(.dashboard-stats-grid, [class$="-stats-grid"]) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 9px;
    }

    .app-layout .page-content :is(.stat-card, [class$="-stat-card"]) { padding: 12px; }
    .app-layout .stat-card { display: block; }
    .app-layout .stat-label { margin-bottom: 6px; }
    .app-layout .stat-value { margin-bottom: 4px; font-size: 1.55rem; }
    .app-layout .dashboard-page-header .km-actions { justify-content: stretch; }
    .app-layout .dashboard-page-header .km-actions .km-button { flex: 1 1 auto; }
    .app-layout .dashboard-setup-callout { gap: 7px; }
    .app-layout .quick-actions { grid-template-columns: 1fr 1fr; }
    .app-layout .myprofile-contact-line { width: 100%; gap: 5px 10px; }

    .app-layout .page-content :is(.filters, [class*="-filters-row"], .customer-import-actions,
        .header-actions, [class*="-workspace-actions"]) {
        width: 100%;
    }

    /* Desktop filter flex-basis represents width. Once filters stack on a phone,
       allowing that basis to carry over stretches each control vertically. */
    .app-layout .page-content :is(.filters, [class*="-filters-row"]) > :is(input, select) {
        flex: 0 0 auto;
        width: 100%;
        min-width: 0;
        min-height: 39px;
        height: 39px;
        max-height: 39px;
    }

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

    .app-layout .people-list article {
        grid-template-columns: 38px minmax(0, 1fr) auto;
        gap: 8px;
        padding: 9px;
    }

    .app-layout .people-list .access { display: none; }
    .app-layout .people-list .row-actions { grid-column: 2 / -1; flex-wrap: wrap; }
    .app-layout .myprofile-hero { padding: 14px; }
    .app-layout .myprofile-avatar { width: 52px; height: 52px; }
    .app-layout .dashboard-reminders { padding: 11px; }
    .app-layout .dashboard-reminder-entry { flex-wrap: wrap; }
    .app-layout .dashboard-reminder-entry input { flex-basis: 190px; }
    .app-layout .page-content,
    .app-layout.density-compact .page-content { padding: 12px 10px 26px !important; }
    .app-layout .equipment-page .explainer { grid-template-columns: 1fr; }
    .app-layout .equipment-page .explainer article + article { border-top: 1px solid var(--ui-border); border-left: 0; }
    .app-layout .report-hub-grid { grid-template-columns: 1fr; }
    .app-layout .jobcalendar-month-grid { grid-auto-rows: auto 98px; }
    .app-layout .jobcalendar-month-day { height: 98px; min-height: 0; padding: 4px; }
    .app-layout .jobcalendar-month-job,
    .app-layout .jobcalendar-month-more { font-size: .6rem; }
    .jobcalendar-day-popout { width: calc(100vw - 18px); max-height: calc(100vh - 18px); padding: 14px; }
    .jobcalendar-day-popout > header { align-items: center; }
    .jobcalendar-day-popout-actions .jobcalendar-today-btn { padding: 8px 10px; font-size: .75rem; }
    .app-layout .jobs-page-header { align-items: stretch; }
    .app-layout .jobs-header-actions > * { flex: 1 1 0; text-align: center; }
    .app-layout .jobs-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .app-layout .jobs-panel-header-action { align-items: stretch; }
    .app-layout .jobs-filters-row > :is(input, select, button) { width: 100%; max-width: none; }
    .app-layout .jobs-list-heading { align-items: center; }
    .app-layout .jobs-add-button { width: auto; }
    .app-layout .jobs-view-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; }
    .app-layout .jobs-view-tabs button { width: auto; padding-inline: 4px; }
    .app-layout .jobs-archive-toggle { padding: 4px 1px; }
    .app-layout .jobs-table { display: block; }
    .app-layout .jobdetails-bottom-actions { bottom: 6px; flex-wrap: wrap; }
    .app-layout .jobdetails-bottom-actions > * { flex: 1 1 auto; justify-content: center; text-align: center; }
    .app-layout .jobs-table thead { display: none; }
    .app-layout .jobs-table tbody { display: grid; gap: 8px; }
    .app-layout .jobs-table tr {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 6px 12px;
        padding: 10px;
        border: 1px solid var(--ui-border);
        border-radius: 9px;
    }
    .app-layout .jobs-table td { display: grid; gap: 2px; padding: 0; border: 0; }
    .app-layout .jobs-table td::before {
        content: attr(data-label);
        color: var(--ui-muted);
        font-size: .62rem;
        font-weight: 700;
        letter-spacing: .05em;
        text-transform: uppercase;
    }
    .app-layout .jobs-table td:first-child,
    .app-layout .jobs-table td:last-child { grid-column: 1 / -1; }
    .app-layout .jobs-table-actions { flex-wrap: wrap; }
    .app-layout .jobdetails-shift-status { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 390px) {
    .app-layout .page-content :is(.dashboard-stats-grid, [class$="-stats-grid"]) { grid-template-columns: 1fr; }
}

@media print {
    .app-layout .page-content { font-size: initial; }
}

/* Compact phone workspaces -------------------------------------------------
   Jobs and inventory are working lists on a phone. Keep the information
   scannable and the actions reachable without turning every record into a
   large dashboard card. */
@media (max-width: 700px) {
    .app-layout .jobs-page,
    .app-layout .inventory-page { gap: 10px; }

    .app-layout .jobs-page-header,
    .app-layout .inventory-page-header {
        align-items: flex-start;
        gap: 9px;
    }

    .app-layout .jobs-title,
    .app-layout .inventory-title { font-size: 1.45rem; line-height: 1.15; }
    .app-layout .jobs-subtitle,
    .app-layout .inventory-subtitle { margin-top: 3px; font-size: .76rem; line-height: 1.35; }

    .app-layout .jobs-header-actions,
    .app-layout .inventory-import-actions {
        display: flex;
        width: 100%;
        gap: 6px;
        overflow-x: auto;
        padding-bottom: 2px;
        scrollbar-width: thin;
    }

    .app-layout .jobs-header-actions > *,
    .app-layout .inventory-import-actions > * {
        flex: 0 0 auto;
        width: auto;
        min-height: 34px;
        padding: 6px 10px;
        border-radius: 8px;
        font-size: .72rem;
        white-space: nowrap;
    }

    .app-layout .jobs-stats-grid,
    .app-layout .inventory-stats-grid {
        display: flex;
        grid-template-columns: none;
        gap: 6px;
        overflow-x: auto;
        padding: 0 0 3px;
        scroll-snap-type: x proximity;
        scrollbar-width: thin;
    }

    .app-layout .jobs-stat-card,
    .app-layout .inventory-stat-card {
        flex: 0 0 112px;
        min-height: 58px;
        padding: 8px 10px;
        border-radius: 8px;
        box-shadow: none;
        scroll-snap-align: start;
    }

    .app-layout .jobs-stat-label,
    .app-layout .inventory-stat-label { margin-bottom: 3px; font-size: .61rem; line-height: 1.2; }
    .app-layout .jobs-stat-value,
    .app-layout .inventory-stat-value { font-size: 1.18rem; line-height: 1.05; }

    .app-layout .jobs-panel,
    .app-layout .inventory-panel { padding: 10px; border-radius: 9px; box-shadow: none; }
    .app-layout .jobs-list-heading { align-items: center; gap: 8px; }
    .app-layout .jobs-list-heading .jobs-panel-header p { display: none; }
    .app-layout .jobs-add-button { flex: 0 0 auto; width: auto; min-height: 32px; padding: 5px 9px; font-size: .7rem; }

    .app-layout .jobs-filters-row {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
    }

    .app-layout .jobs-view-tabs,
    .app-layout .jobs-search-input { grid-column: 1 / -1; }
    .app-layout .jobs-filters-row > :is(input, select, button) { min-height: 38px; font-size: .78rem; }
    .app-layout .jobs-view-tabs button { min-height: 29px; padding: 4px 3px; font-size: .67rem; }

    .app-layout .jobs-table-wrap,
    .app-layout .inventory-list-workspace:not(.is-expanded) .inventory-table-wrap { overflow: visible; }

    .app-layout .jobs-table,
    .app-layout .jobs-table tbody,
    .app-layout .inventory-list-workspace:not(.is-expanded) .inventory-table,
    .app-layout .inventory-list-workspace:not(.is-expanded) .inventory-table tbody {
        display: block;
        width: 100%;
    }

    .app-layout .jobs-table thead,
    .app-layout .inventory-list-workspace:not(.is-expanded) .inventory-table thead { display: none; }

    .app-layout .jobs-table tr,
    .app-layout .inventory-list-workspace:not(.is-expanded) .inventory-table tr {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 5px 10px;
        padding: 9px 2px;
        border: 0;
        border-bottom: 1px solid var(--ui-border);
        border-radius: 0;
        background: transparent;
    }

    .app-layout .jobs-table tr:first-child,
    .app-layout .inventory-list-workspace:not(.is-expanded) .inventory-table tr:first-child { padding-top: 3px; }

    .app-layout .jobs-table td,
    .app-layout .inventory-list-workspace:not(.is-expanded) .inventory-table td {
        display: grid;
        grid-template-columns: 1fr;
        gap: 2px;
        min-width: 0;
        padding: 0;
        border: 0;
        font-size: .74rem;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .app-layout .jobs-table td::before,
    .app-layout .inventory-list-workspace:not(.is-expanded) .inventory-table td::before {
        content: attr(data-label);
        color: var(--ui-muted);
        font-size: .56rem;
        font-weight: 750;
        letter-spacing: .045em;
        text-transform: uppercase;
    }

    .app-layout .jobs-table td:first-child,
    .app-layout .jobs-table td:last-child,
    .app-layout .inventory-list-workspace:not(.is-expanded) .inventory-table td:first-child,
    .app-layout .inventory-list-workspace:not(.is-expanded) .inventory-table td[data-label="Actions"] { grid-column: 1 / -1; }

    .app-layout .jobs-table td:last-child,
    .app-layout .inventory-list-workspace:not(.is-expanded) .inventory-table td[data-label="Actions"] {
        width: auto !important;
        min-width: 0;
        white-space: normal !important;
    }

    .app-layout .jobs-table td:first-child,
    .app-layout .inventory-list-workspace:not(.is-expanded) .inventory-table td:first-child {
        display: block;
        padding-bottom: 5px;
        border-bottom: 1px solid #edf2ef;
    }

    .app-layout .jobs-table td:first-child::before,
    .app-layout .inventory-list-workspace:not(.is-expanded) .inventory-table td:first-child::before,
    .app-layout .jobs-table td:last-child::before,
    .app-layout .inventory-list-workspace:not(.is-expanded) .inventory-table td[data-label="Actions"]::before { display: none; }

    .app-layout .jobs-table-actions,
    .app-layout .inventory-list-workspace:not(.is-expanded) .inventory-table-actions {
        display: flex;
        flex-direction: row !important;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: center;
        gap: 5px;
        width: auto;
        padding-top: 2px;
    }

    .app-layout .jobs-inline-btn,
    .app-layout .inventory-list-workspace:not(.is-expanded) .inventory-inline-btn {
        flex: 0 0 auto;
        width: auto !important;
        min-height: 32px;
        padding: 5px 9px;
        border-radius: 7px;
        font-size: .68rem;
    }

    /* The quick view contains the secondary inventory details, so the list
       only needs the fields used for fast stock decisions. */
    .app-layout .inventory-list-workspace:not(.is-expanded) .inventory-table td[data-label="Business use"],
    .app-layout .inventory-list-workspace:not(.is-expanded) .inventory-table td[data-label="SKU"],
    .app-layout .inventory-list-workspace:not(.is-expanded) .inventory-table td[data-label="Category"] { display: none; }

    .app-layout .inventory-purpose-guide { display: none; }
    .app-layout .inventory-filter-heading { gap: 6px; }
    .app-layout .inventory-filter-heading .inventory-muted { font-size: .72rem; }
    .app-layout .inventory-filters-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
    .app-layout .inventory-filters-grid .inventory-input { min-height: 38px; padding: 7px 8px; font-size: .75rem; }
    .app-layout .inventory-list-header { align-items: center; flex-direction: row; flex-wrap: wrap; gap: 7px; }
    .app-layout .inventory-list-header > div:first-child { min-width: 0; }
    .app-layout .inventory-list-header-actions { width: auto; margin-left: auto; gap: 5px; }
    .app-layout .inventory-workspace-toggle,
    .app-layout .inventory-workspace-add { flex: 0 0 auto; width: auto; min-height: 32px; padding: 5px 8px; border-radius: 7px; font-size: .67rem; }

    /* Expanded inventory is still a phone workspace. Show the additional
       fields as a dense two-column record instead of forcing a 900px table. */
    .app-layout .inventory-list-workspace.is-expanded .inventory-table-wrap {
        overflow-x: hidden;
        overflow-y: auto;
    }

    .app-layout .inventory-list-workspace.is-expanded .inventory-table,
    .app-layout .inventory-list-workspace.is-expanded .inventory-table tbody {
        display: block;
        width: 100%;
        min-width: 0;
    }

    .app-layout .inventory-list-workspace.is-expanded .inventory-table thead { display: none; }

    .app-layout .inventory-list-workspace.is-expanded .inventory-table tr {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px 12px;
        padding: 11px 10px;
        border: 0;
        border-bottom: 1px solid var(--ui-border);
        background: #fff;
    }

    .app-layout .inventory-list-workspace.is-expanded .inventory-table td {
        display: grid;
        grid-template-columns: 1fr;
        gap: 2px;
        width: auto !important;
        min-width: 0;
        padding: 0;
        border: 0;
        font-size: .72rem;
        white-space: normal !important;
        overflow-wrap: anywhere;
    }

    .app-layout .inventory-list-workspace.is-expanded .inventory-table td::before {
        content: attr(data-label);
        color: var(--ui-muted);
        font-size: .55rem;
        font-weight: 750;
        letter-spacing: .045em;
        text-transform: uppercase;
    }

    .app-layout .inventory-list-workspace.is-expanded .inventory-table td:first-child,
    .app-layout .inventory-list-workspace.is-expanded .inventory-table td[data-label="Actions"] { grid-column: 1 / -1; }

    .app-layout .inventory-list-workspace.is-expanded .inventory-table td:first-child {
        display: block;
        padding-bottom: 6px;
        border-bottom: 1px solid #e8efeb;
    }

    .app-layout .inventory-list-workspace.is-expanded .inventory-table td:first-child::before,
    .app-layout .inventory-list-workspace.is-expanded .inventory-table td[data-label="Actions"]::before { display: none; }

    .app-layout .inventory-list-workspace.is-expanded .inventory-table-actions {
        display: flex;
        flex-direction: row !important;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-start;
        gap: 5px;
        width: auto;
        padding-top: 3px;
    }

    .app-layout .inventory-list-workspace.is-expanded .inventory-inline-btn {
        flex: 0 0 auto;
        width: auto !important;
        min-height: 32px;
        padding: 5px 9px;
        border-radius: 7px;
        font-size: .68rem;
    }
}

@media (max-width: 390px) {
    .app-layout .jobs-stats-grid,
    .app-layout .inventory-stats-grid { display: flex; grid-template-columns: none; }
}
.asset-record-trigger,.job-record-trigger,.record-name-button{border:0;background:transparent;padding:0;cursor:pointer;text-align:left;font:inherit}.asset-quick-grid,.job-quick-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.65rem}.asset-quick-grid div,.job-quick-grid div{display:grid;gap:.2rem;padding:.7rem;border-radius:.65rem;background:#f3f7f5}.job-quick-grid .wide{grid-column:1/-1}.asset-quick-grid span,.job-quick-grid span{color:#697a74;font-size:.7rem;text-transform:uppercase;letter-spacing:.05em}.asset-quick-grid strong,.job-quick-grid strong{overflow-wrap:anywhere}.job-quick-description{margin:.75rem 0 0;color:#52655e}@media(max-width:520px){.asset-quick-grid,.job-quick-grid{grid-template-columns:1fr}.job-quick-grid .wide{grid-column:auto}}

/* Final phone-density safeguards shared by the operational pages. */
.app-layout .customer-file-input{display:none!important;width:0!important;height:0!important;position:absolute!important;opacity:0!important;pointer-events:none!important}
.app-layout .jobcalendar-month-count{border:0;cursor:pointer}
@media(max-width:700px){
    .app-layout .page-content h2{font-size:1.18rem;line-height:1.18}
    .app-layout .page-content h3{font-size:1rem;line-height:1.2}

    .app-layout .jobs-table tr{
        margin-bottom:8px;
        padding:10px!important;
        border:1px solid #dbe5e0!important;
        border-radius:10px!important;
        background:#fff!important;
        box-shadow:0 2px 8px rgba(16,41,35,.035);
    }
    .app-layout .jobs-table td:first-child{padding-bottom:7px}
    .app-layout .jobs-name,.app-layout .job-record-trigger{font-size:.85rem}
    .app-layout .jobs-badge{font-size:.62rem}
    .app-layout .jobs-table-actions{padding-top:5px}

    .app-layout .jobcalendar-month-grid{
        grid-template-columns:repeat(7,minmax(0,1fr));
        grid-auto-rows:auto 64px;
        min-width:0;
        overflow:hidden;
    }
    .app-layout .jobcalendar-month-weekday{padding:5px 1px;font-size:.6rem}
    .app-layout .jobcalendar-month-day{height:64px;min-height:0;padding:4px 3px}
    .app-layout .jobcalendar-month-day header{grid-template-columns:auto 1fr auto;gap:1px;min-height:19px}
    .app-layout .page-content .jobcalendar-month-date,.app-layout .page-content .jobcalendar-month-add{min-height:18px;padding:1px;font-size:.66rem}
    .app-layout .page-content .jobcalendar-month-count{justify-self:center;min-width:17px;min-height:17px;height:17px;padding:0 4px;font-size:.56rem;line-height:17px}
    .app-layout .jobcalendar-month-preview{display:none}

    .jobcalendar-day-popout{width:calc(100vw - 14px);max-height:calc(100dvh - 14px);padding:11px;border-radius:11px}
    .jobcalendar-day-popout>header{gap:8px;padding-bottom:9px}
    .jobcalendar-day-popout h2{font-size:1.05rem}
    .jobcalendar-day-popout p{font-size:.7rem}
    .jobcalendar-day-popout-actions{gap:5px}
    .jobcalendar-day-popout-actions .jobcalendar-today-btn{min-height:32px;padding:5px 8px;font-size:.67rem}
    .jobcalendar-day-popout-actions .jobcalendar-modal-close{width:34px;min-height:32px;padding:4px}
    .jobcalendar-day-popout-list .jobcalendar-focus-job{grid-template-columns:115px minmax(0,1fr);gap:4px 8px;min-height:42px;padding:7px 9px}
    .jobcalendar-day-popout-list .jobcalendar-focus-title{font-size:.82rem}
    .jobcalendar-day-popout-list .jobcalendar-focus-person{grid-column:2}
    .jobcalendar-day-popout-list .jobcalendar-focus-time,.jobcalendar-day-popout-list .jobcalendar-focus-person{font-size:.68rem}
}