@font-face {
    font-family: "Figtree";
    src: url("/assets/fonts/figtree/Figtree-VariableFont_wght.ttf") format("truetype");
    font-style: normal;
    font-weight: 300 900;
    font-display: swap;
}

.lead-form-builder-workspace {
    align-items: start;
    display: grid;
    gap: 18px;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 440px);
}

.lead-form-builder-main,
.lead-form-builder-side {
    display: grid;
    gap: 16px;
    min-width: 0;
}

.lead-form-builder-side {
    position: sticky;
    top: 16px;
}

.builder-style-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.lead-form-add-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.lead-form-field-list {
    display: grid;
    gap: 10px;
}

.lead-form-builder-field {
    background: #fff;
    border: 1px solid #d9e2ec;
    border-radius: 8px;
    display: grid;
    gap: 10px;
    padding: 12px;
}

.lead-form-builder-field.is-selected {
    border-color: var(--brand, #145c9e);
    box-shadow: 0 0 0 3px rgba(20, 92, 158, 0.12);
}

.lead-form-builder-field.is-dragging {
    opacity: 0.66;
}

.lead-form-field-card-top,
.card-heading-row {
    align-items: center;
    display: flex;
    gap: 10px;
    justify-content: space-between;
}

.lead-form-field-card-top small {
    color: #596579;
    margin-right: auto;
    text-transform: capitalize;
}

.drag-handle {
    color: #74849a;
    cursor: grab;
    font-weight: 700;
    letter-spacing: 0;
}

.lead-form-field-hidden-grid {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.lead-form-field-hidden-grid textarea {
    min-height: 88px;
}

.lead-form-field-editor[hidden] {
    display: none;
}

.lead-form-preview-card {
    overflow: hidden;
}

.lead-form-live-preview {
    border: 1px solid #dde5ef;
    border-radius: 8px;
    background: #f8fafc;
    min-height: 300px;
    padding: 12px;
}

.lead-form-public {
    color: var(--lf-text, #111827);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    margin: 0 auto;
    padding: 20px;
}

.lead-form-public.width-small {
    max-width: 520px;
}

.lead-form-public.width-medium {
    max-width: 760px;
}

.lead-form-public.width-full {
    max-width: 1080px;
}

.lead-form-public.font-serif {
    font-family: Georgia, "Times New Roman", serif;
}

.lead-form-public.font-sans {
    font-family: Arial, Helvetica, sans-serif;
}

.lead-form-public.font-mono {
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

.lead-form-public.small {
    font-size: 0.92rem;
}

.lead-form-public.large {
    font-size: 1.08rem;
}

.lead-form-public.dark {
    background: #111827;
    color: #f9fafb;
}

.lead-form-public.dark .card {
    background: #172033;
    border-color: #2b394f;
}

.lead-form-public.square .card,
.lead-form-public.square input,
.lead-form-public.square select,
.lead-form-public.square textarea,
.lead-form-public.square button {
    border-radius: 2px;
}

.lead-form-public.rounded .card {
    border-radius: 8px;
}

.lead-form-public.compact label,
.lead-form-public.compact fieldset {
    gap: 4px;
    margin-bottom: 8px;
}

.lead-form-public.comfortable label,
.lead-form-public.comfortable fieldset {
    margin-bottom: 14px;
}

.lead-form-public input,
.lead-form-public select,
.lead-form-public textarea {
    background: var(--lf-field-bg, #fff);
    border-color: rgba(15, 23, 42, 0.2);
    color: var(--lf-field-text, #111827);
}

.lead-form-public .btn-primary,
.lead-form-public button[type="submit"],
.lead-form-public button[type="button"].btn-primary {
    background: var(--lf-button, #145c9e);
    border-color: var(--lf-button, #145c9e);
    color: var(--lf-button-text, #fff);
}

.lead-form-public h1,
.lead-form-public legend {
    color: var(--lf-text, #111827);
}

.lead-form-public.dark h1,
.lead-form-public.dark legend {
    color: #f9fafb;
}

.lead-form-option-fieldset {
    border: 1px solid rgba(15, 23, 42, 0.12);
    border-radius: 8px;
    display: grid;
    gap: 8px;
    padding: 10px 12px;
}

.sources-dashboard-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: minmax(0, 1.4fr) minmax(280px, 0.6fr);
}

.source-event-list {
    display: grid;
    gap: 10px;
}

.source-event-list article {
    border: 1px solid #d9e2ec;
    border-radius: 8px;
    padding: 10px;
}

@media (max-width: 980px) {
    .lead-form-builder-workspace,
    .sources-dashboard-grid {
        grid-template-columns: 1fr;
    }

    .lead-form-builder-side {
        position: static;
    }
}

@font-face {
    font-family: "Figtree";
    src: url("/assets/fonts/figtree/Figtree-Italic-VariableFont_wght.ttf") format("truetype");
    font-style: italic;
    font-weight: 300 900;
    font-display: swap;
}

:root {
    --crm-font-sans: "Figtree", Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --bg: #f4f7fb;
    --panel: #ffffff;
    --panel-soft: #f8fafc;
    --text: #172033;
    --muted: #62708a;
    --primary: #1d4ed8;
    --primary-dark: #1e40af;
    --danger: #dc2626;
    --danger-dark: #b91c1c;
    --sidebar: #0f172a;
    --border: #dbe3ef;
    --warning: #92400e;
    --radius: .85rem;
    --shadow: 0 16px 38px rgba(15,23,42,.07);
    --focus: 0 0 0 3px rgba(29,78,216,.24);
}

.theme-light {
    --bg: #f8fafc;
    --panel: #ffffff;
    --panel-soft: #f1f5f9;
    --text: #111827;
    --muted: #475569;
    --sidebar: #1f2937;
}

.theme-medium {
    --bg: #eef4f8;
    --panel: #fdfefe;
    --panel-soft: #e6eef4;
    --text: #142033;
    --muted: #516274;
    --sidebar: #223047;
}

.theme-dark {
    --bg: #111827;
    --panel: #1f2937;
    --panel-soft: #263244;
    --text: #f8fafc;
    --muted: #cbd5e1;
    --primary: #60a5fa;
    --primary-dark: #93c5fd;
    --sidebar: #020617;
    --border: #334155;
    --shadow: 0 16px 38px rgba(0,0,0,.24);
}

* { box-sizing: border-box; }
html { min-height: 100%; }
body { margin: 0; min-height: 100%; font-family: var(--crm-font-sans); background: var(--bg); color: var(--text); }
a { color: inherit; }
.app-shell,
.public-shell,
.global-topbar,
.app-sidebar,
.top-nav,
.side-nav,
.bottom-nav,
button,
.btn,
.button-link,
.link-button,
.primary-action,
input,
select,
textarea,
table,
.card,
.ui-panel,
.portal-public-shell,
.portal-brand,
.portal-hero,
.portal-card,
.estimate-review,
.invoice-view,
.work-order-view,
.document-preview { font-family: var(--crm-font-sans); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { box-shadow: var(--focus); outline: 2px solid transparent; outline-offset: 2px; }

.app-shell { display: grid; min-height: 100vh; width: 100%; }
.app-shell.nav-top, .app-shell.nav-bottom { grid-template-columns: minmax(0, 1fr); }
.app-shell.nav-left { grid-template-columns: minmax(240px, 280px) minmax(0, 1fr); }
.app-shell.nav-right { grid-template-columns: minmax(0, 1fr) minmax(240px, 280px); }
.public-shell { display: grid; grid-template-columns: minmax(0, 1fr); min-height: 100vh; }
.public-shell .main-content { align-content: center; display: grid; margin: 0 auto; max-width: 980px; min-height: 100vh; width: 100%; }
.main-content { min-width: 0; padding: 1rem clamp(1rem, 2vw, 1.75rem) 2rem; width: 100%; }

.brand { color: #fff; font-size: 1.1rem; font-weight: 900; letter-spacing: -.01em; white-space: nowrap; }
.compact-brand { color: var(--text); }
.global-topbar { align-items: center; background: rgba(255,255,255,.92); border: 1px solid var(--border); border-radius: 1rem; box-shadow: var(--shadow); display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: 1rem; padding: .7rem .8rem; position: sticky; top: .5rem; z-index: 20; backdrop-filter: blur(8px); }
.top-nav, .bottom-nav { align-items: center; display: flex; gap: .25rem; min-width: 0; overflow-x: auto; scrollbar-width: thin; }
.nav-link { border-radius: .65rem; color: #334155; font-size: .9rem; font-weight: 750; padding: .48rem .66rem; text-decoration: none; white-space: nowrap; }
.nav-link:hover, .nav-link.is-active { background: #eef2ff; color: var(--primary-dark); }
.app-sidebar { background: var(--sidebar); color: white; display: flex; flex-direction: column; gap: 1rem; min-height: 100vh; min-width: 0; padding: 1rem; position: sticky; top: 0; }
.side-nav { display: grid; gap: .25rem; overflow-y: auto; }
.side-nav .nav-link { color: #dbeafe; }
.side-nav .nav-link:hover, .side-nav .nav-link.is-active { background: rgba(255,255,255,.12); color: #fff; }
.right-sidebar { border-left: 1px solid rgba(255,255,255,.08); }
.bottom-nav-shell { background: var(--panel); border: 1px solid var(--border); border-radius: 1rem; box-shadow: var(--shadow); margin-top: 1.25rem; padding: .55rem; }
.nav-foundation-note { background: #eef2ff; border: 1px solid #c7d2fe; border-radius: .8rem; color: #3730a3; font-size: .88rem; margin: 0 0 1rem; padding: .65rem .8rem; }

.account-area { align-items: center; display: flex; gap: .6rem; min-width: 0; }
.account-area-top { justify-content: flex-end; }
.account-area-sidebar { align-items: stretch; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); border-radius: .9rem; display: grid; padding: .75rem; }
.account-identity { display: grid; line-height: 1.2; min-width: 0; overflow-wrap: break-word; word-break: normal; }
.account-identity strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-identity small { color: var(--muted); }
.account-area-sidebar .account-identity small { color: #cbd5e1; }
.nav-preference-form { align-items: end; display: flex; gap: .35rem; margin: 0; }
.nav-preference-form label { color: var(--muted); display: grid; font-size: .72rem; font-weight: 800; gap: .15rem; margin: 0; text-transform: uppercase; }
.nav-preference-form select { min-height: 2.15rem; padding: .35rem 1.8rem .35rem .55rem; }
.experience-mode-form { align-items: end; display: grid; gap: .2rem; margin: 0; }
.experience-mode-label { color: var(--muted); font-size: .72rem; font-weight: 800; text-transform: uppercase; }
.experience-mode-toggle { background: #eef2f7; border: 1px solid var(--border); border-radius: .55rem; display: inline-grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: hidden; }
.experience-mode-button { background: transparent; border: 0; color: #475569; cursor: pointer; font-size: .78rem; font-weight: 900; min-height: 2.15rem; padding: .38rem .55rem; white-space: nowrap; }
.experience-mode-button.is-active { background: var(--primary); color: #fff; }
.experience-mode-button:not(.is-active):hover { background: #dbeafe; color: var(--primary-dark); }
.app-shell[data-experience-mode="standard"] [data-experience-panel="advanced"] { display: none ; }
.app-shell[data-experience-mode="standard"] [data-advanced-only-diagnostic] { display: none ; }
.app-shell[data-experience-mode="advanced"] [data-advanced-only-diagnostic] { outline: 1px solid rgba(37, 99, 235, .12); outline-offset: 2px; }
.logout-form { margin: 0; }
.beta-company-switcher { align-items: center; display: flex; flex-wrap: wrap; gap: .25rem; min-width: 0; }
.beta-profile-form { display: inline-flex; margin: 0; }
.beta-profile-button, .beta-profile-manage { align-items: center; background: #fff; border: 1px solid #bfdbfe; border-radius: .45rem; color: #1d4ed8; display: inline-flex; font-size: .86rem; font-weight: 900; justify-content: center; line-height: 1.1; min-height: 1.95rem; padding: .34rem .5rem; text-decoration: none; white-space: nowrap; }
.beta-profile-create { background: #eff6ff; border-color: #93c5fd; color: #0f172a; }
.beta-profile-active { background: #1d4ed8; border-color: #1d4ed8; color: #fff; }
.beta-profile-empty, .beta-profile-disabled { background: #f8fafc; border-color: #e2e8f0; color: #94a3b8; }
.beta-profile-separator { color: #94a3b8; font-weight: 900; padding: 0 .1rem; }
.beta-profile-manage { background: #f8fafc; color: #475569; }
.beta-profile-button:hover, .beta-profile-manage:hover { transform: translateY(-1px); }

.page-header { align-items: end; background: var(--panel); border: 1px solid var(--border); border-radius: 1rem; display: flex; justify-content: space-between; margin-bottom: 1rem; padding: 1rem 1.15rem; }
.page-header h1 { font-size: clamp(1.35rem, 2.5vw, 2rem); margin: .15rem 0 0; }
h1, h2 { margin: 0 0 .5rem; }
p { color: var(--muted); line-height: 1.55; }
.eyebrow { color: var(--primary); font-size: .72rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
small { color: var(--muted); }

.grid, .module-grid { display: grid; gap: 1rem; }
.cards-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cards-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 1rem; }
.module-grid { grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); }
.card, .ui-panel { background: var(--panel); border: 1px solid var(--border); border-radius: 1rem; box-shadow: var(--shadow); padding: 1rem; }
.instruction-card { min-height: 280px; }
.warning { background: #fffbeb; border: 1px solid #fde68a; border-radius: .75rem; color: var(--warning); padding: .85rem; }
.auth-card { max-width: 620px; }

label { display: grid; gap: .35rem; margin-bottom: .8rem; }
input, select, textarea { background: #fff; border: 1px solid var(--border); border-radius: .65rem; color: var(--text); font: inherit; padding: .65rem .75rem; }
.theme-dark input, .theme-dark select, .theme-dark textarea { background: #0f172a; color: var(--text); }
.theme-dark .global-topbar { background: rgba(31,41,55,.94); }
.theme-dark .nav-link { color: #dbeafe; }
.theme-dark .nav-link:hover, .theme-dark .nav-link.is-active { background: #172554; color: #bfdbfe; }
.paid-feature-grid { display: grid; gap: .85rem; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.paid-feature-card { display: grid; gap: .65rem; min-width: 0; }
.paid-feature-badges { align-items: flex-end; display: flex; flex-wrap: wrap; gap: .3rem; justify-content: flex-end; }
.paid-feature-request-form { display: grid; gap: .5rem; }
.paid-feature-review-form { display: grid; gap: .45rem; min-width: min(320px, 72vw); }
.paid-feature-review-form label { margin: 0; }
.paid-feature-review-form textarea { min-height: 4.5rem; }
.paid-feature-request-activation-form { align-items: start; flex-wrap: wrap; max-width: min(34rem, 86vw); }
.paid-feature-request-activation-form input[name="notes"] { min-width: min(16rem, 100%); }
.paid-feature-request-activation-form small { color: var(--muted); flex-basis: 100%; }
.paid-addons-safety { border-color: #bfdbfe; }
.billing-revenue-readiness-card[data-paid-billing-revenue-readiness="margins-seats-donations-no-live-fees"] { background: #f8fbff; border-color: #bfdbfe; }
.billing-revenue-readiness-card .checkbox-row { align-items: center; display: flex; gap: .5rem; }
.billing-revenue-readiness-card input[type="number"] { max-width: 100%; }
.integrations-api-readiness-card[data-paid-integrations-api-readiness="no-keys-no-provider-calls-no-supplier-orders"] { background: #f7fdfb; border-color: #99f6e4; }
.integrations-api-readiness-card .checkbox-row { align-items: center; display: flex; gap: .5rem; }
.integrations-api-readiness-card input[type="number"] { max-width: 100%; }
.marketing-web-readiness-card[data-paid-marketing-web-readiness="no-sends-no-publishing-no-domain-or-print-provider-calls"] { background: #fffdf5; border-color: #fde68a; }
.marketing-web-readiness-card .checkbox-row { align-items: center; display: flex; gap: .5rem; }
.paid-operations-readiness-card[data-paid-operations-readiness="no-mail-network-supplier-route-report-storage-provider-calls"] { background: #f8fafc; border-color: #cbd5e1; }
.paid-operations-readiness-card .checkbox-row { align-items: center; display: flex; gap: .5rem; }
.paid-operations-group { border-top: 1px solid var(--border); padding-top: .75rem; }
.paid-operations-group h3 { font-size: .95rem; margin: 0 0 .65rem; }
@media (max-width: 1180px) {
    .paid-feature-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
    .paid-feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
    .paid-feature-grid { grid-template-columns: minmax(0, 1fr); }
}
button, .btn, .button-link, .link-button, .primary-action { align-items: center; background: var(--primary); border: 1px solid var(--primary); border-radius: .65rem; color: #fff; cursor: pointer; display: inline-flex; font: inherit; font-size: .9rem; font-weight: 850; justify-content: center; line-height: 1.15; min-height: 2.35rem; padding: .5rem .75rem; text-decoration: none; transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, color .15s ease, transform .15s ease; }
button:hover, .btn:hover, .button-link:hover, .link-button:hover, .primary-action:hover { filter: none; transform: translateY(-1px); }
.btn-primary, .primary-action { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn-secondary, .secondary-button, .button-link { background: #eef2ff; border-color: #c7d2fe; color: #3730a3; }
.btn-secondary:hover, .secondary-button:hover, .button-link:hover { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn-danger, .logout-button { background: var(--danger); border-color: var(--danger-dark); color: #fff; }
.btn-subtle, .link-button { background: #fff; border-color: var(--border); color: var(--primary-dark); }
.btn-icon, .btn-sm, .mini-button { border-radius: .55rem; font-size: .8rem; min-height: 2rem; padding: .35rem .55rem; }
.btn-toolbar { background: #f8fafc; border-color: var(--border); border-radius: .5rem; color: #334155; font-size: .78rem; min-height: 1.85rem; min-width: 1.85rem; padding: .28rem .42rem; }
.btn-toolbar:hover { background: #eef2ff; border-color: #c7d2fe; color: var(--primary-dark); }
.btn-toolbar-reset { color: #7c3aed; }
.secondary-button, .mini-button { cursor: pointer; }
.logout-button { width: auto; }

.form-error { background: #fef2f2; border: 1px solid #fecaca; border-radius: .75rem; color: #991b1b; font-weight: 700; padding: .75rem; }
.dashboard-cards { margin-top: 1rem; }

.dashboard-charts-grid { display: grid; gap: 1rem; grid-template-columns: 1fr 1fr; margin-top: 1.5rem; }
.dashboard-chart-card { display: flex; flex-direction: column; }
.dashboard-chart-card h3 { margin-top: 0; margin-bottom: 1rem; font-size: 1.1rem; }
.dashboard-chart-card canvas { width: 100% ; height: auto ; max-height: 250px; }
@media (max-width: 800px) {
    .dashboard-charts-grid { grid-template-columns: 1fr; }
}
.auth-card input { width: 100%; }
.admin-tabs { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: 1rem; }
.admin-tabs a { background: #eef2ff; border: 1px solid var(--border); border-radius: .65rem; color: #3730a3; font-weight: 800; padding: .5rem .7rem; text-decoration: none; }
.admin-tabs a.active, .admin-tabs a:hover { background: var(--primary); color: #fff; }
.card-heading-row { align-items: flex-start; display: flex; gap: .75rem; justify-content: space-between; }
.help-panel { background: linear-gradient(180deg, #fff, #fbfdff); margin-bottom: 1rem; min-height: auto; }
.help-body { border-top: 1px solid var(--border); margin-top: .75rem; padding-top: .35rem; }
.help-body.is-hidden { display: none; }
.inline-form { display: inline-flex; gap: .4rem; margin: 0; }
.layout-grid { align-items: start; display: grid; gap: 1rem; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.layout-card.layout-full { grid-column: 1 / -1; }
.layout-card.layout-half { grid-column: span 2; }
.layout-card.layout-quarter { grid-column: span 1; }
.layout-card.layout-fullscreen { grid-column: 1 / -1; min-height: 75vh; }
.layout-card.layout-hidden .layout-card-body { display: none; }
.layout-card.layout-hidden { opacity: .72; }
.layout-card.layout-collapsed .layout-card-body { display: none; }
.layout-card.layout-collapsed { min-height: auto; }
.card-toolbar, .layout-controls { align-items: center; background: var(--panel-soft); border: 1px solid var(--border); border-radius: .7rem; display: flex; flex-wrap: wrap; gap: .25rem; justify-content: flex-end; max-width: 520px; padding: .25rem; }
.actions-cell { display: flex; flex-wrap: wrap; gap: .45rem; }
.status-pill { border-radius: 999px; display: inline-block; font-weight: 800; padding: .3rem .55rem; }
.status-active { background: #dcfce7; color: #166534; }
.status-inactive { background: #fee2e2; color: #991b1b; }
.admin-form { max-width: 820px; }

.data-transfer-grid { margin-bottom: 1rem; }
.data-import-export-page,
.data-transfer-plan-card,
.data-transfer-form,
.data-transfer-csv-form,
.data-transfer-table-scroll,
.data-transfer-mobile-plan-list,
.data-transfer-mobile-plan-card,
.data-transfer-plan-fields,
.data-transfer-plan-fields div {
    max-width: 100%;
    min-width: 0;
    overflow-wrap: anywhere;
}
.data-transfer-mobile-plan-list { display: none; gap: .65rem; }
.data-transfer-mobile-plan-card {
    background: #fff;
    border: 1px solid var(--border);
    border-left: 4px solid var(--primary);
    border-radius: .75rem;
    padding: .75rem;
}
.data-transfer-plan-card-head {
    align-items: flex-start;
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    justify-content: space-between;
}
.data-transfer-plan-fields {
    display: grid;
    gap: .45rem;
    margin: .7rem 0 0;
}
.data-transfer-plan-fields div {
    background: #f8fbff;
    border: 1px solid var(--border);
    border-radius: .55rem;
    padding: .5rem;
}
.data-transfer-plan-fields dt {
    color: var(--muted);
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.data-transfer-plan-fields dd {
    color: var(--text);
    margin: .15rem 0 0;
}
.stacked-form { display: grid; gap: 1rem; margin-top: 1rem; }
.checkbox-grid { display: grid; gap: .55rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.checkbox-row { align-items: center; border: 1px solid var(--border); border-radius: .75rem; display: flex; gap: .55rem; margin: 0; padding: .65rem; }
.checkbox-row input { width: auto; }
.permission-fieldset { border: 1px solid var(--border); border-radius: .8rem; display: grid; gap: .55rem; margin: 0; padding: .85rem; }
.permission-fieldset legend { color: var(--text); font-weight: 900; padding: 0 .35rem; }
.permission-fieldset details { border: 1px solid var(--border); border-radius: .7rem; padding: .6rem; }
.permission-fieldset summary { cursor: pointer; font-weight: 800; }
.permission-override-row { align-items: center; border-top: 1px solid var(--border); display: grid; gap: .5rem; grid-template-columns: minmax(220px, 1fr) minmax(120px, auto) repeat(3, auto); padding: .5rem 0; }
.permission-override-row label { align-items: center; display: inline-flex; gap: .3rem; margin: 0; }
.permission-override-row input { width: auto; }
.permission-preview-banner,
.impersonation-banner { align-items: center; background: #fff7ed; border: 1px solid #fed7aa; border-radius: .65rem; display: flex; flex-wrap: wrap; gap: .75rem; justify-content: space-between; margin-bottom: 1rem; padding: .75rem 1rem; }
.impersonation-banner { background: #eff6ff; border-color: #bfdbfe; }
.impersonation-controls { align-items: center; display: flex; flex-wrap: wrap; gap: .75rem; justify-content: space-between; }
.permission-blocked-details { background: #fff; border: 1px solid #fecaca; border-radius: .65rem; display: grid; gap: .4rem .75rem; grid-template-columns: max-content minmax(0, 1fr); margin: .85rem 0; padding: .75rem; }
.permission-blocked-details dt { font-weight: 900; }
.permission-blocked-details dd { margin: 0; overflow-wrap: anywhere; }
.permission-preview-form { margin: .75rem 0 1rem; }
.quick-permissions-panel { background: #fff; border: 1px solid var(--border); border-radius: .75rem; display: grid; gap: .75rem; padding: .9rem; position: sticky; top: .5rem; z-index: 3; }
.quick-permissions-panel h3,
.permission-full-matrix h3 { margin: 0 0 .2rem; }
.quick-permissions-grid { display: grid; gap: .75rem; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.quick-permission-category { border: 1px solid var(--border); border-radius: .65rem; display: grid; gap: .45rem; margin: 0; min-width: 0; padding: .7rem; }
.quick-permission-category legend { font-weight: 900; padding: 0 .25rem; }
.quick-permission-toggle-wrap { display: grid; gap: .45rem; min-width: 0; }
.quick-permission-toggle { align-items: flex-start; display: flex; gap: .45rem; margin: 0; }
.quick-permission-toggle input,
.permission-matrix-row input { flex: 0 0 auto; margin-top: .2rem; width: auto; }
.quick-permission-toggle span { display: grid; gap: .2rem; min-width: 0; }
.quick-permission-toggle small,
.permission-matrix-row small { color: var(--muted); display: block; font-size: .78rem; line-height: 1.3; }
.permission-help-toolbar { align-items: center; background: #f8fafc; border: 1px solid var(--border); border-radius: .7rem; display: flex; flex-wrap: wrap; gap: .6rem; justify-content: space-between; padding: .65rem .75rem; }
[data-permission-help] { min-width: 0; }
.permission-help-card { background: #fffdf2; border: 1px solid #fde68a; border-radius: .65rem; color: #3f3f1f; display: grid; gap: .45rem; font-size: .86rem; line-height: 1.45; padding: .7rem; }
.permission-help-card p { margin: 0; }
.permission-full-matrix { border: 1px solid var(--border); border-radius: .75rem; padding: .9rem; }
.permission-search-toolbar { align-items: end; background: #f8fafc; border: 1px solid var(--border); border-radius: .7rem; display: grid; gap: .75rem; grid-template-columns: minmax(260px, 1fr) auto; padding: .75rem; }
.permission-search-toolbar label { margin: 0; }
.permission-search-toolbar span { color: var(--muted); font-weight: 800; white-space: nowrap; }
.permission-matrix-scroll { display: grid; gap: .75rem; max-height: 62vh; overflow: auto; padding-right: .35rem; }
.permission-module-group { background: #fff; }
.permission-matrix-row { align-items: center; border-top: 1px solid var(--border); display: grid; gap: .65rem; grid-template-columns: minmax(0, 1fr) auto; padding: .55rem 0; }
.permission-matrix-row .permission-help-card,
.permission-override-row .permission-help-card { grid-column: 1 / -1; }
.permission-matrix-row.permission-search-match { background: #fef9c3; border-radius: .55rem; padding-left: .45rem; padding-right: .45rem; }
.permission-matrix-row:first-of-type { border-top: 0; }
.permission-matrix-row label { align-items: flex-start; display: flex; gap: .5rem; margin: 0; min-width: 0; }
.permission-matrix-row span { min-width: 0; }
.permission-link-icon { align-items: center; background: #f8fafc; border: 1px solid var(--border); border-radius: .45rem; color: var(--primary-dark); display: inline-flex; font-weight: 900; min-height: 2rem; justify-content: center; padding: 0 .55rem; text-decoration: none; white-space: nowrap; }
.permission-link-icon:hover { background: #eef2ff; border-color: #c7d2fe; }
.permission-link-text { min-width: 4.25rem; }
.permission-dependency-modal { background: #fff7ed; border: 1px solid #fed7aa; border-radius: .75rem; box-shadow: 0 18px 45px rgba(15,23,42,.18); display: grid; gap: .75rem; margin: .75rem 0; padding: .9rem; }
.permission-dependency-modal[hidden] { display: none; }
.permission-dependency-modal h3 { margin: .1rem 0 .25rem; }
.permission-dependency-modal ul { display: grid; gap: .35rem; margin: .4rem 0 0; padding-left: 1.2rem; }
.permission-dependency-highlight { background: #fffbeb; border-radius: .55rem; outline: 2px solid #f59e0b; outline-offset: 2px; padding-left: .45rem; padding-right: .45rem; }
.preset-inline-form { align-items: end; display: grid; gap: .75rem; grid-template-columns: minmax(14rem, 1fr) minmax(14rem, 1fr) auto; margin: .75rem 0 1rem; }
.preset-import-form { display: grid; gap: .75rem; margin-top: 1rem; }
.preset-import-form textarea { min-height: 6rem; }
.role-preset-save-panel { margin-bottom: 1rem; }
.permission-compare-panel { background: #fff; border: 1px solid var(--border); border-radius: .75rem; display: grid; gap: .85rem; margin: 1rem 0; padding: .9rem; }
.permission-compare-panel h3,
.permission-compare-panel h4,
.permission-health-lists h3 { margin: 0; }
.permission-compare-controls { display: grid; gap: .75rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.permission-compare-controls label { margin: 0; }
.permission-compare-results,
.permission-health-lists { display: grid; gap: .75rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.permission-compare-column,
.permission-health-lists section { background: #f8fafc; border: 1px solid var(--border); border-radius: .65rem; display: grid; gap: .55rem; padding: .75rem; }
.permission-compare-column ul,
.permission-health-lists ul { display: grid; gap: .35rem; margin: 0; padding-left: 1.1rem; }
.compare-symbol { font-weight: 900; }
.compare-added { color: #15803d; }
.compare-missing { color: #b91c1c; }
.compare-same { color: #1d4ed8; }
.permission-health-grid { display: grid; gap: .75rem; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: .9rem; }
.permission-health-grid article { background: #f8fafc; border: 1px solid var(--border); border-radius: .65rem; display: grid; gap: .35rem; padding: .75rem; }
.permission-health-grid span { font-size: 1.35rem; font-weight: 900; }
.check-list { color: var(--muted); line-height: 1.6; padding-left: 1.2rem; }
.status-card { margin-bottom: 1rem; }
.status-card.success { border-color: #86efac; background: #f0fdf4; }
.table-card { margin-top: 1rem; }
.table-scroll { border-radius: .85rem; overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { border-collapse: collapse; min-width: 760px; width: 100%; }
th, td { border-bottom: 1px solid var(--border); padding: .75rem; text-align: left; vertical-align: top; }
th { color: var(--muted); font-size: .8rem; letter-spacing: .04em; text-transform: uppercase; }
code { background: #eef2ff; border-radius: .35rem; color: #3730a3; padding: .15rem .35rem; }

.form-grid { display: grid; gap: 1rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.customer-form textarea, .inline-card-form textarea { width: 100%; }
.detail-list { display: grid; gap: .5rem 1rem; grid-template-columns: max-content minmax(0, 1fr); margin: 0; }
.detail-list dt { color: var(--muted); font-weight: 800; }
.detail-list dd { margin: 0; }
.sub-card, .placeholder-card, .empty-state { background: #f8fafc; border: 1px solid var(--border); border-radius: .85rem; padding: 1rem; }
.inline-card-form { background: #f8fafc; border: 1px dashed var(--border); border-radius: .85rem; margin-top: 1rem; padding: 1rem; }
.placeholder-grid { display: grid; gap: 1rem; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.warning-button { background: #fff7ed; border-color: #fed7aa; color: #9a3412; }
.status-deleted { background: #e5e7eb; color: #374151; }
.status-lead { background: #dbeafe; color: #1e40af; }
.status-on_hold { background: #fef3c7; color: #92400e; }
.customer-toolbar { align-items: center; display: flex; gap: 1rem; justify-content: space-between; margin-bottom: 1rem; }
.customer-toolbar h3 { margin: 0 0 .25rem; }
.customer-filters { align-items: end; display: grid; gap: 1rem; grid-template-columns: minmax(240px, 2fr) repeat(3, minmax(150px, 1fr)) auto; margin-bottom: 1rem; }
.customer-filters label { margin: 0; }
.filter-actions { align-items: center; display: flex; gap: .5rem; }
.customer-card-list { display: none; gap: 1rem; }
.customer-list-card { background: #f8fafc; border: 1px solid var(--border); border-radius: .85rem; display: grid; gap: .75rem; padding: 1rem; }
.form-instructions, .muted-note { color: var(--muted); }
.form-subsection { background: #f8fafc; border: 1px solid var(--border); border-radius: .85rem; padding: 1rem; }
.form-subsection h3 { margin-top: 0; }
.duplicate-warning { background: #fff7ed; border: 1px solid #fed7aa; border-radius: .75rem; margin-top: .75rem; padding: .75rem; }
.warning-confirm { background: #fffbeb; border-color: #f59e0b; }
.inline-editor { border-top: 1px solid var(--border); margin-top: .75rem; padding-top: .75rem; }
.inline-editor summary { color: var(--primary); cursor: pointer; font-weight: 800; }
.sub-card.is-deleted { opacity: .72; }
.sub-card.is-deleted strong { color: #6b7280; }

@media (max-width: 1100px) {
    .form-grid, .placeholder-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .quick-permissions-grid, .permission-health-grid, .permission-compare-results, .permission-health-lists { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .customer-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .filter-actions { align-items: stretch; flex-direction: column; }
}

@media (max-width: 900px) {
    .app-shell.nav-left, .app-shell.nav-right { grid-template-columns: 1fr; }
    .app-sidebar { min-height: auto; position: static; }
    .side-nav { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
    .global-topbar { grid-template-columns: 1fr; position: static; }
    .account-area-top { align-items: stretch; flex-wrap: wrap; justify-content: flex-start; }
    .top-nav, .bottom-nav { flex-wrap: wrap; overflow: visible; }
    .beta-company-switcher { width: 100%; }
    .cards-3, .cards-2, .module-grid, .layout-grid, .checkbox-grid { grid-template-columns: 1fr; }
    .layout-card.layout-half, .layout-card.layout-quarter { grid-column: 1 / -1; }
    .card-heading-row { flex-direction: column; }
    .layout-controls { justify-content: flex-start; max-width: 100%; }
}

@media (max-width: 760px) {
    .main-content { padding: .75rem; }
    .page-header { align-items: flex-start; flex-direction: column; }
    .form-grid, .placeholder-grid, .detail-list { grid-template-columns: 1fr; }
    .quick-permissions-grid, .permission-search-toolbar, .permission-compare-controls, .permission-health-grid, .permission-compare-results, .permission-health-lists { grid-template-columns: 1fr; }
    .permission-search-toolbar span { white-space: normal; }
    .customer-toolbar { align-items: stretch; flex-direction: column; }
    .customer-filters { grid-template-columns: 1fr; }
    .customer-table { display: none; }
    .customer-card-list { display: grid; }
    .primary-action, .customer-toolbar .button-link { text-align: center; }
    table { min-width: 680px; }
}

@media (max-width: 560px) {
    .account-area { align-items: stretch; display: grid; }
    .nav-preference-form,
    .experience-mode-form { align-items: stretch; display: grid; grid-template-columns: 1fr auto; }
    .experience-mode-toggle { grid-column: 1 / -1; }
    .logout-button { width: 100%; }
    .btn-toolbar { flex: 1 1 auto; }
}

.foundation-actions { align-items: center; display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1rem; }
.operational-layout-grid { margin-bottom: 1rem; }
.operational-form { display: grid; gap: .8rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.operational-form.compact-form { align-items: end; border-top: 1px solid var(--border); margin-top: 1rem; padding-top: 1rem; }
.operational-form .full-span, .operational-form button { grid-column: 1 / -1; }
.checkbox-label { align-items: center; display: flex; gap: .5rem; }
.checkbox-label input { width: auto; }
.button-row { display: flex; flex-wrap: wrap; gap: .5rem; }
@media (max-width: 760px) {
    .operational-form { grid-template-columns: 1fr; }
    .foundation-actions { align-items: stretch; flex-direction: column; }
    .foundation-actions .btn { width: 100%; }
}

.service-photo-thumb {
    width: 72px;
    height: 54px;
    object-fit: cover;
    border-radius: 0.5rem;
    border: 1px solid var(--border-color, #d8dee8);
    background: #f8fafc;
}

.service-photo-primary {
    max-width: min(100%, 420px);
    max-height: 280px;
    object-fit: cover;
    border-radius: 0.75rem;
    border: 1px solid var(--border-color, #d8dee8);
    background: #f8fafc;
}

.service-photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1rem;
}

.service-photo-card {
    display: grid;
    grid-template-columns: 88px 1fr;
    gap: 0.75rem;
    align-items: start;
    padding: 0.75rem;
    border: 1px solid var(--border-color, #d8dee8);
    border-radius: 0.75rem;
    background: #fff;
}

.fast-photo-selected-summary,
.fast-photo-upload-progress,
.fast-photo-local-outbox,
.fast-photo-server-preview-grid {
    grid-column: 1 / -1;
}

.fast-photo-selected-summary {
    color: var(--muted);
    font-size: .85rem;
    font-weight: 700;
}

.fast-photo-upload-progress {
    display: grid;
    gap: .35rem;
}

.fast-photo-retry-upload {
    justify-self: start;
}

.fast-photo-upload-progress progress {
    width: 100%;
    height: .85rem;
}

.fast-photo-local-outbox {
    align-items: center;
    background: #f8fafc;
    border: 1px solid var(--border-color, #d8dee8);
    border-radius: .5rem;
    display: grid;
    gap: .45rem;
    padding: .55rem;
}

.fast-photo-local-outbox-chip-row,
.fast-photo-local-outbox-actions,
.media-outbox-browser-diagnostics {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
}

.fast-photo-local-outbox small {
    color: var(--muted);
}

.fast-photo-storage-warning {
    display: block;
    margin: 0;
}

.fast-photo-retry-history {
    color: var(--muted);
    font-size: .78rem;
    margin: .25rem 0 0 1.2rem;
}

.fast-photo-local-clear-dialog {
    border: 1px solid var(--border-color, #d8dee8);
    border-radius: .75rem;
    max-width: min(92vw, 420px);
    padding: 1rem;
}

.media-outbox-browser-diagnostics {
    background: #f8fafc;
    border: 1px solid var(--border-color, #d8dee8);
    border-radius: .55rem;
    margin-top: .75rem;
    padding: .65rem;
}

.global-media-outbox-status {
    /* Removed fixed positioning to allow inline rendering on the dashboard */
}

.global-media-outbox-chip {
    box-shadow: 0 10px 30px rgba(15, 23, 42, .14);
    cursor: pointer;
}

.global-media-outbox-dialog {
    border: 1px solid var(--border-color, #d8dee8);
    border-radius: .75rem;
    max-width: min(92vw, 460px);
    padding: 1rem;
}

.global-media-outbox-record {
    border: 1px solid var(--border-color, #d8dee8);
    border-radius: .5rem;
    display: grid;
    gap: .2rem;
    margin: .45rem 0;
    padding: .55rem;
}

.fast-photo-camera-panel {
    grid-column: 1 / -1;
    display: grid;
    gap: .55rem;
    padding: .65rem;
    border: 1px solid var(--border-color, #d8dee8);
    border-radius: .5rem;
    background: #f8fafc;
}

.fast-photo-camera-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    align-items: center;
}

.fast-photo-camera-mode-button,
.fast-photo-record-button {
    min-height: 3.25rem;
    font-weight: 800;
}

.fast-photo-take-button {
    flex: 1 1 13rem;
    min-height: 4.35rem;
    padding: 1rem 1.45rem;
    font-size: 1.18rem;
    font-weight: 800;
}

.fast-photo-video-quality select {
    min-height: 2.2rem;
}

.fast-photo-camera-video {
    width: 100%;
    height: min(72vh, 760px);
    max-height: 72vh;
    object-fit: contain;
    border-radius: .5rem;
    background: #0f172a;
}

.fast-photo-camera-status {
    color: var(--muted);
    overflow-wrap: anywhere;
}

.fast-photo-camera-help {
    color: var(--muted);
    font-size: .85rem;
}

.fast-photo-camera-help summary {
    cursor: pointer;
    font-weight: 700;
}

.fast-photo-video-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
}

.fast-photo-video-option {
    align-items: center;
    display: inline-flex;
    gap: .35rem;
    margin: 0;
}

.work-order-recording-indicator {
    align-items: center;
    background: #fee2e2;
    border: 1px solid #fecaca;
    border-radius: .5rem;
    color: #991b1b;
    display: inline-flex;
    font-weight: 800;
    gap: .35rem;
    min-height: 2.4rem;
    padding: .45rem .65rem;
}

.work-order-recording-indicator::before {
    background: #dc2626;
    border-radius: 999px;
    content: "";
    display: inline-block;
    height: .72rem;
    width: .72rem;
}

.fast-photo-video-playback {
    background: #0f172a;
    border-radius: .5rem;
    height: min(56vh, 620px);
    max-height: 56vh;
    object-fit: contain;
    width: 100%;
}

.administration-media-policy-form {
    margin-top: .65rem;
}

.administration-media-policy-company {
    min-width: 0;
}

.administration-media-policy-company .form-grid-4 {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

@media (max-width: 760px) {
    .fast-photo-take-button {
        width: 100%;
        min-height: 5rem;
        font-size: 1.28rem;
    }

    .fast-photo-camera-video {
        height: min(70vh, 760px);
        max-height: 70vh;
    }

    .fast-photo-camera-mode-button,
    .fast-photo-record-button,
    .fast-photo-video-actions,
    .fast-photo-video-actions .btn,
    .fast-photo-video-option {
        width: 100%;
    }

    .fast-photo-video-playback {
        height: min(46vh, 560px);
        max-height: 46vh;
    }

}

.fast-photo-selected-grid,
.fast-photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: .6rem;
}

.fast-photo-client-preview,
.fast-photo-preview-card {
    min-width: 0;
    border: 1px solid var(--border-color, #d8dee8);
    border-radius: .5rem;
    background: #fff;
    overflow: hidden;
}

.fast-photo-client-preview {
    margin: 0;
}

.fast-photo-client-preview img,
.fast-photo-preview-card img,
.fast-photo-preview-card video,
.fast-photo-video-poster-placeholder {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    background: #f8fafc;
}

.fast-photo-preview-card.is-video video,
.fast-photo-video-poster-placeholder {
    align-items: center;
    background: #0f172a;
    color: #fff;
    display: flex;
    justify-content: center;
    font-weight: 800;
}

.fast-photo-client-preview figcaption,
.fast-photo-preview-card > div {
    padding: .45rem;
    font-size: .78rem;
}

.fast-photo-client-preview .btn {
    margin: 0 .45rem .45rem;
    width: calc(100% - .9rem);
}

.photo-viewer-main {
    background: #f8fafc;
}

.photo-swipe-stage video {
    background: #0f172a;
    max-height: 76vh;
    max-width: 100%;
    object-fit: contain;
    width: 100%;
}

.photo-swipe-viewer {
    display: grid;
    gap: 0;
    margin: 0 auto;
    max-width: 1280px;
    min-height: calc(100vh - 8rem);
}

.photo-swipe-stage {
    position: relative;
    display: grid;
    place-items: center;
    min-height: min(76vh, 820px);
    background: #111827;
    border-radius: .5rem .5rem 0 0;
    overflow: hidden;
}

.photo-swipe-stage img {
    display: block;
    width: 100%;
    max-height: min(76vh, 820px);
    object-fit: contain;
    background: #111827;
}

.photo-swipe-arrow {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 3rem;
    height: 4rem;
    margin-top: -2rem;
    color: #111827;
    text-decoration: none;
    font-size: 2.4rem;
    line-height: 1;
    background: rgba(255, 255, 255, .9);
    border: 1px solid rgba(17, 24, 39, .18);
}

.photo-swipe-prev {
    left: .75rem;
}

.photo-swipe-next {
    right: .75rem;
}

.photo-swipe-arrow.is-disabled {
    opacity: .35;
}

.photo-swipe-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    background: #fff;
    border: 1px solid var(--border-color, #d8dee8);
    border-top: 0;
    border-radius: 0 0 .5rem .5rem;
}

.photo-swipe-details {
    min-width: min(100%, 22rem);
}

.photo-swipe-details h1 {
    margin: .15rem 0 .25rem;
    font-size: clamp(1.25rem, 2.8vw, 1.9rem);
    line-height: 1.15;
}

.photo-swipe-details p {
    margin: .2rem 0;
}

.photo-swipe-kicker {
    color: var(--muted);
    font-size: .82rem;
    font-weight: 800;
    text-transform: uppercase;
}

.photo-swipe-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin-top: .5rem;
}

.photo-swipe-capture-meta {
    gap: .5rem;
}

.photo-swipe-capture-meta div {
    min-width: 7.5rem;
    padding: .45rem .6rem;
    border: 1px solid var(--border-color, #d8dee8);
    border-radius: .45rem;
    background: #f8fafc;
}

.photo-swipe-capture-meta dt {
    color: var(--muted);
    font-size: .72rem;
    font-weight: 800;
    text-transform: uppercase;
}

.photo-swipe-capture-meta dd {
    margin: .12rem 0 0;
    font-weight: 800;
}

.photo-swipe-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    justify-content: flex-end;
}

@media (max-width: 760px) {
    .photo-swipe-viewer {
        min-height: calc(100vh - 4rem);
    }

    .photo-swipe-stage {
        min-height: 64vh;
        border-radius: 0;
    }

    .photo-swipe-stage img {
        max-height: 64vh;
    }

    .photo-swipe-arrow {
        width: 2.5rem;
        height: 3.5rem;
        font-size: 2rem;
    }

    .photo-swipe-prev {
        left: .35rem;
    }

    .photo-swipe-next {
        right: .35rem;
    }

    .photo-swipe-footer {
        align-items: stretch;
        border-radius: 0;
    }

    .photo-swipe-actions,
    .photo-swipe-actions .btn {
        width: 100%;
    }

    .photo-swipe-actions {
        justify-content: stretch;
    }
}

.fast-photo-server-preview-grid {
    margin-top: .85rem;
    display: grid;
    gap: .85rem;
}

.customer-publish-packet-preview {
    align-items: center;
    background: #f8fafc;
    border: 1px solid var(--border-color, #d8dee8);
    border-radius: .55rem;
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    padding: .6rem;
}

.customer-publish-packet-preview small {
    flex: 1 1 220px;
}

.mobile-uploaded-photo-review {
    display: grid;
    gap: .65rem;
    grid-column: 1 / -1;
}

.fast-photo-group {
    display: grid;
    gap: .45rem;
}

.fast-photo-group h3 {
    margin: 0;
    font-size: .95rem;
}

.photo-status-badge {
    margin-left: .25rem;
    white-space: nowrap;
}

.file-review-saved-views,
.file-photo-group-bulk-editor {
    background: #f8fafc;
    border: 1px solid var(--border-color, #d8dee8);
    border-radius: .65rem;
    display: grid;
    gap: .6rem;
    grid-column: 1 / -1;
    padding: .75rem;
}

.file-review-saved-views h3,
.file-photo-group-bulk-editor h3 {
    font-size: .95rem;
    margin: 0;
}

.file-review-saved-views .button-row {
    align-items: stretch;
}

.file-photo-group-bulk-editor textarea {
    min-height: 4.25rem;
}

/* Scheduling + employee workflow connected usable V1 */
.scheduling-workspace .layout-card-body { overflow-x: auto; }
.scheduling-date-selector .filter-grid,
.scheduling-map-filters,
.compact-form,
.filter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: .65rem;
    align-items: end;
}
.schedule-board,
.work-order-open-list,
.map-marker-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: .85rem;
}
.schedule-card,
.map-marker-card,
.route-group-card {
    border: 1px solid var(--border-color, #d8dee8);
    border-radius: 14px;
    padding: .85rem;
    background: var(--panel-bg, #fff);
    box-shadow: 0 1px 2px rgba(16, 24, 40, .06);
}
.schedule-card h3,
.map-marker-card h3,
.route-group-card h3 { margin: 0 0 .35rem; }
.map-placeholder-panel {
    min-height: 220px;
    margin: .85rem 0;
    border: 2px dashed #9bb5d4;
    border-radius: 18px;
    padding: 1rem;
    background: linear-gradient(135deg, rgba(52, 112, 255, .08), rgba(34, 197, 94, .08));
}
.map-marker-card.scheduled { border-left: 5px solid #2563eb; }
.map-marker-card.unscheduled { border-left: 5px solid #f59e0b; }
.route-group-builder { margin-bottom: 1rem; }
.empty-state-inline,
.muted { color: #667085; font-size: .92rem; }
@media (max-width: 720px) {
    .scheduling-map-filters,
    .compact-form,
    .filter-grid { grid-template-columns: 1fr; }
    .schedule-board,
    .work-order-open-list,
    .map-marker-list { grid-template-columns: 1fr; }
}

.mobile-staff-main {
    width: 100%;
    max-width: none;
    padding-inline: max(10px, env(safe-area-inset-left)) max(10px, env(safe-area-inset-right));
}

.mobile-staff-page {
    width: 100%;
    max-width: none;
    margin: 0;
    display: grid;
    gap: 12px;
}

.mobile-staff-header {
    display: grid;
    gap: 10px;
    width: 100%;
    padding: 12px;
    border: 1px solid #d9e4ef;
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .06);
}

.mobile-staff-header h1 {
    margin: 2px 0 0;
    font-size: 1.45rem;
    line-height: 1.15;
    letter-spacing: 0;
}

.mobile-staff-return {
    color: #0f766e;
    font-weight: 800;
    text-decoration: none;
}

.mobile-staff-mode-selector {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    width: 100%;
}

.mobile-staff-mode-selector a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    color: #1f2937;
    text-decoration: none;
    font-weight: 800;
    background: #f8fafc;
}

.mobile-staff-mode-selector a[aria-current="page"] {
    border-color: #0f766e;
    background: #e6f6f3;
    color: #0f4f49;
}

.mobile-staff-header-actions,
.mobile-staff-record-actions,
.mobile-staff-list-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.mobile-staff-filter-bar {
    width: 100%;
    display: grid;
    gap: 8px;
    grid-template-columns: 1fr;
    padding: 10px;
    border: 1px solid #dde7ef;
    border-radius: 8px;
    background: #f7fbfd;
}

.mobile-staff-filter-bar label {
    display: grid;
    gap: 4px;
    color: #334155;
    font-size: .78rem;
    font-weight: 800;
}

.mobile-staff-filter-bar input,
.mobile-staff-filter-bar select {
    width: 100%;
    min-height: 44px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 1rem;
    background: #fff;
}

.mobile-staff-list-meta {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
    width: 100%;
    padding: 8px 2px;
    color: #475569;
    font-size: .82rem;
}

.mobile-staff-list-meta strong {
    color: #7f1d1d;
    white-space: nowrap;
}

.mobile-staff-record-list {
    width: 100%;
    display: grid;
    gap: 10px;
}

.mobile-staff-record-card,
.mobile-staff-action-card,
.mobile-staff-advanced-links {
    width: 100%;
    border: 1px solid #d9e4ef;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 8px 22px rgba(31, 41, 55, .06);
}

.mobile-staff-record-card {
    display: grid;
    gap: 10px;
    padding: 12px;
}

.mobile-staff-record-top {
    display: flex;
    gap: 8px;
    justify-content: space-between;
    align-items: flex-start;
}

.mobile-staff-record-top h2 {
    margin: 2px 0 0;
    font-size: 1.08rem;
    line-height: 1.2;
    letter-spacing: 0;
    overflow-wrap: anywhere;
}

.mobile-staff-record-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin: 0;
}

.mobile-staff-record-meta div {
    min-width: 0;
    padding: 8px;
    border-radius: 8px;
    background: #f8fafc;
}

.mobile-staff-record-meta dt {
    margin: 0 0 2px;
    color: #64748b;
    font-size: .68rem;
    font-weight: 900;
    text-transform: uppercase;
}

.mobile-staff-record-meta dd {
    margin: 0;
    color: #111827;
    font-size: .88rem;
    font-weight: 750;
    overflow-wrap: anywhere;
}

.mobile-staff-action-grid {
    width: 100%;
    display: grid;
    gap: 10px;
}

.mobile-staff-action-card {
    min-height: 54px;
    display: flex;
    align-items: center;
    padding: 12px;
    color: #172554;
    text-decoration: none;
    border-left: 5px solid #2563eb;
}

.mobile-staff-action-card:nth-child(2n) {
    border-left-color: #0f766e;
}

.mobile-staff-action-card:nth-child(3n) {
    border-left-color: #b45309;
}

.mobile-staff-advanced-links {
    padding: 12px;
}

.mobile-staff-advanced-links h2 {
    margin: 0 0 8px;
    font-size: 1rem;
}

.mobile-staff-advanced-links div {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.mobile-staff-advanced-links a {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    padding: 7px 10px;
    border-radius: 8px;
    background: #eef2ff;
    color: #312e81;
    text-decoration: none;
    font-weight: 800;
}

.mobile-staff-empty {
    margin: 0;
    padding: 12px;
    border: 1px dashed #cbd5e1;
    border-radius: 8px;
    background: #fff;
    color: #475569;
}

[data-mobile-list-sentinel] {
    display: block;
    width: 100%;
    height: 1px;
}

.mobile-employee-schedule-page {
    gap: 10px;
}

.mobile-employee-calendar-shell,
.mobile-employee-day-summary,
.mobile-employee-stop-card,
.mobile-employee-scope-note,
.mobile-employee-schedule-filter,
.mobile-employee-schedule-advanced {
    background: #fff;
    border: 1px solid #d9e4ef;
    border-radius: 8px;
    box-shadow: none;
    box-sizing: border-box;
    width: 100%;
}

.mobile-employee-calendar-shell {
    display: grid;
    gap: 8px;
    padding: 10px;
}

.mobile-employee-calendar-nav {
    align-items: center;
    display: grid;
    gap: 8px;
    grid-template-columns: 44px minmax(0, 1fr) 44px;
}

.mobile-employee-calendar-nav a {
    align-items: center;
    background: #e9f8ef;
    border: 1px solid #bbefca;
    border-radius: 8px;
    color: #15803d;
    display: inline-flex;
    font-size: 1.3rem;
    font-weight: 900;
    justify-content: center;
    min-height: 44px;
    text-decoration: none;
}

.mobile-employee-calendar-nav strong {
    color: #334155;
    font-size: 1.25rem;
    text-align: center;
}

.mobile-employee-calendar-weekdays,
.mobile-employee-calendar-grid {
    display: grid;
    gap: 4px;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    width: 100%;
}

.mobile-employee-calendar-weekdays span {
    color: #475569;
    font-size: .72rem;
    font-weight: 900;
    text-align: center;
}

.mobile-employee-calendar-day {
    align-items: center;
    aspect-ratio: .82;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    box-sizing: border-box;
    color: #334155;
    display: grid;
    gap: 1px;
    justify-items: center;
    min-width: 0;
    overflow: hidden;
    padding: 3px;
    text-decoration: none;
}

.mobile-employee-calendar-day.is-selected {
    background: #22c55e;
    border-color: #22c55e;
    color: #fff;
}

.mobile-employee-calendar-day.is-today:not(.is-selected) {
    border-color: #22c55e;
    box-shadow: inset 0 0 0 1px #22c55e;
}

.mobile-employee-calendar-day.is-outside-month {
    color: #cbd5e1;
    opacity: .72;
}

.mobile-employee-calendar-day.has-warning:not(.is-selected) {
    border-color: #f59e0b;
}

.mobile-employee-calendar-day strong {
    font-size: clamp(.92rem, 4vw, 1.15rem);
    line-height: 1;
}

.mobile-employee-calendar-day small,
.mobile-employee-calendar-day em {
    font-size: .58rem;
    font-style: normal;
    font-weight: 850;
    line-height: 1;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mobile-employee-calendar-color-stack {
    align-content: center;
    display: grid;
    gap: 1px;
    min-height: 10px;
    width: 100%;
}

.mobile-employee-calendar-color-stack.is-empty {
    min-height: 10px;
}

.mobile-employee-calendar-color-bar {
    display: grid;
    gap: 1px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    height: 3px;
    width: 100%;
}

.mobile-employee-calendar-color-bar i {
    border-radius: 999px;
    display: block;
    min-width: 0;
}

.mobile-employee-calendar-color-bar i:nth-child(1) { background: var(--status-color, #22c55e); }
.mobile-employee-calendar-color-bar i:nth-child(2) { background: var(--manual-color, #22c55e); }
.mobile-employee-calendar-color-bar i:nth-child(3) { background: var(--team-color, #64748b); }

.mobile-employee-day-summary {
    align-items: center;
    display: grid;
    gap: 8px;
    grid-template-columns: minmax(0, 1fr) auto auto;
    padding: 10px;
}

.mobile-employee-day-summary div {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.mobile-employee-day-summary div strong {
    color: #334155;
    font-size: 1rem;
}

.mobile-employee-day-summary div span {
    color: #64748b;
    font-size: .78rem;
    font-weight: 800;
}

.mobile-employee-route-map-button {
    align-items: center;
    background: #e8f9ee;
    border: 1px solid #a7e7bc;
    border-radius: 8px;
    color: #16a34a;
    display: inline-flex;
    font-weight: 900;
    gap: 6px;
    justify-content: center;
    min-height: 44px;
    min-width: 62px;
    padding: 7px 10px;
    text-decoration: none;
}

.mobile-employee-route-map-button span {
    border: 2px solid currentColor;
    border-radius: 999px;
    display: inline-block;
    height: 15px;
    position: relative;
    width: 15px;
}

.mobile-employee-route-map-button span::after {
    background: currentColor;
    border-radius: 999px;
    content: "";
    height: 5px;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 5px;
}

.mobile-employee-day-value {
    color: #16a34a;
    font-size: 1.08rem;
    text-align: right;
    white-space: nowrap;
}

.mobile-employee-stop-list {
    display: grid;
    gap: 8px;
    width: 100%;
}

.mobile-employee-stop-card {
    border-left: 5px solid var(--status-color, #22c55e);
    display: grid;
    gap: 8px;
    padding: 10px;
}

.mobile-employee-stop-card > .mobile-employee-calendar-color-bar {
    height: 5px;
}

.mobile-employee-stop-top {
    align-items: start;
    display: grid;
    gap: 8px;
    grid-template-columns: minmax(0, 1fr) auto;
}

.mobile-employee-stop-top div {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.mobile-employee-stop-top strong,
.mobile-employee-stop-top span,
.mobile-employee-stop-card p,
.mobile-employee-stop-meta span,
.mobile-employee-schedule-advanced-note {
    overflow-wrap: anywhere;
}

.mobile-employee-stop-top strong {
    color: #0f172a;
    font-size: 1rem;
}

.mobile-employee-stop-top span,
.mobile-employee-stop-card p,
.mobile-employee-stop-meta span {
    color: #475569;
}

.mobile-employee-stop-top b {
    color: #334155;
    font-size: 1rem;
    white-space: nowrap;
}

.mobile-employee-stop-card p {
    margin: 0;
}

.mobile-employee-stop-meta {
    display: grid;
    gap: 4px;
}

.mobile-employee-scope-note,
.mobile-employee-schedule-filter {
    align-items: end;
    display: grid;
    gap: 8px;
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 10px;
}

.mobile-employee-scope-note {
    align-items: start;
}

.mobile-employee-scope-note strong,
.mobile-employee-schedule-filter label {
    color: #334155;
    font-size: .78rem;
    font-weight: 900;
}

.mobile-employee-scope-note span {
    color: #475569;
}

.mobile-employee-schedule-filter label {
    display: grid;
    gap: 4px;
    margin: 0;
}

.mobile-employee-schedule-filter select {
    min-height: 44px;
}

.mobile-employee-schedule-advanced {
    display: grid;
    gap: 10px;
    padding: 10px;
}

.mobile-employee-schedule-advanced h2 {
    font-size: 1rem;
    margin: 0;
}

.mobile-employee-schedule-advanced-note {
    color: #475569;
    margin: 0;
}

.mobile-schedule-map-main {
    margin: 0 ;
    max-width: none ;
    overflow: hidden ;
    padding: 0 ;
    width: 100% ;
}

.mobile-schedule-map-main .page-header,
.mobile-schedule-map-main .mobile-app-bar,
.mobile-schedule-map-main .global-topbar,
.mobile-schedule-map-main .bottom-nav-shell {
    display: none ;
}

.mobile-schedule-map-page {
    background: #e5eef5;
    height: 100vh;
    height: 100dvh;
    margin: 0;
    min-height: 100vh;
    min-height: 100dvh;
    overflow: hidden;
    position: relative;
    width: 100%;
}

.mobile-schedule-map-back {
    align-items: center;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    color: #14532d;
    display: inline-flex;
    font-weight: 900;
    left: max(10px, env(safe-area-inset-left));
    min-height: 40px;
    padding: 7px 10px;
    position: absolute;
    text-decoration: none;
    top: max(10px, env(safe-area-inset-top));
    z-index: 600;
}

.mobile-schedule-day-map {
    height: 100vh;
    height: 100dvh;
    min-height: 100vh;
    min-height: 100dvh;
    width: 100%;
}

.mobile-schedule-map-empty {
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    color: #475569;
    left: 50%;
    margin: 0;
    padding: 10px 12px;
    position: absolute;
    text-align: center;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 601;
}

.mobile-schedule-map-pin span {
    align-items: center;
    background: #22c55e;
    border: 2px solid #fff;
    border-radius: 999px;
    box-shadow: 0 4px 12px rgba(15, 23, 42, .28);
    color: #fff;
    display: inline-flex;
    font-weight: 900;
    height: 34px;
    justify-content: center;
    width: 34px;
}

.calendar-mobile-day-tile .calendar-color-bar {
    position: static;
    display: block;
    width: 100%;
    height: 4px;
    margin: 0 0 5px;
    border-radius: 999px;
}

.calendar-mobile-work-card .calendar-color-bar {
    position: static;
    display: block;
    width: 100%;
    height: 5px;
    margin: 0 0 6px;
    border-radius: 999px;
}

@media (min-width: 721px) {
    .mobile-staff-main {
        padding-inline: 18px;
    }

    .mobile-staff-page {
        max-width: 760px;
        margin-inline: auto;
    }

    .mobile-staff-filter-bar {
        grid-template-columns: minmax(180px, 2fr) minmax(140px, 1fr) minmax(140px, 1fr) auto;
        align-items: end;
    }

    .mobile-staff-filter-bar label:has(select[name="scheduled_state"]) {
        grid-column: auto;
    }

    .mobile-staff-action-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .mobile-staff-main .page-header {
        display: none;
    }

    .mobile-staff-main {
        padding-top: 8px;
        padding-bottom: max(18px, env(safe-area-inset-bottom));
    }

    .mobile-staff-record-meta {
        grid-template-columns: 1fr;
    }

    .mobile-staff-list-meta {
        align-items: flex-start;
        flex-direction: column;
    }

    .mobile-staff-header .btn,
    .mobile-staff-record-actions .btn,
    .mobile-staff-list-controls .btn {
        width: 100%;
        justify-content: center;
    }

    .mobile-employee-schedule-page {
        gap: 8px;
    }

    .mobile-employee-calendar-shell,
    .mobile-employee-day-summary,
    .mobile-employee-stop-card,
    .mobile-employee-scope-note,
    .mobile-employee-schedule-filter,
    .mobile-employee-schedule-advanced {
        border-left: 0;
        border-right: 0;
        border-radius: 0;
    }

    .mobile-employee-schedule-filter,
    .mobile-employee-scope-note {
        grid-template-columns: 1fr;
    }

    .mobile-employee-day-summary {
        align-items: center;
        grid-template-columns: minmax(0, 1fr) auto auto;
    }

    .mobile-employee-route-map-button,
    .mobile-employee-day-value {
        width: auto;
    }

    .mobile-employee-day-value {
        text-align: right;
    }

    .mobile-employee-calendar-shell {
        padding: 8px 6px;
    }
}
.selected-work-orders-list {
    list-style: none;
    padding: 0;
    margin: .75rem 0;
    display: grid;
    gap: .45rem;
}
.selected-work-orders-list li {
    display: flex;
    justify-content: space-between;
    gap: .5rem;
    align-items: center;
    border: 1px solid var(--border-color, #d8dee8);
    border-radius: 10px;
    padding: .45rem .55rem;
}
@media (max-width: 720px) {
    .selected-work-orders-list li { align-items: flex-start; flex-direction: column; }
}

/* Reports Payroll Commissions Financial Tracking — Connected Usable V1 */
.report-dashboard-grid, .payroll-dashboard-grid { align-items: start; }
.category-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .65rem; }
.category-card { border: 1px solid var(--border-color, #d8dee9); border-radius: 12px; padding: .75rem; background: var(--surface-muted, #f8fafc); font-weight: 700; display: flex; flex-direction: column; gap: .25rem; }
.category-card small { color: var(--muted-color, #64748b); font-weight: 500; }
.metric-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)); gap: .65rem; margin: 0 0 .75rem; }
.metric-list div { border: 1px solid var(--border-color, #d8dee9); border-radius: 12px; padding: .7rem; background: var(--surface-muted, #f8fafc); }
.metric-list dt { color: var(--muted-color, #64748b); font-size: .78rem; margin-bottom: .3rem; }
.metric-list dd { margin: 0; font-size: 1.1rem; font-weight: 800; }
.compact-filter-card { display: flex; flex-wrap: wrap; gap: .75rem; align-items: end; justify-content: space-between; }
.compact-form { display: flex; flex-wrap: wrap; gap: .65rem; align-items: end; }
.compact-form label { min-width: 130px; }
.compact-form input, .compact-form select, .compact-form textarea { min-height: 2rem; }
@media (max-width: 720px) { .compact-filter-card, .compact-form { display: grid; grid-template-columns: 1fr; } .compact-form label { min-width: 0; } }

/* Customer Portal Connected Usable V1 */
.public-shell {
    min-height: 100vh;
    background: linear-gradient(135deg, #eef6ff 0%, #f8fafc 45%, #ffffff 100%);
}
.public-shell .main-content {
    max-width: 1100px;
    margin: 0 auto;
    padding: 1rem;
}
.public-shell .main-content.administration-main-content {
    align-content: start;
    max-width: 90vw;
    width: 90vw;
}
.portal-public-shell {
    display: grid;
    gap: 1rem;
}
.portal-brand,
.portal-hero,
.portal-card {
    background: #fff;
    border: 1px solid #dbe5f0;
    border-radius: 14px;
    box-shadow: 0 10px 28px rgba(15, 23, 42, .07);
    padding: 1rem;
}
.portal-brand {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #0f172a;
}
.portal-hero {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
}
.portal-hero h1,
.portal-card h2,
.portal-card h3 { margin-top: 0; }
.portal-lines {
    display: grid;
    gap: .75rem;
}
.portal-lines article {
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: .85rem;
    background: #f8fafc;
}
.portal-photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: .75rem;
    margin-top: .75rem;
}
.portal-photo-grid img {
    width: 100%;
    height: 120px;
    object-fit: cover;
    border-radius: 10px;
    border: 1px solid #dbe5f0;
}
.portal-published-photo-gallery {
    display: grid;
    gap: .75rem;
}
.portal-published-photo-grid {
    display: grid;
    gap: .85rem;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.portal-published-photo-card {
    background: #fff;
    border: 1px solid #dbe5f0;
    border-radius: 10px;
    display: grid;
    gap: .55rem;
    margin: 0;
    overflow: hidden;
}
.portal-published-photo-card img {
    aspect-ratio: 4 / 3;
    background: #f8fafc;
    display: block;
    object-fit: cover;
    width: 100%;
}
.portal-published-photo-card figcaption {
    display: grid;
    gap: .45rem;
    padding: .65rem;
}
.portal-actions {
    display: grid;
    gap: .75rem;
}
.portal-file-list {
    padding-left: 1.2rem;
}
.portal-next-step-grid,
.portal-document-list li {
    display: grid;
    gap: .75rem;
}
.portal-next-step-grid {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.portal-next-step-card {
    background: #f8fafc;
    border: 1px solid #dbe5f0;
    border-radius: 8px;
    display: grid;
    gap: .5rem;
    min-width: 0;
    padding: .85rem;
}
.portal-next-step-card strong,
.portal-next-step-card span {
    min-width: 0;
    overflow-wrap: anywhere;
}
.portal-document-list li {
    align-items: center;
    grid-template-columns: minmax(0, 1fr) auto;
}
.portal-request-form {
    display: grid;
    gap: .85rem;
}
.portal-request-form .form-grid {
    display: grid;
    gap: .75rem;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.portal-request-form label,
.portal-request-form input,
.portal-request-form select,
.portal-request-form textarea {
    min-width: 0;
    width: 100%;
}
.portal-self-service {
    overflow-wrap: anywhere;
}
.portal-admin-panel {
    margin-top: 1rem;
    border-top: 1px solid #e2e8f0;
    padding-top: 1rem;
}
.copy-field {
    width: 100%;
    padding: .65rem;
    border: 1px solid #94a3b8;
    border-radius: 10px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}
@media (max-width: 640px) {
    .portal-brand,
    .portal-hero { align-items: flex-start; flex-direction: column; }
    .portal-actions .btn { width: 100%; }
    .portal-document-list li { grid-template-columns: 1fr; }
}

/* Global UI UX Overhaul — Visual Clarity V1 */
:root {
    --bg: #eef4fb;
    --panel: #ffffff;
    --panel-soft: #f7f9fc;
    --text: #111827;
    --muted: #596579;
    --primary: #2563eb;
    --primary-dark: #1d4ed8;
    --accent: #0f766e;
    --success: #15803d;
    --warning-strong: #b45309;
    --danger: #dc2626;
    --info: #0369a1;
    --border: #d5deeb;
    --border-strong: #b8c4d6;
    --shadow: 0 18px 45px rgba(15, 23, 42, .08);
    --shadow-soft: 0 8px 20px rgba(15, 23, 42, .06);
}

body {
    background:
        radial-gradient(circle at top left, rgba(37, 99, 235, .12), transparent 34rem),
        linear-gradient(180deg, #f8fbff 0%, var(--bg) 42%, #edf2f8 100%);
}

.main-content {
    --crm-workspace-width: 85vw;
    margin: 0 auto;
    max-width: var(--crm-workspace-width);
    width: min(100%, var(--crm-workspace-width));
}
.app-shell[data-workspace-width="wide"] .main-content {
    --crm-workspace-width: 85vw;
}
.app-shell[data-workspace-width="full"] .main-content {
    --crm-workspace-width: 100%;
}
.app-shell[data-ui-density="compact"] {
    --crm-density-card-padding: .85rem;
    --crm-density-field-gap: .65rem;
}
.app-shell[data-ui-density="compact"] .card,
.app-shell[data-ui-density="compact"] .layout-card,
.app-shell[data-ui-density="compact"] .module-intro,
.app-shell[data-ui-density="compact"] .page-header {
    padding: var(--crm-density-card-padding);
}
.app-shell[data-ui-density="compact"] .stacked-form,
.app-shell[data-ui-density="compact"] .form-grid,
.app-shell[data-ui-density="compact"] .form-grid-2,
.app-shell[data-ui-density="compact"] .form-grid-3,
.app-shell[data-ui-density="compact"] .form-grid-4,
.app-shell[data-ui-density="compact"] .button-row,
.app-shell[data-ui-density="compact"] .layout-grid,
.app-shell[data-ui-density="compact"] .grid {
    gap: var(--crm-density-field-gap);
}
@media (max-width: 760px) {
    .main-content {
        --crm-workspace-width: min(100%, calc(100vw - 1rem));
    }
}
.global-topbar { border-color: rgba(148, 163, 184, .45); box-shadow: 0 14px 30px rgba(15, 23, 42, .08); }
.compact-brand { background: linear-gradient(135deg, #0f172a, #1d4ed8); -webkit-background-clip: text; background-clip: text; color: transparent; }

.grouped-nav { gap: .35rem; }
.nav-group { position: relative; }
.nav-group > summary { list-style: none; }
.nav-group > summary::-webkit-details-marker { display: none; }
.nav-group-label { align-items: center; cursor: pointer; display: inline-flex; gap: .3rem; }
.nav-caret { color: var(--muted); font-size: .85rem; }
.nav-dropdown {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: .85rem;
    box-shadow: 0 18px 38px rgba(15, 23, 42, .14);
    display: none;
    gap: .25rem;
    min-width: 220px;
    padding: .45rem;
    position: absolute;
    top: calc(100% + .35rem);
    z-index: 50;
}
.nav-group[open] .nav-dropdown, .nav-group:hover .nav-dropdown, .nav-group:focus-within .nav-dropdown { display: grid; }
.nav-dropdown-link { display: flex; width: 100%; }
.side-nav .nav-group { display: grid; }
.side-nav .nav-dropdown { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.13); box-shadow: none; display: grid; min-width: 0; padding: .25rem 0 .25rem .55rem; position: static; }
.side-nav .nav-group-label { color: #dbeafe; justify-content: space-between; }
.bottom-nav .nav-dropdown { bottom: calc(100% + .35rem); top: auto; }
.nav-link.is-active, .nav-group-label.is-active { box-shadow: inset 0 0 0 1px rgba(37, 99, 235, .18); }

.page-header {
    background: linear-gradient(135deg, rgba(255,255,255,.98), rgba(239,246,255,.92));
    border-color: rgba(148, 163, 184, .48);
    box-shadow: var(--shadow-soft);
    gap: 1rem;
}
.page-header h1 { letter-spacing: -.035em; }
.page-header p { margin: .35rem 0 0; max-width: 76ch; }
.page-actions { align-items: center; display: flex; flex-wrap: wrap; gap: .5rem; }
.module-intro {
    align-items: center;
    background: linear-gradient(135deg, #10233f, #1d4ed8);
    border-radius: 1.05rem;
    box-shadow: var(--shadow);
    color: #fff;
    display: flex;
    justify-content: space-between;
    margin-bottom: 1rem;
    padding: 1.05rem 1.2rem;
}
.module-intro p, .module-intro .eyebrow { color: rgba(255,255,255,.82); }
.module-intro h2 { color: #fff; margin-bottom: .25rem; }

.card, .ui-panel, .empty-state, .sub-card, .placeholder-card, .form-subsection {
    border-color: rgba(148, 163, 184, .45);
    box-shadow: var(--shadow-soft);
}
.card { position: relative; }
.card::before {
    background: linear-gradient(90deg, rgba(37,99,235,.35), rgba(20,184,166,.18), transparent);
    border-radius: 1rem 1rem 0 0;
    content: "";
    height: 3px;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
}
.card h2 { color: #172033; letter-spacing: -.02em; }
.card-heading-row { align-items: flex-start; border-bottom: 1px solid rgba(213,222,235,.75); display: flex; gap: 1rem; justify-content: space-between; margin: -.15rem 0 .85rem; padding-bottom: .65rem; }
.layout-grid { display: grid; gap: 1rem; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.layout-card.layout-full { grid-column: 1 / -1; }
.layout-card.layout-half { grid-column: span 2; }
.layout-card.layout-quarter { grid-column: span 1; }
.layout-hidden { opacity: .68; }
.layout-card.layout-hidden .layout-card-body,
.layout-card.layout-collapsed .layout-card-body { display: none; }
.layout-fullscreen { grid-column: 1 / -1; }
.layout-card-body { min-width: 0; }

button, .btn, .button-link, .link-button, .primary-action { border-radius: .58rem; min-height: 2.25rem; }
.btn-primary, .primary-action, button[type="submit"]:not(.btn-subtle):not(.btn-danger):not(.btn-toolbar), .button-link { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn-secondary, .secondary-button { background: #eef4ff; border: 1px solid #bfdbfe; color: #1d4ed8; }
.btn-danger, .danger-button, .logout-button { background: #fee2e2; border-color: #fecaca; color: #991b1b; }
.btn-danger:hover, .danger-button:hover, .logout-button:hover { background: #fecaca; color: #7f1d1d; }
.btn-subtle, .link-button { background: #f8fafc; border-color: var(--border); color: #334155; }
.btn-icon { border-radius: 999px; min-height: 2.2rem; padding: .45rem; width: 2.2rem; }
.btn-sm { font-size: .8rem; min-height: 2rem; padding: .38rem .58rem; }
.btn-toolbar { background: #fff; border-color: var(--border); color: #475569; font-size: .76rem; min-height: 1.9rem; padding: .32rem .48rem; }
.btn-toolbar-reset { color: #7c2d12; }
button:disabled, .btn.is-disabled, .btn[aria-disabled="true"] { cursor: not-allowed; opacity: .55; }
.actions-cell, .button-row, .foundation-actions { align-items: center; gap: .45rem; }
.inline-form { align-items: center; display: inline-flex; gap: .35rem; }

.card-toolbar-menu { position: relative; }
.card-toolbar-menu > summary { list-style: none; }
.card-toolbar-menu > summary::-webkit-details-marker { display: none; }
.layout-card .layout-controls {
    background: transparent;
    border: 0;
    flex: 0 0 auto;
    margin-left: auto;
    max-width: none;
    padding: 0;
    width: auto;
}
.card-layout-toggle-menu {
    display: inline-block;
}
.card-layout-toggle {
    align-items: center;
    border-radius: 999px;
    display: inline-flex;
    font-size: .86rem;
    justify-content: center;
    min-height: 2.75rem;
    min-width: 2.75rem;
    padding: .25rem;
    width: 2.75rem;
}
.card-layout-toggle-menu[open] .card-layout-toggle {
    background: #eff6ff;
    border-color: #bfdbfe;
    color: #1d4ed8;
}
.toolbar-menu-panel {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: .85rem;
    box-shadow: 0 14px 32px rgba(15, 23, 42, .14);
    display: grid;
    gap: .25rem;
    min-width: 180px;
    padding: .45rem;
    position: absolute;
    right: 0;
    top: calc(100% + .3rem);
    z-index: 40;
}
.toolbar-menu-panel .btn-toolbar {
    justify-content: flex-start;
    min-height: 2.75rem;
    min-width: 100%;
    width: 100%;
}
.toolbar-menu-panel .layout-action-symbol {
    margin-left: 0;
    min-width: 1.25rem;
    text-align: center;
}
.toolbar-menu-panel .layout-action-text { margin-left: .35rem; }

.status-pill {
    align-items: center;
    background: #e2e8f0;
    border: 1px solid rgba(100,116,139,.22);
    border-radius: 999px;
    color: #334155;
    display: inline-flex;
    font-size: .73rem;
    font-weight: 900;
    gap: .28rem;
    letter-spacing: .035em;
    line-height: 1;
    padding: .34rem .55rem;
    text-transform: uppercase;
    white-space: nowrap;
}
.status-pill::before { background: currentColor; border-radius: 999px; content: ""; height: .42rem; opacity: .78; width: .42rem; }
.status-active, .status-approved, .status-paid, .status-completed, .status-converted { background: #dcfce7; color: #166534; }
.status-inactive, .status-paused, .status-canceled { background: #f1f5f9; color: #475569; }
.status-draft, .status-foundation, .status-placeholder { background: #eef2ff; color: #3730a3; }
.status-sent, .status-scheduled, .status-in-progress, .status-invoiced { background: #dbeafe; color: #1d4ed8; }
.status-denied, .status-danger { background: #fee2e2; color: #991b1b; }
.status-unscheduled, .status-unpaid, .status-overdue, .status-warning, .status-urgent, .status-open { background: #fef3c7; color: #92400e; }
.status-invoice-ready { background: #ccfbf1; color: #0f766e; }

.metric-card {
    align-content: stretch;
    display: grid;
    gap: .5rem;
    grid-template-rows: auto auto auto minmax(2.8rem, 1fr) auto;
    min-height: 150px;
}
.metric-card-top { align-items: center; display: flex; justify-content: space-between; }
.metric-value { color: #0f172a; font-size: clamp(2rem, 4vw, 3.2rem); letter-spacing: -.06em; line-height: 1; }
.metric-card h2 { line-height: 1.16; margin: 0; }
.metric-card p { align-self: start; margin: 0; }
.metric-card-action { align-self: end; justify-content: center; width: 100%; }
.dashboard-cards { align-items: stretch; }
.quick-link-grid { align-items: stretch; display: grid; gap: .6rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); }
.quick-link-grid .btn,
.quick-link-grid .button-link {
    justify-content: center;
    line-height: 1.15;
    min-width: 0;
    text-align: center;
    white-space: normal;
    width: 100%;
}

.alert { border: 1px solid var(--border); border-radius: .85rem; margin-bottom: 1rem; padding: .85rem 1rem; }
.alert p { margin: .25rem 0 0; }
.alert-success { background: #f0fdf4; border-color: #bbf7d0; color: #166534; }
.alert-warning, .alert-foundation { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.alert-error, .alert-danger { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.alert-info { background: #eff6ff; border-color: #bfdbfe; color: #1d4ed8; }
.warning { color: #92400e; }

.help-panel { background: linear-gradient(135deg, #ffffff, #f8fbff); }
.help-note-row { border-top: 1px solid rgba(213,222,235,.8); padding: .65rem 0; }
.help-note-row:first-child { border-top: 0; padding-top: 0; }
.help-note-row p { margin: .2rem 0 0; }
.help-body.is-hidden { display: none; }

.table-card h2 { margin-bottom: .25rem; }
.table-scroll { border: 1px solid var(--border); background: #fff; }
table { min-width: 780px; }
th { background: #f8fafc; border-bottom-color: var(--border-strong); color: #475569; font-size: .74rem; position: sticky; top: 0; z-index: 1; }
td { color: #1f2937; }
tbody tr { transition: background .15s ease; }
tbody tr:hover { background: #f8fbff; }
.actions-cell { white-space: nowrap; }

label { color: #334155; font-weight: 800; }
label small, .field-help { color: var(--muted); font-weight: 500; }
input, select, textarea { border-color: #cbd5e1; box-shadow: inset 0 1px 2px rgba(15,23,42,.03); }
input:focus, select:focus, textarea:focus { border-color: var(--primary); }
.stacked-form, .operational-form { gap: 1rem; }
.form-subsection { background: #f8fbff; }
.form-actions { align-items: center; display: flex; flex-wrap: wrap; gap: .5rem; grid-column: 1 / -1; }

.detail-hero { align-items: center; display: flex; gap: 1rem; justify-content: space-between; }
.detail-summary-grid { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr); }
.detail-list div { background: #f8fafc; border: 1px solid var(--border); border-radius: .75rem; padding: .65rem; }
.empty-state { align-items: center; display: grid; justify-items: center; min-height: 170px; overflow-wrap: break-word; text-align: center; }
.empty-icon { color: #94a3b8; font-size: 2rem; }
.empty-state p { margin: .25rem 0 0; max-width: 58rem; }
.empty-state-actions { align-items: center; display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin-top: .4rem; max-width: 100%; }
.empty-state-actions > * { min-width: 0; }
.empty-state-actions .btn,
.empty-state-actions .button-link { justify-content: center; max-width: 100%; white-space: normal; }

.activity-timeline { display: grid; gap: .65rem; }
.activity-item { background: #fff; border: 1px solid var(--border); border-left: 4px solid var(--primary); border-radius: .75rem; padding: .75rem; }
.activity-meta { align-items: center; color: var(--muted); display: flex; flex-wrap: wrap; font-size: .82rem; gap: .45rem; }
.activity-log-page,
.activity-log-table-scroll,
.activity-log-mobile-list,
.activity-log-mobile-card,
.activity-log-mobile-fields,
.activity-log-mobile-fields div {
    max-width: 100%;
    min-width: 0;
    overflow-wrap: anywhere;
}
.activity-log-mobile-list { display: none; gap: .65rem; }
.activity-log-mobile-card {
    background: #fff;
    border: 1px solid var(--border);
    border-left: 4px solid var(--primary);
    border-radius: .75rem;
    padding: .75rem;
}
.activity-log-card-heading {
    align-items: flex-start;
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    justify-content: space-between;
}
.activity-log-card-time {
    color: var(--text);
    font-weight: 900;
}
.activity-log-mobile-fields {
    display: grid;
    gap: .45rem;
    margin: .7rem 0 0;
}
.activity-log-mobile-fields div {
    background: #f8fbff;
    border: 1px solid var(--border);
    border-radius: .55rem;
    padding: .5rem;
}
.activity-log-mobile-fields dt {
    color: var(--muted);
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.activity-log-mobile-fields dd {
    color: var(--text);
    margin: .15rem 0 0;
}

@media (max-width: 1100px) {
    .global-topbar { grid-template-columns: 1fr; position: static; }
    .nav-dropdown { position: static; width: 100%; }
    .top-nav, .bottom-nav { align-items: stretch; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); overflow: visible; width: 100%; }
    .nav-group-label, .nav-link-direct { justify-content: space-between; width: 100%; }
}

@media (max-width: 900px) {
    .layout-grid, .detail-summary-grid { grid-template-columns: 1fr; }
    .module-intro { align-items: flex-start; flex-direction: column; }
    .account-area-top { display: grid; grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
    .main-content { padding: .75rem; }
    .page-header, .detail-hero { align-items: flex-start; flex-direction: column; }
    .card, .page-header, .module-intro { border-radius: .9rem; }
    .top-nav, .bottom-nav, .quick-link-grid { grid-template-columns: 1fr; }
    table { min-width: 720px; }
    .inline-form, .button-row, .foundation-actions { align-items: stretch; flex-direction: column; }
    .inline-form .btn, .button-row .btn, .foundation-actions .btn, .foundation-actions a { width: 100%; }
}

/* Portal/estimate link URL + field-service operational record layout cleanup */
.global-topbar {
    align-items: stretch;
    grid-template-columns: minmax(140px, auto) minmax(0, 1fr) minmax(230px, auto);
    overflow: visible;
}
.top-nav.grouped-nav {
    background: #f8fafc;
    border: 1px solid rgba(148,163,184,.35);
    border-radius: .9rem;
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    justify-content: center;
    overflow: visible;
    padding: .35rem;
}
.top-nav .nav-link,
.top-nav .nav-group-label {
    background: #fff;
    border: 1px solid rgba(203,213,225,.8);
    color: #1f2a44;
    min-height: 2.1rem;
}
.top-nav .nav-link:hover,
.top-nav .nav-link.is-active,
.top-nav .nav-group-label.is-active {
    background: #dbeafe;
    border-color: #93c5fd;
    color: #1e3a8a;
}
.top-nav .nav-dropdown { left: 0; }
.account-area-top {
    background: #ffffff;
    border: 1px solid rgba(203,213,225,.85);
    border-radius: .9rem;
    padding: .4rem;
}
.record-header {
    align-items: flex-start;
    background: linear-gradient(135deg, #ffffff, #eff6ff);
    border: 1px solid var(--border);
    border-radius: 1rem;
    box-shadow: var(--shadow-soft);
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    margin-bottom: 1rem;
    padding: 1rem;
}
.record-header h2 { font-size: clamp(1.35rem, 2.8vw, 2.2rem); margin-bottom: .35rem; }
.record-badges,
.record-action-bar,
.record-tabs {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
}
.record-action-bar { justify-content: flex-end; max-width: 760px; }
.record-more { position: relative; }
.record-more summary { list-style: none; }
.record-more summary::-webkit-details-marker { display: none; }
.record-more div {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: .85rem;
    box-shadow: 0 14px 32px rgba(15,23,42,.14);
    display: grid;
    min-width: 190px;
    padding: .45rem;
    position: absolute;
    right: 0;
    top: calc(100% + .35rem);
    z-index: 45;
}
.record-more a { border-radius: .55rem; color: #334155; font-weight: 800; padding: .5rem .6rem; text-decoration: none; }
.record-more a:hover { background: #eff6ff; color: #1d4ed8; }
.record-tabs {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 1rem;
    box-shadow: var(--shadow-soft);
    margin-bottom: 1rem;
    padding: .45rem;
    position: sticky;
    top: 5.5rem;
    z-index: 10;
}
.record-tabs a {
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    color: #334155;
    font-size: .82rem;
    font-weight: 900;
    padding: .42rem .68rem;
    text-decoration: none;
}
.record-tabs a:hover { background: #eef2ff; border-color: #c7d2fe; color: #1d4ed8; }
.customer-profile-shell.record-layout-shell {
    align-items: start;
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
}
.record-sidebar {
    display: grid;
    gap: 1rem;
    position: sticky;
    top: 9rem;
}
.record-sidebar .layout-card,
.record-main .layout-card { min-width: 0; }
.record-sidebar .layout-card { grid-column: 1 / -1; }
.record-main.layout-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.record-main .layout-full { grid-column: 1 / -1; }
.section-summary-grid,
.related-summary-grid {
    display: grid;
    gap: .75rem;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    margin: .75rem 0;
}
.section-summary-card,
.related-summary-card {
    background: #f8fafc;
    border: 1px solid var(--border);
    border-radius: .8rem;
    padding: .8rem;
}
.section-summary-card strong,
.related-summary-card strong { color: #0f172a; display: block; font-size: 1.35rem; line-height: 1; }
.premium-portal-panel[data-premium-customer-portal="entitled-company-summary"] {
    background: #f8fbff;
    border-color: #bfdbfe;
}
.premium-portal-metric-grid {
    display: grid;
    gap: .75rem;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    margin: .75rem 0;
}
.premium-portal-metric {
    background: #ffffff;
    border: 1px solid #d7dee8;
    border-radius: 8px;
    min-width: 0;
    padding: .85rem;
}
.premium-portal-metric strong {
    color: #0f172a;
    display: block;
    font-size: 1.4rem;
    line-height: 1;
}
.premium-portal-metric span {
    color: #1d4ed8;
    display: block;
    font-weight: 800;
    margin-top: .4rem;
}
.premium-portal-metric p { margin: .35rem 0 0; }
.estimate-review-link-card {
    background: linear-gradient(135deg, #f8fbff, #ffffff);
    border: 1px solid #bfdbfe;
    border-radius: .9rem;
    padding: 1rem;
}
.record-detail-card .detail-hero { align-items: flex-start; }
.estimate-preview-card { margin-top: 1rem; }
.copy-field:not([value=""]) { background: #f8fafc; color: #0f172a; }

@media (max-width: 1180px) {
    .global-topbar { grid-template-columns: 1fr; }
    .customer-profile-shell.record-layout-shell { grid-template-columns: 1fr; }
    .record-sidebar { position: static; }
    .record-tabs { position: static; }
}
@media (max-width: 760px) {
    .record-header { flex-direction: column; }
    .record-action-bar,
    .record-action-bar .btn,
    .record-action-bar form,
    .record-action-bar button { align-items: stretch; width: 100%; }
    .record-main.layout-grid { grid-template-columns: 1fr; }
    .top-nav.grouped-nav { display: grid; grid-template-columns: 1fr; }
}

/* Operational UI Rebuild V1 — reusable field-service CRM components */
.app-sidebar { background: #eaf0f7; border-right: 1px solid #d8e0ea; box-shadow: inset -1px 0 0 rgba(15,23,42,.04); }
.app-sidebar .brand { color: #0f9f5f; font-weight: 900; letter-spacing: .01em; }
.side-nav.grouped-nav { gap: .35rem; }
.side-nav .nav-link, .side-nav .nav-group-label { border-radius: 0; color: #28415f; min-height: 2.45rem; padding: .65rem .85rem; }
.side-nav .nav-link.is-active, .side-nav .nav-group-label.is-active { background: #35bf4f; color: #073b1a; font-weight: 900; box-shadow: inset 4px 0 0 #073b1a; }
.top-nav.grouped-nav { flex-wrap: wrap; overflow: visible; }
.account-area { border-radius: .65rem; }

.operational-module-shell { background: #fff; border: 1px solid var(--border); border-radius: 1rem; box-shadow: var(--shadow); margin: 0 0 1.25rem; padding: clamp(1rem, 2vw, 1.5rem); }
.module-page-header { align-items: flex-start; border-bottom: 1px solid var(--border); display: flex; gap: 1rem; justify-content: space-between; margin-bottom: 1rem; padding-bottom: 1rem; }
.module-page-header h1 { color: #1d2b50; font-size: clamp(1.8rem, 3vw, 2.45rem); font-weight: 650; margin: .15rem 0 .45rem; }
.module-page-header p { color: var(--muted); margin: 0; max-width: 72rem; }
.return-link { color: #12a151; font-weight: 800; text-decoration: none; }
.module-action-bar.action-bar, .action-bar { align-items: center; display: flex; flex-wrap: wrap; gap: .5rem; justify-content: flex-end; }
.inline-action-form { margin: 0; }
.btn.btn-sm, .button-link, button { border-radius: .25rem; min-height: 2.15rem; padding: .45rem .75rem; }
.btn-primary, .primary-action { background: #20b65b; border-color: #20b65b; color: #fff; }
.btn-secondary { background: #28c76f; border-color: #28c76f; color: #fff; }
.btn-subtle { background: #fff; border: 1px solid #cfd8e3; color: #1f2937; }

.status-tabs { align-items: center; border-bottom: 1px solid var(--border); display: flex; flex-wrap: wrap; gap: 1.2rem; margin: .75rem 0 1rem; }
.status-tabs a { color: #202938; font-weight: 850; padding: .65rem .15rem .7rem; text-decoration: none; }
.status-tabs a.is-active { border-bottom: 3px solid #20b65b; color: #13a84f; }
.filter-toolbar { align-items: end; background: transparent; border: 0; box-shadow: none; display: grid; gap: .65rem; grid-template-columns: minmax(220px, 1.4fr) repeat(3, minmax(135px, .7fr)) auto; margin: .5rem 0 1rem; padding: 0; }
.filter-toolbar input, .filter-toolbar select { min-height: 2.2rem; }
.filter-toolbar label { color: var(--muted); font-size: .8rem; font-weight: 800; margin: 0; }
.filter-actions { align-items: center; display: flex; flex-wrap: wrap; gap: .4rem; }
.view-toggle { display: flex; gap: .25rem; margin-bottom: .5rem; }

.service-item-command-summary {
    background: #ffffff;
    border: 1px solid #dbe4ee;
    border-radius: 8px;
    display: grid;
    gap: .75rem;
    margin: .75rem 0 1rem;
    padding: .85rem;
}
.service-item-command-intro {
    align-items: center;
    display: flex;
    gap: .75rem;
    justify-content: space-between;
    min-width: 0;
}
.service-item-command-intro strong {
    color: #17233a;
    font-size: 1rem;
    margin: 0;
}
.service-item-command-intro span {
    color: #526579;
    font-size: .85rem;
    font-weight: 700;
    max-width: 68rem;
}
.service-item-command-metrics {
    display: grid;
    gap: .75rem;
    grid-template-columns: repeat(6, minmax(0, 1fr));
}
.service-item-command-summary article,
.service-item-metric-grid article,
.service-item-usage-grid article,
.service-item-flag-grid article {
    background: #f7fafc;
    border: 1px solid #dbe4ee;
    border-left: 4px solid #2a9d6f;
    border-radius: 8px;
    padding: .85rem;
}
.service-item-command-summary span,
.service-item-metric-grid span,
.service-item-usage-grid span {
    color: #526579;
    display: block;
    font-size: .78rem;
    font-weight: 800;
}
.service-item-command-summary strong,
.service-item-metric-grid strong,
.service-item-usage-grid strong {
    color: #17233a;
    display: block;
    font-size: 1.35rem;
    margin-top: .15rem;
}
.service-item-command-summary .service-item-command-intro strong {
    font-size: 1rem;
    margin: 0;
}
.service-item-command-summary .service-item-command-intro span {
    font-size: .85rem;
    font-weight: 700;
}
.service-item-readiness-badges {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
}
.setup-badge {
    border: 1px solid #cfd8e3;
    border-radius: 999px;
    color: #334155;
    display: inline-flex;
    font-size: .74rem;
    font-weight: 850;
    line-height: 1;
    padding: .32rem .48rem;
    white-space: nowrap;
}
.setup-badge-success { background: #e9f9ee; border-color: #99d6aa; color: #17663c; }
.setup-badge-warning { background: #fff7df; border-color: #ebc86b; color: #7c4c00; }
.setup-badge-danger { background: #fee2e2; border-color: #fca5a5; color: #991b1b; }
.setup-badge-neutral { background: #eef4f8; border-color: #cad7e2; color: #42566d; }
.service-item-catalog-card-grid {
    display: none;
    gap: .85rem;
}
.service-item-catalog-card {
    background: #fff;
    border: 1px solid #dbe4ee;
    border-radius: 8px;
    display: grid;
    gap: .85rem;
    grid-template-columns: 86px minmax(0, 1fr);
    padding: .85rem;
}
.service-item-card-photo {
    align-items: center;
    aspect-ratio: 1 / 1;
    background: #edf4f7;
    border: 1px solid #d8e3ea;
    border-radius: 8px;
    color: #526579;
    display: flex;
    font-size: .75rem;
    font-weight: 800;
    justify-content: center;
    object-fit: cover;
    overflow: hidden;
    width: 86px;
}
.service-item-card-main {
    display: grid;
    gap: .45rem;
    min-width: 0;
}
.service-item-card-title {
    align-items: flex-start;
    display: flex;
    gap: .5rem;
    justify-content: space-between;
}
.service-item-card-title a {
    color: #17233a;
    font-size: 1rem;
    font-weight: 900;
    text-decoration: none;
}
.service-item-card-subtitle {
    color: #526579;
    margin: 0;
}
.service-item-card-meta,
.work-order-line-stats {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}
.service-item-card-meta span,
.work-order-line-stats span {
    background: #eef4f8;
    border: 1px solid #d8e3ea;
    border-radius: 6px;
    color: #334155;
    font-size: .78rem;
    max-width: 100%;
    overflow-wrap: anywhere;
    padding: .35rem .5rem;
}
.service-item-card-code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}
.service-item-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}
.service-item-lifecycle-form {
    align-items: flex-start;
    display: grid;
    gap: .35rem;
    max-width: 100%;
    min-width: 0;
}
.service-item-lifecycle-form .btn {
    white-space: normal;
}
.service-item-lifecycle-note {
    color: #526579;
    display: block;
    font-size: .76rem;
    font-weight: 700;
    line-height: 1.35;
    max-width: 34rem;
    overflow-wrap: anywhere;
}
.service-item-lifecycle-table {
    margin-top: .35rem;
}
.service-item-lifecycle-card {
    border-left: 4px solid #2a9d6f;
}
.service-item-lifecycle-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .65rem;
}
.service-item-current-status {
    display: inline-flex;
}
.manage-menu-note {
    color: #526579;
    display: block;
    font-size: .88rem;
    font-weight: 800;
    padding: .5rem .65rem;
}

.operational-table-card { border: 0; box-shadow: none; margin-top: 0; padding: 0; }
.data-table { border-collapse: collapse; font-size: .92rem; min-width: 980px; }
.data-table th { background: #fff; border-bottom: 2px solid #d6dbe3; color: #1f2937; font-size: .82rem; text-transform: none; }
.data-table td { padding: .62rem .75rem; }
.data-table tbody tr:nth-child(even) { background: #fafafa; }
.data-table tbody tr:hover { background: #f2f7f4; }
.data-table input[type="checkbox"] { height: 1rem; width: 1rem; }
.bulk-select-cell { text-align: center; width: 3rem; }
.operational-bulk-form { margin: 0; }
.operational-bulk-toolbar {
    align-items: center;
    background: #f8fbff;
    border: 1px solid #dbe4ee;
    border-radius: 8px;
    display: grid;
    gap: .65rem;
    grid-template-columns: auto auto minmax(0, 1fr);
    margin: .75rem 0 1rem;
    padding: .75rem;
}
.operational-bulk-toolbar label {
    margin: 0;
}
.bulk-select-visible {
    align-items: center;
    color: #172033;
    display: inline-flex;
    font-weight: 850;
    gap: .45rem;
    white-space: nowrap;
}
.bulk-selected-count {
    background: #ffffff;
    border: 1px solid #cfd8e3;
    border-radius: 6px;
    color: #1f2937;
    font-size: .82rem;
    font-weight: 900;
    padding: .42rem .6rem;
    text-align: center;
    white-space: nowrap;
}
.bulk-toolbar-help {
    color: #526579;
    font-weight: 750;
    grid-column: 1 / -1;
    line-height: 1.35;
}
.bulk-action-panel {
    align-items: center;
    display: flex;
    gap: .45rem;
    min-width: 0;
}
.bulk-action-panel[hidden] {
    display: none;
}
.bulk-action-panel-title {
    color: #526579;
    font-size: .82rem;
    font-weight: 850;
    white-space: nowrap;
}
.bulk-action-links {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .15rem .6rem;
    min-width: 0;
}
.operational-bulk-toolbar button.bulk-action-link,
.operational-bulk-toolbar button[type="submit"].bulk-action-link {
    appearance: none;
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 0;
    color: #163b74;
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    font-size: .84rem;
    font-weight: 800;
    line-height: 1.25;
    min-height: 1.5rem;
    padding: .1rem 0;
    text-align: left;
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color .15s ease;
}
.operational-bulk-toolbar button.bulk-action-link:disabled,
.operational-bulk-toolbar button[type="submit"].bulk-action-link:disabled {
    cursor: not-allowed;
    opacity: .52;
}
.operational-bulk-toolbar button.bulk-action-link:not(:disabled):hover,
.operational-bulk-toolbar button.bulk-action-link:not(:disabled):focus-visible,
.operational-bulk-toolbar button[type="submit"].bulk-action-link:not(:disabled):hover,
.operational-bulk-toolbar button[type="submit"].bulk-action-link:not(:disabled):focus-visible {
    background: transparent;
    color: #0f2f61;
    outline: 1px dotted currentColor;
    outline-offset: 2px;
    transform: none;
}
.bulk-action-link-title {
    display: inline;
}
.operational-bulk-toolbar input[type="checkbox"] {
    min-height: 1.5rem;
    min-width: 1.5rem;
}
.bulk-action-result-panel {
    display: grid;
    gap: .85rem;
    margin: .75rem 0 1rem;
}
.bulk-action-result-panel .card-heading-row {
    align-items: flex-start;
}
.bulk-action-result-metrics {
    display: grid;
    gap: .65rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
.bulk-action-result-metrics article {
    background: #f8fbff;
    border: 1px solid #dbe4ee;
    border-radius: 6px;
    padding: .65rem .75rem;
}
.bulk-action-result-metrics span {
    color: #526579;
    display: block;
    font-size: .76rem;
    font-weight: 850;
    text-transform: uppercase;
}
.bulk-action-result-metrics strong {
    color: #172033;
    display: block;
    font-size: 1.05rem;
    margin-top: .15rem;
}
.bulk-action-result-table {
    min-width: 860px;
}
.bulk-action-result-links {
    align-items: flex-start;
    display: flex;
    flex-wrap: wrap;
    gap: .35rem .65rem;
}
.bulk-action-result-links a {
    color: #1d4ed8;
    font-size: .84rem;
    font-weight: 800;
    text-decoration: underline;
    text-underline-offset: 2px;
}
@media (max-width: 700px) {
    .bulk-action-result-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 430px) {
    .bulk-action-result-metrics {
        grid-template-columns: 1fr;
    }
}
.mobile-record-select {
    align-items: center;
    color: #172033;
    display: inline-flex;
    font-weight: 850;
    gap: .45rem;
    margin: 0;
}
.mobile-record-select input {
    height: 1.1rem;
    width: 1.1rem;
}
.bulk-print-packet-shell .bulk-print-notice {
    margin-bottom: 1rem;
}
.bulk-print-record {
    break-inside: avoid;
    display: grid;
    gap: .75rem;
    margin-bottom: 1.25rem;
}
.bulk-print-record-actions {
    display: flex;
    justify-content: flex-end;
}
.bulk-print-packet .line-item-flow-card,
.bulk-print-packet .document-form,
.bulk-print-packet .service-selector-preview {
    display: none;
}
@media print {
    .app-sidebar,
    .global-topbar,
    .mobile-app-bar,
    .page-header,
    .bulk-print-record-actions,
    .bulk-print-packet-shell > .module-page-header .module-action-bar {
        display: none ;
    }
    .main-content,
    .operational-module-shell,
    .bulk-print-packet-shell {
        border: 0 ;
        box-shadow: none ;
        margin: 0 ;
        padding: 0 ;
    }
    .bulk-print-record {
        break-after: page;
        margin: 0;
    }
    .bulk-print-record:last-child {
        break-after: auto;
    }
}
.manage-dropdown { display: inline-block; position: relative; }
.manage-dropdown summary { cursor: pointer; list-style: none; }
.manage-dropdown summary::-webkit-details-marker { display: none; }
.manage-menu { background: #fff; border: 1px solid var(--border); border-radius: .35rem; box-shadow: 0 18px 35px rgba(15,23,42,.16); display: grid; min-width: 210px; padding: .4rem; position: absolute; right: 0; top: calc(100% + .25rem); z-index: 10; }
.manage-menu a, .manage-menu button { background: transparent; border: 0; color: #263548; font: inherit; padding: .5rem .65rem; text-align: left; text-decoration: none; width: 100%; }
.manage-menu a:hover, .manage-menu button:hover { background: #f2f7f4; }
.manage-menu-form { margin: 0; }
.work-order-command-summary {
    background: #f8fbff;
    border: 1px solid #dbe4ee;
    border-radius: 8px;
    display: grid;
    gap: .85rem;
    margin: 0 0 1rem;
    padding: 1rem;
}
.work-order-command-intro {
    align-items: start;
    display: grid;
    gap: .25rem;
}
.work-order-command-intro strong {
    color: #172033;
    font-size: 1rem;
}
.work-order-command-intro span {
    color: #526579;
    font-size: .88rem;
    font-weight: 750;
    line-height: 1.4;
}
.work-order-command-metrics {
    display: grid;
    gap: .6rem;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
}
.work-order-command-metrics article {
    background: #ffffff;
    border: 1px solid #dbe4ee;
    border-radius: 8px;
    display: grid;
    gap: .2rem;
    min-width: 0;
    padding: .7rem;
}
.work-order-command-metrics span {
    color: #64748b;
    font-size: .72rem;
    font-weight: 900;
    text-transform: uppercase;
}
.work-order-command-metrics strong {
    color: #172033;
    font-size: 1.05rem;
    overflow-wrap: anywhere;
}
.work-order-attention-board {
    display: grid;
    gap: .65rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.work-order-attention-card {
    background: #fff;
    border: 1px solid #dbe4ee;
    border-left: 4px solid #2563eb;
    border-radius: 8px;
    color: #172033;
    display: grid;
    gap: .16rem;
    min-width: 0;
    padding: .75rem;
    text-decoration: none;
}
.work-order-attention-card:hover,
.work-order-attention-card:focus {
    border-color: #93c5fd;
    box-shadow: 0 8px 20px rgba(37, 99, 235, .12);
}
.work-order-attention-card span {
    color: #526579;
    font-size: .74rem;
    font-weight: 900;
    text-transform: uppercase;
}
.work-order-attention-card strong {
    color: #172033;
    font-size: 1.2rem;
}
.work-order-attention-card small {
    color: #64748b;
    font-weight: 750;
    line-height: 1.35;
}
.work-order-attention-card.is-warning { border-left-color: #f59e0b; }
.work-order-attention-card.is-ready { border-left-color: #10b981; }
.work-order-attention-card.is-active { border-left-color: #2563eb; }
.work-order-attention-note {
    color: #526579;
    font-size: .82rem;
    font-weight: 750;
    line-height: 1.4;
    margin: 0;
}
.work-order-readiness-filter-links {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem .7rem;
    margin-top: .3rem;
}
.work-order-readiness-filter-links a,
.work-order-next-action {
    color: #1d4ed8;
    font-weight: 850;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}
.work-order-next-action {
    display: grid;
    gap: .12rem;
    min-width: 0;
}
.work-order-next-action small {
    color: #64748b;
    font-size: .74rem;
    font-weight: 700;
    line-height: 1.3;
}
.work-order-next-action.is-warning strong { color: #b45309; }
.work-order-next-action.is-ready strong { color: #047857; }
.work-order-next-action.is-active strong { color: #1d4ed8; }
.work-order-next-action.is-muted strong { color: #64748b; }
.work-order-filter-toolbar select,
.work-order-filter-toolbar input {
    min-width: min(100%, 11rem);
}
.customer-list-shell .manage-dropdown { display: inline-block; position: relative; }
.customer-list-shell .manage-dropdown > .manage-menu { display: grid; gap: .15rem; min-width: 220px; position: absolute; right: 0; top: calc(100% + .3rem); z-index: 80; }
.customer-card-heading { align-items: flex-start; display: flex; gap: .65rem; justify-content: space-between; min-width: 0; }
.customer-card-heading > div { min-width: 0; }
.customer-card-details { display: grid; gap: .5rem; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; }
.customer-card-details div { background: #ffffff; border: 1px solid #e3eaf2; border-radius: 8px; min-width: 0; padding: .55rem; }
.customer-card-details dt { color: var(--muted); font-size: .72rem; font-weight: 850; }
.customer-card-details dd { color: #1f2937; margin: .15rem 0 0; overflow-wrap: anywhere; }
.danger-link { color: #b91c1c ; }

.document-detail-layout { align-items: start; display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1.35fr) minmax(340px, .65fr); }
.document-preview-card { background: #fff; border: 1px solid #e0e5ed; box-shadow: 0 10px 26px rgba(15,23,42,.1); margin: 0 auto 1rem; max-width: 920px; min-height: 760px; padding: clamp(1.25rem, 3vw, 2.5rem); position: relative; }
.document-ribbon { background: #67c26f; color: #fff; font-size: .72rem; font-weight: 900; left: -.35rem; letter-spacing: .05em; padding: .35rem 1.25rem; position: absolute; text-transform: uppercase; top: 1rem; transform: rotate(-45deg) translateX(-1.5rem); }
.document-header { align-items: start; display: flex; justify-content: space-between; margin-bottom: 3rem; }
.document-header h2 { font-size: 2.2rem; font-weight: 500; letter-spacing: .04em; margin: 0; }
.document-address-grid { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 2rem; }
.document-lines th { background: #f3f4f6; color: #111827; text-transform: none; }
.document-total { display: grid; gap: .35rem 1rem; grid-template-columns: minmax(0, 1fr) auto; margin: 1.5rem 0 2rem auto; max-width: 420px; }
.document-total strong:last-child { background: #f3f4f6; padding: .65rem; }
.document-message { border-top: 1px solid var(--border); padding-top: 1rem; }
.summary-panel { display: grid; gap: 1rem; }
.summary-card, .right-summary-panel .card, .right-summary-panel .portal-admin-panel { background: #f3f3f3; border: 1px solid #e5e7eb; border-radius: .25rem; padding: 1.1rem; }
.summary-card h3 { margin-top: 0; }
.metric-strip { background: #f3f3f3; display: grid; gap: .75rem; grid-template-columns: repeat(6, minmax(0, 1fr)); margin: 0 0 1rem; padding: 1rem; }
.metric-strip article { border-left: 4px solid #43c6b7; padding-left: .7rem; }
.metric-strip span { color: var(--muted); display: block; }
.metric-strip strong { font-size: 1.3rem; }

.form-section-card { background: #fff; border: 1px solid var(--border); border-radius: .85rem; display: grid; gap: .8rem; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 1rem; }
.form-section-card.full-span, .document-form .full-span { grid-column: 1 / -1; }
.form-section-card h2 { grid-column: 1 / -1; margin: 0; }
.document-form { align-items: start; grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr); }
.line-editor-table input, .line-editor-table select { width: 100%; }
.estimate-line-builder-shell,
.estimate-line-builder-card,
.estimate-line-builder,
.estimate-line-editor-card,
.estimate-line-editor-grid {
    min-width: 0;
}
.estimate-line-builder {
    display: grid;
    gap: .85rem;
}
.estimate-line-editor-card {
    background: #f8fafc;
    border: 1px solid #dbe5ef;
    border-radius: 8px;
    padding: .9rem;
}
.estimate-line-editor-heading {
    align-items: center;
    display: flex;
    gap: .75rem;
    justify-content: space-between;
    margin-bottom: .8rem;
}
.estimate-line-row-actions,
.estimate-line-builder-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}
.estimate-line-editor-grid {
    display: grid;
    gap: .75rem;
    grid-template-columns: minmax(260px, 1.4fr) repeat(3, minmax(120px, .55fr));
}
.estimate-line-editor-grid label,
.estimate-line-editor-grid input,
.estimate-line-editor-grid select,
.estimate-line-editor-grid textarea {
    max-width: 100%;
    min-width: 0;
}
.document-line-edit-section {
    align-items: start;
}
.document-line-edit-section > .muted,
.document-line-edit-grid {
    grid-column: 1 / -1;
}
.document-line-edit-grid {
    display: grid;
    gap: .85rem;
}
.document-line-edit-row {
    background: #f8fafc;
    border: 1px solid #dbe5ef;
    border-radius: 8px;
    display: grid;
    gap: .75rem;
    grid-template-columns: minmax(260px, 1.4fr) repeat(3, minmax(120px, .55fr));
    min-width: 0;
    padding: .9rem;
}
.document-line-edit-row header,
.document-line-edit-row .full-span {
    grid-column: 1 / -1;
}
.document-line-edit-row header {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1rem;
    justify-content: space-between;
}
.document-line-remove-toggle {
    background: #fff7ed;
    border: 1px solid #fed7aa;
    border-radius: 8px;
    color: #7c2d12;
    padding: .45rem .6rem;
}
.document-line-change-report-card {
    display: grid;
    gap: .85rem;
    min-width: 0;
}
.document-line-change-report-card.is-positive {
    border-left: 4px solid #16a34a;
}
.document-line-change-report-card.is-negative {
    border-left: 4px solid #dc2626;
}
.document-line-change-report-card.is-even {
    border-left: 4px solid #64748b;
}
.document-line-change-metrics {
    display: grid;
    gap: .65rem;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
}
.document-line-change-metrics span {
    background: #f8fafc;
    border: 1px solid #dbe5ef;
    border-radius: 8px;
    color: #475569;
    display: grid;
    gap: .25rem;
    min-width: 0;
    padding: .7rem;
}
.document-line-change-metrics strong {
    color: #0f172a;
    font-size: 1.05rem;
}
.document-line-change-table {
    min-width: 760px;
}
.document-line-change-table th,
.document-line-change-table td {
    white-space: normal;
}
.document-line-edit-row label,
.document-line-edit-row input,
.document-line-edit-row select,
.document-line-edit-row textarea {
    max-width: 100%;
    min-width: 0;
}
@media (max-width: 760px) {
    .document-line-edit-row {
        grid-template-columns: 1fr;
    }
}
.estimate-type-dialog {
    border: 0;
    border-radius: 8px;
    box-shadow: 0 28px 70px rgba(15, 23, 42, .32);
    max-width: min(760px, calc(100vw - 2rem));
    padding: 1rem;
    width: 720px;
}
.estimate-type-dialog::backdrop {
    background: rgba(15, 23, 42, .55);
}
.estimate-type-dialog-header {
    align-items: start;
    border-bottom: 1px solid #dbe4ee;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    margin-bottom: .85rem;
    padding-bottom: .75rem;
}
.estimate-type-dialog-header h2 {
    color: #17233a;
    font-size: 1.15rem;
    margin: 0 0 .2rem;
}
.estimate-type-dialog-header p {
    color: #526579;
    margin: 0;
}
.estimate-type-choice-grid {
    display: grid;
    gap: .75rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.estimate-type-choice-card {
    background: #f8fbff;
    border: 1px solid #dbe4ee;
    border-radius: 8px;
    color: #17233a;
    display: grid;
    gap: .35rem;
    min-width: 0;
    padding: .85rem;
    text-decoration: none;
}
.estimate-type-choice-card:hover,
.estimate-type-choice-card:focus {
    border-color: #2d76b8;
    box-shadow: 0 12px 30px rgba(45, 118, 184, .16);
    outline: 0;
}
.estimate-type-choice-card span {
    color: #526579;
    font-size: .86rem;
    overflow-wrap: anywhere;
}
.estimate-bulk-items-panel {
    background: #f8fbff;
    border: 1px solid #dbe4ee;
    border-radius: 8px;
    display: grid;
    gap: .6rem;
    margin-top: .25rem;
    min-width: 0;
    padding: .85rem;
}
.estimate-bulk-items-panel h3 {
    font-size: .95rem;
    margin: 0;
}
.estimate-bulk-items-panel textarea {
    min-height: 7rem;
    min-width: 0;
    width: 100%;
}
.estimate-line-builder-shell[data-estimate-builder-type="standard"] [data-estimate-mode-field="line-type"],
.estimate-line-builder-shell[data-estimate-builder-type="standard"] [data-estimate-mode-field="package"],
.estimate-line-builder-shell[data-estimate-builder-type="options"] [data-estimate-mode-field="package"] {
    display: none;
}
.estimate-builder-summary-card p,
.estimate-response-total-preview p {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin: .25rem 0;
}
.estimate-builder-readiness-strip {
    background: #f8fbff;
    border: 1px solid #dbe4ee;
    border-radius: 8px;
    display: grid;
    gap: .55rem;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    margin: 0 0 .85rem;
    min-width: 0;
    overflow-wrap: anywhere;
    padding: .75rem;
}
.estimate-builder-readiness-strip span {
    background: #fff;
    border: 1px solid #e4ebf3;
    border-radius: 8px;
    color: #526579;
    display: grid;
    gap: .16rem;
    min-width: 0;
    padding: .58rem .65rem;
}
.estimate-builder-readiness-strip strong {
    color: #17233a;
    font-size: .76rem;
    text-transform: uppercase;
}
.estimate-builder-readiness-strip small {
    color: #526579;
    grid-column: 1 / -1;
    line-height: 1.35;
}
.estimate-builder-approval-readiness-card {
    display: grid;
    gap: .75rem;
    min-width: 0;
    overflow: hidden;
}
.estimate-builder-approval-readiness-card h3 {
    font-size: .94rem;
    margin: .25rem 0 -.25rem;
}
.estimate-package-choice-list,
.estimate-response-total-preview {
    border: 1px solid #d9e2ef;
    border-radius: 8px;
    display: grid;
    gap: .75rem;
    padding: .85rem;
}
.estimate-package-review-card {
    background: #fff;
    border: 1px solid #e4ebf3;
    border-radius: 8px;
    padding: .75rem;
}
.estimate-required-line,
.estimate-option-line {
    margin: .35rem 0;
}

/* Estimate Builder Density Guard */
.estimate-form-shell,
.estimate-form-shell .document-form,
.estimate-form-shell .form-section-card,
.estimate-form-shell .estimate-line-builder-card,
.estimate-form-shell .estimate-line-editor-card,
.estimate-form-shell .estimate-line-editor-grid,
.estimate-form-shell .estimate-bulk-items-panel,
.estimate-form-shell .estimate-builder-summary-card {
    min-width: 0;
    overflow-wrap: anywhere;
}

.estimate-form-shell .estimate-line-builder-card {
    overflow: hidden;
}

.estimate-form-shell .estimate-line-editor-card {
    box-shadow: 0 10px 24px rgba(15, 23, 42, .045);
}

.estimate-form-shell .estimate-line-editor-heading,
.estimate-form-shell .estimate-line-row-actions,
.estimate-form-shell .estimate-line-builder-actions {
    min-width: 0;
}

.estimate-form-shell .estimate-line-editor-grid .full-span {
    grid-column: 1 / -1;
}

.estimate-form-shell .estimate-line-editor-grid small {
    color: #607086;
    display: block;
    line-height: 1.35;
    margin-top: .25rem;
    overflow-wrap: anywhere;
}

.estimate-form-shell .estimate-line-editor-grid textarea {
    min-height: 5rem;
    resize: vertical;
}

.estimate-form-shell .estimate-builder-summary-card {
    align-content: start;
}

.estimate-form-shell .estimate-builder-summary-card label,
.estimate-form-shell .estimate-builder-summary-card p {
    min-width: 0;
}

.estimate-form-shell .estimate-line-builder-actions,
.estimate-form-shell .estimate-bulk-items-panel {
    border-top: 1px solid #e4ebf4;
    padding-top: .75rem;
}

.estimate-form-shell input,
.estimate-form-shell select,
.estimate-form-shell textarea {
    box-sizing: border-box;
    max-width: 100%;
    width: 100%;
}

.estimate-form-shell .checkbox-label input {
    width: auto;
}

.estimate-form-shell .estimate-line-builder,
.estimate-form-shell .estimate-line-builder-actions,
.estimate-form-shell .estimate-bulk-items-panel,
.estimate-form-shell .estimate-bulk-service-panel,
.estimate-form-shell .estimate-line-builder-layout {
    grid-column: 1 / -1;
}

.estimate-form-shell .estimate-line-editor-card {
    overflow: hidden;
}

.estimate-line-builder-layout,
.estimate-line-builder-main {
    display: grid;
    gap: .85rem;
    min-width: 0;
}

.estimate-line-name-combobox {
    background: #ffffff;
    border: 1px solid #dbe4ee;
    border-left: 4px solid #2563eb;
    border-radius: 8px;
    display: grid;
    gap: .35rem;
    min-width: 0;
    padding: .75rem .85rem;
}

.estimate-line-name-combobox input {
    font-size: 1rem;
    font-weight: 800;
}

.estimate-line-name-combobox small {
    color: #526579;
    font-size: .82rem;
    line-height: 1.35;
}

.estimate-bulk-service-panel {
    background: #f8fafc;
    border: 1px solid #dbe4ee;
    border-radius: 8px;
    display: grid;
    gap: .75rem;
    margin-top: .25rem;
    min-width: 0;
    padding: .85rem;
}

.estimate-bulk-service-panel h3 {
    margin: 0;
}

.estimate-bulk-service-list {
    display: grid;
    gap: .45rem;
    grid-template-columns: minmax(0, 1fr);
    max-height: 18rem;
    min-width: 0;
    overflow-y: auto;
    padding-right: .2rem;
}

.estimate-bulk-service-option {
    align-items: flex-start;
    background: #ffffff;
    border: 1px solid #dbe4ee;
    border-radius: 8px;
    cursor: pointer;
    display: grid;
    gap: .55rem;
    grid-template-columns: auto minmax(0, 1fr);
    line-height: 1.25;
    min-width: 0;
    padding: .55rem .65rem;
}

.estimate-bulk-service-option:hover,
.estimate-bulk-service-option:focus-within {
    border-color: #2563eb;
    box-shadow: 0 10px 24px rgba(37, 99, 235, .12);
}

.estimate-bulk-service-option input {
    margin-top: .18rem;
    width: auto;
}

.estimate-bulk-service-option strong,
.estimate-bulk-service-option small {
    display: block;
    overflow-wrap: anywhere;
    text-align: left;
}

.estimate-bulk-service-option strong {
    color: #17233a;
    font-size: .92rem;
}

.estimate-bulk-service-option small {
    color: #526579;
    font-size: .78rem;
    line-height: 1.3;
}

.estimate-bulk-service-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
}

.estimate-bulk-service-actions small {
    color: #526579;
}

.estimate-quick-add-panel {
    align-content: start;
    background: #ffffff;
    border: 1px solid #dbe4ee;
    border-radius: 8px;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .04);
    display: grid;
    gap: .7rem;
    min-width: 0;
    padding: .85rem;
}

.estimate-quick-add-heading h3 {
    margin: 0 0 .2rem;
}

.estimate-quick-add-heading p {
    margin: 0;
}

.estimate-quick-add-list {
    display: grid;
    gap: .5rem;
    min-width: 0;
}

.estimate-quick-add-button {
    align-items: start;
    background: #f8fafc;
    border: 1px solid #dbe4ee;
    border-left: 4px solid #2563eb;
    border-radius: 8px;
    color: #17233a;
    cursor: pointer;
    display: grid;
    gap: .45rem;
    justify-items: stretch;
    line-height: 1.25;
    min-width: 0;
    padding: .65rem .7rem;
    text-align: left;
    width: 100%;
}

.estimate-quick-add-button:hover,
.estimate-quick-add-button:focus-visible {
    background: #ffffff;
    border-color: #2563eb;
    box-shadow: 0 10px 24px rgba(37, 99, 235, .14);
}

.estimate-quick-add-button span,
.estimate-quick-add-button strong,
.estimate-quick-add-button small,
.estimate-quick-add-button em {
    display: block;
    min-width: 0;
    overflow-wrap: anywhere;
}

.estimate-quick-add-button strong {
    font-size: .94rem;
}

.estimate-quick-add-button small {
    color: #526579;
    font-size: .78rem;
}

.estimate-quick-add-button em {
    color: #2563eb;
    font-size: .75rem;
    font-style: normal;
    font-weight: 800;
    text-transform: uppercase;
}

.estimate-quick-add-code {
    color: #6b7b90;
}

.estimate-quick-add-status {
    color: #526579;
    line-height: 1.35;
}

/* Estimate Quick Build Wizard */
.estimate-quick-build-trigger.is-locked {
    white-space: normal;
}

.estimate-quick-build-lock-note {
    color: #526579;
    flex-basis: 100%;
    font-size: .78rem;
    font-weight: 700;
    line-height: 1.35;
    max-width: 44rem;
}

.estimate-quick-build-overlay {
    align-items: center;
    background: rgba(15, 23, 42, .55);
    display: flex;
    inset: 0;
    justify-content: center;
    padding: 1rem;
    position: fixed;
    z-index: 6000;
}

.estimate-quick-build-overlay[hidden] {
    display: none;
}

.estimate-quick-build-dialog {
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, .28);
    display: grid;
    gap: 1rem;
    max-height: min(90vh, 760px);
    max-width: min(92vw, 640px);
    overflow-y: auto;
    padding: 1.25rem;
    width: 100%;
}

.estimate-quick-build-header {
    align-items: flex-start;
    display: flex;
    gap: .75rem;
    justify-content: space-between;
}

.estimate-quick-build-heading .eyebrow {
    color: #2563eb;
    font-size: .78rem;
    font-weight: 800;
    text-transform: uppercase;
}

.estimate-quick-build-heading p {
    font-size: 1.15rem;
    font-weight: 700;
    margin: .15rem 0 0;
}

.estimate-quick-build-running-total {
    background: #f0f6ff;
    border-radius: 999px;
    color: #1d4ed8;
    font-size: .85rem;
    font-weight: 700;
    padding: .35rem .75rem;
    white-space: nowrap;
}

.estimate-quick-build-card {
    display: grid;
    gap: 1rem;
    min-height: 14rem;
}

.estimate-quick-build-footer {
    align-items: center;
    display: flex;
    justify-content: space-between;
}

.estimate-quick-build-status {
    color: #b91c1c;
}

.quick-build-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
}

.quick-build-chip {
    align-items: center;
    background: #f8fafc;
    border: 2px solid #dbe4ee;
    border-radius: 999px;
    color: #17233a;
    cursor: pointer;
    display: inline-flex;
    font-size: 1rem;
    font-weight: 600;
    gap: .5rem;
    min-height: 3rem;
    padding: .6rem 1.1rem;
}

.quick-build-chip:hover,
.quick-build-chip:focus-visible {
    border-color: #2563eb;
}

.quick-build-chip.is-active {
    background: #2563eb;
    border-color: #1d4ed8;
    color: #ffffff;
}

.quick-build-color-swatch {
    border: 1px solid rgba(15, 23, 42, .2);
    border-radius: 50%;
    display: inline-block;
    height: 1.1rem;
    width: 1.1rem;
}

.quick-build-confirm-row {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
}

.quick-build-confirm-button {
    flex: 1 1 10rem;
    font-size: 1.05rem;
    min-height: 3.5rem;
}

.quick-build-counter {
    display: grid;
    gap: .6rem;
}

.quick-build-counter-display {
    font-size: 1.6rem;
    font-weight: 800;
}

.quick-build-counter-group-label {
    font-weight: 700;
    margin: .5rem 0 0;
}

.quick-build-increment-row {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.quick-build-increment-button {
    background: #eff6ff;
    border: 2px solid #bfdbfe;
    border-radius: 10px;
    color: #1d4ed8;
    cursor: pointer;
    font-size: 1.1rem;
    font-weight: 800;
    min-height: 3.25rem;
    min-width: 4.5rem;
    padding: .5rem .75rem;
}

.quick-build-increment-button:hover,
.quick-build-increment-button:focus-visible {
    background: #1d4ed8;
    border-color: #1d4ed8;
    color: #ffffff;
}

.quick-build-spinner-row {
    align-items: center;
    display: flex;
    gap: .5rem;
}

.quick-build-spinner-button {
    background: #f8fafc;
    border: 1px solid #dbe4ee;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1.1rem;
    min-height: 2.6rem;
    min-width: 2.6rem;
}

.quick-build-counter-input {
    flex: 1 1 auto;
    font-size: 1.1rem;
    min-height: 2.6rem;
    text-align: center;
}

.quick-build-review p {
    background: #f8fafc;
    border: 1px solid #dbe4ee;
    border-radius: 10px;
    line-height: 1.5;
    margin: 0;
    padding: .75rem .9rem;
}

.quick-build-review-actions {
    display: flex;
    gap: .75rem;
    justify-content: space-between;
}

@media (max-width: 640px) {
    .estimate-quick-build-dialog {
        border-radius: 0;
        max-height: 100vh;
        max-width: 100vw;
    }
}

.estimate-service-native-select {
    grid-column: 1 / -1;
}

.estimate-line-builder-shell.is-service-combobox-ready .estimate-service-native-select {
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

@media (min-width: 900px) {
    .app-shell:not([data-mobile-layout-mode="mobile"]) .estimate-form-shell[data-operational-ui="v3"] {
        max-width: min(100%, 1440px);
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .estimate-form-shell[data-operational-ui="v3"] .document-form {
        display: grid;
        gap: 1rem;
        grid-template-columns: minmax(0, 1fr) minmax(320px, .42fr);
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .estimate-form-shell[data-operational-ui="v3"] .estimate-line-builder-card,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .estimate-form-shell[data-operational-ui="v3"] .estimate-mode-card {
        grid-column: 1 / -1;
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .estimate-form-shell[data-operational-ui="v3"] .estimate-line-editor-grid {
        align-items: start;
        grid-template-columns: minmax(16rem, 1fr) repeat(4, minmax(8rem, .5fr));
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .estimate-form-shell[data-operational-ui="v3"] .estimate-line-builder-layout {
        align-items: start;
        grid-template-columns: minmax(0, 1fr) minmax(16rem, .28fr);
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .estimate-form-shell[data-operational-ui="v3"] .estimate-quick-add-panel {
        position: sticky;
        top: 1rem;
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .estimate-form-shell[data-operational-ui="v3"] .estimate-bulk-service-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .estimate-form-shell[data-operational-ui="v3"] .estimate-line-row-actions .btn,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .estimate-form-shell[data-operational-ui="v3"] .estimate-line-builder-actions .btn,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .estimate-form-shell[data-operational-ui="v3"] .estimate-bulk-items-panel .btn,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .estimate-form-shell[data-operational-ui="v3"] .estimate-bulk-service-panel .btn {
        flex: 0 1 auto;
        width: auto;
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .estimate-form-shell[data-operational-ui="v3"] .estimate-builder-summary-card,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .estimate-form-shell[data-operational-ui="v3"] .totals-card {
        position: sticky;
        top: 1rem;
    }
}

@media (min-width: 1200px) {
    .app-shell[data-mobile-layout-mode="mobile"] .estimate-form-shell[data-operational-ui="v3"] {
        max-width: min(100%, 1440px) ;
    }

    .app-shell[data-mobile-layout-mode="mobile"] .estimate-form-shell[data-operational-ui="v3"] .document-form {
        display: grid ;
        gap: 1rem ;
        grid-template-columns: minmax(0, 1fr) minmax(320px, .42fr) ;
    }

    .app-shell[data-mobile-layout-mode="mobile"] .estimate-form-shell[data-operational-ui="v3"] .estimate-line-builder-card,
    .app-shell[data-mobile-layout-mode="mobile"] .estimate-form-shell[data-operational-ui="v3"] .estimate-mode-card {
        grid-column: 1 / -1 ;
    }

    .app-shell[data-mobile-layout-mode="mobile"] .estimate-form-shell[data-operational-ui="v3"] .estimate-line-editor-grid {
        grid-template-columns: minmax(16rem, 1fr) repeat(4, minmax(8rem, .5fr)) ;
    }

    .app-shell[data-mobile-layout-mode="mobile"] .estimate-form-shell[data-operational-ui="v3"] .estimate-line-builder-layout {
        grid-template-columns: minmax(0, 1fr) minmax(16rem, .28fr) ;
    }

    .app-shell[data-mobile-layout-mode="mobile"] .estimate-form-shell[data-operational-ui="v3"] .estimate-bulk-service-list {
        grid-template-columns: repeat(2, minmax(0, 1fr)) ;
    }
}
.totals-card p { align-items: center; display: flex; justify-content: space-between; margin: .2rem 0; }
.grand-total { background: #f3f4f6; font-size: 1.05rem; padding: .65rem; }
.service-item-form-note {
    border: 1px solid #ebc86b;
    border-radius: 8px;
    margin: 0 0 1rem;
    padding: .85rem 1rem;
}
.service-item-grouped-form {
    align-items: stretch;
}
.service-item-form-card {
    border-radius: 8px;
    min-width: 0;
}
.service-item-form-shell,
.service-item-grouped-form,
.service-item-form-card,
.service-item-profile-layout,
.service-item-profile-main,
.service-item-command-summary,
.service-item-catalog-card,
.work-order-line-card,
.line-item-flow-card,
.line-timer-readiness-panel,
.line-timer-readiness-card {
    min-width: 0;
    overflow-wrap: anywhere;
}
.service-item-profile-layout .document-main {
    display: grid;
    gap: 1rem;
}
.service-item-profile-hero {
    align-items: center;
    display: grid;
    gap: 1rem;
    grid-template-columns: 180px minmax(0, 1fr);
}
.service-item-profile-photo {
    align-items: center;
    aspect-ratio: 4 / 3;
    background: #edf4f7;
    border: 1px solid #d8e3ea;
    border-radius: 8px;
    color: #526579;
    display: flex;
    font-weight: 850;
    justify-content: center;
    object-fit: cover;
    width: 100%;
}
.service-item-profile-main h2 {
    margin: .1rem 0 .35rem;
}
.service-item-metric-grid,
.service-item-usage-grid,
.service-item-flag-grid {
    display: grid;
    gap: .75rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.service-item-flag-grid article {
    border-left-color: #64748b;
}
.service-item-flag-grid article.is-enabled {
    background: #eefaf1;
    border-left-color: #2a9d6f;
}
.service-item-flag-grid article.is-muted {
    color: #64748b;
}
.service-item-flag-grid span,
.service-item-usage-grid small {
    color: #526579;
    display: block;
    margin-top: .2rem;
}
.service-item-profile-section {
    border-radius: 8px;
}
.service-item-lineage-section > p {
    margin-top: 0;
}
.service-item-lineage-card {
    display: grid;
    gap: .45rem;
    min-width: 0;
}
.service-item-lineage-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}
.service-item-lineage-note,
.service-item-lineage-filter-notice {
    background: #f8fbff;
    border: 1px solid #dbe4ee;
    border-radius: 8px;
    color: #334155;
    font-size: .88rem;
    font-weight: 750;
    line-height: 1.45;
    margin: .7rem 0 1rem;
    overflow-wrap: anywhere;
    padding: .7rem .85rem;
}
.service-item-lineage-filter-notice a {
    font-weight: 900;
}
.service-item-profile-review-card,
.service-item-advanced-review-card {
    display: grid;
    gap: .75rem;
}
.service-item-daily-action-hub {
    background: linear-gradient(135deg, #fff 0%, #f8fbff 62%, #eefdf5 100%);
    border-left: 4px solid #16a34a;
}
.service-item-profile-review-actions,
.service-item-advanced-review-actions {
    display: grid;
    gap: .55rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
.service-item-daily-action-grid {
    grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
}
.service-item-profile-review-actions .btn,
.service-item-advanced-review-actions .btn {
    align-items: flex-start;
    display: grid;
    gap: .2rem;
    justify-items: start;
    min-width: 0;
    text-align: left;
    white-space: normal;
}
.service-item-profile-review-actions .btn span,
.service-item-advanced-review-actions .btn span {
    color: #526579;
    font-size: .74rem;
    font-weight: 750;
    line-height: 1.3;
}
.service-item-daily-action-grid .btn {
    min-height: 4.6rem;
}
.service-item-cleanup-priority-strip {
    border-left: 4px solid #2563eb;
    display: grid;
    gap: .85rem;
}
.service-item-cleanup-heading {
    align-items: stretch;
    display: grid;
    gap: .85rem;
    grid-template-columns: minmax(0, 1fr) minmax(16rem, .42fr);
}
.service-item-cleanup-heading h2 {
    margin: .1rem 0 .35rem;
}
.service-item-cleanup-heading p,
.service-item-cleanup-card p,
.service-item-cleanup-primary p {
    color: #526579;
    font-weight: 750;
    line-height: 1.4;
    margin: 0;
    overflow-wrap: anywhere;
}
.service-item-cleanup-primary {
    background: #f8fbff;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    border-left: 4px solid #2563eb;
    display: grid;
    gap: .4rem;
    min-width: 0;
    padding: .75rem;
}
.service-item-cleanup-primary span,
.service-item-cleanup-card span {
    color: #2563eb;
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.service-item-cleanup-primary strong,
.service-item-cleanup-card strong {
    color: #0f172a;
    display: block;
    font-size: 1rem;
    line-height: 1.2;
    overflow-wrap: anywhere;
}
.service-item-cleanup-primary .btn {
    justify-self: start;
}
.service-item-cleanup-priority-grid {
    display: grid;
    gap: .65rem;
    grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr));
}
.service-item-cleanup-card {
    background: #fff;
    border: 1px solid #dbe4ee;
    border-radius: 8px;
    color: inherit;
    display: grid;
    gap: .35rem;
    min-height: 9.2rem;
    min-width: 0;
    padding: .75rem;
    text-decoration: none;
}
.service-item-cleanup-card.needs-review {
    border-left: 4px solid #f59e0b;
}
.service-item-cleanup-card.is-ready {
    border-left: 4px solid #10b981;
}
.service-item-cleanup-card em {
    color: #64748b;
    font-size: .75rem;
    font-style: normal;
    font-weight: 800;
    overflow-wrap: anywhere;
}
.service-item-cleanup-reason-list {
    display: grid;
    gap: .2rem;
    margin: .15rem 0 0;
    padding-left: 1rem;
}
.service-item-cleanup-reason-list li {
    color: #334155;
    font-size: .76rem;
    font-weight: 800;
    line-height: 1.25;
    overflow-wrap: anywhere;
}
.service-item-duration-profile-summary {
    display: grid;
    gap: .85rem;
}
.service-item-pricing-profile-summary {
    border-left: 4px solid #0f766e;
}
.service-item-supplier-inventory-profile-summary {
    border-left: 4px solid #7c3aed;
}
.service-item-reporting-profile-summary {
    border-left: 4px solid #9333ea;
}
.service-item-pricing-inventory-lineage-readiness {
    border-left: 4px solid #0369a1;
}
.service-item-duration-profile-heading {
    align-items: flex-start;
    display: flex;
    gap: .8rem;
    justify-content: space-between;
    min-width: 0;
}
.service-item-duration-profile-heading h2 {
    margin: .1rem 0 .3rem;
}
.service-item-duration-profile-heading p,
.service-item-duration-profile-note {
    color: #526579;
    font-weight: 750;
    line-height: 1.45;
    margin: 0;
    overflow-wrap: anywhere;
}
.service-item-duration-profile-state {
    align-items: flex-end;
    display: grid;
    gap: .35rem;
    justify-items: end;
    min-width: 160px;
}
.service-item-duration-profile-state > span:first-child {
    color: #17233a;
    font-size: .82rem;
    font-weight: 900;
    text-align: right;
}
.service-item-duration-profile-metrics {
    display: grid;
    gap: .65rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.service-item-duration-profile-metrics article {
    background: #f8fbff;
    border: 1px solid #dbe4ee;
    border-left: 4px solid #2563eb;
    border-radius: 8px;
    min-width: 0;
    padding: .7rem;
}
.service-item-pricing-profile-summary .service-item-duration-profile-metrics article {
    border-left-color: #0f766e;
}
.service-item-supplier-inventory-profile-summary .service-item-duration-profile-metrics article {
    border-left-color: #7c3aed;
}
.service-item-reporting-profile-summary .service-item-duration-profile-metrics article {
    border-left-color: #9333ea;
}
.service-item-duration-profile-metrics span {
    color: #526579;
    display: block;
    font-size: .72rem;
    font-weight: 850;
}
.service-item-duration-profile-metrics strong {
    color: #17233a;
    display: block;
    font-size: .9rem;
    margin-top: .2rem;
    overflow-wrap: anywhere;
}
.service-item-duration-profile-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    min-width: 0;
}
.service-item-pricing-profile-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    min-width: 0;
}
.service-item-supplier-inventory-profile-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    min-width: 0;
}
.service-item-reporting-profile-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    min-width: 0;
}
.service-item-pricing-inventory-lineage-grid {
    display: grid;
    gap: .65rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
.service-item-pricing-inventory-lineage-grid article {
    background: #f8fbff;
    border: 1px solid #dbe4ee;
    border-left: 4px solid #0369a1;
    border-radius: 8px;
    display: grid;
    gap: .3rem;
    min-width: 0;
    padding: .7rem;
}
.service-item-pricing-inventory-lineage-grid strong,
.service-item-pricing-inventory-lineage-grid span {
    overflow-wrap: anywhere;
}
.service-item-pricing-inventory-lineage-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: .75rem;
    min-width: 0;
}
.service-item-bring-panel {
    min-width: 0;
}
.service-item-bring-list-grid {
    display: grid;
    gap: .75rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: .75rem 0 1rem;
}
.service-item-bring-card,
.service-item-bring-empty {
    background: #f8fbff;
    border: 1px solid #dbe4ee;
    border-radius: 8px;
    display: grid;
    gap: .55rem;
    min-width: 0;
    overflow-wrap: anywhere;
    padding: .85rem;
}
.service-item-bring-card.is-inactive {
    opacity: .72;
}
.service-item-bring-card-title {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    justify-content: space-between;
    min-width: 0;
}
.service-item-bring-card-title strong {
    color: #17233a;
    min-width: 0;
    overflow-wrap: anywhere;
}
.service-item-bring-card p,
.service-item-bring-empty {
    margin: 0;
}
.service-item-bring-card p span {
    background: #eef4f8;
    border: 1px solid #d8e3ea;
    border-radius: 999px;
    display: inline-flex;
    font-size: .74rem;
    font-weight: 850;
    margin: .15rem .2rem .15rem 0;
    max-width: 100%;
    overflow-wrap: anywhere;
    padding: .28rem .45rem;
}
.service-item-bring-edit summary {
    cursor: pointer;
    font-weight: 900;
}
.service-item-bring-form {
    background: #ffffff;
    border: 1px solid #dbe4ee;
    border-radius: 8px;
    margin-top: .65rem;
    padding: .75rem;
}
.service-item-material-panel {
    min-width: 0;
}
.service-item-material-grid {
    display: grid;
    gap: .75rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: .75rem 0 1rem;
}
.service-item-material-card,
.service-item-material-empty {
    background: #f9fbf7;
    border: 1px solid #d8e6cc;
    border-radius: 8px;
    display: grid;
    gap: .55rem;
    min-width: 0;
    overflow-wrap: anywhere;
    padding: .85rem;
}
.service-item-material-card.is-inactive {
    opacity: .72;
}
.service-item-material-card-title {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    justify-content: space-between;
    min-width: 0;
}
.service-item-material-card-title strong {
    color: #17233a;
    min-width: 0;
    overflow-wrap: anywhere;
}
.service-item-material-card p,
.service-item-material-empty {
    margin: 0;
}
.service-item-material-card p span {
    background: #edf7e8;
    border: 1px solid #d6e8ca;
    border-radius: 999px;
    display: inline-flex;
    font-size: .74rem;
    font-weight: 850;
    margin: .15rem .2rem .15rem 0;
    max-width: 100%;
    overflow-wrap: anywhere;
    padding: .28rem .45rem;
}
.service-item-material-edit summary {
    cursor: pointer;
    font-weight: 900;
}
.service-item-material-form {
    background: #ffffff;
    border: 1px solid #d8e6cc;
    border-radius: 8px;
    margin-top: .65rem;
    padding: .75rem;
}
.service-item-material-pricing-panel {
    min-width: 0;
}
.service-item-material-pricing-grid {
    display: grid;
    gap: .75rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: .75rem 0 1rem;
}
.service-item-material-pricing-card,
.service-item-material-pricing-empty {
    background: #f8fbff;
    border: 1px solid #cfe0ef;
    border-radius: 8px;
    display: grid;
    gap: .55rem;
    min-width: 0;
    overflow-wrap: anywhere;
    padding: .85rem;
}
.service-item-material-pricing-card.is-inactive {
    opacity: .72;
}
.service-item-material-pricing-card-title {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    justify-content: space-between;
    min-width: 0;
}
.service-item-material-pricing-card-title strong {
    color: #17233a;
    min-width: 0;
    overflow-wrap: anywhere;
}
.service-item-material-pricing-card p,
.service-item-material-pricing-empty {
    margin: 0;
}
.service-item-material-pricing-card p span {
    background: #eef6ff;
    border: 1px solid #cfe0ef;
    border-radius: 999px;
    display: inline-flex;
    font-size: .74rem;
    font-weight: 850;
    margin: .15rem .2rem .15rem 0;
    max-width: 100%;
    overflow-wrap: anywhere;
    padding: .28rem .45rem;
}
.service-item-color-swatch {
    background: var(--swatch-color, #ffffff);
    border: 1px solid #b7c7d7;
    border-radius: 999px;
    display: inline-flex;
    height: 1rem;
    margin-right: .3rem;
    vertical-align: middle;
    width: 1rem;
}
.service-item-material-pricing-edit summary {
    cursor: pointer;
    font-weight: 900;
}
.service-item-material-pricing-form {
    background: #ffffff;
    border: 1px solid #cfe0ef;
    border-radius: 8px;
    margin-top: .65rem;
    padding: .75rem;
}
.service-item-inventory-planning-panel {
    min-width: 0;
}
.service-item-inventory-planning-grid {
    display: grid;
    gap: .75rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: .75rem 0 1rem;
}
.service-item-inventory-planning-card,
.service-item-inventory-planning-empty {
    background: #fffdf6;
    border: 1px solid #ead8ad;
    border-radius: 8px;
    display: grid;
    gap: .55rem;
    min-width: 0;
    overflow-wrap: anywhere;
    padding: .85rem;
}
.service-item-inventory-planning-card.is-inactive {
    opacity: .72;
}
.service-item-inventory-planning-card-title {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    justify-content: space-between;
    min-width: 0;
}
.service-item-inventory-planning-card-title strong {
    color: #17233a;
    min-width: 0;
    overflow-wrap: anywhere;
}
.service-item-inventory-planning-card p,
.service-item-inventory-planning-empty {
    margin: 0;
}
.service-item-inventory-planning-card p span {
    background: #fff7df;
    border: 1px solid #ead8ad;
    border-radius: 999px;
    display: inline-flex;
    font-size: .74rem;
    font-weight: 850;
    margin: .15rem .2rem .15rem 0;
    max-width: 100%;
    overflow-wrap: anywhere;
    padding: .28rem .45rem;
}
.service-item-inventory-planning-edit summary {
    cursor: pointer;
    font-weight: 900;
}
.service-item-inventory-planning-form {
    background: #ffffff;
    border: 1px solid #ead8ad;
    border-radius: 8px;
    margin-top: .65rem;
    padding: .75rem;
}
.service-item-supplier-order-panel {
    min-width: 0;
}
.service-item-supplier-order-grid {
    display: grid;
    gap: .75rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: .75rem 0 1rem;
}
.service-item-supplier-order-card,
.service-item-supplier-order-empty {
    background: #f8fbff;
    border: 1px solid #c7d8ea;
    border-radius: 8px;
    display: grid;
    gap: .55rem;
    min-width: 0;
    overflow-wrap: anywhere;
    padding: .85rem;
}
.service-item-supplier-order-card.is-inactive {
    opacity: .72;
}
.service-item-supplier-order-card-title {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    justify-content: space-between;
    min-width: 0;
}
.service-item-supplier-order-card-title strong {
    color: #17233a;
    min-width: 0;
    overflow-wrap: anywhere;
}
.service-item-supplier-order-card p,
.service-item-supplier-order-empty {
    margin: 0;
}
.service-item-supplier-order-card p span {
    background: #eef6ff;
    border: 1px solid #c7d8ea;
    border-radius: 999px;
    display: inline-flex;
    font-size: .74rem;
    font-weight: 850;
    margin: .15rem .2rem .15rem 0;
    max-width: 100%;
    overflow-wrap: anywhere;
    padding: .28rem .45rem;
}
.service-item-supplier-order-edit summary {
    cursor: pointer;
    font-weight: 900;
}
.service-item-supplier-order-form {
    background: #ffffff;
    border: 1px solid #c7d8ea;
    border-radius: 8px;
    margin-top: .65rem;
    padding: .75rem;
}
.service-item-review-center-shell,
.service-item-review-center-actions {
    min-width: 0;
}
.service-item-review-center-safety {
    background: #eef6ff;
    border: 1px solid #c7d8ea;
    border-left: 4px solid #2d76b8;
    border-radius: 8px;
    color: #173f6d;
    font-weight: 750;
    margin: .75rem 0 1rem;
    overflow-wrap: anywhere;
    padding: .85rem;
}
.service-item-review-center-grid {
    display: grid;
    gap: .85rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: .75rem 0 1rem;
}
.service-item-review-center-card {
    background: #ffffff;
    border: 1px solid #dbe4ee;
    border-radius: 8px;
    display: grid;
    gap: .75rem;
    min-width: 0;
    overflow-wrap: anywhere;
    padding: .9rem;
}
.service-item-review-center-card[data-service-item-review-center-card="cost-margin"] {
    border-left: 4px solid #a9701f;
}
.service-item-review-center-card[data-service-item-review-center-card="duration"] {
    border-left: 4px solid #5c62b8;
}
.service-item-review-center-card[data-service-item-review-center-card="inventory"] {
    border-left: 4px solid #18735f;
}
.service-item-review-center-card[data-service-item-review-center-card="supplier"] {
    border-left: 4px solid #2d76b8;
}
.service-item-review-center-card-title {
    align-items: flex-start;
    display: flex;
    gap: .65rem;
    justify-content: space-between;
    min-width: 0;
}
.service-item-review-center-card-title h2 {
    color: #17233a;
    font-size: 1rem;
    line-height: 1.25;
    margin: .15rem 0 .15rem;
    overflow-wrap: anywhere;
}
.service-item-review-center-card-title p {
    color: #526579;
    font-size: .85rem;
    font-weight: 750;
    margin: 0;
    overflow-wrap: anywhere;
}
.service-item-review-center-card-title .btn {
    flex: 0 0 auto;
}
.service-item-review-center-metrics {
    display: grid;
    gap: .5rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0;
}
.service-item-review-center-metrics div {
    background: #f8fafc;
    border: 1px solid #e3eaf2;
    border-radius: 8px;
    min-width: 0;
    padding: .65rem;
}
.service-item-review-center-metrics dt {
    color: #526579;
    font-size: .72rem;
    font-weight: 850;
}
.service-item-review-center-metrics dd {
    color: #17233a;
    font-size: 1rem;
    font-weight: 900;
    margin: .15rem 0 0;
    overflow-wrap: anywhere;
}
.service-item-review-center-availability {
    color: #526579;
    font-size: .86rem;
    font-weight: 750;
    margin: 0;
    overflow-wrap: anywhere;
}
.service-item-review-center-actions-row {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    min-width: 0;
}
.service-item-tree-shell {
    margin-inline: auto;
    min-width: 0;
    width: 100%;
}
@supports selector(:has(*)) {
    .main-content:has(.service-item-tree-shell) {
        max-width: none;
        padding: .5rem clamp(.5rem, 1vw, 1rem) 1rem;
        width: 100%;
    }

    .main-content:has(.service-item-tree-shell) .global-topbar {
        margin-inline: auto;
        max-width: 1680px;
    }
}
.service-item-tree-shell.operational-module-shell {
    --item-tree-canvas-min-height: max(520px, calc(100svh - 28rem));
    --item-tree-workspace-height: max(640px, calc(100svh - 15rem));
    border-radius: .85rem;
    margin-bottom: .75rem;
    padding: clamp(.75rem, 1vw, 1rem);
}
.service-item-tree-entitlement {
    align-items: center;
    border: 1px solid #c7d8ea;
    border-left: 4px solid #2d76b8;
    border-radius: 8px;
    display: flex;
    gap: .75rem;
    justify-content: space-between;
    margin: .75rem 0 1rem;
    min-width: 0;
    overflow-wrap: anywhere;
    padding: .85rem;
}
.service-item-tree-entitlement.is-unlocked {
    background: #ecfdf5;
    border-color: #86efac;
    border-left-color: #18735f;
    color: #14532d;
}
.service-item-tree-entitlement.is-locked {
    background: #fff7ed;
    border-color: #fed7aa;
    border-left-color: #a9701f;
    color: #713f12;
}
.service-item-tree-entitlement strong,
.service-item-tree-entitlement span {
    display: block;
    min-width: 0;
}
.service-item-tree-entitlement span {
    font-size: .86rem;
    font-weight: 750;
    margin-top: .18rem;
}
.service-item-tree-safety,
.service-item-tree-host-picker {
    min-width: 0;
    overflow-wrap: anywhere;
}
.service-item-tree-safety {
    background: #eef6ff;
    border: 1px solid #c7d8ea;
    border-left: 4px solid #2d76b8;
    border-radius: 8px;
    color: #173f6d;
    font-weight: 750;
    margin: .75rem 0 1rem;
}
.service-item-tree-host-grid {
    display: grid;
    gap: .75rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: .75rem;
}
.service-item-tree-host-card {
    align-items: center;
    background: #fff;
    border: 1px solid #dbe4ee;
    border-radius: 8px;
    display: flex;
    gap: .75rem;
    justify-content: space-between;
    min-width: 0;
    overflow-wrap: anywhere;
    padding: .85rem;
}
.service-item-tree-host-card div {
    min-width: 0;
}
.service-item-tree-host-card strong,
.service-item-tree-host-card span,
.service-item-tree-host-card small {
    display: block;
    min-width: 0;
    overflow-wrap: anywhere;
}
.service-item-tree-host-card span,
.service-item-tree-host-card small {
    color: #526579;
    font-size: .82rem;
    font-weight: 800;
}
.service-item-tree-current {
    display: grid;
    gap: .75rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: .75rem 0 1rem;
}
.service-item-tree-current article {
    background: #f8fbff;
    border: 1px solid #dbe4ee;
    border-radius: 8px;
    min-width: 0;
    overflow-wrap: anywhere;
    padding: .8rem;
}
.service-item-tree-current span {
    color: #526579;
    display: block;
    font-size: .74rem;
    font-weight: 850;
}
.service-item-tree-current strong {
    color: #17233a;
    display: block;
    margin-top: .15rem;
    overflow-wrap: anywhere;
}
.service-item-tree-notice {
    border-radius: 8px;
    font-weight: 800;
    margin: .75rem 0 1rem;
    overflow-wrap: anywhere;
    padding: .85rem;
}
.service-item-tree-notice.success {
    background: #ecfdf5;
    border: 1px solid #86efac;
    color: #14532d;
}
.service-item-tree-notice.error {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #7f1d1d;
}
.service-item-tree-notice ul {
    margin: .45rem 0 0 1.1rem;
    padding: 0;
}
.service-item-tree-builder {
    display: flex;
    flex-direction: column;
    min-height: calc(100svh - 2rem);
    min-width: 0;
    overflow: hidden;
}
.service-item-tree-builder-heading {
    align-items: flex-start;
    border-bottom: 1px solid #dbe4ee;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    margin: -.15rem 0 1rem;
    min-width: 0;
    padding-bottom: .85rem;
    flex: 0 0 auto;
}
.service-item-tree-builder-heading > div {
    min-width: 0;
}
.service-item-tree-builder-heading h2 {
    color: #17233a;
    font-size: 1.15rem;
    line-height: 1.25;
    margin: .15rem 0 .25rem;
    overflow-wrap: anywhere;
}
.service-item-tree-builder-heading p {
    margin: .2rem 0 0;
    overflow-wrap: anywhere;
}
.service-item-tree-builder-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    justify-content: flex-end;
    min-width: 0;
}
.service-item-tree-save-form {
    margin: 0;
}
.service-item-tree-workspace {
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(220px, .34fr) minmax(0, 1fr);
    min-width: 0;
}
.service-item-tree-root {
    align-self: start;
    background: #f8fbff;
    border: 1px solid #c7d8ea;
    border-left: 4px solid #18735f;
    border-radius: 8px;
    display: grid;
    gap: .25rem;
    min-height: 7.5rem;
    min-width: 0;
    overflow-wrap: anywhere;
    padding: .9rem;
}
.service-item-tree-root.is-drop-target {
    background: #ecfdf5;
    border-color: #86efac;
    box-shadow: 0 0 0 3px rgba(24, 115, 95, .12);
}
.service-item-tree-root span,
.service-item-tree-root small {
    color: #526579;
    font-size: .8rem;
    font-weight: 850;
}
.service-item-tree-root strong {
    color: #17233a;
    overflow-wrap: anywhere;
}
.service-item-tree-list {
    min-width: 0;
}
.service-item-tree-level {
    border-left: 2px solid #dbe4ee;
    display: grid;
    gap: .65rem;
    list-style: none;
    margin: 0 0 0 .75rem;
    min-width: 0;
    padding: 0 0 0 .85rem;
}
.service-item-tree-list > .service-item-tree-level {
    border-left: 0;
    margin-left: 0;
    padding-left: 0;
}
.service-item-tree-node {
    min-width: 0;
    position: relative;
}
.service-item-tree-node::before {
    background: #dbe4ee;
    content: "";
    height: 2px;
    left: -.85rem;
    position: absolute;
    top: 1.65rem;
    width: .65rem;
}
.service-item-tree-list > .service-item-tree-level > .service-item-tree-node::before {
    display: none;
}
.service-item-tree-node-card {
    align-items: center;
    background: #fff;
    border: 1px solid #dbe4ee;
    border-radius: 8px;
    display: grid;
    gap: .65rem;
    grid-template-columns: auto minmax(0, 1fr) auto;
    min-width: 0;
    overflow-wrap: anywhere;
    padding: .7rem;
}
.service-item-tree-node-card.is-drop-target {
    background: #eef6ff;
    border-color: #2d76b8;
    box-shadow: 0 0 0 3px rgba(45, 118, 184, .12);
}
.service-item-tree-node-main {
    display: grid;
    gap: .35rem;
    min-width: 0;
}
.service-item-tree-node-main strong,
.service-item-tree-node-main small {
    min-width: 0;
    overflow-wrap: anywhere;
}
.service-item-tree-node-main small {
    color: #526579;
    font-size: .8rem;
    font-weight: 800;
}
.service-item-tree-drag-handle {
    background: #eef6ff;
    border: 1px solid #c7d8ea;
    border-radius: 8px;
    color: #173f6d;
    cursor: grab;
    font-size: .78rem;
    font-weight: 900;
    padding: .36rem .5rem;
    user-select: none;
}
.service-item-tree-drag-handle:active {
    cursor: grabbing;
}
.service-item-tree-node-controls {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
    justify-content: flex-end;
}
.service-item-tree-node-controls button {
    min-height: 2rem;
    padding: .28rem .45rem;
}
.service-item-tree-badges {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
    min-width: 0;
}
.service-item-tree-badges span {
    background: #f8fafc;
    border: 1px solid #dbe4ee;
    border-radius: 999px;
    color: #42566d;
    font-size: .72rem;
    font-weight: 850;
    max-width: 100%;
    overflow-wrap: anywhere;
    padding: .22rem .45rem;
}
.service-item-tree-canvas-node .service-item-tree-badges.is-compact {
    gap: .22rem;
    max-height: 3.8rem;
    overflow: hidden;
}
.service-item-tree-canvas-node .service-item-tree-badges.is-compact span {
    font-size: .66rem;
    line-height: 1;
    padding: .16rem .34rem;
}
.service-item-tree-empty,
.service-item-tree-empty-real,
.service-item-tree-state {
    border-radius: 8px;
    margin-top: .75rem;
    min-width: 0;
    overflow-wrap: anywhere;
    padding: .8rem;
}
.service-item-tree-empty,
.service-item-tree-empty-real {
    background: #f8fbff;
    border: 1px dashed #c7d8ea;
    color: #526579;
    font-weight: 800;
}
.service-item-tree-state {
    background: #f8fafc;
    border: 1px solid #dbe4ee;
    color: #526579;
    flex: 0 0 auto;
    font-weight: 850;
}
.service-item-tree-state[data-service-item-tree-state="dirty"] {
    background: #fff7ed;
    border-color: #fed7aa;
    color: #713f12;
}
.service-item-tree-state[data-service-item-tree-state="saved"] {
    background: #ecfdf5;
    border-color: #86efac;
    color: #14532d;
}
.service-item-tree-state[data-service-item-tree-state="error"] {
    background: #fef2f2;
    border-color: #fecaca;
    color: #7f1d1d;
}
@media (max-width: 1180px) {
    .service-item-tree-host-grid,
    .service-item-tree-current {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 760px), (hover: none) and (pointer: coarse) {
    .service-item-tree-entitlement,
    .service-item-tree-host-card,
    .service-item-tree-builder-heading,
    .service-item-tree-node-card {
        align-items: stretch;
        display: grid;
        grid-template-columns: 1fr;
    }

    .service-item-tree-host-grid,
    .service-item-tree-current,
    .service-item-tree-workspace {
        grid-template-columns: 1fr;
    }

    .service-item-tree-builder-actions,
    .service-item-tree-node-controls,
    .service-item-tree-save-form {
        align-items: stretch;
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
    }

    .service-item-tree-builder-actions > *,
    .service-item-tree-builder-actions .btn,
    .service-item-tree-builder-actions button,
    .service-item-tree-save-form > *,
    .service-item-tree-node-controls > *,
    .service-item-tree-node-controls button,
    .service-item-tree-host-card .btn,
    .service-item-tree-entitlement .btn {
        min-width: 0;
        width: 100%;
    }

    .service-item-tree-root {
        min-height: 0;
    }

    .service-item-tree-level {
        margin-left: .4rem;
        padding-left: .65rem;
    }

    .service-item-tree-node::before {
        left: -.65rem;
        width: .45rem;
    }

    .service-item-tree-drag-handle {
        text-align: center;
    }
}

@media (max-width: 430px) {
    .service-item-tree-builder,
    .service-item-tree-safety,
    .service-item-tree-host-picker,
    .service-item-tree-host-card,
    .service-item-tree-current article,
    .service-item-tree-node-card,
    .service-item-tree-empty,
    .service-item-tree-empty-real {
        padding: .75rem;
    }
}
.service-item-tree-dock-controls {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    justify-content: flex-end;
    margin: -.25rem 0 .85rem;
    min-width: 0;
    flex: 0 0 auto;
}
.service-item-tree-dock-controls span {
    color: #526579;
    font-size: .78rem;
    font-weight: 900;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.service-item-tree-dock-controls button[aria-pressed="true"] {
    background: #173f6d;
    border-color: #173f6d;
    color: #fff;
}
.service-item-tree-workspace {
    background: #f8fbff;
    border: 1px solid #dbe4ee;
    border-radius: 8px;
    display: grid;
    flex: 1 1 auto;
    gap: .85rem;
    grid-template-areas:
        "canvas inspector"
        "tray inspector";
    grid-template-columns: minmax(0, 1fr) minmax(300px, 21rem);
    grid-template-rows: minmax(var(--item-tree-canvas-min-height, 520px), 1fr) minmax(10rem, 24vh);
    min-height: var(--item-tree-workspace-height, 640px);
    min-width: 0;
    padding: .85rem;
}
.service-item-tree-workspace[data-service-item-tree-dock-layout="bottom"] {
    grid-template-areas:
        "canvas inspector"
        "tray inspector";
    grid-template-columns: minmax(0, 1fr) minmax(300px, 21rem);
    grid-template-rows: minmax(var(--item-tree-canvas-min-height, 520px), 1fr) minmax(18rem, 34vh);
}
.service-item-tree-workspace[data-service-item-tree-dock-layout="left"] {
    grid-template-areas:
        "tray canvas inspector";
    grid-template-columns: minmax(230px, 18rem) minmax(0, 1fr) minmax(300px, 21rem);
    grid-template-rows: minmax(var(--item-tree-canvas-min-height, 520px), 1fr);
}
.service-item-tree-canvas-wrap {
    background: #fff;
    border: 1px solid #dbe4ee;
    border-radius: 8px;
    grid-area: canvas;
    height: 100%;
    min-height: var(--item-tree-canvas-min-height, 520px);
    min-width: 0;
    overscroll-behavior: contain;
    overflow: auto;
    position: relative;
}
.service-item-tree-canvas {
    min-height: 100%;
    min-width: 100%;
    position: relative;
}
.service-item-tree-canvas-content,
.service-item-tree-lines {
    left: 0;
    position: absolute;
    top: 0;
}
.service-item-tree-canvas-content {
    min-height: 100%;
}
.service-item-tree-lines {
    pointer-events: none;
    z-index: 1;
}
.service-item-tree-line {
    fill: none;
    opacity: .86;
    stroke: #243041;
    stroke-linecap: round;
    stroke-width: 3;
}
.service-item-tree-list {
    inset: 0;
    min-width: 0;
    position: absolute;
    z-index: 3;
}
.service-item-tree-root {
    background: #fff;
    border: 3px solid #17233a;
    border-radius: 4px;
    box-sizing: border-box;
    box-shadow: 0 10px 24px rgba(23, 35, 58, .08);
    display: grid;
    gap: .24rem;
    justify-items: center;
    left: max(42px, calc(50% - 112px));
    min-width: 0;
    padding: .85rem;
    position: absolute;
    text-align: center;
    top: 42px;
    width: 224px;
    z-index: 4;
}
.service-item-tree-root strong,
.service-item-tree-root small,
.service-item-tree-root span {
    max-width: 100%;
    overflow-wrap: anywhere;
}
.service-item-tree-root span {
    color: #526579;
    font-size: .74rem;
    font-weight: 900;
    text-transform: uppercase;
}
.service-item-tree-root strong {
    color: #111827;
    font-size: .98rem;
}
.service-item-tree-root small {
    color: #526579;
    font-size: .76rem;
    font-weight: 800;
}
.service-item-tree-root.is-drop-target {
    background: #ecfdf5;
    border-color: #18735f;
    box-shadow: 0 0 0 4px rgba(24, 115, 95, .16);
}
.service-item-tree-canvas-node {
    background: #fff;
    border: 2px solid #17233a;
    border-left: 8px solid var(--item-tree-node-color, #2d76b8);
    border-radius: 4px;
    box-shadow: 0 8px 18px rgba(23, 35, 58, .08);
    cursor: pointer;
    display: grid;
    gap: .34rem;
    min-height: 88px;
    min-width: 0;
    overflow: hidden;
    overflow-wrap: anywhere;
    padding: .5rem;
    position: absolute;
    z-index: 4;
}
.service-item-tree-canvas-node.is-selected {
    border-color: #2d76b8;
    box-shadow: 0 0 0 4px rgba(45, 118, 184, .16), 0 12px 24px rgba(23, 35, 58, .12);
}
.service-item-tree-canvas-node.is-drop-target {
    background: #eef6ff;
    border-color: #18735f;
}
.service-item-tree-canvas-node-title {
    align-items: flex-start;
    display: grid;
    gap: .34rem;
    grid-template-columns: auto minmax(0, 1fr);
    min-width: 0;
}
.service-item-tree-canvas-node-title strong,
.service-item-tree-canvas-node-title small {
    display: block;
    min-width: 0;
    overflow-wrap: anywhere;
}
.service-item-tree-canvas-node-title strong {
    color: #111827;
    font-size: .88rem;
    line-height: 1.15;
}
.service-item-tree-canvas-node-title small {
    color: #526579;
    font-size: .69rem;
    font-weight: 800;
    margin-top: .12rem;
}
.service-item-tree-tray {
    background: #fff;
    border: 1px solid #dbe4ee;
    border-radius: 8px;
    display: grid;
    gap: .65rem;
    grid-area: tray;
    grid-template-rows: auto auto auto minmax(0, 1fr);
    min-height: 0;
    min-width: 0;
    overflow: hidden;
    padding: .75rem;
}
.service-item-tree-workspace[data-service-item-tree-dock-layout="bottom"] .service-item-tree-tray {
    align-items: start;
    grid-template-columns: minmax(160px, .72fr) minmax(220px, .95fr) minmax(260px, 1.05fr) minmax(320px, 2fr);
    grid-template-rows: minmax(0, 1fr);
    overflow: auto;
}
.service-item-tree-workspace[data-service-item-tree-dock-layout="left"] .service-item-tree-tray {
    align-self: stretch;
}
.service-item-tree-panel-heading {
    display: grid;
    gap: .12rem;
    min-width: 0;
}
.service-item-tree-panel-heading strong {
    color: #17233a;
    overflow-wrap: anywhere;
}
.service-item-tree-tray-list {
    align-content: start;
    display: grid;
    gap: .45rem;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    min-height: 0;
    min-width: 0;
    overflow: auto;
}
.service-item-tree-workspace[data-service-item-tree-dock-layout="left"] .service-item-tree-tray-list {
    align-content: start;
    grid-template-columns: 1fr;
    overflow: auto;
}
.service-item-tree-workspace[data-service-item-tree-dock-layout="bottom"] .service-item-tree-tray-list {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    max-height: 16rem;
    min-height: 10rem;
    overflow: auto;
}
.service-item-tree-tray-item {
    background: #f8fbff;
    border: 1px solid #dbe4ee;
    border-left: 6px solid var(--item-tree-node-color, #2d76b8);
    border-radius: 6px;
    color: #17233a;
    cursor: grab;
    display: grid;
    gap: .15rem;
    min-width: 0;
    overflow-wrap: anywhere;
    padding: .55rem;
    text-align: left;
}
.service-item-tree-tray-item.is-selected {
    background: #eef6ff;
    border-color: #2d76b8;
}
.service-item-tree-tray-item strong,
.service-item-tree-tray-item span {
    min-width: 0;
    overflow-wrap: anywhere;
}
.service-item-tree-tray-item span {
    color: #526579;
    font-size: .76rem;
    font-weight: 800;
}
.service-item-tree-catalog-section {
    border-bottom: 1px solid #e2e8f0;
    padding-bottom: .55rem;
}
.service-item-tree-catalog-item {
    background: #fffdf7;
    border-left-color: #7c6a0a;
}
.service-item-tree-inspector {
    align-self: stretch;
    background: #fff;
    border: 1px solid #dbe4ee;
    border-radius: 8px;
    display: grid;
    gap: .75rem;
    grid-area: inspector;
    max-height: var(--item-tree-workspace-height, 640px);
    min-height: 0;
    min-width: 0;
    overflow: auto;
    padding: .8rem;
}
.service-item-tree-inspector .muted {
    margin: 0;
    overflow-wrap: anywhere;
}
.service-item-tree-inspector-meta {
    min-width: 0;
}
.service-item-tree-color-panel {
    display: grid;
    gap: .5rem;
    min-width: 0;
}
.service-item-tree-color-panel > span {
    color: #526579;
    font-size: .78rem;
    font-weight: 900;
    text-transform: uppercase;
}
.service-item-tree-color-panel label {
    display: grid;
    gap: .28rem;
    min-width: 0;
}
.service-item-tree-color-swatches {
    display: grid;
    gap: .38rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
.service-item-tree-color-swatch {
    align-items: center;
    border: 1px solid #c7d8ea;
    border-radius: 6px;
    color: #17233a;
    cursor: pointer;
    display: inline-flex;
    font-size: .72rem;
    font-weight: 900;
    justify-content: center;
    min-height: 2.35rem;
    min-width: 0;
    overflow-wrap: anywhere;
    padding: .2rem;
}
.service-item-tree-color-swatch[aria-pressed="true"] {
    box-shadow: 0 0 0 3px rgba(45, 118, 184, .2);
    outline: 2px solid #2d76b8;
}
.service-item-tree-inspector-controls {
    justify-content: stretch;
}
.service-item-tree-inspector-controls .service-item-tree-node-controls {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.service-item-tree-canvas-node .service-item-tree-node-controls {
    display: none;
}
.service-item-tree-empty {
    background: #f8fbff;
    border: 1px dashed #c7d8ea;
    border-radius: 8px;
    color: #526579;
    font-weight: 800;
    min-width: 0;
    overflow-wrap: anywhere;
    padding: .8rem;
    position: relative;
}
@media (max-width: 1220px) {
    .service-item-tree-workspace,
    .service-item-tree-workspace[data-service-item-tree-dock-layout="bottom"],
    .service-item-tree-workspace[data-service-item-tree-dock-layout="left"] {
        grid-template-areas:
            "canvas"
            "inspector"
            "tray";
        grid-template-columns: 1fr;
        grid-template-rows: minmax(520px, 1fr) auto auto;
        min-height: auto;
    }

    .service-item-tree-workspace[data-service-item-tree-dock-layout="bottom"] .service-item-tree-tray {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        overflow: hidden;
    }

    .service-item-tree-tray-list,
    .service-item-tree-workspace[data-service-item-tree-dock-layout="bottom"] .service-item-tree-tray-list,
    .service-item-tree-workspace[data-service-item-tree-dock-layout="left"] .service-item-tree-tray-list {
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
        max-height: 20rem;
        overflow: auto;
    }

    .service-item-tree-inspector {
        max-height: none;
    }
}
@media (max-width: 760px), (hover: none) and (pointer: coarse) {
    .service-item-tree-dock-controls,
    .service-item-tree-builder-actions,
    .service-item-tree-save-form {
        align-items: stretch;
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
    }

    .service-item-tree-dock-controls > *,
    .service-item-tree-builder-actions > *,
    .service-item-tree-builder-actions .btn,
    .service-item-tree-builder-actions button,
    .service-item-tree-save-form > * {
        min-width: 0;
        width: 100%;
    }

    .service-item-tree-workspace {
        grid-template-rows: minmax(520px, auto) auto auto;
        padding: .6rem;
    }

    .service-item-tree-canvas-wrap {
        min-height: 520px;
    }

    .service-item-tree-canvas-node {
        min-height: 108px;
    }

    .service-item-tree-canvas-node .service-item-tree-node-controls {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .service-item-tree-inspector-controls .service-item-tree-node-controls {
        grid-template-columns: 1fr;
    }
}
.service-item-tree-command-link {
    box-shadow: 0 6px 16px rgba(24, 115, 95, .14);
}
.service-item-tree-toolbar {
    align-items: center;
    background: #fff;
    border: 1px solid #dbe4ee;
    border-radius: 8px;
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    gap: .42rem;
    justify-content: flex-end;
    margin: -.2rem 0 .75rem;
    padding: .55rem;
}
.service-item-tree-toolbar span {
    background: #ecfdf5;
    border: 1px solid #bbf7d0;
    border-radius: 999px;
    color: #166534;
    font-size: .76rem;
    font-weight: 950;
    min-width: 4.2rem;
    padding: .32rem .55rem;
    text-align: center;
}
.service-item-tree-scenario {
    align-items: end;
    background: #f8fbff;
    border: 1px solid #dbe4ee;
    border-radius: 8px;
    display: grid;
    gap: .65rem;
    grid-template-columns: minmax(210px, 1.2fr) repeat(5, minmax(110px, .55fr));
    margin: -.25rem 0 .85rem;
    min-width: 0;
    padding: .65rem;
}
.service-item-tree-scenario > div,
.service-item-tree-scenario label {
    display: grid;
    gap: .25rem;
    min-width: 0;
}
.service-item-tree-scenario strong {
    color: #17233a;
    overflow-wrap: anywhere;
}
.service-item-tree-scenario small {
    color: #64748b;
    font-size: .74rem;
    font-weight: 800;
    line-height: 1.35;
}
.service-item-tree-scenario label {
    color: #526579;
    font-size: .74rem;
    font-weight: 950;
    text-transform: uppercase;
}
.service-item-tree-scenario input {
    border: 1px solid #cbd5e1;
    border-radius: 7px;
    color: #17233a;
    font: inherit;
    min-height: 2.25rem;
    min-width: 0;
    padding: .4rem .5rem;
    width: 100%;
}
.service-item-tree-legend {
    align-items: center;
    background: #fff;
    border: 1px solid #dbe4ee;
    border-radius: 8px;
    color: #344256;
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    gap: .5rem .7rem;
    margin: -.35rem 0 .85rem;
    min-width: 0;
    padding: .55rem .65rem;
}
.service-item-tree-legend strong {
    color: #17233a;
    font-size: .78rem;
    font-weight: 950;
    margin-right: .1rem;
    text-transform: uppercase;
}
.service-item-tree-legend span {
    align-items: center;
    display: inline-flex;
    font-size: .78rem;
    font-weight: 850;
    gap: .32rem;
    min-width: 0;
}
.service-item-tree-legend-swatch {
    background: #fff;
    border: 2px solid #17233a;
    border-left-width: 7px;
    border-radius: 4px;
    display: inline-block;
    flex: 0 0 auto;
    height: 1.05rem;
    width: 1.55rem;
}
.service-item-tree-legend-main {
    border-color: #17233a;
    border-left-width: 2px;
}
.service-item-tree-legend-material {
    border-color: #2f855a;
}
.service-item-tree-legend-fastener {
    border-color: #b45309;
}
.service-item-tree-legend-supply {
    border-color: #0f766e;
    border-radius: 999px;
}
.service-item-tree-legend-note {
    border-color: #6d28d9;
    border-style: dashed;
}
.service-item-tree-legend-line {
    background: #243041;
    border-radius: 999px;
    display: inline-block;
    height: 3px;
    width: 2rem;
}
.service-item-tree-legend-pill,
.service-item-tree-legend-warning {
    border-radius: 999px;
    display: inline-block;
    font-size: .72rem;
    font-weight: 950;
    line-height: 1;
    padding: .25rem .42rem;
}
.service-item-tree-legend-pill {
    background: #eef6ff;
    border: 1px solid #cfe2f3;
    color: #173f6d;
}
.service-item-tree-legend-warning {
    background: #fff7ed;
    border: 1px solid #fed7aa;
    color: #c2410c;
}
.service-item-tree-builder.is-fullscreen {
    border-radius: 0;
    inset: 0;
    margin: 0;
    max-height: 100svh;
    overflow: auto;
    padding: .85rem;
    position: fixed;
    z-index: 6000;
}
body.service-item-tree-fullscreen-active {
    overflow: hidden;
}
.service-item-tree-builder.is-fullscreen .service-item-tree-workspace {
    --item-tree-canvas-min-height: max(560px, calc(100svh - 18rem));
    --item-tree-workspace-height: calc(100svh - 10rem);
    min-height: var(--item-tree-workspace-height);
}
.service-item-tree-builder.is-fullscreen .service-item-tree-canvas-wrap {
    min-height: 0;
}
.service-item-tree-canvas-wrap {
    cursor: grab;
}
.service-item-tree-canvas-wrap.is-panning {
    cursor: grabbing;
}
.service-item-tree-canvas-node,
.service-item-tree-root,
.service-item-tree-lines,
.service-item-tree-canvas-content {
    will-change: transform;
}
.service-item-tree-line-label {
    fill: #17233a;
    font-size: 12px;
    font-weight: 950;
    paint-order: stroke;
    pointer-events: none;
    stroke: #fff;
    stroke-linejoin: round;
    stroke-width: 5px;
    text-rendering: geometricPrecision;
    text-transform: lowercase;
}
.service-item-tree-slot-marker {
    background: transparent;
    border-radius: 999px;
    height: .35rem;
    left: .55rem;
    position: absolute;
    right: .55rem;
    z-index: 8;
}
.service-item-tree-slot-before {
    top: .2rem;
}
.service-item-tree-slot-after {
    bottom: .2rem;
}
.service-item-tree-slot-marker.is-active {
    background: #f59e0b;
    box-shadow: 0 0 0 4px rgba(245, 158, 11, .24);
}
.service-item-tree-shape-material {
    border-radius: 5px;
}
.service-item-tree-shape-fastener {
    border-radius: 5px;
    clip-path: none;
    padding-inline: .5rem;
}
.service-item-tree-shape-supply {
    border-radius: 999px;
}
.service-item-tree-shape-note {
    border-style: dashed;
    border-radius: 8px 8px 24px 8px;
}
.service-item-tree-shape-group {
    border-style: double;
    border-width: 4px;
}
.service-item-tree-type-material,
.service-item-tree-type-part {
    border-color: #2f855a;
}
.service-item-tree-type-fastener {
    border-color: #b45309;
}
.service-item-tree-type-supply {
    border-color: #0f766e;
}
.service-item-tree-type-labor_note {
    border-color: #6d28d9;
}
.service-item-tree-type-supplier_group {
    border-color: #334155;
}
.service-item-tree-type-sealant,
.service-item-tree-type-safety {
    border-color: #be123c;
}
.service-item-tree-canvas-node.is-collapsed::after {
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 999px;
    bottom: .45rem;
    color: #92400e;
    content: "branch collapsed";
    font-size: .66rem;
    font-weight: 950;
    padding: .12rem .38rem;
    position: absolute;
    right: .45rem;
}
.service-item-tree-search {
    display: grid;
    gap: .25rem;
}
.service-item-tree-search span,
.service-item-tree-quick-add strong,
.service-item-tree-field span {
    color: #526579;
    font-size: .76rem;
    font-weight: 950;
    text-transform: uppercase;
}
.service-item-tree-quick-add {
    background: #f8fbff;
    border: 1px solid #dbe4ee;
    border-radius: 8px;
    display: grid;
    gap: .45rem;
    margin: 0;
    padding: .55rem;
}
.service-item-tree-quick-add div {
    display: grid;
    gap: .35rem;
    grid-template-columns: minmax(0, 1fr) auto;
}
.service-item-tree-quick-add small {
    color: #64748b;
    font-size: .72rem;
    font-weight: 800;
}
.service-item-tree-tray-section {
    border-top: 1px solid #e2e8f0;
    display: grid;
    gap: .4rem;
    padding-top: .55rem;
}
.service-item-tree-tray-section h3 {
    color: #17233a;
    font-size: .82rem;
    letter-spacing: 0;
    margin: 0;
}
.service-item-tree-warning-list {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    min-width: 0;
}
.service-item-tree-warning-pill {
    background: #fff7ed;
    border: 1px solid #fdba74;
    border-radius: 999px;
    color: #9a3412;
    font-size: .72rem;
    font-weight: 950;
    padding: .24rem .45rem;
}
.service-item-tree-warning-pill.is-ok {
    background: #ecfdf5;
    border-color: #86efac;
    color: #166534;
}
.service-item-tree-badges span.is-warning {
    background: #fff7ed;
    border-color: #fdba74;
    color: #9a3412;
}
.service-item-tree-inspector-fields {
    display: grid;
    gap: .55rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-width: 0;
}
.service-item-tree-field {
    display: grid;
    gap: .25rem;
    min-width: 0;
}
.service-item-tree-field input,
.service-item-tree-field select,
.service-item-tree-field textarea,
.service-item-tree-search input,
.service-item-tree-quick-add input,
.service-item-tree-quick-add select {
    border: 1px solid #cbd5e1;
    border-radius: 7px;
    color: #17233a;
    font: inherit;
    min-height: 2.25rem;
    min-width: 0;
    padding: .4rem .5rem;
    width: 100%;
}
.service-item-tree-field textarea {
    min-height: 4.4rem;
    resize: vertical;
}
.service-item-tree-field.is-wide {
    grid-column: 1 / -1;
}
.service-item-tree-checkbox-field {
    align-items: center;
    border: 1px solid #dbe4ee;
    border-radius: 8px;
    display: flex;
    gap: .5rem;
    padding: .45rem .55rem;
}
.service-item-tree-checkbox-field input {
    min-height: auto;
    width: auto;
}
.service-item-tree-preview-actions {
    display: grid;
    gap: .4rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.service-item-tree-preview-panel {
    background: #fff;
    border: 1px solid #dbe4ee;
    border-radius: 8px;
    display: grid;
    gap: .55rem;
    grid-column: 1 / -1;
    min-width: 0;
    padding: .75rem;
}
.service-item-tree-preview-panel p {
    color: #475569;
    margin: 0;
}
.service-item-tree-preview-list,
.service-item-tree-preview-panel ul {
    display: grid;
    gap: .32rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
.service-item-tree-preview-list li,
.service-item-tree-preview-panel li {
    background: #f8fbff;
    border: 1px solid #e2e8f0;
    border-radius: 7px;
    display: grid;
    gap: .12rem;
    margin-left: calc(var(--depth, 0) * .8rem);
    min-width: 0;
    padding: .42rem .5rem;
}
.service-item-tree-preview-list span,
.service-item-tree-preview-panel li span,
.service-item-tree-preview-panel li small {
    min-width: 0;
    overflow-wrap: anywhere;
}
.service-item-tree-preview-panel section {
    display: grid;
    gap: .35rem;
}
.service-item-tree-preview-panel h3 {
    color: #17233a;
    font-size: .86rem;
    letter-spacing: 0;
    margin: 0;
}
.service-item-tree-template-grid {
    display: grid;
    gap: .55rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    min-width: 0;
}
.service-item-tree-template-grid article {
    background: #f8fbff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    display: grid;
    gap: .45rem;
    min-width: 0;
    padding: .65rem;
}
.service-item-tree-template-grid strong,
.service-item-tree-template-grid p {
    min-width: 0;
    overflow-wrap: anywhere;
}
.service-item-tree-template-grid p {
    color: #526579;
    font-size: .82rem;
    font-weight: 800;
    margin: 0;
}
.service-item-tree-widget-grid {
    display: grid;
    gap: .55rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
.service-item-tree-widget-grid article {
    background: #f8fbff;
    border: 1px solid #dbe4ee;
    border-radius: 8px;
    display: grid;
    gap: .18rem;
    min-width: 0;
    padding: .65rem;
}
.service-item-tree-widget-grid span,
.service-item-tree-widget-grid small {
    color: #526579;
    font-size: .75rem;
    font-weight: 800;
    overflow-wrap: anywhere;
}
.service-item-tree-widget-grid strong {
    color: #17233a;
    font-size: 1.15rem;
    overflow-wrap: anywhere;
}
.service-item-tree-entitlement-screen {
    display: grid;
    gap: .75rem;
}
@media (max-width: 1220px) {
    .service-item-tree-preview-panel {
        grid-column: 1 / -1;
    }
    .service-item-tree-scenario,
    .service-item-tree-template-grid,
    .service-item-tree-widget-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 760px), (hover: none) and (pointer: coarse) {
    .service-item-tree-toolbar {
        align-items: stretch;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .service-item-tree-toolbar > * {
        min-width: 0;
        width: 100%;
    }
    .service-item-tree-inspector-fields,
    .service-item-tree-preview-actions,
    .service-item-tree-quick-add div,
    .service-item-tree-scenario,
    .service-item-tree-template-grid,
    .service-item-tree-widget-grid {
        grid-template-columns: 1fr;
    }
    .service-item-tree-field.is-wide {
        grid-column: auto;
    }
}
@media print {
    .service-item-tree-builder {
        box-shadow: none;
    }
    .service-item-tree-toolbar,
    .service-item-tree-dock-controls,
    .service-item-tree-tray,
    .service-item-tree-inspector,
    .service-item-tree-builder-actions {
        display: none ;
    }
    .service-item-tree-workspace,
    .service-item-tree-workspace[data-service-item-tree-dock-layout="left"] {
        background: #fff;
        border: 0;
        display: block;
        padding: 0;
    }
    .service-item-tree-canvas-wrap {
        border: 0;
        overflow: visible;
    }
}
.service-item-supplier-order-review-shell {
    min-width: 0;
}
.service-item-supplier-order-review-actions {
    min-width: 0;
}
.service-item-supplier-order-review-safety {
    background: #eef6ff;
    border: 1px solid #c7d8ea;
    border-left: 4px solid #2d76b8;
    border-radius: 8px;
    color: #173f6d;
    font-weight: 750;
    margin: .75rem 0 1rem;
    overflow-wrap: anywhere;
    padding: .85rem;
}
.service-item-supplier-order-review-toolbar {
    grid-template-columns: minmax(240px, 1.6fr) repeat(2, minmax(150px, .7fr)) auto auto;
}
.service-item-supplier-order-review-metrics {
    display: grid;
    gap: .75rem;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    margin: .75rem 0 1rem;
}
.service-item-supplier-order-review-metrics article {
    background: #f8fbff;
    border: 1px solid #dbe4ee;
    border-left: 4px solid #2d76b8;
    border-radius: 8px;
    min-width: 0;
    padding: .85rem;
}
.service-item-supplier-order-review-metrics span {
    color: #526579;
    display: block;
    font-size: .78rem;
    font-weight: 850;
}
.service-item-supplier-order-review-metrics strong {
    color: #17233a;
    display: block;
    font-size: 1.35rem;
    margin-top: .15rem;
}
.service-item-supplier-order-review-grid {
    display: grid;
    gap: .85rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: .75rem 0 1rem;
}
.service-item-supplier-order-review-card,
.service-item-supplier-order-review-empty {
    background: #ffffff;
    border: 1px solid #dbe4ee;
    border-radius: 8px;
    display: grid;
    gap: .75rem;
    min-width: 0;
    overflow-wrap: anywhere;
    padding: .9rem;
}
.service-item-supplier-order-review-card[data-supplier-order-review-state="missing_supplier"],
.service-item-supplier-order-review-card[data-supplier-order-review-state="missing_form"],
.service-item-supplier-order-review-card[data-supplier-order-review-state="missing_lead_time"] {
    border-left: 4px solid #d69f1f;
}
.service-item-supplier-order-review-card-title {
    align-items: flex-start;
    display: flex;
    gap: .65rem;
    justify-content: space-between;
    min-width: 0;
}
.service-item-supplier-order-review-card-title h2 {
    color: #17233a;
    font-size: 1rem;
    line-height: 1.25;
    margin: .15rem 0 .15rem;
    overflow-wrap: anywhere;
}
.service-item-supplier-order-review-card-title p {
    color: #526579;
    font-size: .85rem;
    font-weight: 750;
    margin: 0;
    overflow-wrap: anywhere;
}
.service-item-supplier-order-review-card-title .btn {
    flex: 0 0 auto;
}
.service-item-review-queue-setup-actions,
[data-service-item-review-queue-actions="profile-advanced"] {
    align-items: flex-start;
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    gap: .35rem;
    justify-content: flex-end;
    min-width: 0;
}
.service-item-review-queue-setup-actions .btn,
[data-service-item-review-queue-actions="profile-advanced"] .btn {
    white-space: normal;
}
.service-item-supplier-order-review-badges {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    min-width: 0;
}
.service-item-supplier-order-review-details {
    display: grid;
    gap: .55rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0;
}
.service-item-supplier-order-review-details div {
    background: #f8fafc;
    border: 1px solid #e3eaf2;
    border-radius: 8px;
    min-width: 0;
    padding: .65rem;
}
.service-item-supplier-order-review-details dt {
    color: #526579;
    font-size: .72rem;
    font-weight: 850;
}
.service-item-supplier-order-review-details dd {
    color: #17233a;
    font-size: .88rem;
    font-weight: 800;
    margin: .15rem 0 0;
    overflow-wrap: anywhere;
}
.service-item-cost-margin-review-shell,
.service-item-cost-margin-review-actions {
    min-width: 0;
}
.service-item-cost-margin-review-safety {
    background: #f7f3e8;
    border: 1px solid #e1d1aa;
    border-left: 4px solid #a9701f;
    border-radius: 8px;
    color: #4e3514;
    font-weight: 750;
    margin: .75rem 0 1rem;
    overflow-wrap: anywhere;
    padding: .85rem;
}
.service-item-cost-margin-review-toolbar {
    grid-template-columns: minmax(240px, 1.6fr) repeat(2, minmax(150px, .7fr)) auto auto;
}
.service-item-cost-margin-review-metrics {
    display: grid;
    gap: .75rem;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    margin: .75rem 0 1rem;
}
.service-item-cost-margin-review-metrics article {
    background: #fffaf0;
    border: 1px solid #eadfc7;
    border-left: 4px solid #a9701f;
    border-radius: 8px;
    min-width: 0;
    padding: .85rem;
}
.service-item-cost-margin-review-metrics span {
    color: #6c5a3b;
    display: block;
    font-size: .78rem;
    font-weight: 850;
}
.service-item-cost-margin-review-metrics strong {
    color: #17233a;
    display: block;
    font-size: 1.35rem;
    margin-top: .15rem;
}
.service-item-cost-margin-review-grid {
    display: grid;
    gap: .85rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: .75rem 0 1rem;
}
.service-item-cost-margin-review-card,
.service-item-cost-margin-review-empty {
    background: #ffffff;
    border: 1px solid #dbe4ee;
    border-radius: 8px;
    display: grid;
    gap: .75rem;
    min-width: 0;
    overflow-wrap: anywhere;
    padding: .9rem;
}
.service-item-cost-margin-review-card[data-cost-margin-review-state="missing_price"],
.service-item-cost-margin-review-card[data-cost-margin-review-state="missing_cost"],
.service-item-cost-margin-review-card[data-cost-margin-review-state="low_margin"],
.service-item-cost-margin-review-card[data-cost-margin-review-state="pricing_gap"] {
    border-left: 4px solid #d69f1f;
}
.service-item-cost-margin-review-card-title {
    align-items: flex-start;
    display: flex;
    gap: .65rem;
    justify-content: space-between;
    min-width: 0;
}
.service-item-cost-margin-review-card-title h2 {
    color: #17233a;
    font-size: 1rem;
    line-height: 1.25;
    margin: .15rem 0 .15rem;
    overflow-wrap: anywhere;
}
.service-item-cost-margin-review-card-title p {
    color: #526579;
    font-size: .85rem;
    font-weight: 750;
    margin: 0;
    overflow-wrap: anywhere;
}
.service-item-cost-margin-review-card-title .btn {
    flex: 0 0 auto;
}
.service-item-cost-margin-review-badges {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    min-width: 0;
}
.service-item-cost-margin-review-details {
    display: grid;
    gap: .55rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0;
}
.service-item-cost-margin-review-details div {
    background: #f8fafc;
    border: 1px solid #e3eaf2;
    border-radius: 8px;
    min-width: 0;
    padding: .65rem;
}
.service-item-cost-margin-review-details dt {
    color: #526579;
    font-size: .72rem;
    font-weight: 850;
}
.service-item-cost-margin-review-details dd {
    color: #17233a;
    font-size: .88rem;
    font-weight: 800;
    margin: .15rem 0 0;
    overflow-wrap: anywhere;
}
.service-item-duration-readiness-review-shell,
.service-item-duration-readiness-review-actions {
    min-width: 0;
}
.service-item-duration-readiness-review-safety {
    background: #f4f5ff;
    border: 1px solid #d3d6f4;
    border-left: 4px solid #5c62b8;
    border-radius: 8px;
    color: #2e336f;
    font-weight: 750;
    margin: .75rem 0 1rem;
    overflow-wrap: anywhere;
    padding: .85rem;
}
.service-item-duration-readiness-review-toolbar {
    grid-template-columns: minmax(240px, 1.6fr) repeat(2, minmax(150px, .7fr)) auto auto;
}
.service-item-duration-readiness-review-metrics {
    display: grid;
    gap: .75rem;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    margin: .75rem 0 1rem;
}
.service-item-duration-readiness-review-metrics article {
    background: #f8fbff;
    border: 1px solid #dbe4ee;
    border-left: 4px solid #5c62b8;
    border-radius: 8px;
    min-width: 0;
    padding: .85rem;
}
.service-item-duration-readiness-review-metrics span {
    color: #526579;
    display: block;
    font-size: .78rem;
    font-weight: 850;
}
.service-item-duration-readiness-review-metrics strong {
    color: #17233a;
    display: block;
    font-size: 1.35rem;
    margin-top: .15rem;
}
.service-item-duration-readiness-review-grid {
    display: grid;
    gap: .85rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: .75rem 0 1rem;
}
.service-item-duration-readiness-review-card,
.service-item-duration-readiness-review-empty {
    background: #ffffff;
    border: 1px solid #dbe4ee;
    border-radius: 8px;
    display: grid;
    gap: .75rem;
    min-width: 0;
    overflow-wrap: anywhere;
    padding: .9rem;
}
.service-item-duration-readiness-review-card[data-duration-readiness-review-state="missing_minutes"],
.service-item-duration-readiness-review-card[data-duration-readiness-review-state="timer_disabled"],
.service-item-duration-readiness-review-card[data-duration-readiness-review-state="no_customer_learning"],
.service-item-duration-readiness-review-card[data-duration-readiness-review-state="low_confidence"] {
    border-left: 4px solid #d69f1f;
}
.service-item-duration-readiness-review-card-title {
    align-items: flex-start;
    display: flex;
    gap: .65rem;
    justify-content: space-between;
    min-width: 0;
}
.service-item-duration-readiness-review-card-title h2 {
    color: #17233a;
    font-size: 1rem;
    line-height: 1.25;
    margin: .15rem 0 .15rem;
    overflow-wrap: anywhere;
}
.service-item-duration-readiness-review-card-title p {
    color: #526579;
    font-size: .85rem;
    font-weight: 750;
    margin: 0;
    overflow-wrap: anywhere;
}
.service-item-duration-readiness-review-card-title .btn {
    flex: 0 0 auto;
}
.service-item-duration-readiness-review-badges {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    min-width: 0;
}
.service-item-duration-readiness-review-details {
    display: grid;
    gap: .55rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0;
}
.service-item-duration-readiness-review-details div {
    background: #f8fafc;
    border: 1px solid #e3eaf2;
    border-radius: 8px;
    min-width: 0;
    padding: .65rem;
}
.service-item-duration-readiness-review-details dt {
    color: #526579;
    font-size: .72rem;
    font-weight: 850;
}
.service-item-duration-readiness-review-details dd {
    color: #17233a;
    font-size: .88rem;
    font-weight: 800;
    margin: .15rem 0 0;
    overflow-wrap: anywhere;
}
.service-item-time-default-editor-panel {
    background: #f8fbff;
    border: 1px solid #dbe4ee;
    border-left: 4px solid #2563eb;
    border-radius: 8px;
    display: grid;
    gap: .8rem;
    margin: .85rem 0 1rem;
    min-width: 0;
    overflow-wrap: anywhere;
    padding: .9rem;
}
.service-item-time-default-editor-panel h3 {
    color: #17233a;
    font-size: 1rem;
    margin: .15rem 0 .25rem;
}
.service-item-time-default-editor-panel p {
    color: #526579;
    font-size: .85rem;
    margin: 0;
}
.service-item-time-default-editor-metrics {
    display: grid;
    gap: .55rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
.service-item-time-default-editor-metrics article {
    background: #fff;
    border: 1px solid #e3eaf2;
    border-radius: 8px;
    min-width: 0;
    padding: .65rem;
}
.service-item-time-default-editor-metrics span {
    color: #526579;
    display: block;
    font-size: .72rem;
    font-weight: 850;
}
.service-item-time-default-editor-metrics strong {
    color: #17233a;
    display: block;
    font-size: .95rem;
    margin-top: .15rem;
}
.service-item-time-default-editor-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
    justify-content: space-between;
    min-width: 0;
}
.service-item-time-default-editor-actions span {
    color: #334155;
    font-size: .82rem;
    font-weight: 850;
}
.service-item-time-default-editor-form .service-item-time-default-field {
    background: #f8fbff;
    border: 1px solid #dbe4ee;
    border-radius: 8px;
    padding: .65rem;
}
.service-item-time-default-help {
    display: block;
    line-height: 1.35;
    margin-top: .35rem;
}
.service-item-material-inventory-panel {
    min-width: 0;
}
.service-item-material-inventory-grid {
    display: grid;
    gap: .75rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: .75rem 0 1rem;
}
.service-item-material-inventory-card,
.service-item-material-inventory-empty {
    background: #f7fbf3;
    border: 1px solid #cce3b8;
    border-radius: 8px;
    display: grid;
    gap: .55rem;
    min-width: 0;
    overflow-wrap: anywhere;
    padding: .85rem;
}
.service-item-material-inventory-card.is-inactive {
    opacity: .72;
}
.service-item-material-inventory-card-title {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    justify-content: space-between;
    min-width: 0;
}
.service-item-material-inventory-card-title strong {
    color: #17233a;
    min-width: 0;
    overflow-wrap: anywhere;
}
.service-item-material-inventory-card p,
.service-item-material-inventory-empty {
    margin: 0;
}
.service-item-material-inventory-card p span {
    background: #f0f8e9;
    border: 1px solid #cce3b8;
    border-radius: 999px;
    display: inline-flex;
    font-size: .74rem;
    font-weight: 850;
    margin: .15rem .2rem .15rem 0;
    max-width: 100%;
    overflow-wrap: anywhere;
    padding: .28rem .45rem;
}
.service-item-material-inventory-edit summary {
    cursor: pointer;
    font-weight: 900;
}
.service-item-material-inventory-form {
    background: #ffffff;
    border: 1px solid #cce3b8;
    border-radius: 8px;
    margin-top: .65rem;
    padding: .75rem;
}
.service-item-inventory-review-shell {
    min-width: 0;
}
.service-item-inventory-review-safety {
    background: #fff7df;
    border: 1px solid #ead8ad;
    border-left: 4px solid #d69f1f;
    border-radius: 8px;
    color: #5f4200;
    font-weight: 750;
    margin: .75rem 0 1rem;
    overflow-wrap: anywhere;
    padding: .85rem;
}
.service-item-inventory-review-toolbar {
    grid-template-columns: minmax(240px, 1.6fr) repeat(2, minmax(150px, .7fr)) auto auto;
}
.service-item-inventory-review-actions {
    min-width: 0;
}
.service-item-inventory-review-metrics {
    display: grid;
    gap: .75rem;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    margin: .75rem 0 1rem;
}
.service-item-inventory-review-metrics article {
    background: #f8fafc;
    border: 1px solid #dbe4ee;
    border-left: 4px solid #2a9d6f;
    border-radius: 8px;
    min-width: 0;
    padding: .85rem;
}
.service-item-inventory-review-metrics span {
    color: #526579;
    display: block;
    font-size: .78rem;
    font-weight: 850;
}
.service-item-inventory-review-metrics strong {
    color: #17233a;
    display: block;
    font-size: 1.35rem;
    margin-top: .15rem;
}
.service-item-inventory-review-grid {
    display: grid;
    gap: .85rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: .75rem 0 1rem;
}
.service-item-inventory-review-card,
.service-item-inventory-review-empty {
    background: #ffffff;
    border: 1px solid #dbe4ee;
    border-radius: 8px;
    display: grid;
    gap: .75rem;
    min-width: 0;
    overflow-wrap: anywhere;
    padding: .9rem;
}
.service-item-inventory-review-card[data-inventory-review-state="low_stock"],
.service-item-inventory-review-card[data-inventory-review-state="needs_count"] {
    border-left: 4px solid #d69f1f;
}
.service-item-inventory-review-card-title {
    align-items: flex-start;
    display: flex;
    gap: .65rem;
    justify-content: space-between;
    min-width: 0;
}
.service-item-inventory-review-card-title h2 {
    color: #17233a;
    font-size: 1rem;
    line-height: 1.25;
    margin: .15rem 0 .15rem;
    overflow-wrap: anywhere;
}
.service-item-inventory-review-card-title p {
    color: #526579;
    font-size: .85rem;
    font-weight: 750;
    margin: 0;
    overflow-wrap: anywhere;
}
.service-item-inventory-review-card-title .btn {
    flex: 0 0 auto;
}
.service-item-inventory-review-badges {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    min-width: 0;
}
.service-item-inventory-review-details {
    display: grid;
    gap: .55rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0;
}
.service-item-inventory-review-details div {
    background: #f8fafc;
    border: 1px solid #e3eaf2;
    border-radius: 8px;
    min-width: 0;
    padding: .65rem;
}
.service-item-inventory-review-details dt {
    color: #526579;
    font-size: .72rem;
    font-weight: 850;
}
.service-item-inventory-review-details dd {
    color: #17233a;
    font-size: .88rem;
    font-weight: 800;
    margin: .15rem 0 0;
    overflow-wrap: anywhere;
}
.service-item-review-center-shell .module-page-header,
.service-item-inventory-review-shell .module-page-header,
.service-item-cost-margin-review-shell .module-page-header,
.service-item-duration-readiness-review-shell .module-page-header,
.service-item-supplier-order-review-shell .module-page-header {
    align-items: flex-start;
    gap: .85rem;
}
.service-item-inventory-review-toolbar,
.service-item-cost-margin-review-toolbar,
.service-item-duration-readiness-review-toolbar,
.service-item-supplier-order-review-toolbar {
    align-items: end;
    display: grid;
    gap: .5rem;
    min-width: 0;
}
.service-item-inventory-review-toolbar > *,
.service-item-cost-margin-review-toolbar > *,
.service-item-duration-readiness-review-toolbar > *,
.service-item-supplier-order-review-toolbar > * {
    min-width: 0;
}
.service-item-inventory-review-toolbar input,
.service-item-inventory-review-toolbar select,
.service-item-cost-margin-review-toolbar input,
.service-item-cost-margin-review-toolbar select,
.service-item-duration-readiness-review-toolbar input,
.service-item-duration-readiness-review-toolbar select,
.service-item-supplier-order-review-toolbar input,
.service-item-supplier-order-review-toolbar select {
    width: 100%;
}
.service-item-review-center-card-title > div,
.service-item-inventory-review-card-title > div,
.service-item-cost-margin-review-card-title > div,
.service-item-duration-readiness-review-card-title > div,
.service-item-supplier-order-review-card-title > div {
    min-width: 0;
}
.service-item-review-center-card-title .btn,
.service-item-inventory-review-card-title .btn,
.service-item-cost-margin-review-card-title .btn,
.service-item-duration-readiness-review-card-title .btn,
.service-item-supplier-order-review-card-title .btn,
.service-item-review-queue-setup-actions .btn,
[data-service-item-review-queue-actions="profile-advanced"] .btn {
    max-width: 100%;
    overflow-wrap: anywhere;
}
.service-item-inventory-review-details dd,
.service-item-cost-margin-review-details dd,
.service-item-duration-readiness-review-details dd,
.service-item-supplier-order-review-details dd,
.service-item-review-center-metrics dd {
    line-height: 1.25;
}
@media (min-width: 1181px) {
    .service-item-review-center-grid {
        grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    }

    .service-item-inventory-review-grid,
    .service-item-cost-margin-review-grid,
    .service-item-duration-readiness-review-grid,
    .service-item-supplier-order-review-grid {
        grid-template-columns: repeat(auto-fit, minmax(24rem, 1fr));
    }

    .service-item-inventory-review-metrics,
    .service-item-cost-margin-review-metrics,
    .service-item-duration-readiness-review-metrics,
    .service-item-supplier-order-review-metrics {
        grid-template-columns: repeat(auto-fit, minmax(8.75rem, 1fr));
    }
}
.work-order-line-card-grid {
    display: grid;
    gap: .8rem;
    margin: .75rem 0 1rem;
}
.work-order-line-card,
.work-order-line-empty {
    background: #fbfdff;
    border: 1px solid #dbe4ee;
    border-radius: 8px;
    display: grid;
    gap: .75rem;
    padding: .95rem;
}
.work-order-line-card-main {
    align-items: flex-start;
    display: flex;
    gap: .75rem;
    justify-content: space-between;
    min-width: 0;
}
.work-order-line-media {
    flex: 0 0 86px;
    min-width: 0;
}
.work-order-line-photo,
.work-order-line-photo-placeholder {
    align-items: center;
    aspect-ratio: 1 / 1;
    background: #edf4f7;
    border: 1px solid #d8e3ea;
    border-radius: 8px;
    color: #526579;
    display: flex;
    font-size: .75rem;
    font-weight: 850;
    justify-content: center;
    object-fit: cover;
    overflow: hidden;
    text-align: center;
    width: 86px;
}
.work-order-line-summary {
    flex: 1 1 auto;
    min-width: 0;
}
.work-order-line-card-main h3 {
    color: #17233a;
    margin: .1rem 0 .25rem;
    overflow-wrap: anywhere;
}
.work-order-line-total {
    background: #eefaf1;
    border: 1px solid #b9e5c5;
    border-radius: 6px;
    color: #17663c;
    padding: .45rem .6rem;
    white-space: nowrap;
}
.work-order-line-instructions {
    color: #334155;
    margin: 0;
}
.work-order-bring-preview {
    background: #fffaf0;
    border: 1px solid #f1d18a;
    border-radius: 8px;
    display: grid;
    gap: .45rem;
    min-width: 0;
    overflow-wrap: anywhere;
    padding: .7rem;
}
.work-order-bring-preview strong {
    color: #17233a;
}
.work-order-bring-preview ul {
    display: grid;
    gap: .35rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
.work-order-bring-preview li {
    align-items: start;
    display: grid;
    gap: .1rem;
    grid-template-columns: minmax(0, 1fr);
}
.work-order-bring-preview li[data-bring-criticality="critical"] span {
    color: #9f1239;
    font-weight: 900;
}
.work-order-bring-preview small {
    color: #526579;
    overflow-wrap: anywhere;
}
.work-order-material-preview {
    background: #f7fbf3;
    border: 1px solid #cce3b8;
    border-radius: 8px;
    display: grid;
    gap: .45rem;
    min-width: 0;
    overflow-wrap: anywhere;
    padding: .7rem;
}
.work-order-material-preview strong {
    color: #17233a;
}
.work-order-material-preview ul {
    display: grid;
    gap: .35rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
.work-order-material-preview li {
    align-items: start;
    display: grid;
    gap: .1rem;
    grid-template-columns: minmax(0, 1fr);
}
.work-order-material-preview li[data-material-required="required"] span {
    color: #225a22;
    font-weight: 900;
}
.work-order-material-preview small {
    color: #526579;
    overflow-wrap: anywhere;
}
.work-order-material-pricing-preview {
    background: #f8fbff;
    border: 1px solid #cfe0ef;
    border-radius: 8px;
    display: grid;
    gap: .45rem;
    min-width: 0;
    overflow-wrap: anywhere;
    padding: .7rem;
}
.work-order-material-pricing-preview strong {
    color: #17233a;
}
.work-order-material-pricing-preview ul {
    display: grid;
    gap: .35rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
.work-order-material-pricing-preview li {
    align-items: start;
    display: grid;
    gap: .1rem;
    grid-template-columns: minmax(0, 1fr);
}
.work-order-material-pricing-preview li[data-material-pricing-default="default"] span {
    color: #14558f;
    font-weight: 900;
}
.work-order-material-pricing-preview small {
    color: #526579;
    overflow-wrap: anywhere;
}
.work-order-inventory-planning-preview {
    background: #fffdf6;
    border: 1px solid #ead8ad;
    border-radius: 8px;
    display: grid;
    gap: .45rem;
    min-width: 0;
    overflow-wrap: anywhere;
    padding: .7rem;
}
.work-order-inventory-planning-preview strong {
    color: #17233a;
}
.work-order-inventory-planning-preview ul {
    display: grid;
    gap: .35rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
.work-order-inventory-planning-preview li {
    align-items: start;
    display: grid;
    gap: .1rem;
    grid-template-columns: minmax(0, 1fr);
}
.work-order-inventory-planning-preview li[data-inventory-planning-rule="forecast-only"] span {
    color: #7a4c00;
    font-weight: 900;
}
.work-order-inventory-planning-preview small {
    color: #526579;
    overflow-wrap: anywhere;
}
.work-order-supplier-order-preview {
    background: #f8fbff;
    border: 1px solid #c7d8ea;
    border-radius: 8px;
    display: grid;
    gap: .45rem;
    min-width: 0;
    overflow-wrap: anywhere;
    padding: .7rem;
}
.work-order-supplier-order-preview strong {
    color: #17233a;
}
.work-order-supplier-order-preview ul {
    display: grid;
    gap: .35rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
.work-order-supplier-order-preview li {
    align-items: start;
    display: grid;
    gap: .1rem;
    grid-template-columns: minmax(0, 1fr);
}
.work-order-supplier-order-preview li[data-supplier-order-form="preview-only"] span {
    color: #14558f;
    font-weight: 900;
}
.work-order-supplier-order-preview small {
    color: #526579;
    overflow-wrap: anywhere;
}
.work-order-material-inventory-preview {
    background: #f7fbf3;
    border: 1px solid #cce3b8;
    border-radius: 8px;
    display: grid;
    gap: .45rem;
    min-width: 0;
    overflow-wrap: anywhere;
    padding: .7rem;
}
.work-order-material-inventory-preview strong {
    color: #17233a;
}
.work-order-material-inventory-preview ul {
    display: grid;
    gap: .35rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
.work-order-material-inventory-preview li {
    align-items: start;
    display: grid;
    gap: .1rem;
    grid-template-columns: minmax(0, 1fr);
}
.work-order-material-inventory-preview li[data-material-inventory-log="manual-context-only"] span {
    color: #225a22;
    font-weight: 900;
}
.work-order-material-inventory-preview small {
    color: #526579;
    overflow-wrap: anywhere;
}
.work-order-line-card-timer {
    border-top: 1px solid #dbe4ee;
    padding-top: .65rem;
}
.line-timer-rollup {
    display: grid;
    gap: .45rem;
    margin: .55rem 0;
    min-width: 0;
}
.line-timer-rollup-grid {
    display: grid;
    gap: .45rem;
    grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
}
.line-timer-rollup-metric {
    align-items: center;
    background: #f8fbff;
    border: 1px solid #dbe4ee;
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
    min-height: 44px;
    min-width: 0;
    overflow-wrap: anywhere;
    padding: .45rem .55rem;
}
.line-timer-rollup-metric strong {
    color: #10243a;
}
.line-timer-completion-checklist {
    background: #fffaf0;
    border: 1px solid #f2d48c;
    border-radius: 8px;
    display: grid;
    gap: .75rem;
    margin: .75rem 0;
    min-width: 0;
    padding: .9rem;
}
.line-timer-completion-checklist-header {
    align-items: start;
    display: grid;
    gap: .75rem;
    grid-template-columns: minmax(0, 1fr) auto;
}
.line-timer-completion-checklist h3 {
    margin: .1rem 0 .25rem;
}
.line-timer-completion-checklist ul {
    display: grid;
    gap: .5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
.line-timer-completion-checklist-item {
    align-items: center;
    background: #fff;
    border: 1px solid #e4ebf2;
    border-radius: 8px;
    display: grid;
    gap: .75rem;
    grid-template-columns: minmax(0, 1fr) auto;
    min-height: 44px;
    min-width: 0;
    padding: .7rem;
}
.line-timer-completion-checklist-item.is-complete {
    border-color: #b7dfbf;
}
.line-timer-completion-checklist-item.is-missing {
    border-color: #f1b9a6;
}
.line-timer-completion-checklist-item strong,
.line-timer-completion-checklist-item p {
    overflow-wrap: anywhere;
}
.line-timer-review-summary {
    display: grid;
    gap: .65rem;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    margin-bottom: .8rem;
}
.line-timer-review-summary article {
    background: #f8fbff;
    border: 1px solid #dbe4ee;
    border-radius: 8px;
    display: grid;
    gap: .2rem;
    min-height: 64px;
    min-width: 0;
    padding: .7rem .8rem;
}
.line-timer-review-summary span {
    color: #526579;
    font-size: .82rem;
    font-weight: 850;
    overflow-wrap: anywhere;
    text-transform: uppercase;
}
.line-timer-review-summary strong {
    color: #10243a;
    font-size: 1.45rem;
}
.line-timer-review-command-card,
.line-timer-review-results {
    min-width: 0;
}
.line-timer-review-filters {
    align-items: end;
    background: #ffffff;
    border: 1px solid #dbe4ee;
    border-radius: 8px;
    padding: .65rem;
}
.line-timer-review-active-filters {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-top: .65rem;
}
.line-timer-review-active-filters strong,
.line-timer-review-active-filters span {
    border-radius: 999px;
    font-size: .82rem;
    font-weight: 850;
    padding: .28rem .55rem;
}
.line-timer-review-active-filters strong {
    color: #526579;
    padding-left: 0;
}
.line-timer-review-active-filters span {
    background: #eef7ff;
    border: 1px solid #cfe4f5;
    color: #12395f;
}
.line-timer-review-results table {
    min-width: 980px;
}
.line-timer-review-card-list {
    display: none;
    gap: .75rem;
}
.line-timer-review-card {
    border: 1px solid #dbe4ee;
    border-radius: 8px;
}
.line-timer-review-card .card-heading-row {
    align-items: start;
    display: grid;
    gap: .5rem;
    grid-template-columns: minmax(0, 1fr) auto;
}
.line-timer-review-card h3 {
    margin: 0;
    overflow-wrap: anywhere;
}
.line-timer-review-card-actions {
    display: grid;
    gap: .55rem;
    min-width: 0;
}
.line-timer-review-action-form,
.line-timer-correction-action-form {
    align-items: stretch;
    display: grid;
    gap: .45rem;
    min-width: 240px;
}
.line-timer-review-action-form textarea,
.line-timer-correction-action-form textarea {
    min-height: 70px;
    min-width: 0;
}
.line-timer-review-action-form .button-row,
.line-timer-correction-action-form .button-row {
    align-items: stretch;
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
}
.line-timer-correction-action-form {
    background: #f8fbff;
    border: 1px solid #dbe4ee;
    border-radius: 8px;
    margin-top: .45rem;
    padding: .55rem;
}
.line-timer-correction-summary {
    color: #7c4a03;
    display: inline-block;
    font-weight: 850;
    overflow-wrap: anywhere;
}
.report-line-timer-drillbacks,
.payroll-line-timer-drillbacks {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: .75rem;
}
.report-line-timer-drillbacks .btn,
.payroll-line-timer-drillbacks .btn {
    min-width: 0;
    white-space: normal;
}
@media (max-width: 760px), (hover: none) and (pointer: coarse) {
    .line-timer-review-results .table-wrap {
        display: none;
    }
    .line-timer-review-card-list {
        display: grid;
    }
    .line-timer-review-action-form,
    .line-timer-correction-action-form,
    .line-timer-review-action-form .button-row,
    .line-timer-correction-action-form .button-row,
    .line-timer-review-active-filters,
    .line-timer-review-filters {
        display: grid;
        grid-template-columns: 1fr;
    }
    .line-timer-review-action-form .btn,
    .line-timer-correction-action-form .btn,
    .line-timer-review-card-actions .btn,
    .line-timer-review-filters .btn,
    .line-timer-review-filters button {
        min-height: 44px;
        width: 100%;
    }
    .report-line-timer-drillbacks,
    .payroll-line-timer-drillbacks {
        display: grid;
        grid-template-columns: 1fr;
    }
    .report-line-timer-drillbacks .btn,
    .payroll-line-timer-drillbacks .btn {
        justify-content: center;
        min-height: 44px;
        width: 100%;
    }
}
@media (max-width: 640px) {
    .line-timer-review-summary,
    .line-timer-review-card .card-heading-row {
        grid-template-columns: 1fr;
    }
    .line-timer-review-card {
        border-left: 0;
        border-right: 0;
    }
}
.work-order-line-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
}
.work-order-line-card-actions .btn {
    white-space: normal;
}
.service-selector-filter {
    min-width: 0;
}
.service-selector-filter-status {
    color: #526579;
    display: block;
    font-size: .78rem;
    font-weight: 800;
    line-height: 1.35;
    margin-top: -.25rem;
    overflow-wrap: anywhere;
}
.service-selector-preview[data-service-selector-panel="runtime"] {
    align-items: start;
    background: #f8fbff;
    border: 1px solid #dbe4ee;
    border-radius: 8px;
    display: grid;
    gap: .75rem;
    grid-column: 1 / -1;
    grid-template-columns: 96px minmax(0, 1fr);
    padding: .85rem;
}
.service-selector-media {
    display: grid;
    gap: .35rem;
    min-width: 0;
}
.service-selector-preview[data-service-selector-panel="runtime"] img {
    aspect-ratio: 1 / 1;
    border: 1px solid #d8e3ea;
    border-radius: 8px;
    object-fit: cover;
    width: 96px;
}
.service-selector-photo-placeholder {
    align-items: center;
    aspect-ratio: 1 / 1;
    background: #eef4f8;
    border: 1px dashed #b9c8d6;
    border-radius: 8px;
    color: #526579;
    display: grid;
    font-size: .78rem;
    font-weight: 850;
    justify-items: center;
    padding: .5rem;
    text-align: center;
    width: 96px;
}
.service-selector-preview-copy {
    display: grid;
    gap: .55rem;
    min-width: 0;
}
.service-selector-preview-heading {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    justify-content: space-between;
    min-width: 0;
}
.service-selector-preview-heading strong {
    color: #17233a;
    font-size: 1rem;
    overflow-wrap: anywhere;
}
.service-selector-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    justify-content: flex-end;
    min-width: 0;
}
.service-selector-actions .btn {
    white-space: normal;
}
.service-selector-preview-copy p {
    margin: 0;
}
.service-selector-metadata-grid {
    display: grid;
    gap: .5rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0;
}
.service-selector-metadata-grid div {
    background: #ffffff;
    border: 1px solid #dbe4ee;
    border-radius: 8px;
    min-width: 0;
    padding: .5rem;
}
.service-selector-metadata-grid dt {
    color: #526579;
    font-size: .68rem;
    font-weight: 900;
    letter-spacing: 0;
    text-transform: uppercase;
}
.service-selector-metadata-grid dd {
    color: #17233a;
    font-weight: 850;
    margin: .15rem 0 0;
    overflow-wrap: anywhere;
}
.service-selector-snapshot-note {
    color: #526579;
    font-size: .82rem;
    line-height: 1.4;
}
.selector-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
}
.selector-chip-row span {
    background: #eef4f8;
    border: 1px solid #d8e3ea;
    border-radius: 999px;
    color: #334155;
    font-size: .76rem;
    font-weight: 850;
    max-width: 100%;
    overflow-wrap: anywhere;
    padding: .32rem .5rem;
}
.line-item-table-fallback {
    border: 1px solid #dbe4ee;
    border-radius: 8px;
    margin: .5rem 0 1rem;
    padding: .65rem;
}
.line-item-table-fallback summary {
    cursor: pointer;
    font-weight: 900;
}
.line-item-catalog-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    min-width: 0;
}
.line-item-catalog-actions .btn {
    white-space: normal;
}
.line-item-catalog-actions-empty {
    display: inline-block;
    overflow-wrap: anywhere;
}
.line-timer-readiness-panel {
    background: #f8fbff;
    border: 1px solid #dbe4ee;
    border-radius: 8px;
    display: grid;
    gap: .85rem;
    margin: 1rem 0;
    padding: 1rem;
}
.line-timer-readiness-header {
    align-items: start;
    display: grid;
    gap: .75rem;
    grid-template-columns: minmax(0, 1fr) auto;
}
.line-timer-readiness-header h3 {
    color: #17233a;
    font-size: 1.05rem;
    margin: .1rem 0 .35rem;
}
.line-timer-readiness-header p {
    color: #42566d;
    margin: 0;
}
.line-timer-readiness-status {
    align-items: center;
    border: 1px solid #dbe4ee;
    border-radius: 999px;
    display: inline-flex;
    font-size: .78rem;
    font-weight: 900;
    justify-content: center;
    min-height: 36px;
    padding: .35rem .7rem;
    text-align: center;
    white-space: nowrap;
}
.line-timer-readiness-status.is-ready {
    background: #e9f9ef;
    border-color: #a9dfbd;
    color: #17663d;
}
.line-timer-readiness-status.is-warning {
    background: #fff7df;
    border-color: #f1d28a;
    color: #7a5100;
}
.line-timer-readiness-status.is-muted {
    background: #eef4f8;
    border-color: #d8e3ea;
    color: #526579;
}
.line-timer-readiness-grid {
    display: grid;
    gap: .65rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.line-timer-readiness-card {
    background: #ffffff;
    border: 1px solid #dbe4ee;
    border-radius: 8px;
    display: grid;
    gap: .2rem;
    padding: .75rem;
}
.line-timer-readiness-card span {
    color: #526579;
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: 0;
    text-transform: uppercase;
}
.line-timer-readiness-card strong {
    color: #17233a;
    display: block;
    font-size: .98rem;
}
.line-timer-readiness-card small {
    color: #526579;
    line-height: 1.35;
}
.line-timer-readiness-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
}
.line-timer-readiness-actions .btn {
    white-space: normal;
}
.document-line-snapshot-grid {
    display: none;
    gap: .75rem;
    margin: .75rem 0 1rem;
}
.document-line-snapshot-card,
.document-line-snapshot-empty {
    background: #f8fbff;
    border: 1px solid #dbe4ee;
    border-radius: 8px;
    display: grid;
    gap: .65rem;
    min-width: 0;
    overflow-wrap: anywhere;
    padding: .85rem;
}
.document-line-snapshot-main {
    align-items: start;
    display: grid;
    gap: .5rem;
    grid-template-columns: minmax(0, 1fr) auto;
}
.document-line-snapshot-main h3 {
    color: #17233a;
    font-size: 1rem;
    margin: .1rem 0;
    overflow-wrap: anywhere;
}
.document-line-snapshot-main p {
    margin: 0;
}
.document-line-snapshot-total {
    color: #17233a;
    font-size: 1rem;
    white-space: nowrap;
}
.document-line-snapshot-stats {
    display: grid;
    gap: .45rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
.document-line-snapshot-stats span {
    background: #ffffff;
    border: 1px solid #dbe4ee;
    border-radius: 8px;
    color: #526579;
    font-size: .76rem;
    font-weight: 850;
    min-width: 0;
    overflow-wrap: anywhere;
    padding: .45rem .5rem;
}
.document-line-snapshot-stats strong {
    color: #17233a;
}
.document-line-snapshot-actions {
    min-width: 0;
}
.service-selector-preview[data-service-selector-panel="runtime"],
.service-selector-preview-copy,
.service-selector-preview-heading > *,
.service-selector-metadata-grid div,
.selector-chip-row,
.document-line-snapshot-grid,
.document-line-snapshot-card,
.document-line-snapshot-main > *,
.document-line-snapshot-stats span,
.document-line-snapshot-actions,
.line-item-catalog-actions {
    max-width: 100%;
    min-width: 0;
}
.service-selector-actions > *,
.document-line-snapshot-actions > *,
.line-item-catalog-actions > * {
    max-width: 100%;
    min-width: 0;
}
.service-selector-actions .btn,
.document-line-snapshot-actions .btn,
.line-item-catalog-actions .btn {
    overflow-wrap: anywhere;
}
.service-selector-metadata-grid,
.document-line-snapshot-stats {
    min-width: 0;
}
.document-line-snapshot-total {
    min-width: 0;
    overflow-wrap: anywhere;
    text-align: right;
}
@media (min-width: 1181px) {
    .service-selector-metadata-grid {
        grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
    }

    .document-line-snapshot-stats {
        grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
    }
}
.service-item-advanced-build-shell {
    display: grid;
    gap: 1rem;
}
.service-item-advanced-current {
    display: grid;
    gap: .75rem;
    grid-template-columns: repeat(6, minmax(0, 1fr));
}
.service-item-advanced-current article {
    background: #fff;
    border: 1px solid #dbe4ee;
    border-radius: 8px;
    min-width: 0;
    padding: .85rem;
}
.service-item-advanced-current span {
    color: #526579;
    display: block;
    font-size: .75rem;
    font-weight: 800;
}
.service-item-advanced-current strong {
    color: #17233a;
    display: block;
    font-size: .96rem;
    overflow-wrap: anywhere;
}
.service-item-advanced-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.service-item-advanced-card {
    min-width: 0;
}
.service-item-advanced-card h2 {
    font-size: 1rem;
    margin: 0;
}
.service-item-advanced-card p,
.service-item-advanced-safety p {
    color: #42566d;
}
.service-item-advanced-rule-panel {
    min-width: 0;
}
.service-item-advanced-rule-grid {
    display: grid;
    gap: .75rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
.service-item-advanced-rule-grid article {
    background: #f8fafc;
    border: 1px solid #dbe4ee;
    border-radius: 8px;
    min-width: 0;
    padding: .75rem;
}
.service-item-advanced-rule-grid span {
    color: #526579;
    display: block;
    font-size: .75rem;
    font-weight: 800;
}
.service-item-advanced-rule-grid strong {
    color: #17233a;
    display: block;
    overflow-wrap: anywhere;
}
.service-item-profile-layout .module-page-header,
.service-item-advanced-build-shell .module-page-header,
.service-item-profile-review-card,
.service-item-advanced-review-card,
.service-item-advanced-safety,
.service-item-advanced-rule-panel {
    min-width: 0;
    overflow-wrap: anywhere;
}
.service-item-profile-layout .module-action-bar,
.service-item-advanced-build-shell .module-action-bar {
    flex-wrap: wrap;
    min-width: 0;
}
.service-item-profile-layout .module-action-bar > *,
.service-item-advanced-build-shell .module-action-bar > * {
    max-width: 100%;
    min-width: 0;
}
.service-item-profile-layout .module-action-bar .btn,
.service-item-advanced-build-shell .module-action-bar .btn,
.service-item-duration-profile-actions .btn,
.service-item-pricing-profile-actions .btn,
.service-item-supplier-inventory-profile-actions .btn,
.service-item-reporting-profile-actions .btn,
.service-item-advanced-review-actions .btn,
.service-item-profile-review-actions .btn {
    max-width: 100%;
    overflow-wrap: anywhere;
}
.service-item-profile-review-card h2,
.service-item-advanced-review-card h2,
.service-item-advanced-safety h2,
.service-item-advanced-rule-panel h2 {
    line-height: 1.2;
}
.service-item-advanced-card,
.service-item-advanced-rule-grid article,
.service-item-duration-profile-metrics article {
    overflow: hidden;
}
.service-item-advanced-card p,
.service-item-advanced-safety li,
.service-item-advanced-rule-panel p,
.service-item-duration-profile-metrics strong {
    max-width: 100%;
}
@media (min-width: 1181px) {
    .service-item-profile-layout .document-main {
        grid-template-columns: minmax(0, 1fr);
    }

    .service-item-duration-profile-metrics {
        grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr));
    }

    .service-item-advanced-grid {
        grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr));
    }

    .service-item-advanced-current {
        grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
    }
}

@media (max-width: 1180px) {
    .service-item-command-metrics,
    .service-item-metric-grid,
    .service-item-usage-grid,
    .service-item-bring-list-grid,
    .service-item-material-grid,
    .service-item-material-pricing-grid,
    .service-item-inventory-planning-grid,
    .service-item-supplier-order-grid,
    .service-item-review-center-grid,
    .service-item-cost-margin-review-grid,
    .service-item-cost-margin-review-metrics,
    .service-item-duration-readiness-review-grid,
    .service-item-duration-readiness-review-metrics,
    .service-item-duration-profile-metrics,
    .service-item-pricing-profile-metrics,
    .service-item-supplier-inventory-profile-metrics,
    .service-item-reporting-profile-metrics,
    .service-item-pricing-inventory-lineage-grid,
    .service-item-cleanup-heading,
    .service-item-cleanup-priority-grid,
    .service-item-time-default-editor-metrics,
    .service-item-supplier-order-review-grid,
    .service-item-supplier-order-review-metrics,
    .service-item-material-inventory-grid,
    .service-item-inventory-review-grid,
    .service-item-inventory-review-metrics,
    .service-item-flag-grid,
    .line-timer-readiness-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .service-item-filter-toolbar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .service-item-advanced-current {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .service-item-advanced-rule-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .service-item-profile-review-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .service-item-advanced-review-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px), (hover: none) and (pointer: coarse) {
    .service-item-command-toolbar,
    .service-item-form-actions,
    .service-item-card-actions,
    .service-item-lifecycle-actions,
    .service-item-lifecycle-form,
    .service-item-lineage-actions,
    .service-item-profile-review-actions,
    .service-item-advanced-review-actions,
    .service-item-review-center-actions,
    .service-item-review-center-actions-row,
    .service-item-inventory-review-actions,
    .service-item-cost-margin-review-actions,
    .service-item-duration-readiness-review-actions,
    .service-item-supplier-order-review-actions,
    .service-item-inventory-review-toolbar,
    .service-item-cost-margin-review-toolbar,
    .service-item-duration-readiness-review-toolbar,
    .service-item-duration-profile-actions,
    .service-item-pricing-profile-actions,
    .service-item-supplier-inventory-profile-actions,
    .service-item-reporting-profile-actions,
    .service-item-pricing-inventory-lineage-actions,
    .service-item-cleanup-heading,
    .service-item-cleanup-priority-grid,
    .service-item-supplier-order-review-toolbar,
    .service-item-bring-form,
    .service-item-material-form,
    .service-item-material-pricing-form,
    .service-item-inventory-planning-form,
    .service-item-supplier-order-form,
    .service-item-material-inventory-form,
    .line-timer-review-filters,
    .line-timer-review-action-form,
    .line-timer-review-card-actions,
    .work-order-line-card-main,
    .work-order-line-card-timer .inline-form {
        align-items: stretch;
        display: grid;
        gap: .5rem;
        grid-template-columns: 1fr;
        width: 100%;
    }

    .service-item-command-toolbar input,
    .service-item-command-toolbar select,
    .service-item-command-toolbar button,
    .service-item-command-toolbar a.btn,
    .service-item-form-actions > *,
    .service-item-card-actions > *,
    .service-item-card-actions .btn,
    .service-item-lifecycle-actions > *,
    .service-item-lifecycle-form > *,
    .service-item-lifecycle-form .btn,
    .service-item-lineage-actions > *,
    .service-item-lineage-actions .btn,
    .service-item-profile-review-actions > *,
    .service-item-profile-review-actions .btn,
    .service-item-advanced-review-actions > *,
    .service-item-advanced-review-actions .btn,
    .service-item-review-center-actions > *,
    .service-item-review-center-actions .btn,
    .service-item-review-center-actions-row > *,
    .service-item-review-center-actions-row .btn,
    .service-item-inventory-review-actions > *,
    .service-item-inventory-review-actions .btn,
    .service-item-cost-margin-review-actions > *,
    .service-item-cost-margin-review-actions .btn,
    .service-item-duration-readiness-review-actions > *,
    .service-item-duration-readiness-review-actions .btn,
    .service-item-supplier-order-review-actions > *,
    .service-item-supplier-order-review-actions .btn,
    .service-item-inventory-review-toolbar > *,
    .service-item-inventory-review-toolbar input,
    .service-item-inventory-review-toolbar select,
    .service-item-inventory-review-toolbar button,
    .service-item-inventory-review-toolbar a.btn,
    .service-item-cost-margin-review-toolbar > *,
    .service-item-cost-margin-review-toolbar input,
    .service-item-cost-margin-review-toolbar select,
    .service-item-cost-margin-review-toolbar button,
    .service-item-cost-margin-review-toolbar a.btn,
    .service-item-duration-readiness-review-toolbar > *,
    .service-item-duration-readiness-review-toolbar input,
    .service-item-duration-readiness-review-toolbar select,
    .service-item-duration-readiness-review-toolbar button,
    .service-item-duration-readiness-review-toolbar a.btn,
    .service-item-duration-profile-actions > *,
    .service-item-duration-profile-actions .btn,
    .service-item-pricing-profile-actions > *,
    .service-item-pricing-profile-actions .btn,
    .service-item-supplier-inventory-profile-actions > *,
    .service-item-supplier-inventory-profile-actions .btn,
    .service-item-reporting-profile-actions > *,
    .service-item-reporting-profile-actions .btn,
    .service-item-pricing-inventory-lineage-actions > *,
    .service-item-pricing-inventory-lineage-actions .btn,
    .service-item-cleanup-heading > *,
    .service-item-cleanup-priority-grid > *,
    .service-item-cleanup-priority-grid .btn,
    .service-item-time-default-editor-actions > *,
    .service-item-supplier-order-review-toolbar > *,
    .service-item-supplier-order-review-toolbar input,
    .service-item-supplier-order-review-toolbar select,
    .service-item-supplier-order-review-toolbar button,
    .service-item-supplier-order-review-toolbar a.btn,
    .service-item-bring-form > *,
    .service-item-bring-form button,
    .service-item-bring-form input,
    .service-item-bring-form select,
    .service-item-bring-form textarea,
    .service-item-material-form > *,
    .service-item-material-form button,
    .service-item-material-form input,
    .service-item-material-form select,
    .service-item-material-form textarea,
    .service-item-material-pricing-form > *,
    .service-item-material-pricing-form button,
    .service-item-material-pricing-form input,
    .service-item-material-pricing-form select,
    .service-item-material-pricing-form textarea,
    .service-item-inventory-planning-form > *,
    .service-item-inventory-planning-form button,
    .service-item-inventory-planning-form input,
    .service-item-inventory-planning-form select,
    .service-item-inventory-planning-form textarea,
    .service-item-supplier-order-form > *,
    .service-item-supplier-order-form button,
    .service-item-supplier-order-form input,
    .service-item-supplier-order-form select,
    .service-item-supplier-order-form textarea,
    .service-item-material-inventory-form > *,
    .service-item-material-inventory-form button,
    .service-item-material-inventory-form input,
    .service-item-material-inventory-form select,
    .service-item-material-inventory-form textarea,
    .line-timer-review-filters > *,
    .line-timer-review-action-form > *,
    .line-timer-review-action-form .btn,
    .line-timer-review-card-actions > *,
    .work-order-line-card-timer .inline-form > *,
    .work-order-line-card-timer button,
    .work-order-line-card-timer select,
    .work-order-line-card-timer input {
        min-width: 0;
        width: 100%;
    }

    .service-item-command-intro {
        align-items: flex-start;
        display: grid;
        grid-template-columns: 1fr;
    }

    .service-item-command-metrics,
    .service-item-metric-grid,
    .service-item-usage-grid,
    .service-item-bring-list-grid,
    .service-item-material-grid,
    .service-item-material-pricing-grid,
    .service-item-inventory-planning-grid,
    .service-item-supplier-order-grid,
    .service-item-review-center-grid,
    .service-item-review-center-metrics,
    .service-item-cost-margin-review-grid,
    .service-item-cost-margin-review-metrics,
    .service-item-cost-margin-review-details,
    .service-item-duration-readiness-review-grid,
    .service-item-duration-readiness-review-metrics,
    .service-item-duration-readiness-review-details,
    .service-item-duration-profile-metrics,
    .service-item-pricing-profile-metrics,
    .service-item-supplier-inventory-profile-metrics,
    .service-item-reporting-profile-metrics,
    .service-item-pricing-inventory-lineage-grid,
    .service-item-time-default-editor-metrics,
    .service-item-supplier-order-review-grid,
    .service-item-supplier-order-review-metrics,
    .service-item-supplier-order-review-details,
    .service-item-material-inventory-grid,
    .service-item-inventory-review-grid,
    .service-item-inventory-review-metrics,
    .service-item-inventory-review-details,
    .service-item-advanced-current,
    .service-item-advanced-rule-grid,
    .service-item-advanced-grid,
    .service-item-flag-grid,
    .service-item-grouped-form,
    .service-item-profile-hero {
        grid-template-columns: 1fr;
    }

    .service-item-catalog-card {
        grid-template-columns: 72px minmax(0, 1fr);
        padding: .75rem;
    }

    .service-item-card-photo {
        width: 72px;
    }

    .service-item-card-title {
        display: grid;
        grid-template-columns: 1fr;
    }

    .service-item-review-center-card-title {
        display: grid;
        grid-template-columns: 1fr;
    }

    .service-item-inventory-review-card-title {
        display: grid;
        grid-template-columns: 1fr;
    }

    .service-item-cost-margin-review-card-title {
        display: grid;
        grid-template-columns: 1fr;
    }

    .service-item-duration-readiness-review-card-title {
        display: grid;
        grid-template-columns: 1fr;
    }

    .service-item-duration-profile-heading {
        display: grid;
        grid-template-columns: 1fr;
    }

    .service-item-duration-profile-state {
        align-items: flex-start;
        justify-items: start;
        min-width: 0;
    }

    .service-item-duration-profile-state > span:first-child {
        text-align: left;
    }

    .service-item-supplier-order-review-card-title {
        display: grid;
        grid-template-columns: 1fr;
    }

    .service-item-review-center-card-title .btn {
        width: 100%;
    }

    .service-item-inventory-review-card-title .btn {
        width: 100%;
    }

    .service-item-cost-margin-review-card-title .btn {
        width: 100%;
    }

    .service-item-duration-readiness-review-card-title .btn {
        width: 100%;
    }

    .service-item-supplier-order-review-card-title .btn {
        width: 100%;
    }

    .service-item-review-queue-setup-actions {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
    }

    .service-item-review-queue-setup-actions .btn {
        width: 100%;
    }

    .service-selector-preview[data-service-selector-panel="runtime"] {
        grid-template-columns: 1fr;
    }

    .document-line-snapshot-grid {
        display: grid;
    }

    .line-item-flow-card > .table-scroll {
        display: none;
    }

    .service-selector-preview[data-service-selector-panel="runtime"] img,
    .service-selector-photo-placeholder,
    .work-order-line-photo,
    .work-order-line-photo-placeholder {
        width: 72px;
    }

    .service-selector-metadata-grid {
        grid-template-columns: 1fr;
    }

    .document-line-snapshot-main,
    .document-line-snapshot-stats {
        grid-template-columns: 1fr;
    }

    .document-line-snapshot-total {
        white-space: normal;
    }

    .service-selector-actions,
    .service-selector-profile-link,
    .service-selector-advanced-link {
        width: 100%;
    }

    .work-order-line-media,
    .work-order-line-summary,
    .work-order-line-card-actions,
    .work-order-service-task-profile-link,
    .work-order-service-task-advanced-link,
    .line-item-catalog-actions,
    .line-item-snapshot-profile-link,
    .line-item-snapshot-advanced-link,
    .document-line-snapshot-actions,
    .service-selector-actions,
    .service-selector-profile-link,
    .service-selector-advanced-link {
        min-width: 0;
        width: 100%;
    }

    .service-item-readiness-badges .setup-badge,
    .service-item-card-meta span,
    .service-item-inventory-review-badges .setup-badge,
    .service-item-cost-margin-review-badges .setup-badge,
    .service-item-duration-readiness-review-badges .setup-badge,
    .service-item-supplier-order-review-badges .setup-badge,
    .work-order-line-stats span {
        white-space: normal;
    }

    .service-item-profile-photo {
        max-width: 16rem;
    }
}

@media (max-width: 430px) {
    .service-item-catalog-card {
        grid-template-columns: 1fr;
    }

    .service-item-card-photo {
        aspect-ratio: 4 / 3;
        width: 100%;
    }

    .service-item-inventory-review-card,
    .service-item-inventory-review-empty,
    .service-item-inventory-review-safety,
    .service-item-review-center-card,
    .service-item-review-center-safety,
    .service-item-cost-margin-review-card,
    .service-item-cost-margin-review-empty,
    .service-item-cost-margin-review-safety,
    .service-item-duration-readiness-review-card,
    .service-item-duration-readiness-review-empty,
    .service-item-duration-readiness-review-safety,
    .service-item-supplier-order-review-card,
    .service-item-supplier-order-review-empty,
    .service-item-supplier-order-review-safety {
        padding: .75rem;
    }
}

.work-order-workflow-dialog {
    border: 0;
    border-radius: 8px;
    box-shadow: 0 24px 70px rgba(15, 23, 42, .28);
    max-height: min(760px, calc(100vh - 2rem));
    max-width: min(560px, calc(100vw - 2rem));
    padding: 0;
    width: 100%;
}

.work-order-otw-dialog {
    max-width: min(860px, calc(100vw - 2rem));
}

.work-order-workflow-dialog::backdrop {
    background: rgba(15, 23, 42, .46);
}

.work-order-workflow-dialog-panel {
    background: var(--surface, #fff);
    color: var(--text, #0f172a);
    display: grid;
    gap: 1rem;
    padding: 1.1rem;
}

.work-order-workflow-dialog-panel header,
.work-order-workflow-dialog-panel footer {
    align-items: center;
    display: flex;
    gap: .75rem;
    justify-content: space-between;
}

.work-order-workflow-dialog-panel header h3 {
    font-size: 1.15rem;
    margin: .1rem 0 0;
}

.work-order-dialog-icon-btn {
    align-items: center;
    aspect-ratio: 1;
    background: #eef2f7;
    border: 1px solid #d6dee8;
    border-radius: 8px;
    color: #334155;
    cursor: pointer;
    display: inline-flex;
    font-weight: 800;
    height: 2rem;
    justify-content: center;
}

.work-order-workflow-choice-grid {
    display: grid;
    gap: .55rem;
    grid-template-columns: repeat(auto-fit, minmax(86px, 1fr));
}

.work-order-workflow-choice-grid.is-two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.work-order-workflow-message-grid {
    display: grid;
    gap: .85rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.work-order-workflow-message-card {
    border: 1px solid #d6dee8;
    border-radius: 8px;
    display: grid;
    gap: .7rem;
    padding: .85rem;
}

.work-order-workflow-message-card h4 {
    font-size: 1rem;
    margin: 0;
}

.work-order-workflow-message-card.is-delayed {
    background: #fff7ed;
    border-color: #fed7aa;
}

.work-order-workflow-choice {
    align-items: center;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    gap: .45rem;
    justify-content: center;
    min-height: 2.45rem;
    padding: .45rem .6rem;
}

.work-order-workflow-choice:has(input:checked) {
    background: #ecfdf5;
    border-color: #22c55e;
    color: #14532d;
    font-weight: 700;
}

.work-order-workflow-textarea-label {
    display: grid;
    gap: .35rem;
}

.work-order-workflow-dialog textarea,
.work-order-workflow-dialog select {
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    min-height: 2.35rem;
    padding: .55rem .65rem;
    width: 100%;
}

.work-order-finish-no-fields {
    border-top: 1px solid #e2e8f0;
    display: grid;
    gap: .55rem;
    padding-top: .75rem;
}

@media (max-width: 760px) {
    .work-order-workflow-message-grid {
        grid-template-columns: 1fr;
    }
}

@media print {
    .service-item-review-center-shell .service-item-review-center-actions,
    .service-item-review-center-shell .return-link,
    .service-item-inventory-review-shell .service-item-inventory-review-actions,
    .service-item-inventory-review-shell .service-item-inventory-review-toolbar,
    .service-item-inventory-review-shell .return-link,
    .service-item-cost-margin-review-shell .service-item-cost-margin-review-actions,
    .service-item-cost-margin-review-shell .service-item-cost-margin-review-toolbar,
    .service-item-cost-margin-review-shell .return-link,
    .service-item-duration-readiness-review-shell .service-item-duration-readiness-review-actions,
    .service-item-duration-readiness-review-shell .service-item-duration-readiness-review-toolbar,
    .service-item-duration-readiness-review-shell .return-link,
    .service-item-supplier-order-review-shell .service-item-supplier-order-review-actions,
    .service-item-supplier-order-review-shell .service-item-supplier-order-review-toolbar,
    .service-item-supplier-order-review-shell .return-link,
    .line-timer-review-print-hidden,
    .line-timer-review-action-form,
    .line-timer-correction-action-form {
        display: none;
    }

    .service-item-review-center-shell,
    .service-item-inventory-review-shell,
    .service-item-cost-margin-review-shell,
    .service-item-duration-readiness-review-shell,
    .service-item-supplier-order-review-shell,
    .line-timer-review-shell {
        color: #111827;
    }

    .service-item-review-center-grid,
    .service-item-inventory-review-grid,
    .service-item-cost-margin-review-grid,
    .service-item-duration-readiness-review-grid,
    .service-item-supplier-order-review-grid,
    .line-timer-review-summary,
    .line-timer-review-card-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .line-timer-review-results .table-wrap {
        display: block;
    }

    .service-item-review-center-card,
    .service-item-review-center-safety,
    .service-item-inventory-review-card,
    .service-item-inventory-review-empty,
    .service-item-inventory-review-safety,
    .service-item-cost-margin-review-card,
    .service-item-cost-margin-review-empty,
    .service-item-cost-margin-review-safety,
    .service-item-duration-readiness-review-card,
    .service-item-duration-readiness-review-empty,
    .service-item-duration-readiness-review-safety,
    .service-item-supplier-order-review-card,
    .service-item-supplier-order-review-empty,
    .service-item-supplier-order-review-safety {
        break-inside: avoid;
        box-shadow: none;
    }
}

.customer-profile-shell.record-layout-shell { align-items: start; display: grid; gap: 1.25rem; grid-template-columns: 360px minmax(0, 1fr); }
.record-sidebar .layout-card { background: #f3f3f3; }
.record-tabs { border-bottom: 1px solid var(--border); display: flex; flex-wrap: wrap; gap: 1rem; margin: 0 0 1rem; }
.record-tabs a { color: #202938; font-weight: 800; padding: .75rem .1rem; text-decoration: none; }
.record-tabs a:first-child { border-bottom: 3px solid #20b65b; color: #13a84f; }
.record-action-bar { align-items: center; display: flex; flex-wrap: wrap; gap: .4rem; justify-content: flex-end; }

.customer-quality-presets {
    margin: .5rem 0 1rem;
}

.customer-work-snapshot-grid {
    display: grid;
    gap: .75rem;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    margin: .75rem 0 1rem;
}

.customer-work-snapshot-grid article {
    background: #f8fafc;
    border: 1px solid var(--border);
    border-radius: .6rem;
    min-width: 0;
    padding: .8rem;
}

.customer-work-snapshot-grid span {
    color: #64748b;
    display: block;
    font-size: .78rem;
    font-weight: 800;
    text-transform: uppercase;
}

.customer-work-snapshot-grid strong {
    color: #0f172a;
    display: block;
    font-size: 1rem;
    margin: .25rem 0;
    overflow-wrap: anywhere;
}

.customer-work-snapshot-grid a {
    font-size: .82rem;
    font-weight: 800;
}

.customer-duration-profile-actions {
    margin: .6rem 0 1rem;
}

.customer-duration-profile-grid {
    display: grid;
    gap: .75rem;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    margin: .75rem 0 1rem;
}

.customer-duration-profile-card {
    background: #f8fafc;
    border: 1px solid var(--border);
    border-radius: .6rem;
    display: grid;
    gap: .65rem;
    min-width: 0;
    padding: .85rem;
}

.customer-duration-profile-card strong,
.customer-duration-profile-card span {
    display: block;
    overflow-wrap: anywhere;
}

.customer-duration-profile-card span,
.customer-duration-profile-card dt,
.customer-duration-profile-card p {
    color: #64748b;
}

.customer-duration-profile-card dl {
    display: grid;
    gap: .5rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0;
}

.customer-duration-profile-card dt {
    font-size: .72rem;
    font-weight: 800;
    text-transform: uppercase;
}

.customer-duration-profile-card dd {
    color: #0f172a;
    font-weight: 800;
    margin: .1rem 0 0;
}

.customer-duration-profile-empty {
    margin-top: .75rem;
}

.customer-snapshot-actions,
.customer-address-actions,
.customer-address-status-row {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
}

.customer-address-grid {
    align-items: start;
}

.customer-address-status-row {
    border-top: 1px solid var(--border);
    margin-top: .75rem;
    padding-top: .65rem;
}

.customer-address-actions {
    border-top: 1px solid var(--border);
    margin-top: .75rem;
    padding-top: .75rem;
}

.customer-address-actions .inline-editor {
    flex: 1 1 220px;
    min-width: min(100%, 220px);
}

.customer-facing-document-page { align-items: start; display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 880px) 320px; margin: 0 auto; max-width: 1240px; width: 100%; }
.customer-document-preview { min-width: 0; }
.portal-action-card { background: #f3f3f3; border: 1px solid #e5e7eb; padding: 1.5rem; position: sticky; top: 1rem; }
.portal-action-card strong { color: #20b65b; display: block; font-size: 2rem; margin: .35rem 0 1rem; }
.portal-actions { display: grid; gap: .75rem; }
.portal-public-shell { max-width: none; }
.portal-brand { align-items: center; display: flex; justify-content: space-between; margin: 0 auto 1rem; max-width: 1240px; }

@media (max-width: 1100px) {
    .document-detail-layout, .customer-facing-document-page, .customer-profile-shell.record-layout-shell { grid-template-columns: 1fr; }
    .metric-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .service-item-command-summary,
    .service-item-metric-grid,
    .service-item-usage-grid,
    .service-item-flag-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .filter-toolbar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .portal-action-card { position: static; }
}

@media (max-width: 760px) {
    .module-page-header { display: block; }
    .module-action-bar.action-bar { justify-content: flex-start; margin-top: 1rem; }
    .filter-toolbar, .document-form, .form-section-card, .document-address-grid { grid-template-columns: 1fr; }
    .metric-strip { grid-template-columns: 1fr 1fr; }
    .service-item-command-summary,
    .service-item-metric-grid,
    .service-item-usage-grid,
    .service-item-flag-grid,
    .service-item-profile-hero { grid-template-columns: 1fr; }
    .operational-list-service-items .operational-table-card .table-scroll { display: none; }
    .operational-list-service-items .service-item-catalog-card-grid { display: grid; }
    .service-item-catalog-card { grid-template-columns: 72px minmax(0, 1fr); }
    .service-item-card-photo { width: 72px; }
    .service-item-card-title,
    .work-order-line-card-main { display: grid; }
    .document-preview-card { min-height: 0; padding: 1rem; }
    .document-header { display: block; }
    .manage-menu { left: 0; right: auto; }
}

/* Leads Pipeline V2 — 6 columns, drag-drop, portal, lifecycle */
.leads-shell .view-toggle { display: flex; gap: .5rem; margin: .75rem 0; flex-wrap: wrap; }

/* Nav badge — unviewed lead count on Leads nav link */
.nav-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 5px; background: #ef4444; color: #fff; border-radius: 999px; font-size: .7rem; font-weight: 700; line-height: 1; vertical-align: middle; }

/* Pipeline board — 6 columns */
.lead-pipeline-board { display: grid; grid-template-columns: repeat(6, minmax(210px, 1fr)); gap: .75rem; align-items: start; overflow-x: auto; padding-bottom: .5rem; }
.pipeline-column { background: #f8fafc; border: 1px solid #dbe3ef; border-radius: 14px; padding: .75rem; min-width: 210px; }
.pipeline-column-closed { background: #f1f5f9; opacity: .88; }
.pipeline-column-header h2 { display: flex; justify-content: space-between; gap: .5rem; align-items: center; margin: 0 0 .65rem; font-size: .9rem; color: #334155; }
.pipeline-column-header h2 .col-count { border-radius: 999px; background: #e8eef8; padding: .1rem .42rem; font-size: .75rem; font-weight: 700; }

/* Drop zone */
.pipeline-dropzone { min-height: 60px; border-radius: 10px; transition: background .15s; }
.pipeline-dropzone.drag-over { background: #eff6ff; outline: 2px dashed #3b82f6; outline-offset: -2px; }

/* Pipeline card */
.pipeline-card { background: #fff; border: 1px solid #d8e0ea; border-radius: 12px; padding: .75rem; box-shadow: 0 1px 2px rgba(15, 23, 42, .06); margin-bottom: .65rem; cursor: grab; user-select: none; transition: box-shadow .15s, opacity .15s; }
.pipeline-card:active, .pipeline-card.dragging { cursor: grabbing; opacity: .6; box-shadow: 0 6px 18px rgba(15, 23, 42, .16); }
.pipeline-card small, .muted-note { color: #667085; }
.pipeline-card p { margin: .4rem 0; font-size: .88rem; }
.pipeline-card a { color: #2563eb; }
.pipeline-card .inline-form { margin-top: .5rem; display: flex; gap: .3rem; align-items: center; flex-wrap: wrap; }
.pipeline-card select { min-width: 0; width: 100%; }

/* Unviewed card — visually distinct */
.pipeline-card--unviewed { border-left: 3px solid #f59e0b; background: #fffdf4; }
.pipeline-card-header { display: flex; align-items: center; flex-wrap: wrap; gap: .35rem; margin-bottom: .35rem; }
.pipeline-card-meta { color: #667085; font-size: .78rem; margin: .2rem 0 .45rem; }
.pipeline-unviewed-badge { display: inline-block; font-size: .65rem; font-weight: 700; padding: .1rem .35rem; border-radius: 999px; background: #fef3c7; color: #92400e; border: 1px solid #fcd34d; text-transform: uppercase; letter-spacing: .03em; }

/* Portal link in pipeline card */
.pipeline-portal-link { font-size: .8rem; }
.pipeline-portal-link a { color: #2563eb; }
.pipeline-portal-link .btn-xs { font-size: .7rem; padding: .1rem .4rem; margin-left: .3rem; }

/* Lead row unviewed highlight in table view */
.lead-row-unviewed td:first-child + td { font-weight: 600; }
.lead-row-unviewed { background: #fffdf4; }

/* Customer message card — top of lead detail */
.lead-customer-message { background: #f0f9ff; border: 1px solid #bae6fd; border-radius: 12px; padding: 1rem 1.25rem; margin-bottom: .25rem; }
.customer-message-body { margin: 0 0 .5rem; padding: 0; border: 0; font-size: 1.05rem; line-height: 1.65; color: #0f172a; font-style: italic; }
.customer-message-meta { margin: 0; color: #64748b; font-size: .82rem; }

/* Lead file thumbnails */
.lead-files-grid { display: flex; flex-wrap: wrap; gap: .85rem; margin-bottom: .75rem; }
.lead-upload-review-card { flex: 0 1 240px; border: 1px solid #d8e0ea; border-radius: 10px; padding: .6rem; background: #fff; }
.lead-upload-thumb { margin: 0; text-align: center; }
.lead-upload-thumb img { display: block; border-radius: 8px; border: 1px solid #d8e0ea; box-shadow: 0 1px 3px rgba(15,23,42,.08); }
.lead-upload-thumb figcaption { margin-top: .3rem; font-size: .75rem; color: #667085; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lead-upload-review-meta { margin-top: .5rem; border: 1px solid #d8e0ea; border-radius: 8px; padding: .45rem; background: #f8fafc; }
.lead-upload-review-actions { margin-top: .45rem; gap: .35rem; }
.lead-upload-review-actions .btn { font-size: .72rem; padding: .3rem .5rem; }

/* Public lead portal page */
.public-portal-page { background: #f8fafc; min-height: 100vh; padding: 2rem 1rem; }
.public-portal-page .card { box-shadow: 0 4px 24px rgba(15,23,42,.09); }

.lead-form textarea { min-height: 5rem; }
details.manage-menu { position: relative; display: inline-block; }
details.manage-menu > div { display: grid; gap: .25rem; min-width: 170px; padding: .5rem; margin-top: .25rem; background: #fff; border: 1px solid #d8e0ea; border-radius: 10px; box-shadow: 0 10px 24px rgba(15, 23, 42, .12); z-index: 3; }
details.manage-menu .inline-form { margin: 0; }
details.manage-menu a, details.manage-menu button { text-align: left; width: 100%; }
.inline-list-item { border-bottom: 1px solid #edf1f7; padding: .55rem 0; }
.inline-list-item:last-child { border-bottom: 0; }
@media (max-width: 1400px) { .lead-pipeline-board { grid-template-columns: repeat(4, minmax(210px, 1fr)); } }
@media (max-width: 1100px) { .lead-pipeline-board { grid-template-columns: repeat(3, minmax(210px, 1fr)); } }
@media (max-width: 760px) { .lead-pipeline-board { grid-template-columns: 1fr; overflow-x: visible; } .pipeline-column { min-width: 0; } }

.auth-split { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
.register-entry-card { background: linear-gradient(180deg, #ffffff 0%, #eef6ff 100%); }
.wide-auth-card { max-width: 980px; width: 100%; }
.registration-form fieldset, .company-profile-form fieldset { border: 1px solid var(--border); border-radius: .9rem; margin: 0 0 1rem; padding: 1rem; }
.registration-form legend, .company-profile-form legend { color: var(--primary-dark); font-weight: 900; padding: 0 .35rem; }
.company-profile-page,
.company-logo-form,
.company-message-template-card,
.company-template-table-scroll,
.company-template-mobile-list,
.company-template-mobile-card,
.company-template-fields,
.company-template-fields div {
    max-width: 100%;
    min-width: 0;
    overflow-wrap: anywhere;
}
.company-template-mobile-list { display: none; gap: .65rem; }
.company-template-mobile-card {
    background: #fff;
    border: 1px solid var(--border);
    border-left: 4px solid var(--primary);
    border-radius: .75rem;
    padding: .75rem;
}
.company-template-card-head {
    align-items: flex-start;
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    justify-content: space-between;
}
.company-template-fields {
    display: grid;
    gap: .45rem;
    margin: .7rem 0 0;
}
.company-template-fields div {
    background: #f8fbff;
    border: 1px solid var(--border);
    border-radius: .55rem;
    padding: .5rem;
}
.company-template-fields dt {
    color: var(--muted);
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.company-template-fields dd {
    color: var(--text);
    margin: .15rem 0 0;
}
.company-template-channel-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    margin: 1rem 0;
}
.company-template-channel-section {
    border: 1px solid var(--border);
    border-left: 4px solid var(--primary);
    border-radius: .75rem;
    display: grid;
    gap: .85rem;
    padding: 1rem;
}
.company-template-channel-section h3 {
    margin: .1rem 0 0;
}
.company-template-channel-section p {
    margin: 0;
}
.company-template-builder-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}
.company-template-channel-section .company-template-table-scroll {
    margin: 0;
}
.form-grid-2, .form-grid-3, .form-grid-4 { display: grid; gap: 1rem; }
.form-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.form-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.form-actions { align-items: center; display: flex; flex-wrap: wrap; gap: .65rem; }
.account-company-link { color: var(--primary); font-size: .78rem; font-weight: 850; text-decoration: none; }
.account-area-sidebar .account-company-link { color: #bfdbfe; }
.compact-details { display: grid; gap: .45rem .8rem; grid-template-columns: max-content minmax(0, 1fr); }
.compact-details dt { color: var(--muted); font-weight: 850; }
.compact-details dd { margin: 0; }
@media (max-width: 900px) {
    .auth-split, .form-grid-2, .form-grid-3, .form-grid-4 { grid-template-columns: 1fr; }
    .company-template-channel-grid { grid-template-columns: 1fr; }
}

/* Scheduling Dispatch Field Tech Workflow Usable V2 */
.leaflet-dispatch-map { border: 1px solid #d8e0ea; border-radius: 14px; min-height: 430px; overflow: hidden; width: 100%; }
.job-value-marker span { border: 2px solid #fff; border-radius: 999px; box-shadow: 0 8px 18px rgba(15,23,42,.28); color: #fff; display: inline-block; font-size: .78rem; font-weight: 900; padding: .25rem .45rem; white-space: nowrap; }
.selected-map-marker span { outline: 3px solid #fde047; }
.job-value-badge { background: #052e16; border-radius: 999px; color: #dcfce7; display: inline-block; font-size: .78rem; padding: .18rem .5rem; }
.map-marker-list { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin-top: 1rem; }
.map-marker-card { border: 1px solid #d8e0ea; border-left: 5px solid #16a34a; border-radius: 12px; padding: .8rem; }
.map-marker-card.scheduled { border-left-color: #f97316; }
.marker-popup-action-menu { min-width: 240px; }
.geocode-review-list { background: #fff7ed; border: 1px solid #fed7aa; border-radius: 12px; margin-top: .8rem; padding: .75rem; }
.field-tech-workflow-card .button-row, .marker-popup-action-menu .button-row { gap: .3rem; }
@media (max-width: 760px) { .leaflet-dispatch-map { min-height: 320px; } .map-marker-list { grid-template-columns: 1fr; } }

/* Company Branding + Documents + Communications V1 */
.company-logo-preview,
.document-company-logo,
.portal-brand img {
    max-width: 150px;
    max-height: 72px;
    object-fit: contain;
    display: block;
}
.company-logo-placeholder,
.portal-brand-placeholder {
    display: inline-flex;
    min-width: 4rem;
    min-height: 4rem;
    align-items: center;
    justify-content: center;
    border-radius: 1rem;
    background: linear-gradient(135deg, var(--brand-primary, #1f6feb), var(--brand-accent, #0ea5e9));
    color: #fff;
    font-weight: 800;
    letter-spacing: .04em;
    padding: .75rem;
}
.brand-preview-card,
.company-branded-header,
.company-document-header {
    border-left: 6px solid var(--brand-primary, #1f6feb);
}
.company-branded-header {
    gap: 1rem;
    background: linear-gradient(135deg, color-mix(in srgb, var(--brand-primary, #1f6feb) 14%, #fff), #fff);
}
.company-branded-header .brand-mark {
    flex: 0 0 auto;
}
.company-branded-header small {
    display: block;
    color: var(--muted, #64748b);
    margin-top: .15rem;
}
.company-document-header {
    border-top: 4px solid var(--brand-primary, #1f6feb);
    border-bottom: 1px solid color-mix(in srgb, var(--brand-accent, #0ea5e9) 28%, #d7dee8);
}
@media print {
    nav, .app-nav, .sidebar, .portal-admin-panel, form.portal-actions, .btn, button { display: none ; }
    .document-preview-card, .portal-card { box-shadow: none ; border: 1px solid #d7dee8; break-inside: avoid; }
}

/* Scheduling Map Route Optimization Deep V3 */
.dispatch-action-bar { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 1rem; }
.dispatch-workspace-v3 { display: grid; grid-template-columns: minmax(230px, 0.8fr) minmax(420px, 2.2fr) minmax(280px, 1fr); gap: 1rem; align-items: start; }
.dispatch-panel { background: #fff; border: 1px solid #d8e0ea; border-radius: 16px; box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05); padding: 1rem; min-width: 0; }
.dispatch-map-panel .leaflet-dispatch-map { min-height: 560px; }
.dispatch-filter-form { display: grid; gap: 0.65rem; }
.dispatch-filter-form label, .route-group-builder label { display: grid; gap: 0.25rem; font-size: 0.9rem; }
.quick-filter-row { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.quick-filter-row a { border: 1px solid #d8e0ea; border-radius: 999px; padding: 0.2rem 0.55rem; text-decoration: none; background: #f8fafc; font-size: 0.82rem; }
.dispatch-secondary-board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 1rem; }
.selected-job-card, .selected-map-marker { outline: 3px solid #2563eb; outline-offset: 2px; }
.job-value-marker span { align-items: center; border-radius: 999px; box-shadow: 0 8px 18px rgba(15, 23, 42, 0.25); color: #fff; display: inline-flex; font-weight: 800; gap: 0.3rem; padding: 0.25rem 0.55rem; }
.job-value-marker small { border-left: 1px solid rgba(255,255,255,0.55); font-size: 0.68rem; padding-left: 0.3rem; }
.high-value-job-marker span { box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.2), 0 8px 18px rgba(15, 23, 42, 0.25); }
.route-timeline-list { display: grid; gap: 0.75rem; }
.route-timeline-card ol { margin: 0.5rem 0 0 1.2rem; }
.marker-popup-action-menu .button-row { gap: 0.3rem; }
@media (max-width: 1100px) { .dispatch-workspace-v3, .dispatch-secondary-board { grid-template-columns: 1fr; } .dispatch-map-panel .leaflet-dispatch-map { min-height: 420px; } }
@media (max-width: 640px) { .dispatch-panel { padding: 0.75rem; } .dispatch-map-panel .leaflet-dispatch-map { min-height: 340px; } }

/* Scheduling Dispatch Map Employee Assignment Revamp V3 */
.address-autocomplete-suggestions { background: #fff; border: 1px solid var(--border); border-radius: .65rem; box-shadow: 0 12px 30px rgba(15, 23, 42, .12); display: grid; gap: .25rem; margin-top: .25rem; max-height: 16rem; overflow: auto; padding: .35rem; position: absolute; z-index: 50; }
.address-autocomplete-field { min-width: 0; position: relative; }
.address-autocomplete-field input[data-address-autocomplete] { display: block; width: 100%; }
.address-autocomplete-field .address-autocomplete-suggestions { left: 0; margin-top: 0; right: 0; top: calc(100% + .25rem); }
.address-suggestion-option { background: #f8fafc; border: 1px solid transparent; border-radius: .5rem; cursor: pointer; padding: .45rem .55rem; text-align: left; }
.address-suggestion-option:hover, .address-suggestion-option:focus { background: #e0f2fe; border-color: #38bdf8; }
.route-group-drop-hover { outline: 2px dashed #2563eb; outline-offset: .25rem; }
.work-order-scheduling-card select[multiple], .route-group-builder select[multiple], .route-group-card select[multiple] { min-height: 7rem; }

/* Scheduling Employee Source + Layout V3 hardening */
.dispatch-workspace-v3 {
    grid-template-columns: minmax(260px, 320px) minmax(0, 1fr) minmax(320px, 420px);
    gap: 1rem;
    width: 100%;
    max-width: 100%;
    overflow: clip;
}
.dispatch-left-panel,
.dispatch-map-panel,
.dispatch-right-panel {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
}
.dispatch-left-panel { align-self: start; }
.dispatch-right-panel {
    display: grid;
    gap: .85rem;
    align-content: start;
}
.dispatch-map-panel {
    display: grid;
    gap: .85rem;
}
.dispatch-filter-form {
    grid-template-columns: 1fr;
    align-items: stretch;
}
.dispatch-filter-form label,
.route-group-builder label,
.route-group-stop-fields label,
.work-order-direct-schedule-form label {
    min-width: 0;
    max-width: 100%;
}
.dispatch-filter-form input,
.dispatch-filter-form select,
.dispatch-filter-form textarea,
.route-group-builder input,
.route-group-builder select,
.route-group-builder textarea,
.route-group-stop-fields input,
.route-group-stop-fields select,
.route-group-stop-fields textarea,
.work-order-direct-schedule-form input,
.work-order-direct-schedule-form select,
.work-order-direct-schedule-form textarea {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}
.scheduling-map-filters {
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    align-items: start;
    max-width: 100%;
    overflow: hidden;
}
.dispatch-map-panel .leaflet-dispatch-map,
.leaflet-dispatch-map {
    height: clamp(420px, 58vh, 680px);
    min-height: 420px;
    max-width: 100%;
    position: relative;
    z-index: 0;
}
.dispatch-map-panel .map-marker-list {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}
.route-group-builder {
    display: grid;
    gap: .75rem;
    margin-bottom: 1rem;
}
.route-group-builder-grid,
.route-group-stop-fields,
.route-group-meta-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: .65rem;
    min-width: 0;
}
.route-group-action-row {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
}
.route-group-action-row .inline-form { display: inline-flex; }
.selected-work-orders-list {
    display: grid;
    gap: .75rem;
    min-width: 0;
}
.selected-work-orders-list li,
.route-group-stop-card {
    display: grid;
    grid-template-columns: 1fr;
    align-items: stretch;
    gap: .7rem;
    min-width: 0;
    overflow-wrap: anywhere;
}
.route-group-stop-summary {
    display: grid;
    grid-template-columns: 1fr;
    gap: .25rem;
    min-width: 0;
}
.route-group-stop-order { color: #1d4ed8; }
.route-group-remove-form { justify-self: start; }
.route-group-card { max-width: 100%; overflow: hidden; }
.route-group-card .card-heading-row { gap: .5rem; align-items: flex-start; }
.work-order-direct-schedule-form {
    display: grid;
    gap: .75rem;
    align-items: stretch;
}
.work-order-scheduling-card .form-grid-4 {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.work-order-detail-shell .document-detail-layout {
    align-items: start;
}
.work-order-lower-workspace,
.work-order-primary-column,
.work-order-side-column {
    min-width: 0;
}
.work-order-primary-column,
.work-order-side-column {
    display: grid;
    gap: 1rem;
}
.work-order-side-column > .summary-card,
.work-order-side-column > .card,
.work-order-side-column > .portal-admin-panel {
    min-width: 0;
    overflow-wrap: anywhere;
}
.work-order-side-column .communication-actions-card .stacked-actions {
    display: grid;
    gap: .45rem;
}
.work-order-command-center,
.work-order-production-completion-card,
.work-order-invoice-card,
.timers-field-workflow-card,
.field-tech-workflow-card,
.work-order-scheduling-card {
    min-width: 0;
    overflow-wrap: anywhere;
}
.work-order-command-copy h2,
.work-order-card-heading h2 {
    margin: .15rem 0 .35rem;
}
.work-order-command-grid {
    display: grid;
    gap: .75rem;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    margin: .85rem 0;
}
.work-order-command-card {
    background: #fbfdff;
    border: 1px solid #dbe4ee;
    border-radius: 8px;
    color: inherit;
    display: grid;
    gap: .25rem;
    min-width: 0;
    padding: .85rem;
    text-decoration: none;
}
.work-order-command-card:hover,
.work-order-command-card:focus {
    border-color: #2f6fed;
    box-shadow: 0 10px 24px rgba(37, 99, 235, .12);
    outline: none;
}
.work-order-command-card[data-work-order-next-action-card] {
    border-left: 4px solid #1d4ed8;
}
.work-order-command-card[data-work-order-next-action-card^="needs_"] {
    border-left-color: #d97706;
}
.work-order-command-card[data-work-order-next-action-card="ready_to_work"],
.work-order-command-card[data-work-order-next-action-card="ready_to_invoice"] {
    border-left-color: #059669;
}
.work-order-command-card[data-work-order-next-action-card="closed"] {
    border-left-color: #94a3b8;
}
#work-order-scheduling-card,
#work-order-service-task-add,
#line-item-tasks,
#timers-field-workflow,
#field-tech-workflow,
#invoice-conversion {
    scroll-margin-top: 96px;
}
#work-order-scheduling-card:target,
#work-order-service-task-add:target,
#line-item-tasks:target,
#timers-field-workflow:target,
#field-tech-workflow:target,
#invoice-conversion:target {
    outline: 2px solid rgba(47, 111, 237, .35);
    outline-offset: 4px;
}
.work-order-command-card span,
.work-order-invoice-summary span {
    color: #526579;
    font-size: .76rem;
    font-weight: 850;
    text-transform: uppercase;
}
.work-order-command-card strong {
    color: #17233a;
    font-size: 1rem;
}
.work-order-command-card small {
    color: #526579;
}
.work-order-command-actions,
.work-order-section-actions,
.work-order-form-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    min-width: 0;
}
.work-order-office-closeout-status {
    display: grid;
    gap: .75rem;
    min-width: 0;
    overflow-wrap: anywhere;
}
.work-order-office-closeout-heading {
    align-items: start;
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    justify-content: space-between;
}
.work-order-office-closeout-heading h2 {
    margin: .15rem 0 .25rem;
}
.work-order-office-closeout-heading > strong {
    background: #f8fafc;
    border: 1px solid #e3eaf2;
    border-radius: 999px;
    color: #17233a;
    padding: .38rem .7rem;
}
.work-order-office-closeout-status.is-needed .work-order-office-closeout-heading > strong {
    background: #fff7ed;
    border-color: #fed7aa;
}
.work-order-office-closeout-status.is-review .work-order-office-closeout-heading > strong {
    background: #eff6ff;
    border-color: #bfdbfe;
}
.work-order-office-closeout-status.is-ready .work-order-office-closeout-heading > strong {
    background: #ecfdf5;
    border-color: #a7f3d0;
}
.work-order-office-closeout-pills {
    display: grid;
    gap: .5rem;
    align-items: start;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.work-order-office-closeout-pill {
    background: #fff;
    border: 1px solid #dbe4ee;
    border-top: 4px solid #94a3b8;
    border-radius: 8px;
    color: inherit;
    display: grid;
    gap: .2rem;
    min-height: 4.85rem;
    min-width: 0;
    padding: .62rem;
    text-decoration: none;
}
.work-order-office-closeout-pill:hover,
.work-order-office-closeout-pill:focus {
    border-color: #2563eb;
    box-shadow: 0 8px 20px rgba(37, 99, 235, .12);
    outline: none;
}
.work-order-office-closeout-pill span {
    color: #526579;
    font-size: .7rem;
    font-weight: 900;
    text-transform: uppercase;
}
.work-order-office-closeout-pill strong {
    color: #17233a;
    font-size: .85rem;
    line-height: 1.25;
    overflow-wrap: anywhere;
}
.work-order-office-closeout-pill[data-work-order-office-closeout-pill="crew"] strong,
.work-order-closeout-item[data-work-order-closeout-item="crew"] em {
    align-items: center;
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    border-radius: 999px;
    color: #065f46;
    display: inline-flex;
    font-size: .82rem;
    line-height: 1.15;
    max-width: 100%;
    padding: .2rem .52rem;
    width: max-content;
}
.work-order-office-closeout-pill[data-work-order-office-closeout-pill="crew"] {
    align-content: start;
}
.work-order-office-closeout-pill.is-needed {
    border-top-color: #d97706;
}
.work-order-office-closeout-pill.is-review,
.work-order-office-closeout-pill.is-pending {
    border-top-color: #2563eb;
}
.work-order-office-closeout-pill.is-ready {
    border-top-color: #059669;
}
.work-order-production-completion-card {
    display: grid;
    gap: .78rem;
    min-width: 0;
    overflow-wrap: anywhere;
}
.work-order-production-heading {
    align-items: start;
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    justify-content: space-between;
}
.work-order-production-heading h2,
.work-order-production-completion-card h3 {
    margin: .15rem 0 .25rem;
}
.work-order-production-grid,
.work-order-production-drillbacks,
.work-order-production-timeline,
.work-order-mobile-safety-grid {
    display: grid;
    gap: .55rem;
    grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
}
.work-order-production-label,
.work-order-production-drillback,
.work-order-production-timeline-event,
.work-order-mobile-safety-grid span {
    background: #fff;
    border: 1px solid #dbe4ee;
    border-radius: 8px;
    color: inherit;
    display: grid;
    gap: .22rem;
    min-width: 0;
    overflow-wrap: anywhere;
    padding: .65rem;
    text-decoration: none;
}
.work-order-production-label,
.work-order-production-timeline-event {
    border-left: 4px solid #94a3b8;
}
.work-order-production-label.is-ready,
.work-order-production-timeline-event.is-ready {
    border-left-color: #059669;
}
.work-order-production-label.is-warning,
.work-order-production-timeline-event.is-warning {
    border-left-color: #d97706;
}
.work-order-production-label.is-neutral,
.work-order-production-timeline-event.is-neutral {
    border-left-color: #2563eb;
}
.work-order-production-label.is-pending,
.work-order-production-timeline-event.is-pending {
    border-left-color: #94a3b8;
}
.work-order-production-label strong,
.work-order-production-drillback strong,
.work-order-production-timeline-event strong,
.work-order-mobile-safety-grid strong {
    color: #17233a;
    font-size: .86rem;
}
.work-order-production-label b {
    color: #0f172a;
    font-size: .94rem;
}
.work-order-production-label small,
.work-order-production-drillback span,
.work-order-production-timeline-event small,
.work-order-mobile-safety-grid small {
    color: #526579;
    line-height: 1.35;
}
.work-order-production-drillback:hover,
.work-order-production-drillback:focus {
    border-color: #2563eb;
    box-shadow: 0 8px 20px rgba(37, 99, 235, .12);
    outline: none;
}
.work-order-mobile-production-safety {
    border-color: #bfdbfe;
    display: grid;
    gap: .65rem;
}
.work-order-crew-metric {
    grid-column: span 2;
}
.work-order-crew-list {
    align-items: flex-start;
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
    line-height: 1.2;
    min-width: 0;
}
.work-order-crew-chip {
    background: #eef6ff;
    border: 1px solid #cfe0f4;
    border-radius: 999px;
    color: #17233a;
    display: inline-flex;
    font-size: .78rem;
    font-weight: 800;
    max-width: 100%;
    min-width: 0;
    overflow-wrap: anywhere;
    padding: .18rem .48rem;
}
.work-order-crew-chip.is-empty {
    background: #f8fafc;
    color: #64748b;
}
.work-order-assignment-card {
    background: #f8fbff;
    border: 1px solid #dbe4ee;
    border-radius: 12px;
    padding: .9rem;
}
.work-order-assignment-card h3 {
    margin-top: 0;
}
.work-order-assignment-form {
    display: grid;
    gap: .75rem;
}
.work-order-assignment-checkboxes {
    background: #fff;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    max-height: 18rem;
    overflow: auto;
}
.work-order-assignment-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}
.shared-workflow-next-action {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-left: 4px solid #2563eb;
    border-radius: 10px;
    color: #17233a;
    margin: .85rem 0;
    padding: .7rem .85rem;
}
.work-order-field-flow-guide {
    background: #f8fbff;
    border: 1px solid #dbe4ee;
    border-radius: 12px;
    display: grid;
    gap: .8rem;
    margin: 1rem 0;
    padding: .9rem;
}
.work-order-field-flow-heading h3 {
    margin: .15rem 0 .35rem;
}
.work-order-field-flow-heading p {
    margin: 0;
}
.work-order-field-flow-steps,
.work-order-field-flow-exceptions {
    display: grid;
    gap: .65rem;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
}
.work-order-field-flow-step,
.work-order-field-flow-exception {
    background: #ffffff;
    border: 1px solid #e3eaf2;
    border-radius: 10px;
    display: grid;
    gap: .25rem;
    min-width: 0;
    padding: .7rem;
}
.work-order-field-flow-step span,
.work-order-field-flow-exception span {
    color: #526579;
    font-size: .72rem;
    font-weight: 850;
    letter-spacing: 0;
    text-transform: uppercase;
}
.work-order-field-flow-step strong,
.work-order-field-flow-exception strong {
    color: #17233a;
    overflow-wrap: anywhere;
}
.work-order-field-flow-step small {
    color: #526579;
    line-height: 1.35;
}
.work-order-field-flow-step.is-next {
    background: #ecfdf5;
    border-color: #10b981;
    box-shadow: inset 4px 0 0 #10b981;
}
.work-order-field-flow-exception.is-needs-review {
    background: #fffbeb;
    border-color: #f6d88d;
    box-shadow: inset 4px 0 0 #f59e0b;
}
.work-order-field-flow-exception.is-ready {
    background: #ecfdf5;
    border-color: #a7f3d0;
    box-shadow: inset 4px 0 0 #10b981;
}
.work-order-field-flow-exception.is-pending {
    background: #eff6ff;
    border-color: #bfdbfe;
    box-shadow: inset 4px 0 0 #2563eb;
}
.work-order-field-flow-exception.is-available {
    background: #ffffff;
    border-color: #dbe4ee;
}
.mobile-work-order-field-flow-guide {
    margin: 0;
}
.timers-field-workflow-card .whole-work-order-timer-controls {
    align-items: stretch;
    background: #f8fbff;
    border: 1px solid #dbe4ee;
    border-radius: 12px;
    display: grid;
    gap: .65rem;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    padding: .75rem;
}
.timers-field-workflow-card .whole-work-order-timer-controls .inline-form {
    align-items: stretch;
    background: #ffffff;
    border: 1px solid #e3eaf2;
    border-radius: 10px;
    display: grid;
    gap: .45rem;
    min-width: 0;
    padding: .55rem;
}
.timers-field-workflow-card .whole-work-order-timer-controls .inline-form:has(input[type="text"]),
.timers-field-workflow-card .whole-work-order-timer-controls .inline-form:has(select) {
    grid-template-columns: minmax(0, 1fr) auto;
}
.timers-field-workflow-card .whole-work-order-timer-controls input,
.timers-field-workflow-card .whole-work-order-timer-controls select {
    min-width: 0;
    width: 100%;
}
.timers-field-workflow-card .whole-work-order-timer-controls button {
    justify-content: center;
    min-height: 38px;
}
.line-item-flow-card .compact-timer-controls {
    background: #f8fbff;
    border: 1px solid #dbe4ee;
    border-radius: 10px;
    padding: .55rem;
}
.work-order-schedule-context {
    background: #f8fafc;
    border: 1px solid #e3eaf2;
    border-radius: 8px;
    display: grid;
    gap: .35rem;
    margin: .75rem 0;
    padding: .75rem;
}
.work-order-schedule-context p {
    margin: 0;
}
.work-order-invoice-summary {
    display: grid;
    gap: .55rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: .85rem 0;
}
.work-order-invoice-summary span {
    background: #f8fafc;
    border: 1px solid #e3eaf2;
    border-radius: 8px;
    display: grid;
    gap: .2rem;
    padding: .65rem;
}
.work-order-invoice-summary strong {
    color: #17233a;
    font-size: .95rem;
    text-transform: none;
}
.work-order-closeout-checklist {
    display: grid;
    gap: .85rem;
    min-width: 0;
    overflow-wrap: anywhere;
}
.work-order-closeout-heading {
    align-items: start;
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 320px);
}
.work-order-closeout-heading h2 {
    margin: .15rem 0 .35rem;
}
.work-order-closeout-next {
    background: #f8fbff;
    border: 1px solid #dbe4ee;
    border-left: 4px solid #2563eb;
    border-radius: 8px;
    color: inherit;
    display: grid;
    gap: .25rem;
    padding: .75rem;
    text-decoration: none;
}
.work-order-closeout-next:hover,
.work-order-closeout-next:focus,
.work-order-closeout-item:hover,
.work-order-closeout-item:focus {
    border-color: #2563eb;
    box-shadow: 0 10px 24px rgba(37, 99, 235, .12);
    outline: none;
}
.work-order-closeout-next span,
.work-order-closeout-item span,
.work-order-closeout-status span {
    color: #526579;
    font-size: .72rem;
    font-weight: 850;
    text-transform: uppercase;
}
.work-order-closeout-next strong,
.work-order-closeout-status strong,
.work-order-closeout-item strong {
    color: #17233a;
}
.work-order-closeout-next small,
.work-order-closeout-status span,
.work-order-closeout-item small {
    color: #526579;
}
.work-order-closeout-status {
    align-items: center;
    background: #f8fafc;
    border: 1px solid #e3eaf2;
    border-radius: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: .35rem .75rem;
    justify-content: space-between;
    padding: .65rem .75rem;
}
.work-order-closeout-checklist.is-warning .work-order-closeout-status {
    background: #fffbeb;
    border-color: #f6d88d;
}
.work-order-closeout-checklist.is-ready .work-order-closeout-status {
    background: #ecfdf5;
    border-color: #a7f3d0;
}
.work-order-closeout-grid {
    align-items: start;
    display: grid;
    gap: .65rem;
    grid-template-columns: repeat(auto-fit, minmax(175px, 1fr));
}
.work-order-closeout-item {
    background: #fff;
    border: 1px solid #dbe4ee;
    border-left: 4px solid #94a3b8;
    border-radius: 8px;
    color: inherit;
    display: grid;
    gap: .22rem;
    min-width: 0;
    padding: .75rem;
    text-decoration: none;
}
.work-order-closeout-item.is-done,
.work-order-closeout-item.is-ready {
    border-left-color: #059669;
}
.work-order-closeout-item.is-warning,
.work-order-closeout-item.is-needs_review {
    border-left-color: #d97706;
}
.work-order-closeout-item.is-pending {
    border-left-color: #2563eb;
}
.work-order-closeout-item.is-muted {
    border-left-color: #94a3b8;
    opacity: .82;
}
.work-order-closeout-item em {
    color: #334155;
    font-style: normal;
    font-weight: 800;
}
.work-order-time-override-form {
    margin-top: .85rem;
}

/* Work Order detail density polish: keep office cards and totals compact on large CRM workspaces. */
.work-order-detail-shell[data-operational-ui="v1"] .work-order-office-closeout-heading > div,
.work-order-detail-shell[data-operational-ui="v1"] .work-order-closeout-heading > div {
    min-width: 0;
}
.work-order-detail-shell[data-operational-ui="v1"] .work-order-office-closeout-heading p,
.work-order-detail-shell[data-operational-ui="v1"] .work-order-closeout-heading p,
.work-order-detail-shell[data-operational-ui="v1"] .work-order-office-closeout-status > .muted {
    max-width: 84ch;
}
.work-order-detail-shell[data-operational-ui="v1"] .work-order-office-closeout-pill,
.work-order-detail-shell[data-operational-ui="v1"] .work-order-closeout-item {
    align-content: start;
    height: auto;
}
.work-order-detail-shell[data-operational-ui="v1"] .work-order-office-closeout-pill strong,
.work-order-detail-shell[data-operational-ui="v1"] .work-order-closeout-item em,
.work-order-detail-shell[data-operational-ui="v1"] .work-order-closeout-item small {
    overflow-wrap: anywhere;
}
.work-order-detail-shell[data-operational-ui="v1"] .work-order-closeout-item small {
    line-height: 1.3;
}
.work-order-detail-shell[data-operational-ui="v1"] .metric-strip {
    background: #f8fbff;
    border: 1px solid #dbe4ee;
    border-radius: 12px;
    gap: .65rem;
}
.work-order-detail-shell[data-operational-ui="v1"] .metric-strip article {
    background: #fff;
    border: 1px solid #dbe4ee;
    border-left: 3px solid #43c6b7;
    border-radius: 10px;
    min-width: 0;
    padding: .65rem .75rem;
}
.work-order-detail-shell[data-operational-ui="v1"] .metric-strip strong {
    font-size: 1.05rem;
    line-height: 1.15;
    overflow-wrap: anywhere;
}
.work-order-detail-shell[data-operational-ui="v1"] .work-order-office-closeout-pill[data-work-order-office-closeout-pill="crew"] strong,
.work-order-detail-shell[data-operational-ui="v1"] .work-order-closeout-item[data-work-order-closeout-item="crew"] em {
    white-space: normal;
}

/* Work Order crew controls polish: scheduling and timer panels should read as crew assignment, not generic employee lists. */
.work-order-detail-shell[data-operational-ui="v1"] [data-work-order-crew-controls-polish="true"] .employee-checkbox-group legend,
.work-order-detail-shell[data-operational-ui="v1"] .work-order-assignment-card .employee-checkbox-group legend {
    color: #0f172a;
    font-size: .82rem;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.work-order-detail-shell[data-operational-ui="v1"] [data-work-order-crew-controls-polish="true"] .employee-checkbox-group small,
.work-order-detail-shell[data-operational-ui="v1"] .work-order-assignment-card .employee-checkbox-group small {
    display: block;
    line-height: 1.35;
    margin-top: .45rem;
}

/* Work Order lower workspace density guard: keep timer, crew, and side cards compact without changing workflow behavior. */
.work-order-detail-shell[data-operational-ui="v1"] .work-order-lower-workspace > *,
.work-order-detail-shell[data-operational-ui="v1"] .work-order-primary-column > *,
.work-order-detail-shell[data-operational-ui="v1"] .work-order-side-column > * {
    min-width: 0;
}
.work-order-detail-shell[data-operational-ui="v1"] .work-order-timer-metrics .metric-card,
.work-order-detail-shell[data-operational-ui="v1"] .work-order-invoice-summary span {
    align-content: start;
    min-height: 0;
    overflow-wrap: anywhere;
}
.work-order-detail-shell[data-operational-ui="v1"] .work-order-timer-metrics .metric-card strong,
.work-order-detail-shell[data-operational-ui="v1"] .work-order-timer-metrics .metric-card small {
    max-width: 100%;
    overflow-wrap: anywhere;
}
.work-order-detail-shell[data-operational-ui="v1"] .work-order-crew-metric .work-order-crew-list {
    max-height: 7rem;
    overflow: auto;
    padding-right: .15rem;
}
.work-order-detail-shell[data-operational-ui="v1"] .work-order-assignment-checkboxes {
    display: grid;
    gap: .4rem;
    padding: .65rem;
}
.work-order-detail-shell[data-operational-ui="v1"] .work-order-assignment-checkboxes label {
    align-items: center;
    background: #f8fafc;
    border: 1px solid #e3eaf2;
    border-radius: 8px;
    display: grid;
    gap: .45rem;
    grid-template-columns: auto minmax(0, 1fr);
    min-width: 0;
    padding: .45rem .55rem;
}
.work-order-detail-shell[data-operational-ui="v1"] .work-order-assignment-checkboxes input[type="checkbox"] {
    margin: 0;
}
.work-order-detail-shell[data-operational-ui="v1"] .work-order-assignment-actions .btn,
.work-order-detail-shell[data-operational-ui="v1"] .work-order-section-actions .btn,
.work-order-detail-shell[data-operational-ui="v1"] .whole-work-order-timer-controls button {
    white-space: normal;
}
.work-order-detail-shell[data-operational-ui="v1"] .work-order-time-override-form .checkbox-label {
    align-self: center;
}
.work-order-detail-shell[data-operational-ui="v1"] .work-order-side-column .portal-admin-panel,
.work-order-detail-shell[data-operational-ui="v1"] .work-order-side-column .card,
.work-order-detail-shell[data-operational-ui="v1"] .work-order-side-column .summary-card {
    overflow: hidden;
}
.mobile-work-order-page {
    display: grid;
    gap: .7rem;
    margin: 0 auto;
    width: 95%;
    max-width: 95%;
    padding-bottom: 5.75rem;
}
.mobile-work-order-page,
.mobile-work-order-page * {
    box-sizing: border-box;
}
.mobile-work-order-hero,
.mobile-work-order-card {
    background: #fff;
    border: 1px solid #dbe4ee;
    border-radius: 8px;
    box-shadow: 0 12px 28px rgba(15, 23, 42, .06);
    min-width: 0;
    overflow-wrap: anywhere;
    padding: .85rem;
}
.mobile-work-order-hero {
    background: linear-gradient(135deg, #f8fbff 0%, #ffffff 58%, #ecfdf5 100%);
    display: grid;
    gap: .55rem;
}
.mobile-work-order-topnav {
    align-items: center;
    display: flex;
    gap: .5rem;
    justify-content: space-between;
    min-width: 0;
}
.mobile-work-order-topnav > * {
    max-width: 48%;
    min-width: 0;
    overflow-wrap: anywhere;
}
.mobile-work-order-mode-selector {
    background: #eef5ff;
    border: 1px solid #cfe0f5;
    border-radius: 8px;
    display: grid;
    gap: .25rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: .25rem;
}
.mobile-work-order-mode-selector a {
    border-radius: 6px;
    color: #1e3a8a;
    font-size: .82rem;
    font-weight: 900;
    min-height: 36px;
    padding: .5rem .65rem;
    text-align: center;
    text-decoration: none;
}
.mobile-work-order-mode-selector a.is-active {
    background: #2563eb;
    color: #fff;
    box-shadow: 0 6px 16px rgba(37, 99, 235, .22);
}
.mobile-work-order-topnav a,
.mobile-work-order-topnav button,
.mobile-work-order-text-link {
    color: #1d4ed8;
    font-size: .82rem;
    font-weight: 900;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.mobile-work-order-topnav button {
    background: transparent;
    border: 0;
    cursor: pointer;
    font: inherit;
    padding: .18rem .25rem;
    text-align: right;
}
.mobile-arrange-toggle {
    border-radius: 999px;
    min-height: 34px;
}
.mobile-arrange-toggle[aria-pressed="true"] {
    color: #0f766e;
}
.mobile-work-order-page[data-arrange-mode="off"] .layout-card .layout-controls {
    display: none;
}
.mobile-work-order-page[data-arrange-mode="on"] .layout-card .layout-controls {
    display: flex;
}
.mobile-work-order-page[data-arrange-mode="on"] .card-layout-toggle-menu > summary {
    display: none;
}
.mobile-work-order-page[data-arrange-mode="on"] .toolbar-menu-panel {
    background: transparent;
    border: 0;
    box-shadow: none;
    display: flex;
    gap: .4rem;
    min-width: 0;
    padding: 0;
    position: static;
}
.mobile-work-order-page[data-arrange-mode="on"] .toolbar-menu-panel button[name="layout_action"]:not([value="move_up"]):not([value="move_down"]):not([value="full_width"]):not([value="minimize"]):not([value="expand"]):not([value="hide"]):not([value="restore"]):not([value="reset"]) {
    display: none;
}
.mobile-work-order-page[data-arrange-mode="on"] .toolbar-menu-panel .btn-toolbar {
    justify-content: center;
    min-width: 2.3rem;
    width: auto;
}
.mobile-work-order-page[data-arrange-mode="on"] .toolbar-menu-panel .layout-action-text {
    display: none;
}
.mobile-work-order-page[data-arrange-mode="on"] .mobile-work-order-advanced-modules,
.mobile-work-order-page[data-arrange-mode="on"] .mobile-document-advanced-grid {
    box-shadow: inset 0 0 0 2px rgba(37, 99, 235, .14);
}
.mobile-work-order-page[data-arrange-mode="on"] .layout-card {
    border-color: #bfdbfe;
}
.mobile-work-order-hero h1 {
    color: #17233a;
    font-size: 1.35rem;
    letter-spacing: 0;
    line-height: 1.12;
    margin: 0;
}
.mobile-work-order-hero p,
.mobile-work-order-section-heading p,
.mobile-work-order-customer p,
.mobile-work-order-line-card p,
.mobile-work-order-line-timer p {
    color: #526579;
    font-size: .84rem;
    line-height: 1.4;
    margin: 0;
}
.mobile-work-order-status-row {
    display: grid;
    gap: .35rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.mobile-work-order-status-row > span,
.mobile-work-order-metrics span,
.mobile-work-order-line-stats span,
.mobile-work-order-line-timer-metrics span {
    background: #f8fafc;
    border: 1px solid #e3eaf2;
    border-radius: 8px;
    color: #334155;
    font-size: .74rem;
    font-weight: 850;
    min-width: 0;
    padding: .45rem .5rem;
    text-align: center;
}
.mobile-work-order-status-row > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mobile-work-order-standard-meta {
    display: grid;
    gap: .45rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.mobile-work-order-standard-meta span,
.mobile-work-order-field-list dl > div,
.mobile-work-order-note-box {
    background: #f8fafc;
    border: 1px solid #e3eaf2;
    border-radius: 8px;
    min-width: 0;
    padding: .55rem .65rem;
}
.mobile-work-order-standard-meta strong,
.mobile-work-order-field-list dt,
.mobile-work-order-note-box strong {
    color: #334155;
    display: block;
    font-size: .7rem;
    font-weight: 900;
    text-transform: uppercase;
}
.mobile-work-order-standard-meta a,
.mobile-work-order-field-list a {
    color: #1d4ed8;
    font-weight: 900;
}
.mobile-work-order-field-list dl {
    display: grid;
    gap: .45rem;
    margin: 0;
}
.mobile-work-order-field-list dd {
    color: #17233a;
    font-size: .9rem;
    font-weight: 800;
    line-height: 1.35;
    margin: .18rem 0 0;
    overflow-wrap: anywhere;
}
.mobile-work-order-warning {
    border-left: 4px solid #d97706;
}
.mobile-work-order-warning.is-empty {
    border-left-color: #94a3b8;
}
.mobile-work-order-customer {
    display: grid;
    gap: .7rem;
}
.mobile-work-order-customer h2,
.mobile-work-order-section-heading h2,
.mobile-work-order-line-card h3 {
    color: #17233a;
    font-size: 1.05rem;
    letter-spacing: 0;
    margin: .1rem 0;
}
.mobile-work-order-customer h2 a {
    color: inherit;
}
.mobile-work-order-actions {
    display: grid;
    gap: .4rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    overflow: visible;
    position: relative;
}
.mobile-work-order-action {
    background: #f8fbff;
    border: 1px solid #dbe4ee;
    border-radius: 8px;
    color: #17233a;
    display: grid;
    gap: .12rem;
    min-height: 3.35rem;
    padding: .45rem .35rem;
    text-align: center;
    text-decoration: none;
}
.mobile-work-order-action:hover,
.mobile-work-order-action:focus-visible,
.mobile-work-order-line-card:hover,
.mobile-work-order-line-card:focus-within {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
    outline: none;
}
.mobile-work-order-action strong {
    font-size: .82rem;
}
.mobile-work-order-action span {
    color: #64748b;
    font-size: .66rem;
    font-weight: 850;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mobile-work-order-action.is-disabled {
    background: #f1f5f9;
    color: #94a3b8;
}
.mobile-work-order-map-menu {
    position: relative;
}
.mobile-work-order-map-menu > summary {
    cursor: pointer;
    list-style: none;
}
.mobile-work-order-map-menu > summary::-webkit-details-marker {
    display: none;
}
.mobile-work-order-map-menu-panel {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    box-shadow: 0 16px 42px rgba(15, 23, 42, .16);
    display: grid;
    gap: .25rem;
    min-width: min(13rem, calc(100vw - 2rem));
    padding: .35rem;
    position: absolute;
    right: 0;
    top: calc(100% + .45rem);
    z-index: 45;
}
.mobile-work-order-map-confirm,
.mobile-work-order-map-access {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    display: grid;
    gap: .18rem;
    margin: 0;
    padding: .5rem .6rem;
}
.mobile-work-order-map-access {
    grid-column: 1 / -1;
    margin-top: .45rem;
}
.mobile-work-order-map-confirm span,
.mobile-work-order-map-access {
    color: #475569;
    font-size: .72rem;
    font-weight: 800;
}
.mobile-work-order-map-warning {
    background: #fff7ed;
    border: 1px solid #fdba74;
    border-radius: 6px;
    color: #9a3412;
    font-size: .7rem;
    font-weight: 900;
    margin: 0;
    padding: .45rem .55rem;
}
.mobile-work-order-map-copy {
    background: #eef5ff;
    border: 1px solid #bfdbfe;
    border-radius: 6px;
    color: #1d4ed8;
    cursor: pointer;
    font-size: .75rem;
    font-weight: 900;
    min-height: 2.1rem;
}
.mobile-work-order-map-menu-panel a {
    border-radius: 6px;
    color: #17233a;
    display: grid;
    gap: .08rem;
    padding: .55rem .65rem;
    text-decoration: none;
}
.mobile-work-order-map-menu-panel a:hover,
.mobile-work-order-map-menu-panel a:focus-visible {
    background: #eef5ff;
    outline: none;
}
.mobile-work-order-map-menu-panel strong {
    font-size: .84rem;
}
.mobile-work-order-map-menu-panel span {
    color: #64748b;
    font-size: .68rem;
    font-weight: 850;
}
.mobile-work-order-map-provider-list {
    display: grid;
    gap: .25rem;
}
.mobile-work-order-map-return {
    background: #f8fafc;
    border: 1px solid #dbe4ee;
    text-align: center;
}
.mobile-work-order-section-heading {
    display: grid;
    gap: .18rem;
    margin-bottom: .65rem;
}
.mobile-work-order-metrics {
    display: grid;
    gap: .35rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: .65rem 0;
}
.mobile-work-order-line-stats,
.mobile-work-order-line-timer-metrics {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin: .65rem 0;
}
.mobile-work-order-line-stats span,
.mobile-work-order-line-timer-metrics span {
    flex: 1 1 0;
}
.mobile-work-order-metrics strong,
.mobile-work-order-line-stats strong,
.mobile-work-order-line-timer-metrics strong {
    color: #17233a;
    display: block;
    font-size: .82rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mobile-work-order-timer-buttons,
.mobile-work-order-line-timer-buttons,
.mobile-work-order-inline-actions {
    display: grid;
    gap: .45rem;
}
.mobile-work-order-timer-buttons {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.mobile-work-order-line-timer-buttons {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.mobile-work-order-timer-buttons form,
.mobile-work-order-line-timer-buttons form,
.mobile-work-order-inline-actions form {
    display: grid;
    gap: .3rem;
    min-width: 0;
}
.mobile-work-order-timer-buttons button,
.mobile-work-order-timer-buttons select,
.mobile-work-order-timer-buttons input,
.mobile-work-order-line-timer-buttons button,
.mobile-work-order-line-timer-buttons select,
.mobile-work-order-line-timer-buttons input,
.mobile-work-order-inline-actions .btn {
    min-height: 38px;
    width: 100%;
}
.mobile-work-order-line-list {
    display: grid;
    gap: .55rem;
}
.mobile-work-order-line-card {
    background: #fbfdff;
    border: 1px solid #dbe4ee;
    border-left: 4px solid #0f766e;
    border-radius: 8px;
    display: grid;
    gap: .55rem;
    padding: .7rem;
}
.mobile-work-order-standard-line {
    background: #fbfdff;
    border: 1px solid #dbe4ee;
    border-left: 4px solid #0f766e;
    border-radius: 8px;
    display: grid;
    gap: .35rem;
    padding: .72rem;
}
.mobile-work-order-standard-line strong {
    color: #17233a;
    font-size: .95rem;
    overflow-wrap: anywhere;
}
.mobile-work-order-note-box {
    display: grid;
    gap: .25rem;
    margin-top: .55rem;
}
.mobile-work-order-note-box p {
    color: #526579;
    font-size: .84rem;
    line-height: 1.4;
    margin: 0;
}
.mobile-work-order-crew-boundary {
    border-color: #bfdbfe;
    display: grid;
    gap: .65rem;
}
.mobile-work-order-crew-boundary-grid {
    display: grid;
    gap: .55rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.mobile-work-order-crew-boundary-grid article {
    background: #f8fafc;
    border: 1px solid #dbe4ee;
    border-radius: 8px;
    display: grid;
    gap: .24rem;
    min-width: 0;
    padding: .65rem;
}
.mobile-work-order-crew-boundary-grid span {
    color: #526579;
    font-size: .7rem;
    font-weight: 900;
    text-transform: uppercase;
}
.mobile-work-order-crew-boundary-grid strong {
    color: #17233a;
    font-size: .92rem;
    line-height: 1.3;
}
.mobile-work-order-crew-boundary-grid small {
    color: #526579;
    font-weight: 750;
    line-height: 1.35;
}
.mobile-work-order-advanced-grid {
    gap: .65rem;
}
.mobile-work-order-advanced-grid .layout-card {
    border-radius: 8px;
    min-width: 0;
    overflow-wrap: anywhere;
}
.mobile-work-order-advanced-grid .card-heading-row {
    align-items: start;
    gap: .45rem;
}
.mobile-work-order-advanced-grid .card-heading-row h2 {
    font-size: 1rem;
    line-height: 1.18;
}
.mobile-work-order-advanced-grid .card-toolbar {
    justify-content: flex-start;
    max-width: 100%;
}
.mobile-work-order-command-center,
.mobile-work-order-advanced-checklist,
.mobile-work-order-advanced-modules {
    min-width: 0;
    overflow-wrap: anywhere;
}
.mobile-work-order-command-copy h2,
.mobile-work-order-checklist-heading h2,
.mobile-work-order-advanced-modules .mobile-work-order-section-heading h2 {
    color: #17233a;
    font-size: 1.15rem;
    letter-spacing: 0;
    line-height: 1.16;
    margin: .1rem 0;
}
.mobile-work-order-command-copy p,
.mobile-work-order-checklist-heading p {
    color: #526579;
    font-size: .86rem;
    line-height: 1.42;
    margin: 0;
}
.mobile-work-order-command-grid,
.mobile-work-order-checklist-grid {
    display: grid;
    gap: .55rem;
    margin: .7rem 0;
}
.mobile-work-order-command-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.mobile-work-order-command-card,
.mobile-work-order-checklist-next,
.mobile-work-order-checklist-item,
.mobile-work-order-advanced-task {
    background: #fbfdff;
    border: 1px solid #dbe4ee;
    border-left: 4px solid #94a3b8;
    border-radius: 8px;
    color: inherit;
    display: grid;
    gap: .24rem;
    min-width: 0;
    padding: .72rem;
    text-decoration: none;
}
.mobile-work-order-command-card:hover,
.mobile-work-order-command-card:focus,
.mobile-work-order-checklist-next:hover,
.mobile-work-order-checklist-next:focus,
.mobile-work-order-checklist-item:hover,
.mobile-work-order-checklist-item:focus {
    border-color: #2563eb;
    box-shadow: 0 8px 18px rgba(37, 99, 235, .12);
    outline: none;
}
.mobile-work-order-command-card[data-work-order-next-action-card] {
    border-left-color: #2563eb;
}
.mobile-work-order-command-card[data-work-order-next-action-card^="needs_"],
.mobile-work-order-checklist-item.is-warning,
.mobile-work-order-checklist-item.is-needs_review {
    border-left-color: #d97706;
}
.mobile-work-order-command-card[data-work-order-next-action-card="ready_to_work"],
.mobile-work-order-command-card[data-work-order-next-action-card="ready_to_invoice"],
.mobile-work-order-checklist-item.is-done,
.mobile-work-order-checklist-item.is-ready {
    border-left-color: #059669;
}
.mobile-work-order-command-card[data-work-order-next-action-card="closed"],
.mobile-work-order-checklist-item.is-muted {
    border-left-color: #94a3b8;
    opacity: .86;
}
.mobile-work-order-command-card span,
.mobile-work-order-checklist-next span,
.mobile-work-order-checklist-item span,
.mobile-work-order-checklist-status span {
    color: #526579;
    font-size: .7rem;
    font-weight: 900;
    text-transform: uppercase;
}
.mobile-work-order-command-card strong,
.mobile-work-order-checklist-next strong,
.mobile-work-order-checklist-status strong,
.mobile-work-order-checklist-item strong,
.mobile-work-order-advanced-task strong {
    color: #17233a;
    font-size: .95rem;
    line-height: 1.18;
}
.mobile-work-order-command-card small,
.mobile-work-order-checklist-next small,
.mobile-work-order-checklist-item small,
.mobile-work-order-advanced-task small {
    color: #526579;
    line-height: 1.35;
}
.mobile-work-order-command-actions {
    display: grid;
    gap: .45rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: .45rem;
}
.mobile-work-order-command-actions .btn {
    min-height: 38px;
    width: 100%;
}
.mobile-work-order-command-summary {
    line-height: 1.45;
    margin: .65rem 0 0;
}
.mobile-work-order-checklist-heading {
    align-items: start;
    display: grid;
    gap: .75rem;
    grid-template-columns: minmax(0, 1fr) minmax(180px, 240px);
}
.mobile-work-order-checklist-status {
    align-items: center;
    background: #f8fafc;
    border: 1px solid #e3eaf2;
    border-radius: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: .35rem .6rem;
    justify-content: space-between;
    padding: .58rem .65rem;
}
.mobile-work-order-advanced-checklist.is-warning .mobile-work-order-checklist-status {
    background: #fffbeb;
    border-color: #f6d88d;
}
.mobile-work-order-advanced-checklist.is-ready .mobile-work-order-checklist-status {
    background: #ecfdf5;
    border-color: #a7f3d0;
}
.mobile-work-order-checklist-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.mobile-work-order-checklist-item em {
    color: #334155;
    font-style: normal;
    font-weight: 850;
}
.mobile-work-order-advanced-task {
    border-left-color: #0f766e;
}
.mobile-work-order-advanced-task p {
    color: #526579;
    font-size: .84rem;
    line-height: 1.4;
    margin: 0;
}
.mobile-work-order-advanced-modules {
    background: #fff;
    border: 1px solid #dbe4ee;
    border-radius: 8px;
    display: grid;
    gap: .55rem;
    padding: .75rem;
}
.mobile-work-order-advanced-modules .layout-card .card-toolbar {
    gap: .3rem;
}
#mobile-advanced-schedule,
#mobile-advanced-estimate-link,
#mobile-advanced-invoice-link,
#mobile-advanced-service-tasks,
#mobile-advanced-time-logs,
#mobile-advanced-internal-notes,
#mobile-advanced-status-flags,
#mobile-advanced-timeline,
#mobile-advanced-employees,
#mobile-advanced-photos-files,
#mobile-advanced-items-to-bring,
#mobile-advanced-customer-links,
#mobile-work-order-actions {
    scroll-margin-top: 72px;
}
#mobile-advanced-schedule:target,
#mobile-advanced-estimate-link:target,
#mobile-advanced-invoice-link:target,
#mobile-advanced-service-tasks:target,
#mobile-advanced-time-logs:target,
#mobile-advanced-internal-notes:target,
#mobile-advanced-status-flags:target,
#mobile-advanced-timeline:target,
#mobile-advanced-employees:target,
#mobile-advanced-photos-files:target,
#mobile-advanced-items-to-bring:target,
#mobile-advanced-customer-links:target {
    outline: 2px solid rgba(37, 99, 235, .32);
    outline-offset: 3px;
}
.mobile-work-order-advanced-panel {
    display: grid;
    gap: .55rem;
}
.mobile-work-order-advanced-panel.is-internal-only {
    border-left: 4px solid #d97706;
    padding-left: .65rem;
}
.mobile-work-order-bring-list {
    display: grid;
    gap: .35rem;
    margin: 0;
    padding-left: 1rem;
}
.mobile-work-order-sticky-actions {
    align-items: stretch;
    background: rgba(255, 255, 255, .96);
    border: 1px solid #dbe4ee;
    border-radius: 8px 8px 0 0;
    bottom: 0;
    box-shadow: 0 -12px 26px rgba(15, 23, 42, .12);
    display: grid;
    gap: .35rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    left: 50%;
    max-width: 760px;
    padding: .45rem;
    padding-bottom: max(.45rem, env(safe-area-inset-bottom));
    position: fixed;
    transform: translateX(-50%);
    width: min(100%, 760px);
    z-index: 20;
}
.mobile-work-order-page[data-fast-photo-camera-active="true"] .mobile-work-order-sticky-actions,
.mobile-work-order-closeout-content[data-fast-photo-camera-active="true"] ~ .mobile-work-order-sticky-actions,
body.fast-photo-camera-active .mobile-work-order-sticky-actions {
    display: none ;
}
.mobile-work-order-sticky-actions form {
    display: grid;
    gap: .2rem;
    min-width: 0;
}
.mobile-work-order-sticky-actions button,
.mobile-work-order-sticky-actions select {
    min-height: 38px;
    width: 100%;
}
.mobile-work-order-sticky-actions select {
    font-size: .72rem;
}
.mobile-closeout-progress-meter {
    display: grid;
    gap: .35rem;
    margin: .65rem 0;
}
.mobile-closeout-progress-track {
    background: #e5e7eb;
    border-radius: 999px;
    height: .55rem;
    overflow: hidden;
    width: 100%;
}
.mobile-closeout-progress-track span {
    background: #16a34a;
    border-radius: inherit;
    display: block;
    height: 100%;
}
.mobile-work-order-line-top {
    align-items: start;
    display: grid;
    gap: .5rem;
    grid-template-columns: minmax(0, 1fr) auto;
}
.mobile-work-order-line-top > strong {
    color: #17233a;
    font-size: .95rem;
}
.mobile-work-order-line-top code {
    background: #ecfdf5;
    border: 1px solid #bbf7d0;
    border-radius: 6px;
    color: #047857;
    font-size: .72rem;
    padding: .08rem .25rem;
}
.mobile-work-order-line-top a,
.mobile-work-order-line-top span {
    color: #475569;
    font-size: .76rem;
    font-weight: 850;
}
.mobile-work-order-line-stats,
.mobile-work-order-line-timer-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0;
}
.mobile-work-order-line-timer {
    background: #fff;
    border: 1px solid #e3eaf2;
    border-radius: 8px;
    display: grid;
    gap: .45rem;
    padding: .6rem;
}
.mobile-work-order-inline-actions {
    align-items: stretch;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.mobile-work-order-compact-form {
    background: #f8fafc;
    border: 1px solid #e3eaf2;
    border-radius: 8px;
    margin-top: .55rem;
    padding: .65rem;
}
.mobile-work-order-compact-form button,
.mobile-work-order-compact-form input,
.mobile-work-order-compact-form select {
    width: 100%;
}
.mobile-work-order-empty {
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    border-radius: 8px;
    color: #526579;
    font-size: .84rem;
    font-weight: 850;
    padding: .75rem;
}
.mobile-document-page {
    max-width: 780px;
}
.mobile-document-hero {
    background: linear-gradient(135deg, #f8fbff 0%, #ffffff 62%, #eff6ff 100%);
}
.mobile-document-customer h2,
.mobile-document-lines h2,
.mobile-document-actions h2 {
    color: #17233a;
    font-size: 1.05rem;
    letter-spacing: 0;
    margin: .1rem 0;
}
.mobile-document-customer .mobile-work-order-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.mobile-document-note {
    border-left: 4px solid #2563eb;
}
.mobile-document-note.is-empty {
    border-left-color: #94a3b8;
}
.mobile-document-line {
    margin-top: .55rem;
}
.mobile-document-line:first-of-type {
    margin-top: .2rem;
}
.mobile-document-actions .module-action-bar,
.mobile-document-actions .action-bar,
.mobile-document-actions .mobile-work-order-inline-actions {
    align-items: stretch;
    display: grid;
    gap: .45rem;
    grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
    min-width: 0;
}
.mobile-document-advanced-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
.mobile-work-order-advanced-grid .layout-card,
.mobile-document-advanced-grid .layout-card {
    align-self: start;
}
.mobile-work-order-advanced-grid .layout-card-body,
.mobile-document-advanced-grid .layout-card-body {
    display: grid;
    gap: .55rem;
    min-width: 0;
}
.mobile-document-advanced-panel,
.mobile-document-advanced-panel .summary-card,
.mobile-document-advanced-panel .card,
.mobile-document-advanced-panel .document-preview-card,
.mobile-document-advanced-panel .mobile-work-order-card {
    max-width: 100%;
    min-width: 0;
    overflow-wrap: anywhere;
}
.mobile-document-advanced-panel .document-preview-card {
    box-shadow: none;
}
.mobile-document-advanced-panel .document-detail-layout,
.mobile-document-advanced-panel .document-address-grid,
.mobile-document-advanced-panel .metric-strip,
.mobile-document-advanced-panel .work-order-invoice-summary,
.mobile-document-advanced-panel .document-header {
    grid-template-columns: 1fr;
}
.mobile-document-advanced-panel .document-header {
    align-items: stretch;
    display: grid;
    gap: .75rem;
}
.mobile-document-advanced-panel .table-scroll {
    max-width: 100%;
    overflow-x: auto;
}
.mobile-document-advanced-panel.is-internal-only {
    border-left: 4px solid #0f766e;
    padding-left: .75rem;
}
/* Mobile operational advanced density polish */
.mobile-work-order-advanced-panel > p,
.mobile-document-advanced-panel > p {
    line-height: 1.42;
    margin: 0;
}
.mobile-work-order-advanced-panel .btn,
.mobile-document-advanced-panel .btn,
.mobile-document-advanced-panel button,
.mobile-document-advanced-panel select,
.mobile-document-advanced-panel input {
    max-width: 100%;
    min-height: 38px;
}
.mobile-document-advanced-panel .mobile-work-order-inline-actions,
.mobile-work-order-advanced-panel .mobile-work-order-inline-actions {
    align-items: stretch;
    display: grid;
    gap: .45rem;
    grid-template-columns: repeat(auto-fit, minmax(126px, 1fr));
    min-width: 0;
}
.work-order-timer-visibility {
    background: #f8fafc;
    border: 1px solid #dbe4ee;
    border-radius: 8px;
    display: grid;
    gap: .85rem;
    margin: 1rem 0;
    min-width: 0;
    padding: 1rem;
}
.work-order-timer-visibility-heading {
    align-items: start;
    display: grid;
    gap: .75rem;
    grid-template-columns: minmax(0, 1fr) auto;
    min-width: 0;
}
.work-order-timer-visibility-heading h3 {
    margin: .15rem 0 .25rem;
}
.work-order-timer-visibility-heading p {
    color: #526579;
    margin: 0;
}
.work-order-timer-visibility-groups {
    display: grid;
    gap: .65rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.work-order-timer-visibility-groups article {
    background: #fff;
    border: 1px solid #dbe4ee;
    border-radius: 8px;
    min-width: 0;
    padding: .75rem;
}
.work-order-timer-visibility-groups article > span {
    color: #526579;
    display: block;
    font-size: .78rem;
    font-weight: 800;
    margin-bottom: .45rem;
    text-transform: uppercase;
}
.work-order-timer-visibility-pill {
    background: #eef5ff;
    border: 1px solid #cfe0f4;
    border-radius: 999px;
    color: #17233a;
    display: inline-flex;
    gap: .3rem;
    margin: .15rem .2rem .15rem 0;
    max-width: 100%;
    overflow-wrap: anywhere;
    padding: .22rem .5rem;
}
.work-order-timer-visibility-pill.is-empty {
    background: #f2f4f7;
    color: #526579;
}
.work-order-timer-visibility-history {
    display: grid;
    gap: .5rem;
}
.work-order-timer-visibility-row {
    background: #fff;
    border: 1px solid #dbe4ee;
    border-radius: 8px;
    display: grid;
    gap: .25rem;
    min-width: 0;
    padding: .75rem;
}
.work-order-timer-visibility-row strong,
.work-order-timer-visibility-row span,
.work-order-timer-visibility-row small {
    overflow-wrap: anywhere;
}
.work-order-timer-visibility-row small {
    color: #526579;
}
.work-order-timer-visibility-row.is-empty {
    border-style: dashed;
}
@media (max-width: 640px) {
    .mobile-work-order-page {
        gap: .55rem;
        max-width: 100%;
        padding-bottom: 8.75rem;
    }
    .mobile-work-order-hero,
    .mobile-work-order-card {
        box-shadow: none;
        padding: .72rem;
    }
    .mobile-work-order-status-row,
    .mobile-work-order-standard-meta,
    .mobile-work-order-actions,
    .mobile-work-order-metrics,
    .mobile-work-order-line-stats,
    .mobile-work-order-line-timer-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .mobile-work-order-timer-buttons,
    .mobile-work-order-line-timer-buttons,
    .mobile-work-order-inline-actions,
    .mobile-work-order-command-actions {
        grid-template-columns: 1fr;
    }
    .mobile-work-order-command-grid,
    .mobile-work-order-checklist-grid,
    .mobile-work-order-checklist-heading,
    .mobile-work-order-crew-boundary-grid {
        grid-template-columns: 1fr;
    }
    .mobile-document-customer .mobile-work-order-actions,
    .mobile-document-advanced-grid {
        grid-template-columns: 1fr;
    }
    .mobile-work-order-topnav a {
        min-height: 34px;
    }
    .mobile-work-order-sticky-actions {
        border-left: 0;
        border-right: 0;
        border-radius: 8px 8px 0 0;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        left: 0;
        max-height: 38vh;
        overflow-y: auto;
        overscroll-behavior: contain;
        transform: none;
        width: 100%;
    }
    .mobile-work-order-advanced-grid .card-heading-row {
        grid-template-columns: 1fr;
    }
    .mobile-work-order-advanced-modules,
    .mobile-document-advanced-grid {
        gap: .5rem;
    }
    .mobile-work-order-advanced-panel .mobile-work-order-inline-actions,
    .mobile-document-advanced-panel .mobile-work-order-inline-actions {
        grid-template-columns: 1fr;
    }
    .work-order-timer-visibility-heading,
    .work-order-timer-visibility-groups {
        grid-template-columns: 1fr;
    }
    .work-order-timer-visibility-heading .btn {
        width: 100%;
    }
    .work-order-attention-board {
        grid-template-columns: 1fr;
    }
}
@media (min-width: 1500px) {
    .dispatch-workspace-v3 { grid-template-columns: 320px minmax(0, 1fr) 440px; }
}
@media (max-width: 1250px) {
    .dispatch-workspace-v3 { grid-template-columns: minmax(230px, 300px) minmax(0, 1fr); }
    .dispatch-right-panel { grid-column: 1 / -1; }
    .route-group-builder-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .route-group-notes-field { grid-column: 1 / -1; }
    .route-group-stop-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
    .dispatch-workspace-v3,
    .dispatch-secondary-board { grid-template-columns: 1fr; overflow: visible; }
    .dispatch-map-panel .leaflet-dispatch-map,
    .leaflet-dispatch-map { height: 420px; min-height: 360px; }
    .route-group-builder-grid,
    .route-group-stop-fields { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .dispatch-action-bar,
    .route-group-action-row { align-items: stretch; flex-direction: column; }
    .dispatch-action-bar .btn,
    .route-group-action-row .btn { width: 100%; }
    .scheduling-map-filters { grid-template-columns: 1fr; }
    .work-order-command-grid,
    .work-order-closeout-grid,
    .work-order-invoice-summary,
    .work-order-timer-metrics {
        grid-template-columns: 1fr;
    }
    .work-order-crew-metric {
        grid-column: auto;
    }
    .work-order-office-closeout-pills {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .work-order-closeout-heading {
        grid-template-columns: 1fr;
    }
    .work-order-command-actions,
    .work-order-section-actions,
    .work-order-form-actions {
        align-items: stretch;
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
    }
    .work-order-command-actions > *,
    .work-order-section-actions > *,
    .work-order-form-actions > *,
    .work-order-command-actions .btn,
    .work-order-section-actions .btn,
    .work-order-form-actions .btn {
        min-width: 0;
        width: 100%;
    }
}

/* Reports Drilldowns + Export V2.1 */
.report-metric-link { color: inherit; text-decoration: none; display: block; border: 1px solid var(--border-color, #d8dee9); border-radius: 12px; padding: .7rem; background: var(--surface-muted, #f8fafc); transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.report-metric-link:hover, .report-metric-link:focus { border-color: var(--accent-color, #2563eb); box-shadow: 0 8px 24px rgba(37, 99, 235, .16); transform: translateY(-1px); outline: none; }
.report-metric-link span { display: inline-block; margin-top: .35rem; color: var(--accent-color, #2563eb); font-size: .78rem; font-weight: 700; }
.reports-v2-metrics > .report-metric-link { min-height: 100%; }
.report-drilldown-summary { margin-bottom: 1rem; }
.report-drilldown-table table { min-width: 1100px; }
.report-drilldown-table th, .report-drilldown-table td { vertical-align: top; }

/* Reports Master Library V3 */
.report-library-v3 .report-library-hero { display: grid; grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); gap: 1rem; align-items: start; }
.report-library-search { margin-top: 1rem; align-items: end; }
.report-category-tabs { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: 1rem; }
.report-category-tab { border: 1px solid var(--border, #d7dde8); border-radius: 999px; padding: .4rem .7rem; text-decoration: none; color: inherit; background: #fff; font-size: .85rem; }
.report-category-tab.active, .report-category-tab:hover, .report-category-tab:focus { background: #1f5eff; color: #fff; border-color: #1f5eff; }
.report-tool-status { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1rem; color: #5f6b7a; font-size: .9rem; }
.report-tool-status span, .favorite-state { border: 1px solid var(--border, #d7dde8); border-radius: 999px; padding: .25rem .55rem; background: #f8fafc; color: #475467; }
.report-card-section { margin-top: 1rem; }
.report-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; }
.report-card-v3 { border: 1px solid var(--border, #d7dde8); border-radius: 16px; padding: 1rem; background: #fff; display: flex; flex-direction: column; gap: .65rem; min-height: 245px; }
.report-card-top { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.favorite-state { font-size: .78rem; line-height: 1.3; }
.report-preference-panel .compact-list, .report-export-history .compact-list { display: grid; gap: .45rem; list-style: none; margin: .75rem 0 0; padding: 0; }
.report-preference-panel .compact-list li, .report-export-history .compact-list li { display: grid; gap: .12rem; min-width: 0; }
.report-preference-panel .compact-list a, .report-export-history .compact-list a { font-weight: 800; overflow-wrap: anywhere; }
.report-save-filter-form label { align-items: center; display: inline-flex; gap: .4rem; margin: 0; }
.report-save-filter-form input[name="filter_name"] { min-width: 190px; }
.report-favorite-form { margin: 0; }
.report-builder-dashboard-panel .summary-grid { margin-top: 1rem; }
.report-builder-form-grid { display: grid; gap: .85rem; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); margin-top: 1rem; }
.report-builder-mini-form { align-content: start; border: 1px solid var(--border, #d7dde8); border-radius: 10px; display: grid; gap: .65rem; padding: .85rem; }
.report-builder-mini-form label { display: grid; gap: .3rem; margin: 0; min-width: 0; }
.report-builder-mini-form input, .report-builder-mini-form select { min-width: 0; width: 100%; }
.report-card-v3 h3 { margin: 0; }
.report-card-v3 p { margin: 0; color: #344054; }
.report-card-v3 small { color: #697586; }
.status-ready { background: #dcfae6; color: #067647; }
.status-foundation { background: #e0f2fe; color: #075985; }
.status-needs-more-data { background: #fef3c7; color: #92400e; }
.status-coming-soon { background: #f2f4f7; color: #475467; }
.report-detail-v3 .summary-grid { margin: 1rem 0; }
.btn-xs { padding: .25rem .5rem; font-size: .8rem; }
@media (max-width: 760px) { .report-library-v3 .report-library-hero { grid-template-columns: 1fr; } }

/* Customer Documents + Print/PDF Ready V1 */
.crm-document {
    --document-accent: #1f6feb;
    --document-text: #111827;
    --document-heading: #172033;
    --document-muted: #475569;
    background: #ffffff;
    color: var(--document-text);
    max-width: 1100px;
    margin: 0 auto 2rem;
    padding: 2rem;
    border: 1px solid #d9e2ef;
    border-radius: 18px;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.08);
}
.document-screen-actions { display: flex; gap: .75rem; align-items: center; justify-content: flex-end; margin-bottom: 1rem; flex-wrap: wrap; }
.document-header { display: flex; justify-content: space-between; gap: 1.5rem; border-bottom: 4px solid var(--document-accent); padding-bottom: 1.25rem; margin-bottom: 1.5rem; }
.document-brand { display: flex; gap: 1rem; align-items: center; }
.document-brand h1, .document-meta h2 { color: var(--document-heading); margin: 0 0 .35rem; }
.crm-document[data-paid-document-colors="company-entitlement"] h1,
.crm-document[data-paid-document-colors="company-entitlement"] h2,
.crm-document[data-paid-document-colors="company-entitlement"] h3,
.crm-document[data-paid-document-colors="company-entitlement"] strong { color: var(--document-heading); }
.crm-document[data-paid-document-colors="company-entitlement"] .muted,
.crm-document[data-paid-document-colors="company-entitlement"] small,
.crm-document[data-paid-document-colors="company-entitlement"] figcaption { color: var(--document-muted); }
.document-logo { width: 86px; height: 86px; object-fit: contain; border: 1px solid #d9e2ef; border-radius: 14px; background: #fff; }
.document-logo-placeholder { width: 86px; height: 86px; border-radius: 14px; display: grid; place-items: center; background: var(--document-accent); color: #fff; font-size: 2rem; font-weight: 800; }
.document-meta { text-align: right; min-width: 240px; }
.document-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin: 1rem 0; }
.document-summary > div, .document-card, .document-totals, .document-approval-card { border: 1px solid #d9e2ef; border-radius: 14px; padding: 1rem; background: #fbfdff; break-inside: avoid; }
.document-line-table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.document-line-table th { background: #eff6ff; color: #172033; text-align: left; }
.document-line-table th, .document-line-table td { border-bottom: 1px solid #d9e2ef; padding: .75rem; vertical-align: top; }
.document-photo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: .75rem; margin-top: .75rem; }
.document-photo-grid figure { margin: 0; border: 1px solid #d9e2ef; border-radius: 12px; overflow: hidden; background: #fff; }
.document-photo-grid img, .document-photo-placeholder { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: grid; place-items: center; background: repeating-linear-gradient(45deg, #eff6ff, #eff6ff 10px, #f8fafc 10px, #f8fafc 20px); color: #475569; font-weight: 700; }
.document-photo-grid figcaption { padding: .5rem; font-size: .82rem; color: #475569; }
.document-totals { max-width: 420px; margin-left: auto; }
.document-totals p { display: flex; justify-content: space-between; margin: .35rem 0; }
.document-totals .grand-total { border-top: 2px solid #d9e2ef; padding-top: .65rem; font-size: 1.18rem; }
.document-footer { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid #d9e2ef; color: var(--document-muted); font-size: .9rem; }
.document-approval-card textarea { width: 100%; margin: .5rem 0; }
.internal-only { border-left: 5px solid #f59e0b; }
@media (max-width: 800px) { .document-header, .document-brand { align-items: flex-start; flex-direction: column; } .document-meta { text-align: left; } .document-grid { grid-template-columns: 1fr; } .crm-document { padding: 1rem; } }
@media print {
    body { background: #fff ; }
    .app-sidebar, .global-topbar, .bottom-nav-shell, .page-header, .no-print, .document-screen-actions, .logout-form, .nav-foundation-note { display: none ; }
    .app-shell, .main-content, .public-shell { display: block ; margin: 0 ; padding: 0 ; width: 100% ; }
    .crm-document { box-shadow: none ; border: 0 ; border-radius: 0 ; max-width: 100% ; padding: .35in ; margin: 0 ; color: #000 ; }
    .document-header, .document-card, .document-summary > div, .document-totals { break-inside: avoid; page-break-inside: avoid; }
    .document-line-table tr { break-inside: avoid; page-break-inside: avoid; }
    .document-line-table th { background: #f2f2f2 ; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .scheduling-route-sheet-shell { color: #000 ; }
    .route-sheet-group,
    .route-sheet-stop-card,
    .route-sheet-metric,
    .route-sheet-safety,
    .route-stop-detail-grid article,
    .route-stop-service-block,
    .route-stop-line-section,
    .route-stop-line-card {
        break-inside: avoid;
        box-shadow: none ;
        page-break-inside: avoid;
    }
    .route-sheet-summary-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .route-sheet-stop-card { grid-template-columns: .7in minmax(0, 1.2fr) minmax(0, 1fr); }
    .route-stop-detail-grid,
    .route-stop-line-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    a[href]::after { content: "" ; }
}

.deployment-status-badge {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    padding: 6px 10px;
    border: 1px solid rgba(22, 163, 74, 0.34);
    border-radius: 999px;
    background: rgba(220, 252, 231, 0.95);
    color: #14532d;
    font-size: 0.76rem;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.deployment-status-badge:hover,
.deployment-status-badge:focus {
    border-color: rgba(22, 163, 74, 0.7);
    color: #052e16;
    text-decoration: none;
}

.deployment-status-unknown {
    border-color: rgba(100, 116, 139, 0.35);
    background: rgba(241, 245, 249, 0.95);
    color: #334155;
}

.global-topbar .deployment-status-badge {
    flex: 0 1 auto;
    max-width: min(420px, 32vw);
}

.app-sidebar .deployment-status-badge {
    width: 100%;
    justify-content: center;
    white-space: normal;
    text-align: center;
}

.deployment-status-grid {
    display: grid;
    grid-template-columns: minmax(180px, 260px) minmax(0, 1fr);
    gap: 10px 16px;
    margin: 0;
}

.deployment-status-grid dt {
    font-weight: 800;
    color: #334155;
}

.deployment-status-grid dd {
    margin: 0;
    min-width: 0;
    overflow-wrap: anywhere;
}

.launch-qa-readiness-panel,
.launch-qa-grid,
.launch-qa-action-grid,
.launch-qa-link-card,
.launch-qa-badges {
    box-sizing: border-box;
    max-width: 100%;
    min-width: 0;
    overflow-wrap: anywhere;
}

.launch-qa-heading {
    align-items: flex-start;
    display: flex;
    gap: .75rem;
    justify-content: space-between;
    margin-bottom: .75rem;
}

.launch-qa-grid,
.launch-qa-action-grid {
    display: grid;
    gap: .65rem;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    margin-bottom: .85rem;
}

.launch-qa-action-grid {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.launch-qa-grid article,
.launch-qa-link-card {
    background: #f8fbff;
    border: 1px solid #dbe4ee;
    border-left: 4px solid #0f766e;
    border-radius: 8px;
    color: inherit;
    display: grid;
    gap: .35rem;
    padding: .7rem;
    text-decoration: none;
}

.launch-qa-link-card:hover,
.launch-qa-link-card:focus {
    border-color: #0f766e;
    color: inherit;
    text-decoration: none;
}

.launch-qa-badges {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: .75rem;
}

.administration-completion-summary,
.administration-completion-surface-panel,
.administration-completion-safety,
.administration-completion-diagnostics,
.administration-completion-area-grid,
.administration-completion-area {
    box-sizing: border-box;
    max-width: 100%;
    min-width: 0;
}

.administration-completion-area-grid {
    display: grid;
    gap: .8rem;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.administration-completion-area h3,
.administration-completion-area h4 {
    overflow-wrap: anywhere;
}

.administration-completion-area .compact-list {
    margin-top: .55rem;
}

@media (max-width: 900px) {
    .global-topbar .deployment-status-badge {
        order: 10;
        max-width: 100%;
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 760px) {
    .launch-qa-heading {
        display: grid;
    }

    .launch-qa-grid,
    .launch-qa-action-grid,
    .administration-completion-area-grid {
        grid-template-columns: 1fr;
    }
}

/* Mobile app shell and card mode */
.mobile-app-bar,
.mobile-record-card-list {
    display: none;
}

.mobile-preference-form {
    align-items: end;
    display: flex;
    gap: .35rem;
    margin: 0;
}

.mobile-preference-form label {
    color: var(--muted);
    display: grid;
    font-size: .72rem;
    font-weight: 800;
    gap: .15rem;
    margin: 0;
    text-transform: uppercase;
}

.mobile-preference-form select {
    min-height: 2.15rem;
    padding: .35rem 1.8rem .35rem .55rem;
}

@media (max-width: 760px), (hover: none) and (pointer: coarse) {
    .app-shell[data-mobile-layout-mode] {
        min-height: 100dvh;
    }

    .app-shell[data-mobile-layout-mode] .mobile-app-bar {
        align-items: center;
        background: #ffffff;
        border-bottom: 1px solid #e4e9f2;
        display: grid;
        gap: .45rem;
        grid-template-columns: 44px 44px minmax(0, 1fr);
        min-height: 64px;
        padding: max(.55rem, env(safe-area-inset-top)) .75rem .55rem;
        position: sticky;
        top: 0;
        z-index: 80;
    }

    html[data-pwa-display-mode="standalone"] .app-shell[data-mobile-layout-mode] .mobile-app-bar {
        padding-top: max(.75rem, env(safe-area-inset-top));
    }

    .mobile-icon-button {
        align-items: center;
        background: #ffffff;
        border: 1px solid #dbe3ef;
        border-radius: .65rem;
        color: #0f172a;
        display: inline-flex;
        font-size: 1.45rem;
        font-weight: 800;
        height: 44px;
        justify-content: center;
        line-height: 1;
        min-height: 44px;
        padding: 0;
        text-decoration: none;
        width: 44px;
    }

    .mobile-home-button-form,
    .mobile-nav-quick-actions form {
        display: flex;
        margin: 0;
    }

    .mobile-home-button-form button {
        appearance: none;
        cursor: pointer;
    }

    .mobile-nav-drawer {
        min-width: 0;
        position: relative;
    }

    .mobile-nav-drawer summary {
        list-style: none;
    }

    .mobile-nav-drawer summary::-webkit-details-marker {
        display: none;
    }

    .mobile-nav-panel {
        background: #ffffff;
        border: 1px solid #dbe3ef;
        border-radius: .75rem;
        box-shadow: 0 18px 44px rgba(15, 23, 42, .18);
        display: grid;
        gap: .75rem;
        left: 0;
        max-height: calc(100dvh - 88px);
        min-width: min(88vw, 320px);
        overflow: auto;
        padding: .85rem;
        position: absolute;
        top: calc(100% + .45rem);
        width: min(88vw, 340px);
        z-index: 90;
    }

    .mobile-nav-panel-heading {
        align-items: center;
        display: flex;
        gap: .5rem;
        justify-content: space-between;
        min-width: 0;
    }

    .mobile-nav-quick-actions {
        align-items: center;
        display: flex;
        flex-wrap: wrap;
        gap: .4rem;
        justify-content: end;
    }

    .mobile-nav-panel .side-nav {
        background: transparent;
        display: grid;
        gap: .35rem;
        grid-template-columns: 1fr;
        overflow: visible;
    }

    .mobile-nav-panel .nav-link,
    .mobile-nav-panel .nav-group-label {
        color: #172033;
        min-height: 44px;
        white-space: normal;
    }

    .mobile-nav-panel .nav-dropdown {
        position: static;
        width: 100%;
    }

    .mobile-home-button {
        color: #0f9f5f;
    }

    .mobile-app-title {
        color: #2f3542;
        font-size: 1.03rem;
        font-weight: 900;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        text-transform: uppercase;
        white-space: nowrap;
    }

    .app-shell[data-mobile-layout-mode="auto"],
    .app-shell[data-mobile-layout-mode="mobile"] {
        background: #ffffff;
        display: block;
    }

    .app-shell[data-mobile-layout-mode="auto"] .main-content,
    .app-shell[data-mobile-layout-mode="mobile"] .main-content {
        padding: 0 0 calc(1rem + env(safe-area-inset-bottom));
    }

    .app-shell[data-mobile-layout-mode="auto"] .app-sidebar,
    .app-shell[data-mobile-layout-mode="auto"] .global-topbar,
    .app-shell[data-mobile-layout-mode="auto"] .bottom-nav-shell,
    .app-shell[data-mobile-layout-mode="auto"] .nav-foundation-note,
    .app-shell[data-mobile-layout-mode="auto"] .page-header,
    .app-shell[data-mobile-layout-mode="mobile"] .app-sidebar,
    .app-shell[data-mobile-layout-mode="mobile"] .global-topbar,
    .app-shell[data-mobile-layout-mode="mobile"] .bottom-nav-shell,
    .app-shell[data-mobile-layout-mode="mobile"] .nav-foundation-note,
    .app-shell[data-mobile-layout-mode="mobile"] .page-header {
        display: none;
    }

    .app-shell[data-mobile-layout-mode="auto"] .operational-module-shell,
    .app-shell[data-mobile-layout-mode="mobile"] .operational-module-shell {
        border: 0;
        border-radius: 0;
        box-shadow: none;
        margin: 0;
        max-width: 100%;
        padding: 0;
    }

    .app-shell[data-mobile-layout-mode="auto"] .module-page-header,
    .app-shell[data-mobile-layout-mode="mobile"] .module-page-header {
        align-items: center;
        border-bottom: 1px solid #e4e9f2;
        display: grid;
        gap: .6rem;
        grid-template-columns: minmax(0, 1fr) auto;
        margin: 0;
        padding: .85rem .9rem;
    }

    .app-shell[data-mobile-layout-mode="auto"] .module-page-header h1,
    .app-shell[data-mobile-layout-mode="mobile"] .module-page-header h1 {
        color: #4b5563;
        font-size: 1.2rem;
        margin: 0;
        overflow-wrap: anywhere;
        text-transform: uppercase;
    }

    .app-shell[data-mobile-layout-mode="auto"] .module-page-header p,
    .app-shell[data-mobile-layout-mode="auto"] .module-page-header .return-link,
    .app-shell[data-mobile-layout-mode="mobile"] .module-page-header p,
    .app-shell[data-mobile-layout-mode="mobile"] .module-page-header .return-link {
        display: none;
    }

    .app-shell[data-mobile-layout-mode="auto"] .module-action-bar,
    .app-shell[data-mobile-layout-mode="mobile"] .module-action-bar {
        align-items: center;
        display: flex;
        gap: .4rem;
        justify-content: flex-end;
        min-width: 0;
    }

    .app-shell[data-mobile-layout-mode="auto"] .module-action-bar .btn-primary,
    .app-shell[data-mobile-layout-mode="auto"] .module-action-bar .primary-action,
    .app-shell[data-mobile-layout-mode="mobile"] .module-action-bar .btn-primary,
    .app-shell[data-mobile-layout-mode="mobile"] .module-action-bar .primary-action {
        border-radius: 999px;
        font-size: .86rem;
        min-height: 44px;
        padding: .55rem .7rem;
        white-space: normal;
    }

    .app-shell[data-mobile-layout-mode="auto"] .operational-filter-toolbar,
    .app-shell[data-mobile-layout-mode="mobile"] .operational-filter-toolbar,
    .app-shell[data-mobile-layout-mode="auto"] .customer-filters,
    .app-shell[data-mobile-layout-mode="mobile"] .customer-filters {
        background: #ffffff;
        border-bottom: 1px solid #e4e9f2;
        display: grid;
        gap: .55rem;
        grid-template-columns: 1fr;
        margin: 0;
        padding: .85rem .9rem;
    }

    .app-shell[data-mobile-layout-mode="auto"] .operational-filter-toolbar input,
    .app-shell[data-mobile-layout-mode="auto"] .operational-filter-toolbar select,
    .app-shell[data-mobile-layout-mode="auto"] .customer-filters input,
    .app-shell[data-mobile-layout-mode="auto"] .customer-filters select,
    .app-shell[data-mobile-layout-mode="mobile"] .operational-filter-toolbar input,
    .app-shell[data-mobile-layout-mode="mobile"] .operational-filter-toolbar select,
    .app-shell[data-mobile-layout-mode="mobile"] .customer-filters input,
    .app-shell[data-mobile-layout-mode="mobile"] .customer-filters select {
        background: #f7f8fa;
        border-color: #edf1f6;
        min-height: 48px;
        width: 100%;
    }

    .app-shell[data-mobile-layout-mode="auto"] .filter-actions,
    .app-shell[data-mobile-layout-mode="mobile"] .filter-actions {
        align-items: stretch;
        display: grid;
        gap: .5rem;
        grid-template-columns: 1fr;
    }

    .app-shell[data-mobile-layout-mode="auto"] .status-tabs,
    .app-shell[data-mobile-layout-mode="mobile"] .status-tabs {
        background: #f1f7f3;
        background-image: linear-gradient(to right, rgba(241,247,243,.98), rgba(241,247,243,0)), linear-gradient(to left, rgba(241,247,243,.98), rgba(241,247,243,0));
        background-position: left center, right center;
        background-repeat: no-repeat;
        background-size: 1.4rem 100%;
        border: 0;
        border-radius: 0;
        display: flex;
        gap: .45rem;
        margin: 0;
        overflow-x: auto;
        padding: .65rem .9rem;
        scrollbar-gutter: stable;
        touch-action: pan-x pan-y;
    }

    .app-shell[data-mobile-layout-mode="auto"] .status-tabs a,
    .app-shell[data-mobile-layout-mode="mobile"] .status-tabs a {
        background: #ffffff;
        border: 1px solid #dbe3ef;
        border-radius: .55rem;
        color: #4b5563;
        flex: 0 0 auto;
        min-height: 44px;
        padding: .55rem .75rem;
        white-space: nowrap;
    }

    .app-shell[data-mobile-layout-mode="auto"] .status-tabs a.is-active,
    .app-shell[data-mobile-layout-mode="mobile"] .status-tabs a.is-active {
        border-color: #0f9f5f;
        color: #0f9f5f;
    }

    .mobile-record-card-list {
        gap: 0;
    }

    .app-shell[data-mobile-layout-mode="auto"] .operational-table-card,
    .app-shell[data-mobile-layout-mode="mobile"] .operational-table-card {
        background: transparent;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        margin: 0;
        padding: 0;
    }

    .app-shell[data-mobile-layout-mode="auto"] .operational-table-card .table-scroll,
    .app-shell[data-mobile-layout-mode="mobile"] .operational-table-card .table-scroll {
        display: none;
    }

    .app-shell[data-mobile-layout-mode="auto"] .mobile-record-card-list,
    .app-shell[data-mobile-layout-mode="mobile"] .mobile-record-card-list {
        display: grid;
    }

    .mobile-record-card {
        background: #ffffff;
        border-bottom: 1px solid #d8dee8;
        display: grid;
        gap: .8rem;
        padding: 1rem .9rem;
    }

    .app-shell[data-mobile-layout-mode="auto"] .operational-bulk-toolbar,
    .app-shell[data-mobile-layout-mode="mobile"] .operational-bulk-toolbar {
        border-radius: 0;
        grid-template-columns: 1fr;
        margin: 0 0 .75rem;
        padding: .8rem;
    }

    .app-shell[data-mobile-layout-mode="auto"] .operational-bulk-toolbar .btn,
    .app-shell[data-mobile-layout-mode="auto"] .operational-bulk-toolbar button,
    .app-shell[data-mobile-layout-mode="mobile"] .operational-bulk-toolbar .btn,
    .app-shell[data-mobile-layout-mode="mobile"] .operational-bulk-toolbar button {
        width: 100%;
    }

    .app-shell[data-mobile-layout-mode="auto"] .operational-bulk-toolbar button.bulk-action-link,
    .app-shell[data-mobile-layout-mode="auto"] .operational-bulk-toolbar button[type="submit"].bulk-action-link,
    .app-shell[data-mobile-layout-mode="mobile"] .operational-bulk-toolbar button.bulk-action-link,
    .app-shell[data-mobile-layout-mode="mobile"] .operational-bulk-toolbar button[type="submit"].bulk-action-link {
        width: auto;
    }

    .work-order-command-summary {
        border-radius: 0;
        margin: 0 0 .75rem;
        padding: .8rem;
    }

    .work-order-command-metrics {
        gap: .45rem;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .work-order-command-metrics article {
        min-height: 4.2rem;
        padding: .62rem;
    }

    .work-order-command-metrics strong {
        font-size: .95rem;
    }

    .mobile-record-main {
        align-items: start;
        display: grid;
        gap: .75rem;
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .mobile-record-title-block {
        display: grid;
        gap: .25rem;
        min-width: 0;
    }

    .mobile-record-title-block a {
        color: #4b5563;
        font-size: 1.1rem;
        font-weight: 900;
        line-height: 1.25;
        overflow-wrap: anywhere;
    }

    .mobile-record-title-block span {
        color: #4b5563;
        font-weight: 750;
        overflow-wrap: anywhere;
    }

    .mobile-record-side {
        align-items: end;
        display: grid;
        gap: .45rem;
        justify-items: end;
        max-width: 42vw;
        min-width: 0;
    }

    .mobile-record-amount {
        color: #3f4653;
        font-size: 1rem;
        font-weight: 900;
        white-space: nowrap;
    }

    .mobile-record-details {
        display: grid;
        gap: .45rem .75rem;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin: 0;
    }

    .mobile-record-details div {
        min-width: 0;
    }

    .mobile-record-details dt {
        color: #8b95a5;
        font-size: .72rem;
        font-weight: 900;
        margin: 0;
        text-transform: uppercase;
    }

    .mobile-record-details dd {
        color: #4b5563;
        font-weight: 750;
        margin: .12rem 0 0;
        overflow-wrap: anywhere;
    }

    .mobile-record-actions .manage-dropdown,
    .mobile-record-actions .manage-dropdown summary {
        width: 100%;
    }

    .mobile-record-actions .manage-menu {
        box-shadow: none;
        left: auto;
        margin-top: .45rem;
        min-width: 0;
        position: static;
        right: auto;
        width: 100%;
    }

    .mobile-record-photo {
        border: 1px solid #dbe3ef;
        border-radius: .65rem;
        grid-column: 1 / -1;
        height: auto;
        max-height: 180px;
        object-fit: cover;
        width: 100%;
    }

    .app-shell[data-mobile-layout-mode="auto"] .customer-table,
    .app-shell[data-mobile-layout-mode="mobile"] .customer-table {
        display: none;
    }

    .app-shell[data-mobile-layout-mode="auto"] .customer-card-list,
    .app-shell[data-mobile-layout-mode="mobile"] .customer-card-list {
        display: grid;
        gap: 0;
    }

    .app-shell[data-mobile-layout-mode="auto"] .customer-list-card,
    .app-shell[data-mobile-layout-mode="mobile"] .customer-list-card {
        background: #ffffff;
        border: 0;
        border-bottom: 1px solid #d8dee8;
        border-radius: 0;
        box-shadow: none;
        padding: 1rem .9rem;
    }

    .app-shell[data-mobile-layout-mode="desktop"] .mobile-app-bar {
        box-shadow: 0 8px 24px rgba(15, 23, 42, .08);
    }

    .app-shell[data-mobile-layout-mode="desktop"] .mobile-record-card-list {
        display: none;
    }

    .app-shell[data-mobile-layout-mode="desktop"] .operational-table-card .table-scroll {
        display: block;
    }

    .app-shell[data-mobile-layout-mode="desktop"] .customer-table {
        display: block;
    }

    .app-shell[data-mobile-layout-mode="desktop"] .customer-card-list {
        display: none;
    }
}

@media (max-width: 430px) {
    .app-shell[data-mobile-layout-mode] .mobile-app-bar {
        gap: .35rem;
        grid-template-columns: 40px 40px minmax(0, 1fr);
    }

    .mobile-icon-button {
        height: 40px;
        min-height: 40px;
        width: 40px;
    }

    .mobile-record-main,
    .mobile-record-details {
        grid-template-columns: 1fr;
    }

    .mobile-record-side {
        align-items: start;
        justify-items: start;
        max-width: 100%;
    }
}

/* Mobile auth/public entry polish */
.auth-split,
.auth-card,
.wide-auth-card,
.register-entry-card,
.registration-form,
.registration-form fieldset,
.offline-card,
.public-shell.lead-form-public {
    min-width: 0;
}

.auth-card,
.offline-card {
    width: min(100%, 42rem);
}

.auth-card p,
.auth-card .check-list,
.auth-card .form-error,
.registration-form legend,
.registration-form label,
.registration-form small {
    max-width: 100%;
    overflow-wrap: anywhere;
}

.registration-form input,
.registration-form select,
.registration-form textarea {
    max-width: 100%;
    min-width: 0;
}

.auth-split {
    align-items: stretch;
    max-width: 980px;
    margin: 0 auto;
}

.wide-auth-card {
    margin: 0 auto;
}

.registration-form fieldset {
    min-inline-size: 0;
}

.registration-form label,
.registration-form small,
.register-entry-card .check-list,
.offline-card p {
    overflow-wrap: anywhere;
}

.public-shell.lead-form-public {
    width: 100%;
}

@media (max-width: 640px) {
    .public-shell {
        align-content: start;
    }

    .public-shell .main-content {
        align-content: start;
        min-height: 100dvh;
        padding: max(.85rem, env(safe-area-inset-top)) max(.85rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(.85rem, env(safe-area-inset-left));
    }

    .auth-split {
        gap: .75rem;
        grid-template-columns: 1fr;
    }

    .auth-card,
    .offline-card {
        border-radius: .65rem;
        padding: .85rem;
    }

    .auth-card h2,
    .offline-card h1,
    .lead-form-public h1 {
        font-size: 1.45rem;
        line-height: 1.18;
        letter-spacing: 0;
    }

    .register-entry-card .check-list {
        padding-left: 1rem;
    }

    .auth-card .stacked-form button,
    .auth-card .btn,
    .registration-form .form-actions,
    .registration-form .form-actions .btn,
    .registration-form .form-actions button {
        width: 100%;
    }

    .registration-form .form-actions {
        display: grid;
        gap: .55rem;
    }

    .registration-form fieldset {
        border-radius: .65rem;
        padding: .8rem;
    }

    .registration-form legend {
        white-space: normal;
    }

    .public-shell.lead-form-public {
        max-width: 100%;
        padding: max(.85rem, env(safe-area-inset-top)) max(.85rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(.85rem, env(safe-area-inset-left));
    }

    .offline-shell {
        align-content: start;
    }

    .offline-card .btn {
        width: 100%;
    }
}

@media (max-width: 640px) {
    .deployment-status-grid {
        grid-template-columns: 1fr;
    }
}

.portal-rebook-line {
    display: block;
    margin: 0.75rem 0;
    padding: 0.9rem;
    border: 1px solid #dbe4ef;
    border-radius: 0.75rem;
    background: #f8fafc;
}

.portal-rebook-line input[type="checkbox"] {
    margin-right: 0.5rem;
}

.portal-recurring-choice,
.portal-rebook-approval-line {
    display: grid;
    gap: 0.65rem;
    margin-top: 0.8rem;
    padding: 0.8rem;
    border: 1px solid #dbe4ef;
    border-radius: 0.6rem;
    background: #ffffff;
}

.portal-recurring-choice legend,
.portal-rebook-approval-line legend {
    font-weight: 700;
    padding: 0 0.25rem;
}

.portal-rebook-approval-lines {
    display: grid;
    gap: 0.75rem;
    margin-top: 0.75rem;
}

.portal-recurring-choice label,
.portal-rebook-approval-line label {
    min-width: 0;
}

/* Lead Forms Builder Public Embed Density Guard */
.lead-forms-shell,
.lead-forms-shell .module-page-header,
.lead-forms-shell .card,
.lead-form-tabs,
.public-shell.lead-form-public,
.public-shell.lead-form-public .card {
    min-width: 0;
}

.lead-forms-shell {
    margin-left: auto;
    margin-right: auto;
    max-width: min(100%, 1440px);
    width: 100%;
}

.lead-forms-shell .module-page-header,
.lead-forms-shell .grid.two-col {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.lead-forms-shell .module-action-bar,
.lead-forms-shell .action-bar,
.lead-form-tabs {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    max-width: 100%;
}

.lead-forms-shell .action-bar > *,
.lead-forms-shell .inline-form,
.lead-forms-shell .inline-form .btn {
    min-width: 0;
}

.lead-form-tabs {
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    padding-bottom: .2rem;
}

.lead-form-tabs a {
    white-space: nowrap;
}

.lead-forms-shell textarea[readonly],
.lead-forms-shell code,
.lead-forms-shell pre {
    max-width: 100%;
    overflow-x: auto;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

.lead-forms-shell textarea[readonly] {
    min-height: 10rem;
    resize: vertical;
}

.lead-forms-shell .table-responsive {
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    width: 100%;
}

.lead-forms-shell .table-responsive table {
    min-width: 760px;
}

.lead-forms-shell .stacked-form,
.lead-forms-shell .stacked-form label,
.lead-forms-shell .stacked-form fieldset,
.lead-forms-shell .stacked-form input,
.lead-forms-shell .stacked-form select,
.lead-forms-shell .stacked-form textarea,
.lead-forms-shell .card p,
.lead-forms-shell .card li,
.public-shell.lead-form-public label,
.public-shell.lead-form-public fieldset,
.public-shell.lead-form-public input,
.public-shell.lead-form-public select,
.public-shell.lead-form-public textarea,
.public-shell.lead-form-public p,
.public-shell.lead-form-public small {
    max-width: 100%;
    min-width: 0;
    overflow-wrap: anywhere;
}

.public-shell.lead-form-public {
    box-sizing: border-box;
    display: grid;
    justify-items: center;
    width: 100%;
}

.public-shell.lead-form-public .card {
    width: min(100%, 760px);
}

.public-shell.lead-form-public form {
    display: grid;
    gap: .85rem;
}

.public-shell.lead-form-public fieldset {
    border: 1px solid #dbe4ef;
    border-radius: 8px;
    padding: .75rem;
}

.public-shell.lead-form-public button[type="submit"] {
    justify-self: start;
}

.lead-form-public .lead-form-upload-control {
    display: grid;
    gap: .4rem;
}

.lead-form-public .lead-form-upload-label {
    color: var(--lf-text, #111827);
    font-weight: 800;
}

.lead-form-public .lead-form-upload-button {
    background: var(--lf-field-bg, #ffffff);
    border: 1px solid var(--lf-field-border, #cbd5e1);
    border-radius: 8px;
    color: var(--lf-field-text, #111827);
    cursor: pointer;
    font: inherit;
    font-weight: 850;
    justify-self: start;
    min-height: 2.35rem;
    padding: .45rem .75rem;
}

.lead-form-public .lead-form-upload-status {
    color: var(--lf-text, #111827);
    font-size: .85rem;
    font-weight: 750;
}

.lead-form-public .lead-form-upload-native {
    height: 1px;
    left: -100vw;
    opacity: 0;
    position: fixed;
    top: 0;
    width: 1px;
}

@media (max-width: 760px) {
    .lead-forms-shell .module-page-header,
    .lead-forms-shell .grid.two-col {
        grid-template-columns: 1fr;
    }

    .lead-forms-shell .module-action-bar .btn,
    .lead-forms-shell .action-bar .btn,
    .lead-forms-shell .inline-form,
    .lead-forms-shell .inline-form .btn,
    .lead-forms-shell .stacked-form > .btn,
    .lead-forms-shell button[data-copy],
    .public-shell.lead-form-public button[type="submit"] {
        width: 100%;
    }

    .lead-forms-shell .table-responsive table {
        min-width: 680px;
    }

    .public-shell.lead-form-public .card {
        border-radius: 8px;
        padding: .9rem;
    }
}

/* ============================================================
   Scheduling Revamp V4 — Calendar Views + Workspace
   ============================================================ */

/* View switcher */
.scheduling-view-switcher { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin: 0 0 1rem; }
.scheduling-view-switcher a { padding: 0.35rem 0.9rem; border-radius: 99px; border: 1px solid #d8e0ea; background: #f8fafc; color: #374151; text-decoration: none; font-size: 0.875rem; transition: background 0.15s, border-color 0.15s; }
.scheduling-view-switcher a:hover { background: #e5edf8; border-color: #93c5fd; }
.scheduling-view-switcher a.active { background: #2563eb; color: #fff; border-color: #2563eb; }
.scheduling-view-switcher a.btn { margin-left: auto; }
.scheduling-view-switcher.is-mobile-calendar-tabs { display: none; }

/* Calendar navigation */
.calendar-nav, .workspace-nav { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 1rem; }
.scheduling-calendar-shell { display: grid; gap: 1rem; }
.scheduling-calendar-command-bar { align-items: end; background: #fff; border: 1px solid #dbe4ee; border-radius: 8px; display: grid; gap: .7rem; grid-template-columns: minmax(180px, .75fr) minmax(240px, 1fr) minmax(240px, 1fr) auto; margin-bottom: .25rem; padding: .75rem; }
.scheduling-calendar-command-main { display: grid; gap: .15rem; min-width: 0; }
.scheduling-calendar-command-main strong { color: #17233a; font-size: 1rem; overflow-wrap: anywhere; }
.calendar-filter-summary { color: #64748b; font-size: .74rem; font-weight: 800; }
.calendar-filter-summary.is-filtered { color: #1d4ed8; }
.scheduling-calendar-command-bar .scheduling-view-switcher,
.scheduling-calendar-command-bar .calendar-nav,
.scheduling-calendar-command-bar .calendar-arrange-toolbar { margin: 0; }
.scheduling-calendar-command-bar .scheduling-view-switcher a.btn { margin-left: 0; }
.calendar-arrange-toolbar { align-items: center; display: flex; flex-wrap: wrap; gap: .35rem; justify-content: flex-end; }
.calendar-arrange-toggle { align-items: center; background: #f8fbff; border: 1px solid #dbe4ee; border-radius: 8px; color: #334155; display: inline-flex; font-size: .82rem; font-weight: 900; gap: .35rem; min-height: 34px; padding: .35rem .55rem; white-space: nowrap; }
.calendar-arrange-toolbar [data-calendar-layout-reset] { display: none; }
.scheduling-calendar-shell[data-calendar-arranging="true"] .calendar-arrange-toolbar [data-calendar-layout-reset] { display: inline-flex; }
.scheduling-calendar-primary { min-width: 0; }
.calendar-module-board { display: grid; gap: .75rem; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: .25rem; }
.calendar-module-panel { background: #fff; border: 1px solid #dbe4ee; border-radius: 8px; display: grid; gap: .55rem; min-width: 0; padding: .75rem; }
.calendar-module-size-full { grid-column: 1 / -1; }
.calendar-module-size-half { grid-column: span 2; }
.calendar-module-size-quarter { grid-column: span 1; }
.calendar-module-heading { align-items: center; display: flex; gap: .75rem; justify-content: space-between; min-width: 0; }
.calendar-module-heading h2 { color: #17233a; font-size: .98rem; margin: 0; overflow-wrap: anywhere; }
.calendar-module-body { color: #334155; display: grid; gap: .55rem; min-width: 0; }
.calendar-module-body p { margin: 0; }
.calendar-module-controls { display: none; flex-wrap: wrap; gap: .25rem; justify-content: flex-end; }
.scheduling-calendar-shell[data-calendar-arranging="true"] .calendar-module-controls { display: flex; }
.calendar-module-collapsed .calendar-module-body { display: none; }
.calendar-legend-grid { display: grid; gap: .4rem; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.calendar-legend-grid span { align-items: center; background: #f8fbff; border: 1px solid #e2e8f0; border-radius: 8px; color: #334155; display: flex; font-size: .82rem; font-weight: 900; gap: .35rem; min-width: 0; padding: .45rem .55rem; }
.calendar-legend-swatch { border-radius: 999px; display: inline-block; flex: 0 0 .72rem; height: .72rem; width: .72rem; }
.calendar-legend-swatch.status { background: #22c55e; }
.calendar-legend-swatch.manual { background: #2563eb; }
.calendar-legend-swatch.team { background: #64748b; }
.calendar-legend-swatch.warning { background: #f59e0b; }
.calendar-guidance-list { display: grid; gap: .55rem; }
.calendar-guidance-list strong { color: #17233a; font-size: .86rem; }
.calendar-filter-form { display: grid; gap: .6rem; grid-template-columns: repeat(4, minmax(0, 1fr)) auto; }
.calendar-filter-form label { color: #334155; display: grid; font-size: .76rem; font-weight: 900; gap: .25rem; min-width: 0; }
.calendar-filter-form select { min-width: 0; width: 100%; }
.calendar-filter-actions { align-items: end; display: flex; flex-wrap: wrap; gap: .35rem; }
.calendar-filter-form p { color: #64748b; font-size: .78rem; grid-column: 1 / -1; line-height: 1.35; }
.calendar-selected-day-panel { display: grid; gap: .7rem; }
.calendar-selected-day-metrics { display: grid; gap: .45rem; grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); }
.calendar-selected-day-metrics span { background: #f8fbff; border: 1px solid #e2e8f0; border-radius: 8px; color: #334155; display: grid; gap: .08rem; min-width: 0; padding: .5rem .6rem; }
.calendar-selected-day-metrics strong { color: #0f172a; font-size: 1rem; }
.calendar-selected-day-metrics small { color: #64748b; font-size: .7rem; }
.calendar-selected-warning-row,
.calendar-day-warning-row { display: flex; flex-wrap: wrap; gap: .25rem; min-width: 0; }
.calendar-selected-warning-row span,
.calendar-day-warning-row span,
.calendar-day-warning-row a { background: #fff7ed; border: 1px solid #fed7aa; border-radius: 999px; color: #9a3412; font-size: .68rem; font-weight: 900; padding: .12rem .4rem; text-decoration: none; }
.calendar-selected-day-grid { display: grid; gap: .75rem; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); }
.calendar-selected-day-grid h3 { color: #17233a; font-size: .84rem; margin: 0 0 .4rem; }
.calendar-selected-drilldown-grid { display: grid; gap: .55rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.calendar-selected-drilldown-card { background: #fff; border: 1px solid #dbe4ee; border-radius: 8px; display: grid; gap: .32rem; min-width: 0; padding: .65rem; }
.calendar-selected-drilldown-card > span { color: #64748b; font-size: .68rem; font-weight: 900; text-transform: uppercase; }
.calendar-selected-drilldown-card > strong { color: #17233a; font-size: 1rem; overflow-wrap: anywhere; }
.calendar-selected-drilldown-card p,
.calendar-selected-drilldown-card small { color: #526579; font-size: .76rem; line-height: 1.35; margin: 0; overflow-wrap: anywhere; }
.calendar-selected-mini-list { display: grid; gap: .28rem; min-width: 0; }
.calendar-selected-mini-list a,
.calendar-selected-mini-list span { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 7px; color: #334155; display: grid; font-size: .74rem; gap: .08rem; min-width: 0; padding: .34rem .42rem; text-decoration: none; }
.calendar-selected-mini-list strong { color: #17233a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.calendar-selected-mini-list span span,
.calendar-selected-mini-list a span { color: #64748b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.calendar-selected-stop-list,
.calendar-selected-route-list { display: grid; gap: .35rem; min-width: 0; }
.calendar-selected-stop-list a,
.calendar-selected-route-list a,
.calendar-selected-route-list span { background: #f8fbff; border: 1px solid #e2e8f0; border-radius: 8px; color: #334155; display: grid; font-size: .78rem; gap: .12rem; min-width: 0; padding: .45rem .55rem; text-decoration: none; }
.calendar-selected-route-list a.is-ready { border-color: #bbf7d0; background: #f0fdf4; }
.calendar-selected-route-list a.is-needs_review { border-color: #fed7aa; background: #fff7ed; }
.calendar-selected-stop-list strong { color: #17233a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.calendar-selected-stop-list span { color: #64748b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Week calendar grid */
.calendar-week-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.5rem; margin-bottom: 1.5rem; }
.calendar-day-cell { display: block; min-height: 120px; padding: 0.75rem; border: 1px solid #d8e0ea; border-radius: 12px; background: #fff; text-decoration: none; color: #374151; transition: box-shadow 0.15s, border-color 0.15s; }
.calendar-day-cell[role="link"] { cursor: pointer; }
.calendar-day-cell:focus-visible { border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37, 99, 235, .18); outline: none; }
.calendar-week-day { display: grid; gap: .35rem; min-height: 190px; align-content: start; }
.calendar-day-cell:hover { border-color: #3b82f6; box-shadow: 0 4px 12px rgba(59, 130, 246, 0.12); }
.calendar-day-today { border-color: #2563eb; background: #eff6ff; }
.calendar-day-selected { border-color: #16a34a; box-shadow: inset 0 0 0 2px rgba(22, 163, 74, .22); }
.calendar-day-overdue { border-left: 3px solid #ef4444; }
.calendar-day-blank { background: #f9fafb; border-color: #edf2f7; pointer-events: none; }
.calendar-day-label, .calendar-day-num { display: block; font-weight: 600; font-size: 0.9rem; margin-bottom: 0.35rem; color: #1e3a5f; }
.calendar-group-count, .calendar-job-count, .calendar-minutes, .calendar-employees, .calendar-empty-day { display: block; font-size: 0.78rem; color: #6b7280; margin-top: 0.15rem; }
.calendar-job-count { color: #2563eb; font-weight: 500; }
.calendar-overdue-flag { display: inline-block; color: #ef4444; font-size: 0.75rem; margin-top: 0.2rem; }

/* Month calendar grid */
.calendar-month-header { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; margin-bottom: 2px; }
.calendar-month-header span { text-align: center; font-size: 0.78rem; font-weight: 600; color: #6b7280; padding: 0.35rem 0; }
.calendar-month-body { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }
.calendar-month-body .calendar-day-cell { min-height: 70px; padding: 0.4rem; font-size: 0.78rem; border-radius: 8px; }
.calendar-month-grid-v2 .calendar-month-body { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.calendar-month-day { align-content: start; display: grid; gap: .35rem; min-height: 148px; overflow: hidden; }
.calendar-day-outside-month { background: #f8fafc; color: #94a3b8; }
.calendar-day-top { align-items: center; display: flex; justify-content: space-between; min-height: 1.4rem; }
.calendar-day-num { color: #0f172a; font-weight: 900; text-decoration: none; }
.calendar-day-metrics { display: flex; flex-wrap: wrap; gap: .2rem; min-height: 1.25rem; }
.calendar-day-metrics span { background: #eef2ff; border-radius: 999px; color: #334155; font-size: .66rem; font-weight: 800; padding: .08rem .34rem; }
.calendar-work-order-list { display: grid; gap: .28rem; min-width: 0; }
.calendar-work-order-pill { background: #fff; border: 1px solid #d8e0ea; border-radius: .35rem; color: #1f2937; cursor: pointer; display: grid; gap: .1rem; min-height: 2.7rem; min-width: 0; padding: .22rem .28rem .28rem; text-align: left; width: 100%; }
.calendar-work-order-pill:hover { border-color: #2563eb; box-shadow: 0 4px 12px rgba(37,99,235,.14); }
.calendar-work-order-pill.is-missing-crew { border-color: #f59e0b; }
.calendar-color-bar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); height: .34rem; overflow: hidden; border-radius: .18rem; }
.calendar-color-bar i:nth-child(1) { background: var(--status-color, #22c55e); }
.calendar-color-bar i:nth-child(2) { background: var(--manual-color, #22c55e); }
.calendar-color-bar i:nth-child(3) { background: var(--team-color, #64748b); }
.calendar-pill-time { color: #475569; font-size: .64rem; font-weight: 900; line-height: 1.1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.calendar-pill-title { color: #0f172a; font-size: .72rem; font-weight: 900; line-height: 1.1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.calendar-pill-customer { color: #64748b; font-size: .68rem; line-height: 1.1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.calendar-more-link { color: #2563eb; font-size: .7rem; font-weight: 800; text-decoration: none; }
.calendar-work-order-dialog { border: 0; border-radius: .55rem; box-shadow: 0 28px 70px rgba(15,23,42,.32); max-width: min(720px, calc(100vw - 2rem)); padding: 1rem; width: 680px; }
.calendar-work-order-dialog::backdrop { background: rgba(15,23,42,.55); }
.calendar-dialog-header { align-items: start; border-bottom: 1px solid #e2e8f0; display: flex; gap: 1rem; justify-content: space-between; margin-bottom: .75rem; padding-bottom: .75rem; }
.calendar-dialog-header h2 { font-size: 1.05rem; margin: 0 .5rem .2rem 0; }
.calendar-dialog-header p { color: #475569; margin: 0; }
.calendar-dialog-color-row { display: grid; gap: .35rem; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: .5rem 0 .75rem; }
.calendar-dialog-color-row span { border-radius: .3rem; color: #fff; font-size: .74rem; font-weight: 900; padding: .38rem .45rem; }
.calendar-dialog-color-row span:nth-child(1) { background: var(--status-color, #22c55e); }
.calendar-dialog-color-row span:nth-child(2) { background: var(--manual-color, #22c55e); }
.calendar-dialog-color-row span:nth-child(3) { background: var(--team-color, #64748b); }
.calendar-dialog-details { display: grid; gap: .45rem .85rem; grid-template-columns: minmax(110px, .35fr) minmax(0, 1fr); margin: .75rem 0; }
.calendar-dialog-details dt { color: #64748b; font-size: .72rem; font-weight: 900; text-transform: uppercase; }
.calendar-dialog-details dd { margin: 0; overflow-wrap: anywhere; }
.calendar-month-body .calendar-day-num { font-size: 0.82rem; margin-bottom: 0.15rem; }
.employee-checkbox-group { border: 1px solid #d8e0ea; border-radius: 8px; display: grid; gap: .35rem .55rem; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); margin: .35rem 0; max-height: none; overflow: visible; padding: .55rem .65rem; }
.employee-checkbox-group legend { color: #334155; font-size: .78rem; font-weight: 900; padding: 0 .25rem; }
.employee-checkbox-group small,
.employee-checkbox-group .muted { grid-column: 1 / -1; }
.employee-checkbox { align-items: center; display: flex; gap: .42rem; line-height: 1.25; min-height: 1.7rem; min-width: 0; }
.employee-checkbox input { flex: 0 0 auto; }
.employee-display-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.employee-extra-list { border-top: 1px solid #dbe4ee; grid-column: 1 / -1; margin-top: .25rem; padding-top: .35rem; }
.employee-extra-list summary { color: #334155; cursor: pointer; font-size: .78rem; font-weight: 900; }
.employee-extra-grid { display: grid; gap: .35rem .55rem; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); margin-top: .35rem; }
.route-role-help { align-items: center; background: #fff; border: 1px solid #cbd5e1; border-radius: 999px; color: #334155; cursor: help; display: inline-flex; font-size: .68rem; font-weight: 900; justify-content: center; line-height: 1; min-height: 1rem; min-width: 1rem; vertical-align: middle; }
.route-group-edit-panel { border-top: 1px solid #e2e8f0; margin-top: .55rem; padding-top: .45rem; }
.route-group-edit-panel summary { cursor: pointer; font-weight: 900; }
.route-group-edit-panel[open] { background: #f8fafc; border: 1px solid #dbe4ee; border-radius: 8px; margin-top: .7rem; padding: .65rem; }
.route-group-edit-panel[open] summary { margin-bottom: .55rem; }
.route-group-edit-form { display: grid; gap: .55rem; }
.route-group-edit-grid { align-items: start; display: grid; gap: .65rem; grid-template-columns: minmax(0, 1fr); }
.route-group-edit-fields { display: grid; gap: .5rem; grid-template-columns: repeat(2, minmax(0, 1fr)); min-width: 0; }
.route-group-edit-fields label { min-width: 0; }
.route-group-edit-notes, .route-group-edit-color { grid-column: 1 / -1; }
.route-group-edit-employees { grid-template-columns: repeat(3, minmax(8.5rem, 1fr)); max-height: none; min-width: 0; overflow: visible; }
.route-group-edit-actions { align-items: center; display: flex; flex-wrap: wrap; gap: .45rem; justify-content: space-between; }
.route-group-edit-actions span { color: #526579; font-size: .78rem; line-height: 1.35; }
.route-color-field { display: grid; gap: .35rem; }
.color-swatch-row { display: flex; flex-wrap: wrap; gap: .32rem; }
.color-swatch { cursor: pointer; display: inline-flex; }
.color-swatch input { inline-size: 1px; opacity: 0; position: absolute; }
.color-swatch span { background: var(--swatch-color, #22c55e); border: 2px solid #fff; border-radius: 999px; box-shadow: 0 0 0 1px #cbd5e1; display: inline-block; height: 1.35rem; width: 1.35rem; }
.color-swatch input:checked + span { box-shadow: 0 0 0 2px #2563eb; }

/* Workspace layout */
.workspace-layout-v4 { display: grid; grid-template-columns: minmax(340px, 1.5fr) minmax(300px, 1fr); gap: 1rem; align-items: start; margin-top: 1rem; }
.workspace-panel { background: #fff; border: 1px solid #d8e0ea; border-radius: 16px; box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05); padding: 1rem; min-width: 0; }
.scheduling-readiness-panel { background: #f8fbff; border: 1px solid #d8e0ea; border-radius: 12px; display: grid; gap: .85rem; margin: 1rem 0; padding: 1rem; }
.scheduling-readiness-header { align-items: start; display: grid; gap: .75rem; grid-template-columns: minmax(0, 1fr) auto; }
.scheduling-readiness-header h2 { color: #17233a; font-size: 1.08rem; margin: .1rem 0 .3rem; }
.scheduling-readiness-header p { color: #42566d; margin: 0; }
.scheduling-readiness-header > strong { align-items: center; background: #fff; border: 1px solid #dbe4ee; border-radius: 999px; display: inline-flex; font-size: .82rem; min-height: 36px; padding: .35rem .75rem; white-space: nowrap; }
.scheduling-readiness-grid { display: grid; gap: .65rem; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.scheduling-readiness-card { background: #fff; border: 1px solid #dbe4ee; border-radius: 8px; display: grid; gap: .22rem; min-width: 0; padding: .75rem; }
.scheduling-readiness-card span { color: #526579; font-size: .7rem; font-weight: 900; letter-spacing: 0; text-transform: uppercase; }
.scheduling-readiness-card strong { color: #17233a; display: block; font-size: 1.05rem; overflow-wrap: anywhere; }
.scheduling-readiness-card small { color: #526579; line-height: 1.35; }
.scheduling-readiness-card.is-ready { border-color: #a9dfbd; }
.scheduling-readiness-card.is-warning { border-color: #f1d28a; }
.scheduling-readiness-card.is-danger { border-color: #f4b4b4; }
.scheduling-readiness-card.is-muted { border-color: #d8e3ea; }
.scheduling-dispatch-confidence-panel,
.scheduling-map-provider-readiness,
.mobile-dispatch-coverage-strip {
    background: #fff;
    border: 1px solid #d8e0ea;
    border-radius: 12px;
    display: grid;
    gap: .78rem;
    margin: 1rem 0;
    min-width: 0;
    overflow-wrap: anywhere;
    padding: 1rem;
}
.scheduling-map-provider-readiness {
    background: #f8fbff;
}
.scheduling-dispatch-confidence-heading,
.scheduling-dispatch-section-heading {
    align-items: start;
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    justify-content: space-between;
}
.scheduling-dispatch-confidence-heading h2,
.scheduling-dispatch-confidence-panel h3 {
    color: #17233a;
    font-size: 1.05rem;
    margin: .1rem 0 .25rem;
}
.scheduling-dispatch-confidence-heading p,
.scheduling-dispatch-section-heading span {
    color: #526579;
    margin: 0;
}
.scheduling-dispatch-confidence-grid,
.scheduling-dispatch-link-grid,
.mobile-dispatch-coverage-links {
    display: grid;
    gap: .55rem;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}
.scheduling-dispatch-confidence-card,
.scheduling-dispatch-confidence-link {
    background: #f8fafc;
    border: 1px solid #dbe4ee;
    border-left: 4px solid #94a3b8;
    border-radius: 8px;
    color: inherit;
    display: grid;
    gap: .22rem;
    min-width: 0;
    overflow-wrap: anywhere;
    padding: .65rem;
    text-decoration: none;
}
.scheduling-dispatch-confidence-card.is-ready {
    border-left-color: #059669;
}
.scheduling-dispatch-confidence-card.is-warning {
    border-left-color: #d97706;
}
.scheduling-dispatch-confidence-card.is-neutral {
    border-left-color: #2563eb;
}
.scheduling-dispatch-confidence-card strong,
.scheduling-dispatch-confidence-link strong {
    color: #17233a;
    font-size: .86rem;
}
.scheduling-dispatch-confidence-card b {
    color: #0f172a;
    font-size: .96rem;
}
.scheduling-dispatch-confidence-card small,
.scheduling-dispatch-confidence-link span {
    color: #526579;
    line-height: 1.35;
}
.scheduling-dispatch-confidence-link:hover,
.scheduling-dispatch-confidence-link:focus {
    border-color: #2563eb;
    box-shadow: 0 8px 20px rgba(37, 99, 235, .12);
    outline: none;
}
.mobile-dispatch-coverage-strip {
    margin: 0;
}
.mobile-dispatch-coverage-strip > div:first-child {
    display: grid;
    gap: .16rem;
}
.field-tech-route-preview { border-top: 1px solid #dbe4ee; display: grid; gap: .65rem; padding-top: .75rem; }
.field-tech-route-header h3 { color: #17233a; font-size: 1rem; margin: .1rem 0 .25rem; }
.field-tech-route-header p { color: #526579; margin: 0; }
.field-tech-route-list { display: grid; gap: .55rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.field-tech-route-stop { background: #fff; border: 1px solid #dbe4ee; border-radius: 8px; display: grid; gap: .4rem; min-width: 0; padding: .65rem; }
.field-tech-route-stop div:first-child { display: grid; gap: .15rem; grid-template-columns: minmax(0, 1fr); }
.field-tech-route-stop p { color: #526579; margin: 0; overflow-wrap: anywhere; }
.field-tech-route-actions { display: flex; flex-wrap: wrap; gap: .35rem; }
.field-tech-route-header-row { align-items: center; display: flex; flex-wrap: wrap; gap: .45rem; justify-content: space-between; }
.field-tech-route-meta { font-weight: 850; }
.field-tech-route-service { color: #334155 ; font-weight: 750; }
.field-tech-route-address { font-size: .84rem; }
.scheduling-route-sheet-shell { display: grid; gap: 1rem; }
.route-sheet-safety { background: #f8fbff; border: 1px solid #dbe4ee; border-radius: 8px; color: #334155; padding: .75rem .85rem; }
.route-sheet-filter-panel { background: #fff; border: 1px solid #dbe4ee; border-radius: 8px; display: grid; gap: .45rem; padding: .75rem; }
.route-sheet-filter-panel p { color: #64748b; margin: 0; }
.route-sheet-filter-form { align-items: end; display: grid; gap: .65rem; grid-template-columns: minmax(180px, 1fr) minmax(180px, 1fr) auto; }
.route-sheet-filter-form label { display: grid; gap: .25rem; margin: 0; }
.route-sheet-filter-actions { display: flex; flex-wrap: wrap; gap: .35rem; }
.route-sheet-summary-grid { display: grid; gap: .65rem; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.route-sheet-metric { background: #fff; border: 1px solid #dbe4ee; border-radius: 8px; display: grid; gap: .2rem; padding: .75rem; }
.route-sheet-metric span { color: #526579; font-size: .7rem; font-weight: 900; letter-spacing: 0; text-transform: uppercase; }
.route-sheet-metric strong { color: #17233a; font-size: 1.08rem; overflow-wrap: anywhere; }
.route-sheet-metric small { color: #64748b; line-height: 1.35; }
.route-sheet-group-list { display: grid; gap: 1rem; }
.route-sheet-group { background: #fff; border: 1px solid #dbe4ee; border-radius: 8px; display: grid; gap: .75rem; padding: 1rem; }
.route-sheet-group-heading { align-items: flex-start; display: flex; flex-wrap: wrap; gap: .75rem; justify-content: space-between; }
.route-sheet-group-heading h2 { color: #17233a; font-size: 1.15rem; margin: .1rem 0 .2rem; }
.route-sheet-group-heading p { color: #526579; margin: 0; }
.route-sheet-stop-list { display: grid; gap: .65rem; }
.route-sheet-stop-card { border: 1px solid #e2e8f0; border-radius: 8px; display: grid; gap: .65rem; grid-template-columns: 90px minmax(180px, 1.2fr) minmax(180px, 1.1fr); padding: .75rem; }
.route-sheet-stop-number { align-items: center; background: #ecfdf5; border: 1px solid #bbf7d0; border-radius: 8px; color: #166534; display: flex; font-weight: 950; justify-content: center; min-height: 44px; text-align: center; }
.route-sheet-stop-main h3 { font-size: 1rem; margin: 0 0 .15rem; }
.route-sheet-stop-main p,
.route-sheet-stop-main small,
.route-sheet-stop-service p { margin: 0; overflow-wrap: anywhere; }
.route-sheet-stop-main small { color: #64748b; display: block; }
.route-sheet-stop-meta { display: grid; gap: .35rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.route-sheet-stop-meta span,
.route-sheet-note-grid span { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 6px; color: #334155; display: grid; font-size: .85rem; gap: .1rem; padding: .45rem .55rem; }
.route-sheet-stop-meta strong,
.route-sheet-note-grid strong,
.route-sheet-stop-service > strong { color: #64748b; font-size: .68rem; font-weight: 950; letter-spacing: 0; text-transform: uppercase; }
.route-sheet-stop-service { display: grid; gap: .4rem; grid-column: 2 / 4; }
.route-sheet-note-grid { display: grid; gap: .45rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.route-sheet-stop-actions { align-items: center; display: flex; flex-wrap: wrap; gap: .35rem; grid-column: 1 / -1; }
.route-sheet-stop-packet { display: grid; gap: 1rem; }
.route-stop-detail-grid { display: grid; gap: .65rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.route-stop-detail-grid article { background: #fff; border: 1px solid #dbe4ee; border-radius: 8px; display: grid; gap: .2rem; padding: .75rem; }
.route-stop-detail-grid span,
.route-stop-line-card p { color: #64748b; font-size: .68rem; font-weight: 950; letter-spacing: 0; text-transform: uppercase; }
.route-stop-detail-grid strong { color: #17233a; overflow-wrap: anywhere; }
.route-stop-detail-grid small { color: #64748b; overflow-wrap: anywhere; }
.route-stop-service-block,
.route-stop-line-section { background: #fff; border: 1px solid #dbe4ee; border-radius: 8px; display: grid; gap: .6rem; padding: .9rem; }
.route-stop-service-block h2,
.route-stop-line-section h2 { font-size: 1rem; margin: 0; }
.route-stop-service-block p { margin: 0; overflow-wrap: anywhere; }
.route-stop-line-grid { display: grid; gap: .55rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.route-stop-line-card { border: 1px solid #e2e8f0; border-radius: 8px; display: grid; gap: .2rem; padding: .65rem; }
.route-stop-line-card h3 { color: #17233a; font-size: .95rem; margin: 0; overflow-wrap: anywhere; }
.route-stop-line-card p { margin: 0; overflow-wrap: anywhere; }
.route-stop-line-card strong { color: #166534; }
.route-group-readiness { background: #f8fafc; border: 1px solid #dbe4ee; border-radius: 8px; display: grid; gap: .35rem; margin: .55rem 0; padding: .6rem; }
.route-group-readiness.is-ready { background: #f3fbf6; border-color: #a9dfbd; }
.route-group-readiness.is-needs_review { background: #fffaf0; border-color: #f1d28a; }
.route-group-readiness-chips { display: flex; flex-wrap: wrap; gap: .3rem; }
.route-group-readiness-chips span { background: #fff; border: 1px solid #d8e3ea; border-radius: 999px; color: #334155; font-size: .74rem; font-weight: 850; padding: .2rem .5rem; }
.route-ready-preview { background: #fffaf0; border: 1px solid #f1d28a; border-radius: 8px; display: grid; gap: .45rem; margin: .55rem 0; padding: .6rem; }
.route-ready-preview.is-ready { background: #f3fbf6; border-color: #a9dfbd; }
.route-ready-preview strong { color: #17233a; font-size: .92rem; }
.route-ready-preview p { color: #475569; font-size: .82rem; line-height: 1.35; margin: .1rem 0 0; }
.route-ready-preview small { color: #526579; font-size: .76rem; line-height: 1.3; }
.route-ready-preview-chips,
.route-ready-preview-warnings { display: flex; flex-wrap: wrap; gap: .3rem; }
.route-ready-preview-chips span,
.route-ready-preview-warnings span { background: #fff; border: 1px solid #d8e3ea; border-radius: 999px; color: #334155; font-size: .74rem; font-weight: 850; padding: .18rem .48rem; }
.route-ready-preview.is-ready .route-ready-preview-chips span { border-color: #b7dfc7; color: #166534; }
.route-ready-preview-warnings span { border-color: #f1d28a; color: #854d0e; }
.route-readiness-drilldown { border-top: 1px solid #e2e8f0; margin-top: .25rem; padding-top: .35rem; }
.route-readiness-drilldown summary { cursor: pointer; font-size: .82rem; font-weight: 900; }
.route-readiness-detail { display: grid; gap: .25rem; padding: .35rem 0; }
.route-readiness-detail strong { color: #334155; font-size: .78rem; }
.route-readiness-detail ul { display: grid; gap: .3rem; list-style: none; margin: 0; padding: 0; }
.route-readiness-detail li { background: #fff; border: 1px solid #e2e8f0; border-radius: 6px; display: grid; gap: .12rem; padding: .4rem .5rem; }
.route-readiness-detail small { color: #64748b; line-height: 1.35; }
.dispatch-planning-board { background: #fff; border: 1px solid #d8e0ea; border-radius: 12px; display: grid; gap: .85rem; margin: 1rem 0; padding: 1rem; }
.dispatch-planning-board.is-overbooked { border-color: #f4b4b4; }
.dispatch-planning-board.is-near_capacity { border-color: #f1d28a; }
.dispatch-planning-header { align-items: start; display: grid; gap: .75rem; grid-template-columns: minmax(0, 1fr) auto; }
.dispatch-planning-header h2 { color: #17233a; font-size: 1.08rem; margin: .1rem 0 .3rem; }
.dispatch-planning-header p { color: #42566d; margin: 0; }
.dispatch-planning-header > strong { align-items: center; background: #f8fbff; border: 1px solid #dbe4ee; border-radius: 999px; display: inline-flex; font-size: .82rem; min-height: 36px; padding: .35rem .75rem; white-space: nowrap; }
.dispatch-planning-metrics { display: grid; gap: .65rem; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.dispatch-planning-metric { background: #f8fafc; border: 1px solid #dbe4ee; border-radius: 8px; display: grid; gap: .2rem; min-width: 0; padding: .7rem; }
.dispatch-planning-metric span, .dispatch-queue-card span { color: #526579; font-size: .7rem; font-weight: 900; letter-spacing: 0; text-transform: uppercase; }
.dispatch-planning-metric strong, .dispatch-queue-card strong { color: #17233a; display: block; font-size: 1.05rem; overflow-wrap: anywhere; }
.dispatch-planning-metric small, .dispatch-queue-card small { color: #526579; line-height: 1.35; overflow-wrap: anywhere; }
.dispatch-week-strip { display: grid; gap: .45rem; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.dispatch-week-day { background: #f8fbff; border: 1px solid #dbe4ee; border-radius: 8px; color: #17233a; display: grid; gap: .18rem; min-height: 6.25rem; min-width: 0; padding: .55rem; text-decoration: none; }
.dispatch-week-day.is-selected { border-color: #2563eb; box-shadow: inset 0 0 0 1px #2563eb; }
.dispatch-week-day span { color: #526579; font-size: .72rem; font-weight: 900; text-transform: uppercase; }
.dispatch-week-day strong { font-size: .9rem; overflow-wrap: anywhere; }
.dispatch-week-day small { color: #526579; }
.dispatch-week-day em { color: #334155; font-size: .72rem; font-style: normal; font-weight: 900; margin-top: auto; }
.dispatch-section-heading { display: grid; gap: .18rem; }
.dispatch-section-heading h3 { color: #17233a; font-size: .98rem; margin: 0; }
.dispatch-section-heading p { color: #526579; margin: 0; }
.dispatch-overbooked-drilldown { background: #fff8f5; border: 1px solid #f4c7b4; border-radius: 8px; display: grid; gap: .65rem; padding: .75rem; }
.dispatch-overbooked-list { display: grid; gap: .45rem; }
.dispatch-overbooked-row { background: #fff; border: 1px solid #f3d6c9; border-radius: 8px; display: grid; gap: .35rem; min-width: 0; padding: .65rem; }
.dispatch-overbooked-row > strong { color: #7f1d1d; overflow-wrap: anywhere; }
.dispatch-overbooked-row div { align-items: baseline; display: flex; flex-wrap: wrap; gap: .35rem .55rem; }
.dispatch-overbooked-row span { color: #526579; overflow-wrap: anywhere; }
.dispatch-queue-tabs { display: flex; flex-wrap: wrap; gap: .35rem; }
.dispatch-queue-tab { align-items: center; background: #f8fafc; border: 1px solid #dbe4ee; border-radius: 999px; color: #334155; display: inline-flex; font-size: .78rem; font-weight: 850; gap: .28rem; min-height: 36px; padding: .32rem .65rem; text-decoration: none; }
.dispatch-queue-tab.is-active { background: #eaf4ef; border-color: #72c799; color: #14532d; }
.dispatch-queue-tab strong { color: inherit; font-size: .78rem; }
.dispatch-queue-grid { display: grid; gap: .65rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dispatch-queue-card { background: #fff; border: 1px solid #dbe4ee; border-radius: 8px; display: grid; gap: .42rem; min-width: 0; padding: .75rem; }
.dispatch-queue-card.is-active { border-color: #72c799; box-shadow: inset 0 0 0 1px #72c799; }
.dispatch-queue-card > div { align-items: start; display: grid; gap: .35rem; grid-template-columns: minmax(0, 1fr) auto; }
.dispatch-queue-card p { color: #42566d; margin: 0; }
.dispatch-queue-card .btn { justify-self: start; }
.dispatch-route-fit { border-top: 1px solid #dbe4ee; display: grid; gap: .65rem; padding-top: .75rem; }
.dispatch-route-fit-grid { display: grid; gap: .65rem; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.dispatch-route-fit-card { background: #f8fbff; border: 1px solid #dbe4ee; border-radius: 8px; display: grid; gap: .35rem; min-width: 0; padding: .65rem; }
.dispatch-route-fit-card > div:first-child { align-items: baseline; display: flex; gap: .4rem; }
.dispatch-route-fit-card > div:first-child strong { color: #14532d; font-size: 1.15rem; }
.dispatch-route-fit-card > div:first-child span { color: #526579; font-size: .72rem; font-weight: 900; text-transform: uppercase; }
.dispatch-route-fit-card h3 { font-size: .95rem; margin: 0; overflow-wrap: anywhere; }
.dispatch-route-fit-card p { color: #42566d; margin: 0; overflow-wrap: anywhere; }
.dispatch-route-fit-card small { color: #526579; }
.dispatch-route-fit-reasons { display: flex; flex-wrap: wrap; gap: .25rem; }
.dispatch-route-fit-reasons span { background: #fff; border: 1px solid #d8e3ea; border-radius: 999px; color: #334155; font-size: .72rem; padding: .12rem .45rem; }
.dispatch-area-row { display: flex; flex-wrap: wrap; gap: .35rem; }
.dispatch-area-chip { background: #f8fafc; border: 1px solid #dbe4ee; border-radius: 999px; color: #334155; font-size: .78rem; padding: .28rem .58rem; }
.workspace-left-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.75rem; }
.workspace-left-header h2 { margin: 0; }
.workspace-overlay-toggle { display: flex; gap: 0.75rem; flex-wrap: wrap; font-size: 0.875rem; }

/* Scheduling calendar map */
.scheduling-calendar-map-shell { display: grid; gap: 1rem; }
.calendar-map-topbar { align-items: center; background: #fff; border: 1px solid #dbe4ee; border-radius: 10px; display: grid; gap: .75rem; grid-template-columns: minmax(0, 1fr) auto; padding: .85rem; }
.calendar-map-topbar strong { color: #17233a; display: block; font-size: 1.05rem; margin-top: .12rem; overflow-wrap: anywhere; }
.calendar-map-date-strip { align-items: center; display: grid; gap: .55rem; grid-template-columns: auto minmax(0, 1fr) auto; }
.calendar-map-week-days { display: grid; gap: .35rem; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.calendar-map-day { background: #fff; border: 1px solid #dbe4ee; border-radius: 8px; color: #334155; display: grid; gap: .1rem; min-height: 3.25rem; padding: .42rem; text-align: center; text-decoration: none; }
.calendar-map-day.is-active { background: #eaf4ef; border-color: #72c799; color: #14532d; box-shadow: inset 0 0 0 1px #72c799; }
.calendar-map-day span { color: #64748b; font-size: .68rem; font-weight: 900; text-transform: uppercase; }
.calendar-map-day strong { font-size: .88rem; }
.calendar-map-filter-bar { align-items: end; background: #f8fafc; border: 1px solid #dbe4ee; border-radius: 10px; display: grid; gap: .6rem; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); padding: .75rem; }
.calendar-map-filter-bar label { color: #475569; display: grid; font-size: .76rem; font-weight: 850; gap: .2rem; }
.calendar-map-metrics { display: grid; gap: .65rem; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.calendar-map-metrics span { background: #fff; border: 1px solid #dbe4ee; border-radius: 8px; display: grid; gap: .1rem; min-width: 0; padding: .65rem; }
.calendar-map-metrics strong { color: #17233a; font-size: 1.1rem; }
.calendar-map-metrics small { color: #526579; font-size: .68rem; font-weight: 900; text-transform: uppercase; }
.calendar-map-metrics em { color: #64748b; font-size: .76rem; font-style: normal; overflow-wrap: anywhere; }
.calendar-map-legend-panel,
.calendar-map-warning-panel,
.calendar-map-suggestions,
.calendar-map-address-review { background: #fff; border: 1px solid #dbe4ee; border-radius: 10px; display: grid; gap: .55rem; min-width: 0; padding: .75rem; }
.calendar-map-legend-panel { grid-template-columns: minmax(160px, .32fr) minmax(0, 1fr); align-items: center; }
.calendar-map-legend-panel strong,
.calendar-map-warning-panel strong,
.calendar-map-suggestions strong,
.calendar-map-address-review strong { color: #17233a; overflow-wrap: anywhere; }
.calendar-map-legend-row,
.calendar-map-warning-list,
.calendar-map-suggestion-list { display: flex; flex-wrap: wrap; gap: .35rem; min-width: 0; }
.calendar-map-route-chip,
.calendar-map-warning-chip { align-items: center; background: #f8fafc; border: 1px solid #dbe4ee; border-radius: 999px; color: #334155; display: inline-flex; font-size: .74rem; font-weight: 850; gap: .35rem; min-height: 30px; padding: .16rem .55rem; text-decoration: none; }
.calendar-map-route-chip i { background: var(--route-color, #2563eb); border-radius: 999px; display: inline-block; height: .7rem; width: .7rem; }
.calendar-map-route-chip.is-active { background: #eff6ff; border-color: #93c5fd; color: #1d4ed8; }
.calendar-map-route-chip.is-scheduled i { --route-color: #22c55e; }
.calendar-map-route-chip.is-unscheduled i { --route-color: #334155; }
.calendar-map-warning-panel { background: #fffaf0; border-color: #fde68a; }
.calendar-map-warning-panel.is-clear,
.calendar-map-address-review.is-clear { background: #f8fafc; border-color: #dbe4ee; }
.calendar-map-warning-panel p,
.calendar-map-suggestions p,
.calendar-map-address-review p { color: #526579; margin: 0; overflow-wrap: anywhere; }
.calendar-map-warning-chip { align-items: flex-start; border-radius: 8px; display: grid; gap: .08rem; min-width: 150px; }
.calendar-map-warning-chip span { color: #92400e; font-size: .66rem; text-transform: uppercase; }
.calendar-map-warning-chip strong { font-size: .78rem; }
.calendar-map-suggestion-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.calendar-map-suggestion-list article { background: #f8fafc; border: 1px solid #dbe4ee; border-radius: 8px; display: grid; gap: .18rem; min-width: 0; padding: .55rem; }
.calendar-map-suggestion-list span,
.calendar-map-suggestion-list small { color: #526579; overflow-wrap: anywhere; }
.calendar-map-layout { align-items: start; display: grid; gap: 1rem; grid-template-columns: minmax(320px, .9fr) minmax(0, 1.35fr); }
.calendar-map-list-panel,
.calendar-map-canvas-panel { background: #fff; border: 1px solid #dbe4ee; border-radius: 10px; min-width: 0; padding: .85rem; }
.calendar-map-list-panel { max-height: 760px; overflow-y: auto; }
.calendar-map-list-heading { display: grid; gap: .18rem; margin-bottom: .65rem; }
.calendar-map-list-heading h2,
.calendar-map-canvas-heading h2 { color: #17233a; font-size: 1.02rem; margin: 0; }
.calendar-map-list-heading p,
.calendar-map-canvas-heading p { color: #526579; margin: 0; }
.calendar-map-list-tabs { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .75rem; }
.calendar-map-list-tabs a { align-items: center; background: #f8fafc; border: 1px solid #dbe4ee; border-radius: 999px; color: #334155; display: inline-flex; font-size: .76rem; font-weight: 850; gap: .25rem; min-height: 32px; padding: .2rem .55rem; text-decoration: none; }
.calendar-map-list-tabs a.is-active { background: #eaf4ef; border-color: #72c799; color: #14532d; }
.calendar-map-list-tabs strong { color: inherit; font-size: .76rem; }
.calendar-map-list-section { display: grid; gap: .5rem; margin-top: .7rem; }
.calendar-map-list-section h3 { color: #17233a; font-size: .9rem; margin: 0; }
.calendar-map-work-card { align-items: start; background: #fff; border: 1px solid #dbe4ee; border-left: 4px solid #22c55e; border-radius: 8px; display: grid; gap: .55rem; grid-template-columns: auto minmax(0, 1fr); min-width: 0; padding: .6rem; }
.calendar-map-work-card.is-unscheduled { border-left-color: #334155; }
.calendar-map-work-card.is-focused { border-color: #2563eb; box-shadow: 0 0 0 2px rgba(37, 99, 235, .16); }
.calendar-map-work-card.is-dimmed { opacity: .42; }
.calendar-map-work-card.needs-address-review { background: #fff7ed; border-color: #fed7aa; }
.calendar-map-order-badge { align-items: center; background: #22c55e; border-radius: 999px; color: #fff; display: inline-flex; font-size: .78rem; font-weight: 900; justify-content: center; min-height: 1.8rem; min-width: 1.8rem; padding: .1rem .45rem; }
.calendar-map-work-card.is-unscheduled .calendar-map-order-badge { background: #334155; }
.calendar-map-work-main { display: grid; gap: .2rem; min-width: 0; }
.calendar-map-work-main h3 { font-size: .9rem; margin: 0; overflow-wrap: anywhere; }
.calendar-map-work-main p { color: #334155; margin: 0; overflow-wrap: anywhere; }
.calendar-map-work-main small { color: #64748b; line-height: 1.3; overflow-wrap: anywhere; }
.calendar-map-work-meta { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .15rem; }
.calendar-map-work-meta span { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 999px; color: #475569; font-size: .72rem; padding: .12rem .42rem; }
.calendar-map-work-actions { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .25rem; }
.calendar-map-canvas-heading { align-items: center; display: grid; gap: .65rem; grid-template-columns: minmax(0, 1fr) auto; margin-bottom: .65rem; }
.calendar-route-map { min-height: 640px; }
.calendar-map-legend { display: flex; flex-wrap: wrap; gap: .35rem .5rem; align-items: center; }
.calendar-map-pin-badge { align-items: center; color: #17233a; display: flex; flex-direction: column; gap: .12rem; text-align: center; transform: translateY(0); transition: transform .15s ease, box-shadow .15s ease; }
.calendar-map-pin-order { align-items: center; background: var(--pin-color, #22c55e); border: 2px solid #fff; border-radius: 999px; box-shadow: 0 4px 12px rgba(15, 23, 42, .22); color: #fff; display: inline-flex; font-size: .82rem; font-weight: 900; justify-content: center; min-height: 2rem; min-width: 2rem; padding: .1rem .45rem; }
.calendar-map-pin-caption { background: #fff; border: 1px solid #dbe4ee; border-radius: 999px; color: #334155; display: block; font-size: .64rem; font-weight: 850; line-height: 1; max-width: 74px; overflow: hidden; padding: .16rem .36rem; text-overflow: ellipsis; white-space: nowrap; }
.calendar-map-pin.pin-focused .calendar-map-pin-badge { transform: translateY(-2px); }
.calendar-map-pin.pin-dimmed { opacity: .35; }

/* Leaflet workspace map */
.leaflet-workspace-map { border: 1px solid #d8e0ea; border-radius: 12px; min-height: 420px; width: 100%; }
.workspace-map-legend { font-size: 0.8rem; margin: 0.5rem 0 0.75rem; color: #6b7280; }
.pin-legend { font-size: 1.1rem; }
.pin-blue { color: #3b82f6; }
.pin-purple { color: #7c3aed; }
.pin-green { color: #22c55e; }
.pin-gray { color: #64748b; }
.pin-red { color: #ef4444; }
.pin-orange { color: #f97316; }
.workspace-map-date-form { align-items: end; background: #f8fafc; border: 1px solid #dbe4ee; border-radius: 8px; display: grid; gap: .5rem; grid-template-columns: minmax(140px, 1fr) minmax(150px, 1fr) auto minmax(180px, 1.5fr); margin: .65rem 0 .45rem; padding: .55rem; }
.workspace-map-date-form label { display: grid; gap: .2rem; font-size: .78rem; font-weight: 850; color: #475569; }
.workspace-map-date-form span { color: #526579; font-size: .78rem; line-height: 1.3; }
.workspace-map-date-form span[data-tone="success"] { color: #166534; }
.workspace-map-date-form span[data-tone="warning"] { color: #92400e; }
.workspace-map-date-form span[data-tone="error"] { color: #991b1b; }
.workspace-map-quick-filters { display: flex; flex-wrap: wrap; gap: .35rem; margin: .35rem 0 .55rem; }
.workspace-map-quick-filters a { align-items: center; background: #fff; border: 1px solid #d8e3ea; border-radius: 999px; color: #334155; display: inline-flex; font-size: .76rem; font-weight: 850; gap: .32rem; min-height: 1.75rem; padding: .2rem .52rem; text-decoration: none; }
.workspace-map-quick-filters a.is-active { background: #e0f2fe; border-color: #7dd3fc; color: #075985; }
.workspace-map-filter-count { align-items: center; background: #f1f5f9; border: 1px solid #dbe4ee; border-radius: 999px; color: #17233a; display: inline-flex; font-size: .7rem; justify-content: center; line-height: 1; min-width: 1.35rem; padding: .16rem .34rem; }
.workspace-map-quick-filters a.is-active .workspace-map-filter-count { background: #fff; border-color: #7dd3fc; color: #075985; }
.workspace-map-pin .pin-dragging, .workspace-map-pin.pin-dragging { opacity: .7; filter: drop-shadow(0 0 0.45rem rgba(37, 99, 235, .55)); }
.is-map-pin-drop-candidate { outline: 2px dashed #60a5fa; outline-offset: 4px; transition: background-color .15s ease, box-shadow .15s ease, outline-color .15s ease, transform .15s ease; }
.is-map-pin-drop-hover { background: #eff6ff ; box-shadow: 0 0 0 4px rgba(37, 99, 235, .18), 0 10px 22px rgba(15, 23, 42, .12); outline-color: #2563eb; transform: translateY(-1px); }
.active-route-target-panel.is-map-pin-drop-candidate { border-color: #60a5fa; }
.active-route-target-panel.is-map-pin-drop-hover { border-color: #2563eb; }
.geocode-control-row { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin: 0.65rem 0 0.35rem; }
.geocode-review-list { margin: 0.5rem 0; border: 1px solid #fed7aa; border-radius: 8px; padding: 0.5rem 0.75rem; background: #fff7ed; font-size: 0.85rem; }
.geocode-review-list summary { cursor: pointer; font-weight: 500; color: #92400e; }

/* Workspace job list */
.workspace-job-list { margin-top: .75rem; max-height: 560px; overflow-y: auto; }
.workspace-job-card { border: 1px solid #d8e0ea; border-radius: 8px; padding: .5rem; margin-bottom: .38rem; background: #fff; cursor: grab; }
.workspace-job-card.dragging, .workspace-job-card.stop-card-dragging, .workspace-stop-card.stop-card-dragging { opacity: 0.5; }
.workspace-job-card.is-focused, .workspace-stop-card.is-focused { border-color: #2563eb; box-shadow: 0 0 0 2px rgba(37, 99, 235, .16); }
.workspace-job-card.is-draw-selected { border-color: #f59e0b; box-shadow: 0 0 0 2px rgba(245, 158, 11, .18); }
.workspace-job-card.job-card-overdue { border-left: 3px solid #ef4444; }
.workspace-job-card.scheduled { background: #f0fdf4; border-color: #86efac; }
.job-card-header { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.3rem; font-weight: 500; font-size: 0.875rem; }
.job-card-body { font-size: 0.82rem; color: #6b7280; display: grid; gap: 0.15rem; margin-bottom: 0.4rem; }
.job-card-add-form, .job-card-links { display: flex; gap: 0.4rem; flex-wrap: wrap; align-items: center; }
.group-select-inline { font-size: 0.8rem; padding: 0.2rem 0.4rem; border-radius: 6px; border: 1px solid #d8e0ea; }
.dispatch-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.45rem; margin: 0.5rem 0; padding: 0.55rem; border-radius: 8px; background: #f8fafc; border: 1px solid #e5edf6; }
.dispatch-detail-grid p { margin: 0.1rem 0 0; font-size: 0.8rem; color: #334155; overflow-wrap: anywhere; }
.dispatch-detail-label { display: block; color: #64748b; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0; }
.dispatch-detail-chips { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-top: 0.15rem; }
.dispatch-detail-chip { display: inline-flex; gap: 0.2rem; align-items: baseline; border: 1px solid #d8e0ea; background: #fff; border-radius: 999px; padding: 0.12rem 0.42rem; font-size: 0.76rem; color: #334155; max-width: 100%; }
.dispatch-detail-chip small { color: #64748b; }

/* Route groups */
.workspace-route-groups { display: flex; flex-direction: column; gap: .75rem; }
.create-route-group-form { padding: 0.75rem; background: #f8fafc; border-radius: 10px; }
.create-route-group-form h3 { margin: 0 0 0.6rem; font-size: 0.95rem; }
.active-route-target-panel { background: #f0fdf4; border: 2px dashed #86efac; border-radius: 10px; color: #14532d; display: grid; gap: .4rem; padding: .75rem; }
.active-route-target-panel.is-empty { background: #f8fafc; border-color: #cbd5e1; color: #475569; }
.active-route-target-panel.is-active-route-target { box-shadow: 0 0 0 3px rgba(34, 197, 94, .16); }
.active-route-target-panel p { font-size: .84rem; line-height: 1.35; margin: 0; }
.active-route-target-heading { align-items: center; display: flex; flex-wrap: wrap; gap: .4rem .55rem; }
.active-route-target-heading strong { font-size: .95rem; overflow-wrap: anywhere; }
.active-route-target-kicker { background: #dcfce7; border: 1px solid #bbf7d0; border-radius: 999px; color: #166534; font-size: .72rem; font-weight: 850; letter-spacing: 0; padding: .16rem .48rem; text-transform: uppercase; }
.active-route-target-panel.is-empty .active-route-target-kicker { background: #e2e8f0; border-color: #cbd5e1; color: #475569; }
[data-active-route-target-summary] { background: #fff; border: 1px solid #bbf7d0; border-radius: 999px; color: #14532d; font-size: .76rem; font-weight: 850; padding: .2rem .5rem; }
.active-route-target-panel.is-empty [data-active-route-target-summary] { border-color: #cbd5e1; color: #475569; }
.route-group-last-move-notice,
.route-group-last-add-notice { align-items: center; background: #f8fbff; border: 1px solid #b7d7ea; border-left: 4px solid #2563eb; border-radius: 8px; display: grid; gap: .65rem; grid-template-columns: minmax(0, 1fr) auto; padding: .7rem .8rem; }
.route-group-last-add-notice { background: #f3fbf6; border-color: #b7dfc7; border-left-color: #16a34a; }
.route-group-last-move-notice > div:first-child,
.route-group-last-add-notice > div:first-child { display: grid; gap: .18rem; min-width: 0; }
.route-group-last-move-notice strong,
.route-group-last-add-notice strong { color: #17233a; font-size: .9rem; overflow-wrap: anywhere; }
.route-group-last-move-notice span,
.route-group-last-add-notice span { color: #475569; font-size: .8rem; line-height: 1.35; overflow-wrap: anywhere; }
.route-group-last-move-actions { align-items: center; display: flex; flex-wrap: wrap; gap: .4rem; justify-content: flex-end; }
.grouped-unscheduled-lane { background: #f8fbff; border: 1px solid #dbeafe; border-radius: 8px; display: grid; gap: .45rem; padding: .6rem; }
.grouped-unscheduled-heading { align-items: center; display: flex; flex-wrap: wrap; gap: .45rem; justify-content: space-between; }
.grouped-unscheduled-heading h3 { font-size: .95rem; margin: 0; }
.grouped-unscheduled-heading span { background: #e0f2fe; border: 1px solid #bae6fd; border-radius: 999px; color: #075985; font-size: .74rem; font-weight: 850; padding: .18rem .5rem; }
.grouped-unscheduled-grid { display: grid; gap: .45rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grouped-unscheduled-card { background: #fff; border: 1px solid #dbe4ee; border-radius: 8px; display: grid; gap: .28rem; padding: .45rem; }
.grouped-unscheduled-card > div:first-child { align-items: baseline; display: flex; flex-wrap: wrap; gap: .35rem .55rem; }
.grouped-unscheduled-card p { color: #475569; display: grid; font-size: .8rem; gap: .12rem; margin: 0; }
.grouped-unscheduled-actions, .route-group-move-form { align-items: end; display: flex; flex-wrap: wrap; gap: .4rem; }
.route-group-move-form label, .stop-card-move-control { color: #475569; display: grid; font-size: .76rem; gap: .14rem; min-width: 150px; }
.route-group-move-form select, .stop-card-move-control select { border: 1px solid #cbd5e1; border-radius: 6px; font-size: .8rem; min-height: 32px; padding: .22rem .4rem; }
.route-group-move-empty { align-self: center; font-size: .78rem; }
.route-group-stop-move-actions, .route-group-move-backing-form { display: none; }
.workspace-route-group { overflow: visible; }
.workspace-route-group.route-group-card { border-radius: 8px; padding: .75rem; }
.workspace-route-group.is-active-route-target { border-color: #72c799; box-shadow: 0 0 0 2px rgba(34, 197, 94, .14); }
.route-group-heading { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; }
.route-group-heading h3 { margin: 0; font-size: 1rem; flex: 1; }
.route-group-summary { display: flex; gap: 0.75rem; flex-wrap: wrap; font-size: 0.82rem; color: #6b7280; margin-bottom: 0.5rem; }
.route-group-workload-strip { background: #f8fafc; border: 1px solid #dbe4ee; border-radius: 8px; display: grid; gap: .4rem; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: .55rem 0; padding: .55rem; }
.route-group-workload-strip.is-warning { background: #fffaf0; border-color: #f1d28a; }
.route-group-workload-strip.is-critical { background: #fff8f5; border-color: #f4b4b4; }
.route-workload-chip { background: #fff; border: 1px solid #dbe4ee; border-radius: 6px; color: #334155; font-size: .76rem; font-weight: 850; line-height: 1.25; min-width: 0; overflow-wrap: anywhere; padding: .35rem .45rem; }
.route-group-workload-strip.is-warning .route-workload-chip[data-route-group-workload-chip="load"] { border-color: #f1d28a; color: #854d0e; }
.route-group-workload-strip.is-critical .route-workload-chip[data-route-group-workload-chip="load"] { border-color: #f4b4b4; color: #7f1d1d; }
.route-group-prediction-evidence { background: #f8fbff; border: 1px solid #dbe4ee; border-radius: 8px; display: grid; gap: .45rem; margin: .5rem 0; padding: .55rem; }
.route-group-prediction-heading { align-items: center; display: flex; gap: .45rem; justify-content: space-between; }
.route-group-prediction-heading strong { color: #17233a; font-size: .85rem; }
.route-group-prediction-heading span { color: #64748b; font-size: .74rem; font-weight: 850; text-align: right; }
.route-group-prediction-grid { display: grid; gap: .35rem; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.route-group-prediction-grid span,
.route-group-prediction-source-strip span { background: #fff; border: 1px solid #dbe4ee; border-radius: 6px; display: grid; gap: .08rem; min-width: 0; padding: .36rem .45rem; }
.route-group-prediction-grid strong,
.route-group-prediction-source-strip strong { color: #64748b; font-size: .68rem; letter-spacing: 0; text-transform: uppercase; }
.route-group-prediction-grid b { color: #17233a; font-size: .86rem; overflow-wrap: anywhere; }
.route-group-prediction-grid small,
.route-group-prediction-source-strip small { color: #64748b; font-size: .72rem; line-height: 1.25; overflow-wrap: anywhere; }
.route-group-prediction-source-strip { display: grid; gap: .35rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.route-group-prediction-grid [data-route-prediction-confidence="learned"] { border-color: #bbf7d0; }
.route-group-prediction-grid [data-route-prediction-confidence="fallback"] { border-color: #e2e8f0; }
.route-group-duration-variance { background: #f8fafc; border: 1px solid #dbe4ee; border-radius: 8px; display: grid; gap: .45rem; margin: .5rem 0; padding: .55rem; }
.route-group-duration-variance.is-on-track { background: #f3fbf6; border-color: #a9dfbd; }
.route-group-duration-variance.is-slower-than-prediction { background: #fffaf0; border-color: #f1d28a; }
.route-group-duration-variance.is-faster-than-prediction { background: #f0f9ff; border-color: #bae6fd; }
.route-group-duration-variance-heading { align-items: center; display: flex; gap: .45rem; justify-content: space-between; }
.route-group-duration-variance-heading strong { color: #17233a; font-size: .85rem; }
.route-group-duration-variance-heading span { color: #64748b; font-size: .74rem; font-weight: 850; text-align: right; }
.route-group-duration-variance-grid { display: grid; gap: .35rem; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.route-group-duration-variance-grid span { background: #fff; border: 1px solid #dbe4ee; border-radius: 6px; display: grid; gap: .08rem; min-width: 0; padding: .36rem .45rem; }
.route-group-duration-variance-grid strong { color: #64748b; font-size: .68rem; letter-spacing: 0; text-transform: uppercase; }
.route-group-duration-variance-grid b { color: #17233a; font-size: .86rem; overflow-wrap: anywhere; }
.route-group-duration-variance-grid small { color: #64748b; font-size: .72rem; line-height: 1.25; overflow-wrap: anywhere; }
.route-group-crew-time-summary { background: #f8fafc; border: 1px solid #dbe4ee; border-radius: 8px; display: grid; gap: .45rem; margin: .5rem 0; padding: .55rem; }
.route-group-crew-time-summary.is-warning { background: #fffaf0; border-color: #f1d28a; }
.route-group-crew-time-summary.is-ready { background: #f3fbf6; border-color: #a9dfbd; }
.route-group-crew-time-heading { align-items: center; display: flex; gap: .45rem; justify-content: space-between; }
.route-group-crew-time-heading strong { color: #17233a; font-size: .85rem; }
.route-group-crew-time-heading span { color: #64748b; font-size: .74rem; font-weight: 850; }
.route-group-crew-time-grid { display: grid; gap: .35rem; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.route-group-crew-time-grid span { background: #fff; border: 1px solid #dbe4ee; border-radius: 6px; display: grid; gap: .08rem; min-width: 0; padding: .36rem .45rem; }
.route-group-crew-time-grid strong { color: #64748b; font-size: .68rem; letter-spacing: 0; text-transform: uppercase; }
.route-group-crew-time-grid b { color: #17233a; font-size: .82rem; overflow-wrap: anywhere; }
.route-group-crew-time-grid small { color: #64748b; font-size: .72rem; line-height: 1.25; overflow-wrap: anywhere; }
.route-group-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.65rem; }
.route-schedule-command-panel { align-items: center; background: #f8fbff; border: 1px solid #dbe4ee; border-radius: 8px; color: #475569; display: flex; flex-wrap: wrap; gap: .45rem; justify-content: space-between; margin-top: .55rem; padding: .5rem .6rem; }
.route-schedule-command-panel span { font-size: .8rem; line-height: 1.35; }
.route-order-save-status { background: #fff; border: 1px solid #d8e3ea; border-radius: 999px; color: #334155; font-size: .74rem; padding: .16rem .5rem; }
.route-employee-defaults { display: grid; gap: 0.2rem; margin: 0.55rem 0; font-size: 0.8rem; }
.route-employee-defaults select { min-height: 5.5rem; }
.route-group-warning-strip { background: #f8fbff; border: 1px solid #dbe4ee; border-radius: 8px; display: grid; gap: .45rem; margin: .55rem 0; padding: .65rem; }
.route-group-warning-strip.is-warning { background: #fffaf0; border-color: #f1d28a; }
.route-group-warning-strip.is-critical { background: #fff8f5; border-color: #f4b4b4; }
.route-group-warning-strip.is-ready { background: #f3fbf6; border-color: #a9dfbd; }
.route-group-warning-header { align-items: start; display: grid; gap: .35rem; grid-template-columns: minmax(0, 1fr) auto; }
.route-group-warning-header strong { color: #17233a; font-size: .88rem; }
.route-group-warning-header span { color: #475569; font-size: .78rem; font-weight: 800; text-align: right; }
.route-group-warning-chips { display: flex; flex-wrap: wrap; gap: .3rem; }
.route-group-warning-chips span { background: #fff; border: 1px solid #d8e3ea; border-radius: 999px; color: #334155; font-size: .72rem; font-weight: 900; padding: .18rem .48rem; }
.route-group-warning-chips .is-critical { border-color: #f4b4b4; color: #7f1d1d; }
.route-group-warning-chips .is-warning { border-color: #f1d28a; color: #854d0e; }
.route-group-warning-chips .is-ready { border-color: #a9dfbd; color: #14532d; }
.route-group-warning-chips .is-muted { color: #64748b; }
.route-group-capacity-meter { background: #e2e8f0; border-radius: 999px; height: .48rem; overflow: hidden; }
.route-group-capacity-meter span { background: linear-gradient(90deg, #22c55e, #f59e0b 72%, #ef4444); border-radius: inherit; display: block; height: 100%; max-width: 100%; width: var(--route-group-load-percent, 0%); }
.route-group-conflict-drilldown { border-top: 1px solid #e2e8f0; padding-top: .35rem; }
.route-group-conflict-drilldown summary { cursor: pointer; font-size: .82rem; font-weight: 900; }
.route-group-load-facts { display: grid; gap: .35rem; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: .5rem 0; }
.route-group-load-facts span { background: #fff; border: 1px solid #e2e8f0; border-radius: 6px; display: grid; gap: .08rem; padding: .45rem .5rem; }
.route-group-load-facts strong { color: #17233a; }
.route-group-load-facts small { color: #64748b; line-height: 1.25; }
.route-group-conflict-list { display: grid; gap: .35rem; list-style: none; margin: .45rem 0 0; padding: 0; }
.route-group-conflict-list li { background: #fff; border: 1px solid #f3d6c9; border-radius: 6px; display: grid; gap: .16rem; padding: .48rem .55rem; }
.route-group-conflict-list strong { color: #7f1d1d; }
.route-group-conflict-list span,
.route-group-conflict-list small { color: #526579; line-height: 1.35; overflow-wrap: anywhere; }
.route-group-detail-totals { background: #f8fafc; border: 1px solid #dbe4ee; border-radius: 8px; display: grid; gap: .45rem; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: .55rem 0; padding: .6rem; }
.route-group-detail-totals span { display: grid; gap: .12rem; min-width: 0; }
.route-group-detail-totals strong { color: #334155; font-size: .72rem; letter-spacing: 0; text-transform: uppercase; }
.route-group-detail-totals small { color: #475569; line-height: 1.35; overflow-wrap: anywhere; }
.route-group-quality-panel { background: #f8fafc; border: 1px solid #dbe4ee; border-radius: 8px; display: grid; gap: .45rem; margin: .55rem 0; padding: .6rem; }
.route-group-quality-heading { align-items: center; display: flex; flex-wrap: wrap; gap: .45rem; justify-content: space-between; }
.route-group-quality-heading strong { color: #17233a; font-size: .86rem; }
.route-group-quality-heading span { color: #64748b; font-size: .74rem; font-weight: 850; text-align: right; }
.route-group-quality-grid { display: grid; gap: .4rem; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.route-group-quality-grid span { background: #fff; border: 1px solid #dbe4ee; border-radius: 6px; display: grid; gap: .08rem; min-width: 0; padding: .38rem .45rem; }
.route-group-quality-grid strong { color: #64748b; font-size: .68rem; letter-spacing: 0; text-transform: uppercase; }
.route-group-quality-grid b { color: #17233a; font-size: .85rem; overflow-wrap: anywhere; }
.route-group-quality-grid small { color: #64748b; font-size: .72rem; line-height: 1.25; overflow-wrap: anywhere; }
.route-crew-assignment-panel { background: #f8fbff; border: 1px solid #dbe4ee; border-radius: 8px; display: grid; gap: .5rem; margin: .55rem 0; padding: .65rem; }
.route-crew-assignment-panel.is-missing-crew { border-color: #f1d28a; }
.route-crew-assignment-header { align-items: center; display: flex; flex-wrap: wrap; gap: .45rem; justify-content: space-between; }
.route-crew-assignment-header span { background: #fff; border: 1px solid #d8e3ea; border-radius: 999px; color: #334155; font-size: .75rem; font-weight: 850; padding: .2rem .5rem; }
.route-crew-role-label { display: grid; gap: .25rem; font-size: .82rem; }

/* Workspace stop list */
.workspace-stop-list { list-style: none; margin: 0; padding: 0; min-height: 60px; }
.stop-list-empty { font-size: 0.85rem; color: #9ca3af; text-align: center; padding: 1rem; border: 2px dashed #d8e0ea; border-radius: 10px; }
.dropzone-active { outline: 2px dashed #3b82f6; outline-offset: 3px; background: #eff6ff; border-radius: 8px; }
.workspace-stop-list.is-active-route-target { background: #f3fbf6; border-radius: 8px; outline: 1px solid #b7dfc7; outline-offset: 2px; }
.workspace-stop-list.is-reordering { background: #f8fbff; border-radius: 8px; box-shadow: inset 0 0 0 1px #b7d7ea; padding: .2rem; }
.workspace-stop-card { border: 1px solid #d8e0ea; border-radius: 10px; padding: 0.65rem; margin-bottom: 0.4rem; background: #fff; cursor: grab; position: relative; }
.workspace-stop-card.is-reorder-before::before,
.workspace-stop-card.is-reorder-after::after { background: #2563eb; border-radius: 999px; content: ""; height: 4px; left: .55rem; position: absolute; right: .55rem; z-index: 2; }
.workspace-stop-card.is-reorder-before::before { top: -4px; }
.workspace-stop-card.is-reorder-after::after { bottom: -4px; }
.stop-card-header { display: flex; align-items: center; gap: 0.4rem; font-size: 0.875rem; font-weight: 500; margin-bottom: 0.35rem; }
.stop-num { background: #2563eb; color: #fff; border-radius: 99px; padding: 0.1rem 0.5rem; font-size: 0.75rem; font-weight: 600; }
.stop-drag-handle { background: #f8fafc; border: 1px solid #dbe4ee; border-radius: 999px; color: #475569; cursor: grab; font-size: .72rem; font-weight: 850; padding: .1rem .45rem; }
.stop-card-service { font-size: 0.8rem; color: #6b7280; margin-bottom: 0.35rem; display: grid; gap: 0.1rem; }
.stop-card-duration { font-size: 0.8rem; margin-bottom: 0.4rem; padding: 0.35rem 0.5rem; border-radius: 6px; }
.confidence-high { background: #f0fdf4; border-left: 3px solid #22c55e; }
.confidence-trusted { background: #eff6ff; border-left: 3px solid #60a5fa; }
.confidence-low { background: #fffbeb; border-left: 3px solid #f59e0b; }
.confidence-fallback { background: #f9fafb; border-left: 3px solid #9ca3af; }
.duration-estimate { font-weight: 600; }
.duration-source, .duration-confidence { color: #6b7280; display: block; font-size: 0.78rem; }
.stop-card-duration-variance { background: #f8fafc; border: 1px solid #dbe4ee; border-left: 3px solid #94a3b8; border-radius: 6px; color: #475569; display: grid; font-size: .78rem; gap: .08rem; margin: -.15rem 0 .45rem; padding: .35rem .5rem; }
.stop-card-duration-variance.is-on-track { background: #f3fbf6; border-color: #a9dfbd; border-left-color: #22c55e; }
.stop-card-duration-variance.is-slower-than-prediction { background: #fffaf0; border-color: #f1d28a; border-left-color: #f59e0b; }
.stop-card-duration-variance.is-faster-than-prediction { background: #f0f9ff; border-color: #bae6fd; border-left-color: #0ea5e9; }
.stop-card-duration-variance.is-pending-actual { background: #f9fafb; border-color: #e2e8f0; border-left-color: #94a3b8; }
.stop-card-duration-variance .actual-timer { color: #17233a; font-weight: 850; }
.stop-card-duration-variance .duration-variance-label,
.stop-card-duration-variance small { color: #64748b; line-height: 1.25; overflow-wrap: anywhere; }
.stop-crew-override-summary { background: #fff; border: 1px solid #d8e3ea; border-left: 3px solid #94a3b8; border-radius: 6px; display: grid; gap: .1rem; margin: .35rem 0 .45rem; min-height: 2.1rem; padding: .35rem .5rem; }
.stop-crew-override-summary strong { color: #17233a; font-size: .82rem; line-height: 1.25; overflow-wrap: anywhere; }
.stop-crew-override-summary small { color: #64748b; font-size: .74rem; line-height: 1.25; }
.stop-crew-override-summary.is-override { background: #f0fdf4; border-color: #bbf7d0; border-left-color: #22c55e; }
.stop-crew-override-summary.is-empty-override { background: #fffaf0; border-color: #f1d28a; border-left-color: #f59e0b; }
.stop-crew-override-summary.is-unsaved { border-left-color: #2563eb; box-shadow: inset 0 0 0 1px rgba(37, 99, 235, .08); }
.stop-card-arrival { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.4rem; margin-bottom: 0.35rem; font-size: 0.8rem; }
.stop-card-arrival label, .stop-card-employee label { font-size: 0.78rem; display: grid; gap: 0.15rem; }
.stop-card-employee { display: grid; gap: 0.35rem; margin-bottom: 0.35rem; }
.stop-card-employee-override { background: #f8fbff; border: 1px solid #dbe4ee; border-radius: 8px; margin-top: .45rem; padding: .55rem; }
.stop-card-employee-override[hidden] { display: none; }
.stop-card-employee-override.is-active { border-color: #9cc8e6; }
.stop-staff-override-button[aria-expanded="true"] { border-color: #9cc8e6; color: #0f4c81; }
.stop-card-employee select:disabled { opacity: 0.55; background: #f8fafc; }
.stop-card-actions { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.stop-card-move-panel { align-items: end; background: #f8fbff; border: 1px solid #dbe4ee; border-radius: 8px; display: grid; gap: .45rem; grid-template-columns: minmax(180px, 1fr) auto minmax(0, 1fr); margin: .4rem 0; padding: .5rem; }
.stop-card-move-panel[hidden] { display: none; }
.stop-card-move-panel.is-active { border-color: #9cc8e6; }
.stop-card-move-panel small { align-self: center; color: #64748b; font-size: .74rem; line-height: 1.25; }
.stop-crew-override-actions { align-items: center; display: flex; flex-wrap: wrap; gap: .4rem; grid-column: 1 / -1; margin-top: .25rem; }
.btn-danger-subtle { border-color: #f4b4b4; color: #8a1f1f; }
.btn-danger-subtle:hover { background: #fff8f5; border-color: #e98484; color: #7f1d1d; }

/* Wage/profit estimates */
.route-group-estimates { font-size: 0.85rem; margin-bottom: 0.5rem; }
.route-group-estimates summary { cursor: pointer; color: #374151; font-weight: 500; }
.estimate-grid { display: grid; grid-template-columns: auto 1fr; gap: 0.25rem 1rem; margin: 0.5rem 0 0; }
.estimate-grid dt { color: #6b7280; }
.estimate-grid dd { margin: 0; font-weight: 500; }
.placeholder-missing { color: #f59e0b; font-weight: 400; font-style: italic; font-size: 0.8rem; }

/* Map popup */
.map-pin-popup { min-width: 220px; font-size: 0.85rem; }
.map-pin-popup strong { font-size: 0.95rem; }
.map-pin-popup p { margin: 0.2rem 0; color: #374151; }
.map-pin-popup .popup-action-row { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.5rem; }
.map-popup-add-form button { white-space: nowrap; }

@media (max-width: 1100px) {
    .workspace-layout-v4 { grid-template-columns: 1fr; }
    .scheduling-calendar-command-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .calendar-module-board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .calendar-week-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .dispatch-week-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .dispatch-queue-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dispatch-route-fit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .workspace-map-date-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .calendar-map-topbar,
    .calendar-map-layout,
    .calendar-map-legend-panel,
    .calendar-map-canvas-heading { grid-template-columns: 1fr; }
    .calendar-map-filter-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .calendar-map-filter-bar .btn { justify-content: center; min-height: 40px; }
    .calendar-map-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .calendar-route-map { min-height: 520px; }
    .calendar-filter-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .calendar-filter-actions,
    .calendar-filter-form p { grid-column: 1 / -1; }
    .calendar-selected-day-grid,
    .calendar-selected-day-metrics,
    .calendar-selected-drilldown-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .scheduling-calendar-command-bar { grid-template-columns: 1fr; padding: .65rem; }
    .scheduling-calendar-command-bar .scheduling-view-switcher,
    .scheduling-calendar-command-bar .calendar-nav,
    .calendar-arrange-toolbar { justify-content: stretch; }
    .scheduling-calendar-command-bar .scheduling-view-switcher a,
    .scheduling-calendar-command-bar .calendar-nav .btn,
    .calendar-arrange-toggle,
    .calendar-arrange-toolbar .btn { justify-content: center; min-height: 44px; width: 100%; }
    .calendar-module-board { grid-template-columns: 1fr; }
    .calendar-module-size-full,
    .calendar-module-size-half,
    .calendar-module-size-quarter { grid-column: 1 / -1; }
    .calendar-module-heading { align-items: stretch; flex-direction: column; }
    .calendar-module-controls { display: none; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
    .scheduling-calendar-shell[data-calendar-arranging="true"] .calendar-module-controls { display: grid; }
    .calendar-module-controls [data-calendar-move="left"],
    .calendar-module-controls [data-calendar-move="right"],
    .calendar-module-controls [data-calendar-size="half"],
    .calendar-module-controls [data-calendar-size="quarter"] { display: none; }
    .calendar-module-controls .btn { min-height: 44px; width: 100%; }
    .calendar-legend-grid { grid-template-columns: 1fr; }
    .calendar-week-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .calendar-month-body .calendar-day-cell { min-height: 52px; font-size: 0.7rem; }
    .calendar-month-grid-v2 .calendar-month-body { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .calendar-month-grid-v2 .calendar-month-header { display: none; }
    .calendar-month-day { min-height: 130px; }
    .calendar-filter-form,
    .calendar-selected-day-grid,
    .calendar-selected-day-metrics,
    .calendar-selected-drilldown-grid { grid-template-columns: 1fr; }
    .calendar-filter-actions { display: grid; grid-template-columns: 1fr; }
    .calendar-filter-actions .btn { min-height: 44px; width: 100%; }
    .calendar-week-day { min-height: 170px; }
    .calendar-selected-stop-list strong,
    .calendar-selected-stop-list span,
    .calendar-pill-time,
    .calendar-pill-title,
    .calendar-pill-customer { white-space: normal; }
    .calendar-dialog-details, .calendar-dialog-color-row { grid-template-columns: 1fr; }
    .dispatch-detail-grid { grid-template-columns: 1fr; }
    .stop-card-arrival { grid-template-columns: 1fr; }
    .workspace-map-date-form { grid-template-columns: 1fr; }
    .active-route-target-heading { align-items: stretch; flex-direction: column; }
    [data-active-route-target-summary] { border-radius: 8px; }
    .route-group-last-move-notice { grid-template-columns: 1fr; }
    .route-group-last-add-notice { grid-template-columns: 1fr; }
    .route-group-last-move-actions { display: grid; grid-template-columns: 1fr; }
    .grouped-unscheduled-grid { grid-template-columns: 1fr; }
    .route-group-prediction-heading { align-items: stretch; flex-direction: column; }
    .route-group-prediction-heading span { text-align: left; }
    .route-group-prediction-grid, .route-group-prediction-source-strip, .route-group-duration-variance-grid { grid-template-columns: 1fr; }
    .route-group-quality-grid { grid-template-columns: 1fr; }
    .route-group-duration-variance-heading { align-items: stretch; flex-direction: column; }
    .route-group-duration-variance-heading span { text-align: left; }
    .route-group-crew-time-grid { grid-template-columns: 1fr; }
    .stop-card-move-panel { grid-template-columns: 1fr; }
    .grouped-unscheduled-actions, .route-group-move-form, .stop-card-move-control { width: 100%; }
    .route-group-move-form .btn, .stop-card-actions button[form] { width: 100%; }
    .workspace-panel { padding: 0.75rem; }
    .dispatch-planning-board { border-radius: 10px; padding: .75rem; }
    .dispatch-planning-header { grid-template-columns: 1fr; }
    .dispatch-planning-header > strong { justify-content: center; white-space: normal; }
    .scheduling-dispatch-confidence-panel,
    .scheduling-map-provider-readiness,
    .mobile-dispatch-coverage-strip {
        border-radius: 10px;
        padding: .75rem;
    }
    .scheduling-dispatch-confidence-heading,
    .scheduling-dispatch-section-heading {
        display: grid;
        grid-template-columns: 1fr;
    }
    .scheduling-dispatch-confidence-grid,
    .scheduling-dispatch-link-grid,
    .mobile-dispatch-coverage-links {
        grid-template-columns: 1fr;
    }
    .scheduling-dispatch-confidence-link {
        min-height: 44px;
    }
    .dispatch-planning-metrics, .dispatch-week-strip, .dispatch-queue-grid { grid-template-columns: 1fr; }
    .dispatch-route-fit-grid { grid-template-columns: 1fr; }
    .dispatch-queue-tabs { display: grid; grid-template-columns: 1fr; }
    .dispatch-queue-tab { justify-content: space-between; width: 100%; }
    .dispatch-week-day { min-height: 0; }
    .dispatch-queue-card .btn { min-height: 44px; width: 100%; }
    .calendar-map-date-strip { grid-template-columns: 1fr; }
    .calendar-map-date-strip > .btn { justify-content: center; min-height: 44px; width: 100%; }
    .calendar-map-week-days { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .calendar-map-filter-bar,
    .calendar-map-legend-panel,
    .calendar-map-metrics { grid-template-columns: 1fr; }
    .calendar-map-filter-bar .btn,
    .calendar-map-work-actions .btn,
    .calendar-map-canvas-heading .btn { justify-content: center; min-height: 44px; width: 100%; }
    .calendar-map-list-panel,
    .calendar-map-canvas-panel { padding: .7rem; }
    .calendar-map-list-panel { max-height: none; overflow: visible; }
    .calendar-map-list-tabs { display: grid; grid-template-columns: 1fr; }
    .calendar-map-list-tabs a { justify-content: space-between; width: 100%; }
    .calendar-map-work-card { grid-template-columns: 1fr; }
    .calendar-map-order-badge { justify-self: start; }
    .calendar-map-suggestion-list { grid-template-columns: 1fr; }
    .calendar-map-route-chip,
    .calendar-map-warning-chip { width: 100%; }
    .calendar-route-map { min-height: 430px; }
}

/* Mobile route-days density: Scheduling calendar stays compact on phones/PWA. */
.calendar-mobile-day-tile { display: none; }
.mobile-calendar-bring-panel { background: #f8fbff; border: 1px solid #dbe4ee; border-radius: 8px; display: none; overflow: hidden; }
.mobile-calendar-bring-panel summary { align-items: center; cursor: pointer; display: flex; gap: .55rem; justify-content: space-between; list-style: none; min-height: 40px; padding: .55rem .7rem; }
.mobile-calendar-bring-panel summary::-webkit-details-marker { display: none; }
.mobile-calendar-bring-panel summary span { color: #17233a; font-size: .82rem; font-weight: 950; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mobile-calendar-bring-panel summary strong { align-items: center; background: #dbeafe; border-radius: 999px; color: #1d4ed8; display: inline-flex; font-size: .72rem; justify-content: center; min-height: 1.35rem; min-width: 1.35rem; padding: .1rem .35rem; }
.mobile-calendar-bring-panel.is-flagged { background: #fff7ed; border-color: #fdba74; }
.mobile-calendar-bring-panel.is-flagged summary strong { background: #ffedd5; color: #c2410c; }
.mobile-calendar-bring-panel.is-critical { background: #fef2f2; border-color: #fca5a5; }
.mobile-calendar-bring-panel.is-critical summary strong { background: #fee2e2; color: #b91c1c; }
.mobile-calendar-bring-body { border-top: 1px solid rgba(148, 163, 184, .28); display: grid; gap: .45rem; padding: .65rem .75rem; }
.mobile-calendar-bring-body p { color: #334155; font-size: .78rem; margin: 0; }
.mobile-calendar-bring-body ul { display: grid; gap: .32rem; list-style: none; margin: 0; padding: 0; }
.mobile-calendar-bring-body li { align-items: start; display: grid; gap: .35rem; grid-template-columns: minmax(0, 1fr) auto; min-width: 0; }
.mobile-calendar-bring-body li strong,
.mobile-calendar-bring-body li span { font-size: .74rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mobile-calendar-bring-body li strong { overflow-wrap: anywhere; white-space: normal; }
.mobile-calendar-bring-body li span { justify-self: end; }
.mobile-calendar-bring-body li span { color: #64748b; font-weight: 850; }
.calendar-day-dialog-list { display: grid; gap: .45rem; }
.calendar-day-dialog-work-card { border: 1px solid #dbe4ee; border-radius: 8px; color: #17233a; display: grid; gap: .18rem; min-width: 0; padding: .48rem .55rem; text-decoration: none; }
.calendar-day-dialog-work-card strong,
.calendar-day-dialog-work-card span,
.calendar-day-dialog-work-card small { max-width: 100%; overflow: hidden; overflow-wrap: anywhere; text-overflow: ellipsis; white-space: normal; }
.calendar-day-dialog-work-card span { color: #334155; font-size: .78rem; }
.calendar-day-dialog-work-card small { color: #64748b; font-size: .72rem; }
.mobile-route-map-shell { display: grid; gap: .65rem; }
.mobile-route-map-day-nav { align-items: center; display: grid; gap: .45rem; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
.mobile-route-map-day-nav strong { color: #17233a; font-size: .86rem; text-align: center; white-space: nowrap; }
.mobile-route-map-only-card { background: #fff; border: 1px solid #dbe4ee; border-radius: 8px; overflow: hidden; position: relative; }
.mobile-route-days-map { min-height: 72svh; width: 100%; }
.mobile-route-map-pin { align-items: center; background: #2563eb; border: 2px solid #fff; border-radius: 999px; box-shadow: 0 3px 10px rgba(15, 23, 42, .28); color: #fff; display: flex; font-weight: 950; justify-content: center; }
.mobile-route-map-pin span { align-items: center; display: flex; font-size: .82rem; height: 100%; justify-content: center; width: 100%; }
.mobile-route-map-empty { background: rgba(255, 255, 255, .92); border: 1px solid #dbe4ee; border-radius: 999px; color: #334155; font-size: .8rem; font-weight: 900; left: 50%; margin: 0; max-width: calc(100% - 1rem); overflow-wrap: anywhere; padding: .45rem .75rem; position: absolute; text-align: center; top: 1rem; transform: translateX(-50%); white-space: normal; z-index: 500; }

.employee-route-page { display: grid; gap: .65rem; }
.employee-route-header,
.employee-route-duration,
.employee-route-next-stop,
.employee-route-map-card,
.employee-route-work-list { background: #fff; border: 1px solid #dbe4ee; border-radius: 8px; padding: .75rem; }
.employee-route-header { align-items: start; display: flex; gap: .75rem; justify-content: space-between; }
.employee-route-header h1,
.employee-route-work-list h2 { color: #17233a; font-size: 1.05rem; letter-spacing: 0; margin: .1rem 0; }
.employee-route-header p { color: #64748b; font-size: .82rem; margin: 0; }
.employee-route-week-nav { align-items: center; display: grid; gap: .4rem; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
.employee-route-week-nav strong { color: #17233a; font-size: .82rem; text-align: center; white-space: nowrap; }
.employee-route-view-tabs { background: #f8fbff; border: 1px solid #dbe4ee; border-radius: 999px; display: grid; gap: .25rem; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: .25rem; }
.employee-route-view-tabs a { border-radius: 999px; color: #475569; font-size: .85rem; font-weight: 900; min-height: 36px; padding: .45rem .65rem; text-align: center; text-decoration: none; }
.employee-route-view-tabs a.is-active { background: var(--accent); color: #fff; }
.employee-route-week-strip { display: grid; gap: .25rem; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.employee-route-month-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.employee-route-day-card { background: #fff; border: 1px solid #dbe4ee; border-radius: 8px; color: #17233a; display: grid; gap: .22rem; min-height: 4.15rem; padding: .28rem; text-decoration: none; }
.employee-route-day-card.is-selected { border-color: #22c55e; box-shadow: 0 0 0 2px rgba(34, 197, 94, .2); }
.employee-route-day-card.is-outside-month { opacity: .55; }
.employee-route-day-card:hover,
.employee-route-day-card:focus-visible,
.employee-route-work-card:hover,
.employee-route-work-card:focus-visible { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(37, 99, 235, .12); outline: none; }
.employee-route-day-top { align-items: center; display: flex; justify-content: space-between; }
.employee-route-day-top strong { font-size: .78rem; line-height: 1; }
.employee-route-day-top em { color: #64748b; font-size: .58rem; font-style: normal; font-weight: 950; line-height: 1; }
.employee-route-day-count { align-items: center; background: #f8fbff; border: 1px solid #e2e8f0; border-radius: 7px; color: #17233a; display: grid; font-size: .54rem; font-weight: 900; justify-items: center; line-height: 1; min-height: 2.25rem; padding: .12rem; text-align: center; }
.employee-route-day-count b { font-size: .82rem; }
.employee-route-duration { align-items: center; display: flex; gap: .5rem; justify-content: space-between; }
.employee-route-duration strong { color: #17233a; font-size: .9rem; }
.employee-route-duration span { color: #64748b; font-size: .82rem; font-weight: 900; text-align: right; }
.employee-route-next-stop { align-items: center; display: flex; gap: .75rem; justify-content: space-between; }
.employee-route-next-stop strong { color: #17233a; display: block; font-size: .88rem; }
.employee-route-next-stop span { color: #64748b; display: block; font-size: .78rem; font-weight: 850; }
.employee-route-bring-panel { background: #f8fbff; border: 1px solid #dbe4ee; border-radius: 8px; overflow: hidden; }
.employee-route-bring-panel summary { align-items: center; cursor: pointer; display: flex; gap: .55rem; justify-content: space-between; list-style: none; min-height: 42px; padding: .58rem .75rem; }
.employee-route-bring-panel summary::-webkit-details-marker { display: none; }
.employee-route-bring-panel summary span { color: #17233a; font-size: .82rem; font-weight: 950; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.employee-route-bring-panel summary strong { align-items: center; background: #dbeafe; border-radius: 999px; color: #1d4ed8; display: inline-flex; font-size: .72rem; justify-content: center; min-height: 1.35rem; min-width: 1.35rem; padding: .1rem .35rem; }
.employee-route-bring-panel.is-flagged { background: #fff7ed; border-color: #fdba74; }
.employee-route-bring-panel.is-flagged summary strong { background: #ffedd5; color: #c2410c; }
.employee-route-bring-panel.is-critical { background: #fef2f2; border-color: #fca5a5; }
.employee-route-bring-panel.is-critical summary strong { background: #fee2e2; color: #b91c1c; }
.employee-route-bring-panel ul { border-top: 1px solid rgba(148, 163, 184, .28); display: grid; gap: .35rem; list-style: none; margin: 0; padding: .65rem .75rem; }
.employee-route-bring-panel li { align-items: center; display: flex; gap: .5rem; justify-content: space-between; min-width: 0; }
.employee-route-bring-panel li strong,
.employee-route-bring-panel li span { font-size: .74rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.employee-route-bring-panel li span { color: #64748b; font-weight: 850; }
.employee-route-map-card { overflow: hidden; padding: 0; position: relative; }
.employee-route-map { min-height: 34svh; width: 100%; }
.employee-route-map-page { display: grid; gap: .65rem; }
.employee-route-map-page .employee-route-map { min-height: calc(100svh - 9.5rem); }
.employee-route-map-nav { align-items: center; display: grid; gap: .45rem; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
.employee-route-map-nav strong { color: #17233a; font-size: .86rem; text-align: center; white-space: nowrap; }
.employee-route-map-back { justify-content: center; width: 100%; }
.employee-route-map-empty { background: rgba(255, 255, 255, .92); border: 1px solid #dbe4ee; border-radius: 999px; color: #334155; font-size: .78rem; font-weight: 900; left: 50%; margin: 0; padding: .45rem .75rem; position: absolute; top: .75rem; transform: translateX(-50%); white-space: nowrap; z-index: 500; }
.employee-route-map-pin { align-items: center; background: #2563eb; border: 2px solid #fff; border-radius: 999px; box-shadow: 0 3px 10px rgba(15, 23, 42, .28); color: #fff; display: flex; font-weight: 950; justify-content: center; }
.employee-route-map-pin span { align-items: center; display: flex; font-size: .82rem; height: 100%; justify-content: center; width: 100%; }
.employee-route-work-list { display: grid; gap: .45rem; }
.employee-route-work-card { background: #f8fbff; border: 1px solid #dbe4ee; border-left: 5px solid var(--accent); border-radius: 8px; color: #17233a; display: grid; gap: .32rem; min-height: calc((100svh - 8rem) / 3.5); padding: .75rem; text-decoration: none; }
.employee-route-work-main { color: inherit; display: grid; gap: .32rem; min-width: 0; text-decoration: none; }
.employee-route-work-main > strong,
.employee-route-work-title,
.employee-route-work-address,
.employee-route-work-meta b { overflow: hidden; text-overflow: ellipsis; }
.employee-route-work-main > strong { font-size: .9rem; white-space: nowrap; }
.employee-route-work-title { font-size: .82rem; font-weight: 950; }
.employee-route-work-address { color: #64748b; font-size: .78rem; line-height: 1.35; }
.employee-route-work-meta { display: grid; gap: .35rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.employee-route-work-meta b { background: #eef2ff; border-radius: 999px; color: #17233a; font-size: .68rem; padding: .35rem .45rem; text-align: center; white-space: nowrap; }
.employee-route-map-picker {
    position: relative;
}
.employee-route-map-picker summary {
    align-items: center;
    background: #17233a;
    border-radius: 7px;
    color: #fff;
    cursor: pointer;
    display: flex;
    font-size: .78rem;
    font-weight: 950;
    justify-content: center;
    list-style: none;
    min-height: 2.25rem;
    padding: .45rem .6rem;
}
.employee-route-map-picker summary::-webkit-details-marker { display: none; }
.employee-route-map-picker-panel {
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    box-shadow: 0 16px 42px rgba(15, 23, 42, .16);
    display: grid;
    gap: .35rem;
    margin-top: .45rem;
    padding: .45rem;
}
.employee-route-map-confirm,
.employee-route-access-instructions,
.employee-route-map-warning {
    border-radius: 6px;
    display: grid;
    gap: .16rem;
    margin: 0;
    padding: .5rem .6rem;
}
.employee-route-map-confirm,
.employee-route-access-instructions {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}
.employee-route-map-warning {
    background: #fff7ed;
    border: 1px solid #fdba74;
    color: #9a3412;
    font-size: .72rem;
    font-weight: 900;
}
.employee-route-map-confirm span,
.employee-route-access-instructions span {
    color: #475569;
    font-size: .74rem;
    font-weight: 850;
    line-height: 1.35;
}
.employee-route-map-copy,
.employee-route-map-picker-panel a,
.employee-route-map-disabled {
    border-radius: 6px;
    min-height: 2.25rem;
    padding: .5rem .6rem;
}
.employee-route-map-copy {
    background: #eef5ff;
    border: 1px solid #bfdbfe;
    color: #1d4ed8;
    cursor: pointer;
    font-size: .76rem;
    font-weight: 900;
}
.employee-route-map-provider-list {
    display: grid;
    gap: .28rem;
}
.employee-route-map-picker-panel a,
.employee-route-map-disabled {
    align-items: center;
    background: #f8fafc;
    border: 1px solid #dbe4ee;
    color: #17233a;
    display: grid;
    gap: .05rem;
    text-decoration: none;
}
.employee-route-map-picker-panel a span,
.employee-route-map-disabled {
    color: #64748b;
    font-size: .7rem;
    font-weight: 850;
}
.employee-route-map-return {
    text-align: center;
}

.work-order-communication-timeline,
.work-order-invoice-preview,
.invoice-preview-approval {
    scroll-margin-top: 1rem;
}

.work-order-communication-list {
    display: grid;
    gap: 0.75rem;
}

.work-order-communication-timeline-item {
    background: #f8fafc;
    border: 1px solid #dbe4ee;
    border-radius: 8px;
    padding: 0.85rem;
}

.work-order-communication-timeline-item > div:first-child,
.work-order-communication-meta {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    justify-content: space-between;
}

.work-order-communication-meta span {
    color: #64748b;
    font-size: 0.85rem;
}

.work-order-supervisor-override {
    background: #fff7ed;
    border: 1px dashed #d97706;
    border-radius: 8px;
    padding: 0.65rem;
}

@media (max-width: 640px) {
    .scheduling-calendar-shell[data-mobile-route-days="true"] .scheduling-calendar-command-bar { gap: .45rem; padding: .55rem; }
    .scheduling-calendar-shell[data-mobile-route-days="true"] .scheduling-calendar-command-main { gap: .02rem; }
    .scheduling-calendar-shell[data-mobile-route-days="true"] .scheduling-calendar-command-main .eyebrow { font-size: .66rem; }
    .scheduling-calendar-shell[data-mobile-route-days="true"] .scheduling-calendar-command-main strong { font-size: .94rem; }
    .scheduling-calendar-shell[data-mobile-route-days="true"] .calendar-filter-summary { font-size: .7rem; }
    .scheduling-calendar-shell[data-mobile-route-days="true"] .calendar-workspace-link,
    .scheduling-calendar-shell[data-mobile-route-days="true"] .calendar-nav,
    .scheduling-calendar-shell[data-mobile-route-days="true"] .calendar-arrange-toolbar { display: none; }
    .scheduling-calendar-shell[data-mobile-route-days="true"] .scheduling-view-switcher.is-desktop-calendar-tabs { display: none; }
    .scheduling-calendar-shell[data-mobile-route-days="true"] .scheduling-view-switcher.is-mobile-calendar-tabs {
        align-items: center;
        display: grid;
        gap: .28rem;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        margin: 0;
        width: 100%;
    }
    .scheduling-calendar-shell[data-mobile-route-days="true"] .scheduling-view-switcher.is-mobile-calendar-tabs a {
        border-radius: 999px;
        font-size: .78rem;
        justify-content: center;
        min-height: 34px;
        padding: .32rem .35rem;
        width: auto;
    }
    .scheduling-calendar-shell[data-mobile-route-days="true"] .calendar-week-grid {
        display: grid;
        gap: .3rem;
        grid-template-columns: repeat(7, minmax(2.2rem, 1fr));
        margin-bottom: .4rem;
    }
    .scheduling-calendar-shell[data-mobile-route-days="true"] .calendar-week-day {
        border-radius: 8px;
        gap: .12rem;
        min-height: 4.45rem;
        padding: .25rem;
    }
    .scheduling-calendar-shell[data-mobile-route-days="true"] .calendar-week-day-top .calendar-day-label {
        align-items: center;
        display: inline-flex;
        gap: .16rem;
        min-width: 0;
        text-decoration: none;
    }
    .scheduling-calendar-shell[data-mobile-route-days="true"] .calendar-week-date-number { color: #17233a; font-size: .76rem; font-weight: 950; }
    .scheduling-calendar-shell[data-mobile-route-days="true"] .calendar-week-date-full { display: none; }
    .scheduling-calendar-shell[data-mobile-route-days="true"] .calendar-day-symbol {
        color: #64748b;
        font-size: .62rem;
        font-weight: 950;
        line-height: 1;
    }
    .scheduling-calendar-shell[data-mobile-route-days="true"] .mobile-calendar-bring-panel { display: block; }
    .scheduling-calendar-shell[data-mobile-route-days="true"] .calendar-month-grid-v2 .calendar-month-body {
        display: grid;
        gap: .3rem;
        grid-template-columns: repeat(7, minmax(2.2rem, 1fr));
    }
    .scheduling-calendar-shell[data-mobile-route-days="true"] .calendar-month-day {
        border-radius: 8px;
        gap: .12rem;
        min-height: 4.45rem;
        padding: .25rem;
    }
    .scheduling-calendar-shell[data-mobile-route-days="true"] .calendar-day-top { min-height: 1rem; }
    .scheduling-calendar-shell[data-mobile-route-days="true"] .calendar-day-num { font-size: .76rem; margin: 0; }
    .scheduling-calendar-shell[data-mobile-route-days="true"] .calendar-day-metrics,
    .scheduling-calendar-shell[data-mobile-route-days="true"] .calendar-day-warning-row,
    .scheduling-calendar-shell[data-mobile-route-days="true"] .calendar-work-order-list,
    .scheduling-calendar-shell[data-mobile-route-days="true"] .calendar-more-link { display: none; }
    .scheduling-calendar-shell[data-mobile-route-days="true"] .calendar-mobile-day-tile {
        align-items: center;
        background: #f8fbff;
        border: 1px solid #dbe4ee;
        border-radius: 7px;
        color: #334155;
        display: grid;
        gap: .02rem;
        justify-items: center;
        min-height: 2.5rem;
        padding: .15rem;
        width: 100%;
    }
    .scheduling-calendar-shell[data-mobile-route-days="true"] .calendar-mobile-day-tile strong { color: #17233a; font-size: .86rem; line-height: 1; }
    .scheduling-calendar-shell[data-mobile-route-days="true"] .calendar-mobile-day-tile span { font-size: .56rem; font-weight: 900; line-height: 1; }
    .scheduling-calendar-shell[data-mobile-route-days="true"] .calendar-selected-day-metrics { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .scheduling-calendar-shell[data-mobile-route-days="true"] .calendar-selected-day-metrics span { border-radius: 7px; gap: 0; padding: .38rem .25rem; text-align: center; }
    .scheduling-calendar-shell[data-mobile-route-days="true"] .calendar-selected-day-metrics strong { font-size: .82rem; }
    .scheduling-calendar-shell[data-mobile-route-days="true"] .calendar-selected-day-metrics small { display: none; }
    .scheduling-calendar-shell[data-mobile-route-days="true"] .calendar-selected-day-grid { gap: .55rem; }
    .scheduling-calendar-shell[data-mobile-route-days="true"] .calendar-selected-stop-list[data-mobile-daily-work-orders="true"] { gap: .35rem; }
    .scheduling-calendar-shell[data-mobile-route-days="true"] .calendar-mobile-work-card {
        border-left: 4px solid #2563eb;
        gap: .08rem;
        min-height: calc((100svh - 8rem) / 3.5);
        padding: .42rem .48rem;
    }
    .scheduling-calendar-shell[data-mobile-route-days="true"] .calendar-mobile-work-card strong,
    .scheduling-calendar-shell[data-mobile-route-days="true"] .calendar-mobile-work-card span {
        max-width: 100%;
        min-width: 0;
        overflow: hidden;
        overflow-wrap: anywhere;
        text-overflow: ellipsis;
    }
    .scheduling-calendar-shell[data-mobile-route-days="true"] .calendar-mobile-work-card > strong { white-space: nowrap; }
    .scheduling-calendar-shell[data-mobile-route-days="true"] .calendar-mobile-work-title { color: #17233a; font-size: .75rem; font-weight: 850; }
    .scheduling-calendar-shell[data-mobile-route-days="true"] .calendar-mobile-work-title,
    .scheduling-calendar-shell[data-mobile-route-days="true"] .calendar-mobile-work-address {
        -webkit-box-orient: vertical;
        display: -webkit-box;
        line-clamp: 2;
        -webkit-line-clamp: 2;
        white-space: normal;
    }
    .scheduling-calendar-shell[data-mobile-route-days="true"] .calendar-mobile-work-address { color: #64748b; font-size: .7rem; }
    .scheduling-calendar-shell[data-mobile-route-days="true"] .calendar-mobile-work-meta {
        display: grid;
        gap: .25rem;
        grid-template-columns: minmax(0, 1.35fr) minmax(0, .8fr) minmax(0, .75fr);
        margin-top: .12rem;
    }
    .scheduling-calendar-shell[data-mobile-route-days="true"] .calendar-mobile-work-meta b {
        background: #eef2ff;
        border-radius: 999px;
        color: #334155;
        font-size: .62rem;
        overflow: hidden;
        padding: .12rem .28rem;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .calendar-day-work-dialog { max-width: calc(100vw - 1rem); padding: .75rem; width: calc(100vw - 1rem); }
    .calendar-day-dialog-work-card { min-height: 3.15rem; }
    .scheduling-calendar-map-shell .calendar-map-date-strip { gap: .35rem; }
    .scheduling-calendar-map-shell .calendar-map-date-strip > .btn { display: none; }
    .scheduling-calendar-map-shell .calendar-map-week-days {
        display: grid;
        gap: .25rem;
        grid-template-columns: repeat(7, minmax(0, 1fr));
        overflow: visible;
    }
    .scheduling-calendar-map-shell .calendar-map-day { border-radius: 999px; min-height: 34px; padding: .18rem .1rem; }
    .scheduling-calendar-map-shell .calendar-map-day span { display: none; }
    .scheduling-calendar-map-shell .calendar-map-day strong { font-size: .7rem; }
    .scheduling-calendar-map-shell .calendar-map-list-heading p,
    .scheduling-calendar-map-shell .calendar-map-work-actions,
    .scheduling-calendar-map-shell .calendar-map-work-main p,
    .scheduling-calendar-map-shell .calendar-map-work-main small { display: none; }
    .scheduling-calendar-map-shell .calendar-map-list-section { display: grid; gap: .3rem; grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .scheduling-calendar-map-shell .calendar-map-list-section h3,
    .scheduling-calendar-map-shell .calendar-map-list-section .empty-state-inline { grid-column: 1 / -1; }
    .scheduling-calendar-map-shell .calendar-map-work-card {
        align-content: center;
        border-left-width: 3px;
        gap: .18rem;
        min-height: 3.4rem;
        padding: .34rem .25rem;
        text-align: center;
    }
    .scheduling-calendar-map-shell .calendar-map-order-badge { font-size: .66rem; justify-self: center; min-height: 1.3rem; min-width: 1.3rem; }
    .scheduling-calendar-map-shell .calendar-map-work-main h3 { font-size: .66rem; margin: 0; max-width: 100%; overflow: hidden; overflow-wrap: anywhere; text-overflow: ellipsis; }
    .scheduling-calendar-map-shell .calendar-map-work-meta { display: none; }
    .mobile-route-map-shell .page-header { margin-bottom: .25rem; }
    .mobile-route-map-command { gap: .45rem; grid-template-columns: 1fr; margin-bottom: 0; padding: .55rem; }
    .mobile-route-map-command .calendar-workspace-link { display: none; }
    .mobile-route-map-command .scheduling-view-switcher.is-desktop-calendar-tabs { display: none; }
    .mobile-route-map-command .scheduling-view-switcher.is-mobile-calendar-tabs {
        display: grid;
        gap: .28rem;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        margin: 0;
    }
    .mobile-route-map-command .scheduling-view-switcher.is-mobile-calendar-tabs a {
        border-radius: 999px;
        font-size: .78rem;
        justify-content: center;
        min-height: 34px;
        padding: .32rem .35rem;
        width: auto;
    }
    .mobile-route-map-day-nav .btn { justify-content: center; min-height: 36px; padding: .35rem .45rem; width: auto; }
    .mobile-route-days-map { min-height: calc(100svh - 10.5rem); }
    .employee-route-header { display: grid; }
    .employee-route-header .button-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
    .employee-route-week-nav .btn { justify-content: center; min-height: 36px; padding: .35rem .45rem; }
    .employee-route-map-nav .btn { justify-content: center; min-height: 36px; padding: .35rem .45rem; }
    .employee-route-page,
    .employee-route-header,
    .employee-route-duration,
    .employee-route-work-list,
    .employee-route-work-card,
    .employee-route-bring-panel {
        max-width: 100%;
        min-width: 0;
    }
    .employee-route-week-nav strong,
    .employee-route-map-nav strong {
        overflow-wrap: anywhere;
        white-space: normal;
    }
    .employee-route-week-strip,
    .employee-route-month-grid {
        gap: .18rem;
    }
    .employee-route-day-card {
        min-height: 3.35rem;
        padding: .22rem;
    }
    .employee-route-day-count {
        min-height: 1.85rem;
    }
    .employee-route-duration {
        align-items: stretch;
        display: grid;
        grid-template-columns: 1fr;
    }
    .employee-route-duration span {
        text-align: left;
    }
    .employee-route-map { min-height: 30svh; }
    .employee-route-map-page .employee-route-map { min-height: calc(100svh - 9rem); }
    .employee-route-work-card {
        gap: .4rem;
        min-height: auto;
        padding: .65rem;
    }
    .employee-route-work-main > strong {
        overflow-wrap: anywhere;
        white-space: normal;
    }
    .employee-route-work-address {
        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }
    .employee-route-work-meta {
        grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
    }
    .employee-route-work-meta b {
        min-height: 34px;
        overflow-wrap: anywhere;
        white-space: normal;
    }
    .employee-route-bring-panel summary {
        align-items: flex-start;
    }
    .employee-route-bring-panel summary span,
    .employee-route-bring-panel li strong,
    .employee-route-bring-panel li span {
        overflow-wrap: anywhere;
        white-space: normal;
    }
}

/* ============================================================
   Scheduling Map Pins, Geocoding, Smart Grouping, Restrictions
   (V4.1 additions)
   ============================================================ */

/* --- Geocoding progress bar --------------------------------- */
.geocode-progress-bar { display: none; background: #e5edf8; border-radius: 8px; padding: 0.6rem 0.9rem; margin-bottom: 0.75rem; }
.geocode-progress-label { font-size: 0.82rem; color: #374151; margin-bottom: 0.35rem; }
.geocode-bar { height: 8px; background: #dde4ef; border-radius: 99px; overflow: hidden; }
.geocode-bar-fill { height: 100%; background: #2563eb; border-radius: 99px; width: 0%; transition: width 0.4s; }
#geocode-needs-list { font-size: 0.78rem; color: #6b7280; margin-top: 0.5rem; }
#geocode-needs-list summary { cursor: pointer; color: #374151; font-size: 0.82rem; }

/* --- Map toolbar (draw-to-select) --------------------------- */
.workspace-map-toolbar { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; margin-bottom: 0.5rem; }
.workspace-map-toolbar .btn.active { background: #2563eb; color: #fff; border-color: #2563eb; }
.workspace-route-target { align-items: center; background: #f8fafc; border: 1px solid #dbe4ee; border-radius: 8px; display: inline-flex; gap: .4rem; min-height: 36px; padding: .28rem .55rem; }
.workspace-route-target select { border: 1px solid #cbd5e1; border-radius: 6px; font-size: .82rem; min-height: 30px; }
.workspace-route-target.is-empty { color: #64748b; font-size: .82rem; }
.workspace-route-target-summary { background: #eaf4ef; border: 1px solid #b7dfc7; border-radius: 999px; color: #14532d; font-size: .78rem; font-weight: 850; padding: .28rem .6rem; }
#draw-selected-count { font-size: 0.82rem; color: #374151; }

/* --- Pin custom icon --------------------------------------- */
.workspace-map-pin { background: none ; border: none ; }
.workspace-map-pin svg { filter: drop-shadow(0 2px 4px rgba(0,0,0,0.22)); }
.workspace-map-pin.pin-selected svg { filter: drop-shadow(0 0 6px #f59e0b) drop-shadow(0 2px 4px rgba(0,0,0,0.22)); }
.workspace-map-pin.pin-focused .workspace-map-pin-badge { box-shadow: 0 0 0 3px rgba(37,99,235,.3), 0 6px 16px rgba(15,23,42,.2); transform: translateY(-2px); }

/* --- Map popup --------------------------------------------- */
.map-pin-popup { font-size: 0.87rem; min-width: 220px; max-width: 330px; }
.map-pin-popup strong { display: block; font-size: 0.95rem; }
.map-pin-popup p { margin: 0.2rem 0; color: #374151; }
.popup-line-items { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.25rem; margin: 0.4rem 0; }
.popup-li { background: #f1f5f9; border-radius: 6px; padding: 0.25rem 0.4rem; font-size: 0.76rem; display: flex; flex-direction: column; }
.popup-li-name { font-weight: 500; color: #1e293b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.popup-li-price { color: #6b7280; font-size: 0.72rem; }
.popup-note { background: #eff6ff; border-left: 3px solid #3b82f6; padding: 0.3rem 0.5rem; border-radius: 4px; font-size: 0.8rem; margin: 0.3rem 0; }
.popup-restriction { background: #fff7ed; border-left: 3px solid #f97316; padding: 0.3rem 0.5rem; border-radius: 4px; font-size: 0.8rem; margin: 0.3rem 0; color: #7c2d12; }
.popup-action-row { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.5rem; align-items: center; }
.popup-action-row select { font-size: 0.78rem; padding: 0.2rem 0.4rem; border: 1px solid #d1d5db; border-radius: 6px; max-width: 120px; }
.map-popup-add-form { display: contents; }
.map-popup-add-form.map-pin-touch-fallback { align-items: center; display: flex; flex-wrap: wrap; gap: .3rem; }
.map-popup-add-form.map-pin-touch-fallback small { color: #526579; flex-basis: 100%; font-size: .72rem; line-height: 1.25; }

/* --- Status badge orange (restriction) ---------------------- */
.status-badge { border: 1px solid #d8e3ea; border-radius: 99px; display: inline-flex; font-size: 0.75rem; font-weight: 700; line-height: 1.2; padding: 0.15rem 0.55rem; }
.status-badge-blue { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }
.status-badge-gray { background: #f8fafc; color: #475569; border-color: #cbd5e1; }
.status-badge-orange { background: #fff7ed; color: #c2410c; border: 1px solid #fed7aa; padding: 0.15rem 0.55rem; border-radius: 99px; font-size: 0.75rem; font-weight: 600; }
.status-badge-purple { background: #f5f3ff; color: #6d28d9; border-color: #ddd6fe; }
.status-badge-red { background: #fff1f2; color: #be123c; border-color: #fecdd3; }

/* --- Job card enhancements ---------------------------------- */
.job-card-line-items { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.25rem 0.5rem; margin: 0.4rem 0; }
.job-card-line-item { font-size: 0.76rem; display: flex; flex-direction: column; }
.li-name { font-weight: 500; color: #1e293b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.li-price { color: #6b7280; font-size: 0.72rem; }
.job-card-note { font-size: 0.8rem; color: #3b82f6; margin: 0.25rem 0 0; }
.job-card-restriction-msg { font-size: 0.78rem; color: #c2410c; background: #fff7ed; border-radius: 4px; padding: 0.2rem 0.4rem; margin: 0.25rem 0 0; }
.job-card-restriction .status-badge { display: inline-block; }
.job-note-badge { display: inline-block; font-size: 0.75rem; color: #3b82f6; margin-left: 0.3rem; vertical-align: middle; }

/* --- Viewport sync header ----------------------------------- */
.workspace-job-list-header { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; flex-wrap: wrap; }
.workspace-job-list-header h3, .workspace-job-list-header .section-header { margin: 0; }
.job-list-viewport-badge { display: none; background: #e5edf8; color: #1d4ed8; font-size: 0.75rem; padding: 0.15rem 0.5rem; border-radius: 99px; }
.job-list-show-all-label { font-size: 0.8rem; color: #6b7280; display: flex; align-items: center; gap: 0.25rem; cursor: pointer; margin-left: auto; }

/* --- Smart fill form --------------------------------------- */
.smart-fill-form { display: flex; align-items: center; gap: 0.4rem; margin-top: 0.35rem; }
.smart-fill-label { font-size: 0.82rem; color: #374151; display: flex; align-items: center; gap: 0.3rem; }
.smart-fill-hours { width: 56px; padding: 0.2rem 0.4rem; border: 1px solid #d1d5db; border-radius: 6px; font-size: 0.82rem; }

/* --- Scheduling restriction list (on customer profile) ------ */
.restriction-list { display: flex; flex-direction: column; gap: 0.4rem; margin: 0.5rem 0; }
.restriction-item { display: flex; align-items: flex-start; gap: 0.5rem; background: #fff7ed; border: 1px solid #fed7aa; border-radius: 8px; padding: 0.5rem 0.7rem; font-size: 0.85rem; }
.restriction-item-type { font-weight: 600; color: #c2410c; min-width: 110px; }
.restriction-item-detail { color: #374151; flex: 1; }
.restriction-item-remove { margin-left: auto; }
.restriction-add-form { margin-top: 0.75rem; }
.restriction-type-fields { margin-top: 0.5rem; }

/* --- Nearby suggestions ------------------------------------ */
.nearby-suggestion-highlight { filter: drop-shadow(0 0 5px #f59e0b) ; }
.nearby-suggestions-panel { background: #fffbeb; border: 1px solid #fde68a; border-radius: 10px; padding: 0.6rem 0.9rem; margin-top: 0.5rem; font-size: 0.83rem; }
.nearby-suggestions-panel h4 { margin: 0 0 0.4rem; font-size: 0.88rem; }

/* --- Orange pin (restriction) — legend swatch -------------- */
.legend-pin-orange { display: inline-block; width: 12px; height: 12px; background: #f97316; border-radius: 50%; vertical-align: middle; }

/* --- Draw selection shape ---------------------------------- */
.leaflet-interactive.draw-select-shape { stroke-dasharray: 6 4; }

@media (max-width: 640px) {
    .popup-line-items, .job-card-line-items { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .workspace-map-toolbar { align-items: stretch; font-size: 0.8rem; }
    .workspace-route-target, .workspace-route-target-summary, .workspace-map-toolbar .btn { justify-content: center; width: 100%; }
}

/* Scheduling workspace value/code map pins */
.workspace-map-pin { background: transparent ; border: 0 ; }
.workspace-map-pin-badge {
    align-items: center;
    background: #475569;
    border: 2px solid #fff;
    border-radius: 999px;
    box-shadow: 0 3px 9px rgba(15, 23, 42, .28);
    color: #fff;
    display: inline-flex;
    flex-direction: column;
    gap: 1px;
    line-height: 1.05;
    max-width: 92px;
    min-width: 72px;
    padding: 4px 8px 5px;
    position: relative;
    transform: translateY(-2px);
    white-space: nowrap;
}
.workspace-map-pin-badge::after {
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 9px solid #475569;
    bottom: -8px;
    content: "";
    left: calc(50% - 7px);
    position: absolute;
}
.workspace-map-pin-badge.scheduled { background: #15803d; }
.workspace-map-pin-badge.scheduled::after { border-top-color: #15803d; }
.workspace-map-pin-badge.unscheduled { background: #2563eb; }
.workspace-map-pin-badge.unscheduled::after { border-top-color: #2563eb; }
.workspace-map-pin-badge.overdue { background: #dc2626; }
.workspace-map-pin-badge.overdue::after { border-top-color: #dc2626; }
.workspace-map-pin-price { font-size: .78rem; font-weight: 800; }
.workspace-map-pin-codes { font-size: .61rem; font-weight: 700; max-width: 78px; overflow: hidden; text-overflow: ellipsis; }
.workspace-map-pin-note { background: #f59e0b; border-radius: 999px; font-size: .62rem; line-height: 1; padding: 2px 3px; position: absolute; right: -5px; top: -7px; }
.popup-li-code { background: #e0f2fe; border-radius: 999px; color: #075985; font-weight: 800; margin-right: .25rem; padding: .05rem .3rem; }
.popup-service-codes { color: #075985; font-weight: 800; }
.route-window-cascade-note { min-height: 1.2rem; }
.employees-center-layout {
    display: grid;
    grid-template-columns: minmax(300px, 0.85fr) minmax(0, 1.5fr);
    gap: 1rem;
    align-items: start;
}

.employees-list-panel,
.employees-detail-panel {
    min-width: 0;
}

.employees-list-panel {
    overflow: hidden;
}

.employees-list-panel .table-wrap {
    max-width: 100%;
    overflow-x: auto;
}

.employees-list-panel table {
    min-width: 760px;
}

.employee-schedule-toggle-form {
    align-items: center;
    display: inline-flex;
    gap: .45rem;
    margin: 0;
}

.employee-schedule-toggle-form-compact {
    justify-content: center;
}

.employee-schedule-toggle {
    align-items: center;
    cursor: pointer;
    display: inline-flex;
    gap: .55rem;
    margin: 0;
    position: relative;
}

.employee-schedule-toggle input {
    height: 1px;
    left: -9999px;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    width: 1px;
}

.employee-schedule-toggle-ui {
    background: #cbd5e1;
    border-radius: 999px;
    display: inline-flex;
    flex: 0 0 auto;
    height: 1.4rem;
    position: relative;
    transition: background-color .18s ease;
    width: 2.5rem;
}

.employee-schedule-toggle-ui::after {
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .28);
    content: '';
    height: 1rem;
    left: .2rem;
    position: absolute;
    top: .2rem;
    transition: transform .18s ease;
    width: 1rem;
}

.employee-schedule-toggle input:checked + .employee-schedule-toggle-ui {
    background: #22c55e;
}

.employee-schedule-toggle input:checked + .employee-schedule-toggle-ui::after {
    transform: translateX(1.1rem);
}

.employee-schedule-toggle-copy {
    color: #334155;
    font-size: .78rem;
    font-weight: 800;
}

.employee-schedule-pref-field {
    grid-column: 1 / -1;
}

.sr-only {
    border: 0;
    clip: rect(0, 0, 0, 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.clock-review-panel table {
    min-width: 900px;
}

.clock-review-action-form {
    align-items: stretch;
    min-width: 260px;
}

.clock-review-action-form textarea {
    min-height: 2.35rem;
    min-width: 180px;
}

.clock-crew-review-panel {
    border-color: #bfdbfe;
    background: #f8fbff;
}

.clock-crew-review-filter {
    align-items: end;
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: .65rem;
}

.clock-crew-review-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(135px, 1fr));
    gap: .5rem;
    margin: .75rem 0;
}

.clock-crew-review-summary span {
    background: #ffffff;
    border: 1px solid #dbeafe;
    border-radius: 8px;
    color: #475569;
    padding: .55rem .65rem;
}

.clock-crew-review-summary strong {
    color: var(--text);
    display: block;
    font-size: 1.1rem;
}

.clock-crew-review-panel table {
    min-width: 1040px;
}

.clock-crew-review-response {
    color: #475569;
    font-size: .88rem;
    line-height: 1.45;
    margin: .35rem 0 0;
}

.clock-crew-review-action-form {
    align-items: stretch;
    min-width: 280px;
}

.clock-crew-review-action-form textarea {
    min-height: 2.5rem;
    min-width: 190px;
}

.clock-crew-review-card-list .clock-crew-review-action-form {
    min-width: 0;
    width: 100%;
}

.employees-detail-panel {
    overflow-wrap: anywhere;
}

.employees-detail-panel h1,
.employees-detail-panel h2,
.employees-detail-panel h3 {
    overflow-wrap: anywhere;
}

.help-academy-page,
.help-subnav-card,
.help-subnav-actions,
.help-academy-schema-card,
.help-academy-summary-card,
.help-academy-track-card,
.help-academy-track-detail-card,
.help-academy-lesson-card,
.help-academy-lesson-progress-card,
.help-academy-checklist-card,
.help-academy-quiz-card,
.help-academy-completion-card,
.help-academy-team-card,
.help-academy-actions {
    max-width: 100%;
    min-width: 0;
    overflow-wrap: anywhere;
}

.help-academy-team-scroll {
    border: 1px solid #dbe4ee;
    border-radius: 8px;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
}

.help-academy-team-scroll table {
    min-width: 680px;
}

.help-academy-quiz-form fieldset {
    border: 1px solid #dbe4ee;
    border-radius: 8px;
    margin: .75rem 0;
    min-width: 0;
    padding: .75rem;
}

.help-academy-quiz-form legend {
    font-weight: 800;
    max-width: 100%;
    overflow-wrap: anywhere;
    padding: 0 .25rem;
}

.help-academy-quiz-form label {
    align-items: flex-start;
    display: flex;
    gap: .45rem;
    max-width: 100%;
    overflow-wrap: anywhere;
    white-space: normal;
}

.help-academy-quiz-form input[type="radio"] {
    flex: 0 0 auto;
    margin-top: .2rem;
}

.employee-documents-page,
.employee-documents-list,
.employee-document-page,
.employee-document-detail-card,
.employee-document-detail-list,
.employee-document-ack-form,
.employee-document-unavailable {
    max-width: 100%;
    min-width: 0;
    overflow-wrap: anywhere;
}

.employee-documents-list .table-wrap {
    border: 1px solid #dbe4ee;
    border-radius: 8px;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
}

.employee-documents-list table {
    min-width: 640px;
}

.employee-document-detail-card .notice {
    margin: .75rem 0;
}

.employee-document-ack-form {
    align-items: stretch;
}

.employee-chat-layout {
    align-items: start;
}

.employee-chat-page,
.employee-chat-thread-panel,
.employee-chat-detail-panel,
.employee-chat-create-card,
.employee-chat-message-list,
.employee-chat-message {
    max-width: 100%;
    min-width: 0;
    overflow-wrap: anywhere;
}

.employee-chat-thread-scroll {
    border: 1px solid #dbe4ee;
    border-radius: 8px;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
}

.employee-chat-thread-table {
    min-width: 560px;
}

.employee-chat-thread-table td:first-child {
    max-width: 18rem;
}

.employee-chat-thread-table strong,
.employee-chat-thread-table small,
.employee-chat-message p,
.employee-chat-message .metric-label {
    overflow-wrap: anywhere;
    white-space: normal;
}

.employee-chat-create-form,
.employee-chat-reply-form {
    align-items: stretch;
}

.employee-chat-create-form textarea,
.employee-chat-reply-form textarea {
    min-height: 5rem;
}

.employee-chat-participants {
    grid-column: 1 / -1;
    max-height: 18rem;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.employee-detail-tabs {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    margin: .85rem 0 1rem;
}

.employee-detail-tabs a {
    align-items: center;
    background: #f8fafc;
    border: 1px solid var(--border);
    border-radius: .55rem;
    color: var(--text);
    display: inline-flex;
    font-size: .88rem;
    font-weight: 800;
    line-height: 1.2;
    min-height: 2.15rem;
    padding: .45rem .65rem;
    text-decoration: none;
    white-space: normal;
}

.employee-detail-tabs a:hover {
    background: #eef2ff;
    border-color: #c7d2fe;
}

.employee-detail-tabs a.active {
    background: #dcfce7;
    border-color: #86efac;
    color: #166534;
}

.permission-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 0.5rem;
    margin: 0.75rem 0 1rem;
}

.permission-choice {
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.6rem;
    background: var(--panel);
}

.permission-choice-main {
    display: grid;
    gap: .35rem;
    margin: 0;
}

.employee-permission-matrix-grid .permission-choice {
    align-items: start;
    display: grid;
    gap: .5rem;
    grid-template-columns: minmax(0, 1fr) auto;
}

.employee-permission-matrix-grid .permission-help-card {
    grid-column: 1 / -1;
}

.permission-choice span {
    display: block;
    font-weight: 700;
    margin-bottom: 0.4rem;
}

.permission-choice.role-default {
    border-color: #9ec5fe;
    background: #f0f6ff;
}

.permission-choice.permission-effective-allowed {
    border-color: #86efac;
    background: #f0fdf4;
}

.permission-choice.permission-effective-denied {
    border-color: #fecaca;
    background: #fff7f7;
}

.user-enabled-permissions {
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    margin: .85rem 0 1rem;
    padding: .85rem;
    background: #f8fbff;
}

.user-enabled-choice {
    position: relative;
}

.permission-enabled-radios {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem .75rem;
    margin-top: .45rem;
}

.permission-enabled-radios label {
    align-items: center;
    display: inline-flex;
    gap: .3rem;
    margin: 0;
}

.permission-enabled-radios input {
    width: auto;
}

.is-hidden {
    display: none ;
}

@media (max-width: 980px) {
    .employees-center-layout {
        grid-template-columns: 1fr;
    }
}

.employee-field-accountability-card,
.payroll-field-accountability-card {
    overflow: hidden;
}

.employee-field-accountability-grid {
    display: grid;
    gap: .75rem;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.employee-field-accountability-grid article {
    background: rgba(15, 23, 42, .035);
    border: 1px solid rgba(148, 163, 184, .35);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: .3rem;
    min-width: 0;
    padding: .75rem;
}

.employee-field-accountability-grid strong,
.employee-field-accountability-grid span,
.payroll-field-accountability-card dt,
.payroll-field-accountability-card dd {
    overflow-wrap: anywhere;
}

.employee-field-accountability-links,
.payroll-field-accountability-links {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: .75rem;
}

@media (max-width: 640px) {
    .employee-field-accountability-grid {
        grid-template-columns: 1fr;
    }

    .employee-field-accountability-links > *,
    .payroll-field-accountability-links > * {
        flex: 1 1 100%;
    }
}

/* Mobile employee and payroll polish */
@media (max-width: 640px) {
    .help-academy-page,
    .help-subnav-card,
    .help-academy-schema-card,
    .help-academy-summary-card,
    .help-academy-track-card,
    .help-academy-track-detail-card,
    .help-academy-lesson-card,
    .help-academy-lesson-progress-card,
    .help-academy-checklist-card,
    .help-academy-quiz-card,
    .help-academy-completion-card,
    .help-academy-team-card {
        padding: .75rem;
    }

    .help-academy-page h1,
    .help-academy-page h2,
    .help-academy-page h3 {
        max-width: 100%;
        overflow-wrap: anywhere;
    }

    .help-academy-page h1 {
        font-size: 1.35rem;
        line-height: 1.2;
    }

    .help-academy-page h2 {
        font-size: 1.15rem;
        line-height: 1.25;
    }

    .help-subnav-actions,
    .help-academy-actions {
        display: grid;
        gap: .5rem;
        grid-template-columns: 1fr;
        width: 100%;
    }

    .help-subnav-actions > *,
    .help-academy-actions > *,
    .help-academy-completion-card .inline-form,
    .help-academy-quiz-form > * {
        min-width: 0;
        width: 100%;
    }

    .help-subnav-actions .btn,
    .help-academy-actions .btn,
    .help-academy-quiz-form .btn {
        justify-content: center;
        min-height: 44px;
        white-space: normal;
    }

    .help-academy-quiz-form fieldset {
        padding: .65rem;
    }

    .help-academy-team-scroll {
        margin-inline: -.1rem;
        touch-action: pan-x pan-y;
    }

    .help-academy-team-scroll table {
        min-width: 560px;
    }

    .employees-center-layout,
    .employees-list-panel,
    .employees-detail-panel,
    .employees-list-panel .table-wrap,
    .employees-detail-panel .table-wrap,
    .employee-permission-matrix-grid,
    .user-enabled-permissions,
    .payroll-dashboard-grid,
    .payroll-dashboard-grid .layout-card,
    .payroll-dashboard-grid .layout-card-body,
    .payroll-dashboard-grid .table-wrap,
    .compact-filter-card {
        max-width: 100%;
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .employees-center-layout,
    .payroll-dashboard-grid {
        gap: .75rem;
    }

    .employees-list-panel,
    .employees-detail-panel {
        padding: .85rem;
    }

    .employee-documents-page,
    .employee-document-page,
    .employee-document-detail-card,
    .employee-document-unavailable {
        padding: .75rem;
    }

    .employee-documents-page h1,
    .employee-document-page h1,
    .employee-document-unavailable h1 {
        font-size: 1.25rem;
        line-height: 1.2;
    }

    .employee-documents-actions,
    .employee-document-actions,
    .employee-document-ack-form {
        display: grid;
        gap: .5rem;
        grid-template-columns: 1fr;
        width: 100%;
    }

    .employee-documents-actions > *,
    .employee-document-actions > *,
    .employee-document-ack-form > * {
        min-width: 0;
        width: 100%;
    }

    .employee-documents-actions .btn,
    .employee-document-actions .btn,
    .employee-document-ack-form .btn {
        justify-content: center;
        min-height: 44px;
        white-space: normal;
    }

    .employee-documents-list .table-wrap {
        margin-inline: -.1rem;
        touch-action: pan-x pan-y;
    }

    .employee-documents-list table {
        min-width: 540px;
    }

    .employee-document-detail-list {
        gap: .5rem;
        grid-template-columns: 1fr;
    }

    .employee-document-detail-list div {
        border-radius: 8px;
        padding: .65rem;
    }

    .employee-document-detail-list dt,
    .employee-document-detail-list dd,
    .employee-document-detail-card .notice {
        max-width: 100%;
        overflow-wrap: anywhere;
        white-space: normal;
    }

    .employee-document-detail-list dd {
        font-size: .98rem;
    }

    .employee-chat-page,
    .employee-chat-thread-panel,
    .employee-chat-detail-panel,
    .employee-chat-create-card,
    .employee-chat-message-list {
        padding: .75rem;
    }

    .employee-chat-page h1,
    .employee-chat-detail-panel h2,
    .employee-chat-thread-panel h2,
    .employee-chat-create-card h3 {
        font-size: 1.25rem;
        line-height: 1.2;
    }

    .employee-chat-quick-actions,
    .employee-chat-create-form,
    .employee-chat-reply-form {
        display: grid;
        gap: .5rem;
        grid-template-columns: 1fr;
    }

    .employee-chat-thread-scroll {
        margin-inline: -.1rem;
        touch-action: pan-x pan-y;
    }

    .employee-chat-thread-table {
        min-width: 500px;
    }

    .employee-chat-message {
        padding: .65rem;
    }

    .employee-chat-message .metric-label {
        font-size: .72rem;
        line-height: 1.35;
    }

    .employee-chat-message p {
        font-size: .9rem;
        line-height: 1.45;
        margin: .35rem 0 0;
    }

    .employee-chat-participants {
        grid-template-columns: 1fr;
        max-height: 14rem;
    }

    .employee-chat-participants .permission-choice {
        align-items: flex-start;
        display: flex;
        gap: .5rem;
    }

    .employee-chat-participants .permission-choice input {
        flex: 0 0 auto;
        margin-top: .15rem;
    }

    .employee-chat-participants .permission-choice span {
        margin: 0;
        min-width: 0;
    }

    .employees-list-panel .button-row,
    .employees-detail-panel .button-row,
    .employees-detail-panel .compact-form,
    .employees-detail-panel .inline-form,
    .payroll-dashboard-grid .button-row,
    .payroll-dashboard-grid .compact-form,
    .payroll-dashboard-grid .inline-form {
        align-items: stretch;
        display: grid;
        gap: .5rem;
        grid-template-columns: 1fr;
        justify-content: stretch;
        width: 100%;
    }

    .employees-list-panel .button-row > *,
    .employees-detail-panel .button-row > *,
    .employees-detail-panel .compact-form > *,
    .employees-detail-panel .inline-form > *,
    .payroll-dashboard-grid .button-row > *,
    .payroll-dashboard-grid .compact-form > *,
    .payroll-dashboard-grid .inline-form > * {
        min-width: 0;
        width: 100%;
    }

    .employees-list-panel .btn,
    .employees-detail-panel .btn,
    .employees-detail-panel button,
    .payroll-dashboard-grid .btn,
    .payroll-dashboard-grid button {
        min-height: 44px;
        white-space: normal;
        width: 100%;
    }

    .employees-list-panel .filters-row,
    .employees-detail-panel .filters-row,
    .employees-detail-panel .form-grid-3,
    .employees-detail-panel .form-grid-4,
    .employees-detail-panel .permission-grid,
    .user-enabled-permissions .permission-grid,
    .employee-permission-matrix-grid,
    .payroll-dashboard-grid .metric-list {
        grid-template-columns: 1fr;
    }

    .employees-list-panel .table-wrap,
    .employees-detail-panel .table-wrap,
    .payroll-dashboard-grid .table-wrap {
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        touch-action: pan-x pan-y;
    }

    .employees-list-panel table {
        min-width: 640px;
    }

    .employees-detail-panel .table-wrap table,
    .payroll-dashboard-grid .table-wrap table {
        min-width: 760px;
    }

    .employee-detail-tabs {
        margin-left: -.1rem;
        margin-right: -.1rem;
    }

    .permission-choice,
    .permission-choice span,
    .permission-choice code,
    .permission-help-card,
    .metric-list dt,
    .metric-list dd,
    .payroll-dashboard-grid h2,
    .payroll-dashboard-grid h3,
    .payroll-dashboard-grid p,
    .payroll-dashboard-grid .panel-note {
        max-width: 100%;
        overflow-wrap: anywhere;
        white-space: normal;
    }

    .employee-permission-matrix-grid .permission-choice {
        grid-template-columns: 1fr;
    }

    .employee-permission-matrix-grid .permission-link-icon,
    .permission-choice select,
    .payroll-dashboard-grid select,
    .payroll-dashboard-grid input,
    .payroll-dashboard-grid textarea {
        min-width: 0;
        width: 100%;
    }

    .compact-filter-card {
        padding: .85rem;
    }

    .payroll-dashboard-grid .card-heading-row {
        gap: .55rem;
    }
}

/* Mobile admin settings permissions polish */
@media (max-width: 640px) {
    .admin-form,
    .company-profile-form,
    .company-profile-form fieldset,
    .quick-permissions-panel,
    .permission-full-matrix,
    .permission-compare-panel,
    .permission-grid,
    .permission-health-grid,
    .permission-health-lists,
    .permission-health-grid article,
    .permission-health-lists section,
    .permission-matrix-form,
    .permission-module-group,
    .permission-preview-banner,
    .user-enabled-permissions,
    .impersonation-banner,
    .impersonation-controls,
    .deployment-status-grid,
    .activity-timeline,
    .activity-item,
    .brand-preview-card,
    .summary-card,
    .compact-details,
    .layout-card,
    .layout-card-body {
        max-width: 100%;
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .admin-form,
    .company-profile-form {
        width: 100%;
    }

    .company-profile-form fieldset,
    .permission-full-matrix,
    .permission-compare-panel,
    .quick-permissions-panel {
        padding: .85rem;
    }

    .company-profile-form .form-grid-2,
    .company-profile-form .form-grid-3,
    .company-profile-form .form-grid-4,
    .quick-permissions-grid,
    .permission-search-toolbar,
    .permission-compare-controls,
    .permission-compare-results,
    .permission-health-grid,
    .permission-health-lists,
    .permission-grid,
    .compact-details,
    .deployment-status-grid {
        grid-template-columns: 1fr;
    }

    .admin-tabs {
        flex-wrap: nowrap;
        max-width: 100%;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        padding-bottom: .25rem;
        scrollbar-gutter: stable;
        touch-action: pan-x pan-y;
    }

    .admin-tabs a {
        align-items: center;
        display: inline-flex;
        flex: 0 0 auto;
        min-height: 44px;
        white-space: nowrap;
    }

    .quick-permissions-panel {
        position: static;
        top: auto;
        z-index: auto;
    }

    .card-toolbar,
    .layout-controls,
    .permission-help-toolbar,
    .permission-preview-banner,
    .impersonation-banner,
    .impersonation-controls,
    .permission-compare-panel .card-heading-row,
    .permission-full-matrix .card-heading-row,
    .quick-permissions-panel .card-heading-row,
    .summary-card .card-heading-row {
        align-items: stretch;
        display: grid;
        gap: .5rem;
        grid-template-columns: 1fr;
        justify-content: stretch;
        max-width: 100%;
        width: 100%;
    }

    .card-toolbar > *,
    .layout-controls > *,
    .permission-help-toolbar > *,
    .permission-preview-banner > *,
    .impersonation-banner > *,
    .impersonation-controls > *,
    .permission-compare-panel .card-heading-row > *,
    .permission-full-matrix .card-heading-row > *,
    .quick-permissions-panel .card-heading-row > *,
    .summary-card .card-heading-row > * {
        min-width: 0;
        width: 100%;
    }

    .card-toolbar .btn-toolbar,
    .layout-controls .btn-toolbar,
    .permission-help-toolbar .btn,
    .permission-help-toolbar button,
    .permission-preview-banner .btn,
    .permission-preview-banner button,
    .impersonation-banner .btn,
    .impersonation-banner button,
    .impersonation-controls .btn,
    .impersonation-controls button,
    .permission-preview-form button,
    .permission-compare-panel button,
    .preset-inline-form button,
    .preset-import-form button,
    .role-preset-save-panel button,
    .company-profile-form button,
    .layout-card > .card button {
        min-height: 44px;
        white-space: normal;
        width: 100%;
    }

    .layout-card .card-heading-row {
        align-items: start;
        display: grid;
        gap: .5rem;
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .layout-card .layout-controls {
        align-items: center;
        display: flex;
        justify-content: flex-end;
        max-width: none;
        width: auto;
    }

    .layout-card .layout-controls > *,
    .layout-card .layout-controls .btn-toolbar,
    .layout-card .card-layout-toggle {
        min-height: 36px;
        white-space: nowrap;
        width: auto;
    }

    .layout-card .card-layout-toggle {
        min-height: 2.75rem;
        min-width: 2.75rem;
        width: 2.75rem;
    }

    .layout-card .layout-controls .toolbar-menu-panel .btn-toolbar {
        min-height: 2.75rem;
        min-width: 100%;
        white-space: normal;
        width: 100%;
    }

    .permission-preview-form,
    .preset-inline-form,
    .preset-import-form,
    .role-preset-save-panel {
        max-width: 100%;
        width: 100%;
    }

    .preset-inline-form {
        grid-template-columns: 1fr;
    }

    .permission-matrix-scroll {
        max-height: 68vh;
        overflow: auto;
        overscroll-behavior-inline: contain;
        scrollbar-gutter: stable;
        touch-action: pan-x pan-y;
    }

    .permission-matrix-row,
    .permission-override-row {
        align-items: stretch;
        grid-template-columns: 1fr;
    }

    .permission-matrix-row label,
    .permission-override-row label,
    .quick-permission-toggle {
        min-width: 0;
        width: 100%;
    }

    .permission-link-icon,
    .permission-link-text {
        min-height: 44px;
        white-space: normal;
        width: 100%;
    }

    .quick-permission-category {
        min-inline-size: 0;
        padding: .7rem;
    }

    .permission-health-grid article,
    .permission-health-lists section,
    .user-enabled-permissions,
    .activity-item {
        border-radius: 8px;
        padding: .65rem;
    }

    .quick-permission-toggle span,
    .quick-permission-toggle small,
    .permission-matrix-row span,
    .permission-matrix-row small,
    .permission-help-card,
    .permission-health-grid article,
    .permission-health-lists li,
    .permission-compare-column li,
    .permission-search-toolbar span,
    .user-enabled-permissions p,
    .activity-item p,
    .activity-meta span,
    .company-profile-form label,
    .company-profile-form small,
    .brand-preview-card p,
    .compact-details dt,
    .compact-details dd {
        max-width: 100%;
        overflow-wrap: anywhere;
        white-space: normal;
    }

    .brand-preview-card {
        display: grid;
        gap: .75rem;
        padding: .85rem;
    }

    .company-logo-preview,
    .company-logo-placeholder {
        max-height: 96px;
        max-width: 100%;
        width: min(100%, 14rem);
    }

    .company-logo-placeholder {
        min-height: 4.5rem;
        text-align: center;
    }

    .company-profile-page .company-template-table-scroll {
        display: none;
    }

    .company-profile-page .company-template-mobile-list {
        display: grid;
    }

    .company-profile-page .company-template-mobile-card {
        padding: .7rem;
    }

    input[type="file"] {
        width: 100%;
    }

    .deployment-status-grid {
        gap: .25rem;
    }

    .deployment-status-grid dt {
        margin-top: .35rem;
    }

    .deployment-status-grid dd {
        border-bottom: 1px solid var(--border);
        padding-bottom: .45rem;
        word-break: break-word;
    }

    .module-intro {
        align-items: stretch;
        display: grid;
        gap: .75rem;
        grid-template-columns: 1fr;
        padding: .9rem;
    }
}

/* Mobile/PWA shell foundation */
html {
    min-height: 100%;
    -webkit-text-size-adjust: 100%;
}

body,
.app-shell,
.public-shell {
    min-height: 100dvh;
}

body {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
}

img,
svg,
video,
canvas {
    max-width: 100%;
}

button,
.btn,
.button-link,
.link-button,
.primary-action,
input,
select,
textarea {
    max-width: 100%;
}

h1,
h2,
h3,
p,
.brand,
.nav-link,
.nav-group-label,
.account-identity,
.detail-list dd,
.card,
.ui-panel {
    overflow-wrap: anywhere;
}

.brand,
.page-header h1,
.compact-brand {
    letter-spacing: 0;
}

.offline-shell {
    align-content: center;
    padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
}

.offline-card {
    margin: 0 auto;
    max-width: 42rem;
}

@media (max-width: 900px) {
    .main-content {
        padding: max(.8rem, env(safe-area-inset-top)) max(.8rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(.8rem, env(safe-area-inset-left));
    }

    .app-sidebar {
        gap: .75rem;
        max-height: 48dvh;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: .85rem max(.85rem, env(safe-area-inset-right)) .85rem max(.85rem, env(safe-area-inset-left));
    }

    .app-sidebar .brand {
        color: #0f7f50;
        font-size: 1rem;
        white-space: normal;
    }

    .side-nav {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
    }

    .side-nav .nav-dropdown {
        padding-left: 0;
    }

    .account-area-sidebar {
        grid-template-columns: minmax(0, 1fr);
    }

    .account-identity strong,
    .account-identity small {
        white-space: normal;
    }

    .deployment-status-badge {
        white-space: normal;
    }
}

@media (max-width: 640px) {
    input,
    select,
    textarea {
        font-size: 16px;
    }

    button,
    .btn,
    .button-link,
    .link-button,
    .primary-action {
        min-width: 0;
        white-space: normal;
    }

    .nav-preference-form,
    .experience-mode-form {
        grid-template-columns: 1fr;
    }

    .page-header,
    .card,
    .ui-panel,
    .module-intro,
    .operational-module-shell {
        border-radius: .6rem;
    }
}

/* Mobile/PWA responsive shell polish */
html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

.app-shell,
.public-shell,
.main-content,
.global-topbar,
.app-sidebar,
.card,
.ui-panel,
.layout-card,
.module-intro,
.page-header {
    min-width: 0;
}

.main-content > *,
.layout-card-body,
.account-area,
.account-identity,
.nav-preference-form,
.experience-mode-form,
.logout-form,
.top-nav.grouped-nav,
.bottom-nav.grouped-nav {
    min-width: 0;
}

.account-company-link,
.deployment-status-badge,
.nav-link,
.nav-group-label,
.page-header p {
    overflow-wrap: anywhere;
}

.page-header h1,
.module-page-header h1,
.card h2,
.metric-value {
    letter-spacing: 0;
}

@media (max-width: 640px) {
    .global-topbar {
        border-radius: .5rem;
        gap: .55rem;
        padding: .55rem;
        width: 100%;
    }

    .compact-brand {
        font-size: 1rem;
        line-height: 1.2;
        white-space: normal;
    }

    .top-nav.grouped-nav,
    .bottom-nav.grouped-nav {
        display: flex;
        flex-wrap: nowrap;
        gap: .4rem;
        overflow-x: auto;
        overflow-y: visible;
        padding: .35rem;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
    }

    .top-nav.grouped-nav .nav-group,
    .bottom-nav.grouped-nav .nav-group,
    .top-nav.grouped-nav .nav-link-direct,
    .bottom-nav.grouped-nav .nav-link-direct {
        flex: 0 0 auto;
        max-width: min(82vw, 22rem);
        scroll-snap-align: start;
    }

    .top-nav.grouped-nav .nav-group[open],
    .bottom-nav.grouped-nav .nav-group[open] {
        flex-basis: min(82vw, 22rem);
    }

    .top-nav .nav-link,
    .top-nav .nav-group-label,
    .bottom-nav .nav-link,
    .bottom-nav .nav-group-label,
    .side-nav .nav-link,
    .side-nav .nav-group-label {
        min-height: 2.75rem;
        padding: .7rem .8rem;
        white-space: normal;
    }

    .nav-dropdown {
        max-height: 55dvh;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .account-area,
    .account-area-top,
    .account-area-sidebar {
        align-items: stretch;
        display: grid;
        gap: .5rem;
        grid-template-columns: 1fr;
        width: 100%;
    }

    .account-area-top {
        padding: .55rem;
    }

    .nav-preference-form select,
    .nav-preference-form button,
    .experience-mode-button,
    .logout-button,
    button,
    .btn,
    .button-link,
    .link-button,
    .primary-action {
        min-height: 2.75rem;
    }

    .page-header {
        gap: .65rem;
        padding: .8rem;
    }

    .page-header h1 {
        font-size: 1.55rem;
        line-height: 1.18;
    }
}

/* Mobile forms, actions, and tables polish */
@media (max-width: 640px) {
    .form-actions,
    .page-actions,
    .empty-state-actions,
    .button-row,
    .filter-actions,
    .foundation-actions,
    .actions-cell {
        align-items: stretch;
        display: grid;
        gap: .5rem;
        grid-template-columns: 1fr;
        white-space: normal;
        width: 100%;
    }

    .form-actions > *,
    .page-actions > *,
    .empty-state-actions > *,
    .button-row > *,
    .filter-actions > *,
    .foundation-actions > *,
    .actions-cell > * {
        min-width: 0;
        width: 100%;
    }

    .inline-form {
        align-items: stretch;
        display: flex;
        flex-wrap: wrap;
        min-width: 0;
        width: 100%;
    }

    .inline-form > button,
    .inline-form > .btn,
    .inline-form > .button-link,
    .inline-form > .link-button {
        flex: 1 1 auto;
        min-width: 0;
    }

    .customer-filters,
    .permission-search-toolbar,
    .preset-inline-form,
    .operational-form.compact-form,
    .permission-compare-controls {
        grid-template-columns: 1fr;
    }

    label,
    fieldset,
    .form-subsection,
    .permission-fieldset,
    .checkbox-row,
    .checkbox-label,
    .quick-permission-toggle,
    .permission-matrix-row label {
        min-width: 0;
    }

    input:not([type="checkbox"]):not([type="radio"]),
    select,
    textarea {
        width: 100%;
    }

    .checkbox-row,
    .checkbox-label,
    .quick-permission-toggle,
    .permission-matrix-row label {
        align-items: flex-start;
    }

    .checkbox-row input,
    .checkbox-label input,
    .quick-permission-toggle input,
    .permission-matrix-row input {
        flex: 0 0 auto;
        margin-top: .2rem;
        width: auto;
    }

    .table-card,
    .operational-table-card {
        max-width: 100%;
        overflow: hidden;
    }

    .table-scroll,
    .permission-matrix-scroll {
        max-width: 100%;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        scrollbar-gutter: stable;
        touch-action: pan-x pan-y;
    }

    .table-scroll table {
        min-width: 680px;
    }

    th,
    td {
        padding: .65rem;
    }
}

/* Mobile dashboard polish */
@media (max-width: 640px) {
    .dashboard-cards {
        gap: .75rem;
        grid-template-columns: 1fr;
        margin-top: .75rem;
    }

    .metric-card {
        gap: .55rem;
        min-height: auto;
        padding: .9rem;
    }

    .metric-card-top {
        align-items: flex-start;
        flex-wrap: wrap;
        gap: .4rem;
    }

    .metric-card .eyebrow,
    .metric-card .status-pill,
    .metric-card p,
    .metric-card a {
        max-width: 100%;
        overflow-wrap: anywhere;
    }

    .metric-value {
        font-size: 2rem;
        letter-spacing: 0;
    }

    .quick-link-grid {
        gap: .5rem;
        grid-template-columns: 1fr;
    }

    .quick-link-grid .btn,
    .quick-link-grid .button-link {
        justify-content: center;
        min-height: 44px;
        width: 100%;
    }

    .instruction-card {
        min-height: auto;
    }

    .activity-timeline {
        gap: .55rem;
    }

    .activity-item,
    .activity-meta {
        min-width: 0;
        overflow-wrap: anywhere;
    }
}

/* Mobile record/detail page polish */
@media (max-width: 640px) {
    .record-header,
    .detail-hero.record-header,
    .record-detail-card {
        max-width: 100%;
        min-width: 0;
    }

    .record-header,
    .detail-hero.record-header {
        gap: .75rem;
        padding: .9rem;
    }

    .record-header h2,
    .record-detail-card h2,
    .employees-detail-panel h2 {
        font-size: 1.45rem;
        letter-spacing: 0;
        line-height: 1.2;
        overflow-wrap: anywhere;
    }

    .record-header p,
    .record-badges,
    .record-action-bar,
    .record-tabs,
    .record-more,
    .record-more summary {
        max-width: 100%;
        min-width: 0;
    }

    .record-badges .status-pill {
        white-space: normal;
    }

    .record-action-bar {
        display: grid;
        grid-template-columns: 1fr;
        justify-content: stretch;
        max-width: 100%;
    }

    .record-action-bar > *,
    .record-action-bar .btn,
    .record-action-bar form,
    .record-action-bar button {
        min-width: 0;
        width: 100%;
    }

    .record-more div {
        box-shadow: none;
        margin-top: .35rem;
        min-width: 0;
        position: static;
        width: 100%;
    }

    .record-tabs,
    .employee-detail-tabs,
    .admin-tabs,
    .status-tabs {
        flex-wrap: nowrap;
        max-width: 100%;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        padding-bottom: .25rem;
        scrollbar-gutter: stable;
        touch-action: pan-x pan-y;
    }

    .record-tabs a,
    .employee-detail-tabs a,
    .admin-tabs a,
    .status-tabs a {
        align-items: center;
        display: inline-flex;
        flex: 0 0 auto;
        min-height: 44px;
        white-space: nowrap;
    }

    .customer-profile-shell.record-layout-shell,
    .record-main.layout-grid,
    .detail-summary-grid,
    .section-summary-grid,
    .related-summary-grid {
        grid-template-columns: 1fr;
    }

    .record-sidebar,
    .record-main,
    .record-sidebar .layout-card,
    .record-main .layout-card,
    .portal-admin-panel,
    .estimate-review-link-card,
    .summary-panel,
    .right-summary-panel,
    .employees-list-panel,
    .employees-detail-panel {
        max-width: 100%;
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .detail-list,
    .detail-list div {
        min-width: 0;
    }

    .detail-list dt,
    .detail-list dd {
        overflow-wrap: anywhere;
    }

    .copy-field {
        font-size: .85rem;
        min-width: 0;
        overflow-x: auto;
    }

    .portal-admin-panel .inline-form,
    .estimate-review-link-card .inline-form {
        align-items: stretch;
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
    }

    .section-summary-card .btn,
    .related-summary-card .btn {
        width: 100%;
    }

    .employees-detail-panel .form-grid-3,
    .employees-detail-panel .form-grid-4 {
        grid-template-columns: 1fr;
    }
}

/* Mobile scheduling workspace polish */
@media (max-width: 640px) {
    .scheduling-view-switcher,
    .calendar-nav,
    .calendar-arrange-toolbar,
    .workspace-nav,
    .dispatch-action-bar,
    .workspace-map-toolbar,
    .workspace-left-header,
    .job-card-add-form,
    .job-card-links,
    .map-popup-add-form.map-pin-touch-fallback,
    .popup-action-row,
    .route-group-actions,
    .route-group-secondary-actions,
    .route-schedule-command-panel,
    .route-group-last-move-actions,
    .stop-card-actions,
    .route-group-stop-removal-actions,
    .field-tech-route-actions,
    .route-sheet-actions,
    .route-sheet-stop-actions,
    .route-sheet-filter-actions,
    .route-stop-packet-actions,
    .smart-fill-form {
        align-items: stretch;
        display: grid;
        gap: .5rem;
        grid-template-columns: 1fr;
        width: 100%;
    }

    .scheduling-view-switcher a,
    .calendar-nav .btn,
    .calendar-arrange-toolbar .btn,
    .workspace-nav .btn,
    .dispatch-action-bar .btn,
    .workspace-map-toolbar .btn,
    .job-card-add-form .btn,
    .job-card-links .btn,
    .popup-action-row .btn,
    .route-group-actions .btn,
    .route-group-secondary-actions .btn,
    .route-group-last-move-actions .btn,
    .stop-card-actions .btn,
    .route-group-stop-removal-actions .btn,
    .field-tech-route-actions .btn,
    .route-sheet-actions .btn,
    .route-sheet-stop-actions .btn,
    .route-sheet-filter-actions .btn,
    .route-stop-packet-actions .btn,
    .smart-fill-form .btn {
        min-height: 44px;
        width: 100%;
    }

    .scheduling-view-switcher a.btn {
        margin-left: 0;
    }

    .calendar-month-grid-v2 .calendar-month-body,
    .calendar-week-grid,
    .scheduling-calendar-command-bar,
    .calendar-module-board,
    .calendar-legend-grid,
    .workspace-layout-v4,
    .dispatch-workspace-v3,
    .dispatch-secondary-board,
    .scheduling-readiness-header,
    .scheduling-readiness-grid,
    .field-tech-route-list,
    .route-sheet-filter-form,
    .route-sheet-summary-grid,
    .route-sheet-stop-card,
    .route-sheet-stop-meta,
    .route-sheet-note-grid,
    .route-stop-detail-grid,
    .route-stop-line-grid,
    .route-group-builder-grid,
    .route-group-stop-fields,
    .route-group-meta-grid,
    .route-group-detail-totals,
    .route-group-workload-strip,
    .route-group-quality-grid,
    .route-group-prediction-grid,
    .route-group-prediction-source-strip,
    .route-group-duration-variance-grid,
    .route-group-warning-header,
    .route-group-load-facts,
    .route-group-edit-fields,
    .route-group-edit-employees,
    .dispatch-detail-grid,
    .popup-line-items,
    .route-ready-preview-chips,
    .route-ready-preview-warnings,
    .job-card-line-items,
    .stop-card-arrival,
    .estimate-grid {
        grid-template-columns: 1fr;
    }

    .calendar-month-grid-v2 .calendar-month-header {
        display: none;
    }

    .calendar-day-cell,
    .calendar-month-day {
        min-height: auto;
        padding: .7rem;
    }

    .calendar-day-top,
    .calendar-day-metrics,
    .calendar-work-order-list {
        min-width: 0;
    }

    .calendar-work-order-pill {
        min-height: 44px;
    }

    .calendar-pill-title,
    .calendar-pill-customer {
        overflow-wrap: anywhere;
        white-space: normal;
    }

    .calendar-work-order-dialog {
        max-height: calc(100dvh - 1rem);
        max-width: calc(100vw - 1rem);
        overflow: auto;
        padding: .85rem;
        width: calc(100vw - 1rem);
    }

    .calendar-dialog-header {
        align-items: stretch;
        display: grid;
        grid-template-columns: 1fr;
    }

    .calendar-dialog-header h2 {
        font-size: 1.1rem;
        letter-spacing: 0;
        overflow-wrap: anywhere;
    }

    .calendar-dialog-header .btn {
        width: 100%;
    }

    .workspace-panel,
    .dispatch-panel,
    .scheduling-readiness-panel,
    .scheduling-readiness-card,
    .field-tech-route-stop,
    .route-sheet-group,
    .route-sheet-stop-card,
    .route-group-readiness,
    .route-ready-preview,
    .route-group-card,
    .workspace-job-card,
    .workspace-stop-card,
    .schedule-card,
    .map-marker-card {
        max-width: 100%;
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .workspace-panel,
    .dispatch-panel,
    .scheduling-route-sheet-shell,
    .route-sheet-group,
    .scheduling-readiness-panel {
        border-radius: .85rem;
        padding: .75rem;
    }

    .route-sheet-filter-panel,
    .route-sheet-metric,
    .route-sheet-stop-card,
    .route-sheet-stop-meta span,
    .route-sheet-note-grid span,
    .route-sheet-stop-service {
        min-width: 0;
    }

    .route-sheet-filter-panel,
    .route-sheet-metric,
    .route-sheet-stop-card {
        padding: .65rem;
    }

    .route-sheet-stop-number {
        min-height: 36px;
    }

    .route-sheet-stop-main h3,
    .route-sheet-stop-main p,
    .route-sheet-stop-main small,
    .route-sheet-stop-meta span,
    .route-sheet-note-grid span,
    .route-sheet-stop-service p {
        overflow-wrap: anywhere;
    }

    .route-sheet-stop-service,
    .route-sheet-stop-actions {
        grid-column: 1;
    }

    .workspace-job-list {
        max-height: none;
        overflow-y: visible;
    }

    .leaflet-workspace-map,
    .dispatch-map-panel .leaflet-dispatch-map,
    .leaflet-dispatch-map {
        height: 320px;
        min-height: 300px;
    }

    .workspace-map-legend,
    .geocode-control-row,
    .geocode-review-list,
    .nearby-suggestions-panel,
    .route-group-summary,
    .route-window-cascade-note {
        overflow-wrap: anywhere;
    }

    .job-list-show-all-label {
        justify-content: flex-start;
        margin-left: 0;
        min-height: 44px;
        width: 100%;
    }

    .group-select-inline,
    .popup-action-row select,
    .smart-fill-hours,
    .smart-fill-label,
    .route-group-edit-actions,
    .employee-checkbox-group,
    .route-group-builder input,
    .route-group-builder select,
    .route-group-builder textarea,
    .route-group-edit-form input,
    .route-group-edit-form select,
    .route-group-edit-form textarea {
        max-width: 100%;
        min-width: 0;
        width: 100%;
    }

    .employee-checkbox-group {
        grid-template-columns: 1fr;
    }

    .employee-extra-grid {
        grid-template-columns: 1fr;
    }

    .smart-fill-label {
        align-items: stretch;
        display: grid;
        gap: .35rem;
    }

    .geocode-control-row .btn {
        justify-content: center;
        width: 100%;
    }

    .map-pin-popup {
        max-width: min(88vw, 330px);
        min-width: 0;
    }

    .workspace-map-pin-badge {
        max-width: 78px;
        min-width: 62px;
        padding: 4px 6px 5px;
    }

    .workspace-map-pin-codes {
        max-width: 64px;
    }
}

/* Mobile reports polish */
@media (max-width: 640px) {
    .report-library-v3,
    .report-card-section,
    .report-detail-v3,
    .report-drilldown-summary,
    .report-section-nav,
    .reports-v2-filter,
    .report-dashboard-grid,
    .reports-v2-grid {
        max-width: 100%;
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .report-library-v3 .report-library-hero,
    .report-library-v3 .summary-grid,
    .report-card-grid,
    .report-detail-v3 .summary-grid,
    .reports-v2-grid,
    .reports-v2-metrics,
    .metric-list {
        grid-template-columns: 1fr;
    }

    .report-library-search,
    .reports-v2-filter,
    .reports-v2-filter .filter-form,
    .report-section-nav .button-row,
    .report-detail-v3 .button-row,
    .report-drilldown-summary .button-row,
    .report-card-v3 .button-row {
        align-items: stretch;
        display: grid;
        gap: .5rem;
        grid-template-columns: 1fr;
        width: 100%;
    }

    .report-library-search > *,
    .reports-v2-filter .filter-form > *,
    .report-section-nav .button-row > *,
    .report-detail-v3 .button-row > *,
    .report-drilldown-summary .button-row > *,
    .report-card-v3 .button-row > * {
        min-width: 0;
        width: 100%;
    }

    .report-category-tabs {
        flex-wrap: nowrap;
        max-width: 100%;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        padding-bottom: .25rem;
        scrollbar-gutter: stable;
        touch-action: pan-x pan-y;
    }

    .report-category-tab {
        align-items: center;
        display: inline-flex;
        flex: 0 0 auto;
        min-height: 44px;
        white-space: nowrap;
    }

    .report-placeholder-row {
        display: grid;
        gap: .45rem;
        grid-template-columns: 1fr;
    }

    .report-card-v3 {
        min-height: auto;
        padding: .85rem;
    }

    .report-card-top {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .report-card-v3 h3 {
        font-size: 1.05rem;
        letter-spacing: 0;
        line-height: 1.25;
        overflow-wrap: anywhere;
    }

    .report-metric-link,
    .reports-v2-metrics > div,
    .metric-list div,
    .report-library-v3 .summary-grid .sub-card,
    .report-detail-v3 .summary-grid .sub-card {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .report-drilldown-table,
    .report-drilldown-table .table-wrap,
    .report-dashboard-grid .table-wrap {
        max-width: 100%;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        touch-action: pan-x pan-y;
    }

    .report-drilldown-table table {
        min-width: 760px;
    }

    .report-library-v3 .summary-grid .sub-card,
    .report-detail-v3 .summary-grid .sub-card,
    .report-card-v3,
    .report-card-v3 p,
    .report-card-v3 small,
    .report-metric-link,
    .report-drilldown-summary p,
    .reports-v2-filter .status-badge,
    .report-drilldown-summary .status-badge {
        max-width: 100%;
        min-width: 0;
        overflow-wrap: anywhere;
        white-space: normal;
    }

    .report-library-v3 .summary-grid .sub-card,
    .report-detail-v3 .summary-grid .sub-card,
    .metric-list div {
        border-radius: 8px;
        padding: .65rem;
    }

    .report-card-top {
        display: grid;
        gap: .45rem;
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .report-card-top .status-badge,
    .reports-v2-filter .status-badge,
    .report-drilldown-summary .status-badge {
        justify-self: start;
        line-height: 1.25;
        max-width: 100%;
        text-align: center;
    }
}

/* Reports Dashboard Density Guard */
.dashboard-desktop-content,
.report-library-v3,
.report-card-section,
.report-detail-v3,
.report-drilldown-summary,
.report-section-nav,
.reports-v2-filter,
.report-dashboard-grid,
.reports-v2-grid,
.report-card-grid,
.report-card-v3,
.report-metric-link,
.report-line-timer-drillbacks,
.report-drilldown-table,
.report-dashboard-grid .layout-card,
.report-dashboard-grid .layout-card-body,
.report-dashboard-grid .table-wrap,
.reports-operational-command-center,
.reports-operational-command-center-grid,
.reports-command-center-card,
.reports-command-center-badges,
.reports-command-center-actions,
.reports-command-center-assumptions,
.reports-v2-metrics,
.metric-list {
    box-sizing: border-box;
    max-width: 100%;
    min-width: 0;
    overflow-wrap: anywhere;
}

.report-library-v3 :where(h1, h2, h3, h4, p, small, a, span, strong, label, button, code),
.report-card-section :where(h1, h2, h3, h4, p, small, a, span, strong, label, button, code),
.report-detail-v3 :where(h1, h2, h3, h4, p, small, a, span, strong, label, button, code),
.report-drilldown-summary :where(h1, h2, h3, h4, p, small, a, span, strong, label, button, code),
.report-section-nav :where(h1, h2, h3, h4, p, small, a, span, strong, label, button, code),
.reports-v2-filter :where(h1, h2, h3, h4, p, small, a, span, strong, label, button, code),
.report-dashboard-grid :where(h1, h2, h3, h4, p, small, a, span, strong, label, button, code, td, th),
.reports-operational-command-center :where(h1, h2, h3, h4, p, small, a, span, strong, label, button, code, li),
.report-drilldown-table :where(td, th, a, span, strong, code) {
    max-width: 100%;
    min-width: 0;
    overflow-wrap: anywhere;
    white-space: normal;
    word-break: normal;
}

.reports-command-center-heading {
    align-items: flex-start;
    display: flex;
    gap: .75rem;
    justify-content: space-between;
    margin-bottom: .75rem;
}

.reports-operational-command-center-grid {
    display: grid;
    gap: .65rem;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.reports-command-center-card {
    background: #f8fbff;
    border: 1px solid #dbe4ee;
    border-left: 4px solid #2563eb;
    border-radius: 8px;
    display: grid;
    gap: .35rem;
    padding: .7rem;
}

.reports-command-center-badges,
.reports-command-center-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: .75rem;
}

.reports-command-center-assumptions {
    margin-top: .75rem;
}

.report-drilldown-table,
.report-drilldown-table.table-wrap,
.report-dashboard-grid .table-wrap {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y;
}

.report-drilldown-table table,
.report-dashboard-grid .table-wrap table {
    min-width: 880px;
}

.report-drilldown-table[data-report-drilldown-width="readable-scroll"] {
    --report-drilldown-column-min: 8.75rem;
    scrollbar-gutter: stable;
}

.report-drilldown-table[data-report-drilldown-width="readable-scroll"] table {
    min-width: calc(var(--report-drilldown-columns, 8) * var(--report-drilldown-column-min));
    table-layout: auto;
    width: max-content;
}

.report-drilldown-table[data-report-drilldown-width="readable-scroll"] th,
.report-drilldown-table[data-report-drilldown-width="readable-scroll"] td {
    max-width: 32rem;
    min-width: var(--report-drilldown-column-min);
    overflow-wrap: normal;
    text-align: left;
    vertical-align: top;
    white-space: nowrap;
    word-break: normal;
}

.report-drilldown-table[data-report-drilldown-width="readable-scroll"] .btn {
    white-space: nowrap;
}

@media (min-width: 900px) {
    .app-shell:not([data-mobile-layout-mode="mobile"]) .dashboard-desktop-content,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .report-library-v3,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .report-card-section,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .report-detail-v3,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .report-drilldown-summary,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .report-section-nav,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .reports-v2-filter,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .report-dashboard-grid {
        margin-inline: auto;
        max-width: min(100%, 1680px);
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .report-library-v3 .report-library-hero {
        grid-template-columns: minmax(0, 2fr) minmax(240px, .72fr);
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .report-card-grid {
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .reports-v2-grid {
        align-items: start;
        grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .reports-v2-grid > .layout-card[data-width="full"],
    .app-shell:not([data-mobile-layout-mode="mobile"]) .reports-v2-grid > .layout-card.full-width {
        grid-column: 1 / -1;
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .report-library-search,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .reports-v2-filter,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .reports-v2-filter .filter-form,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .reports-v2-filter .inline-form,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .report-section-nav .button-row,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .report-detail-v3 .button-row,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .report-drilldown-summary .button-row,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .report-card-v3 .button-row,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .report-line-timer-drillbacks {
        align-items: end;
        display: flex;
        flex-wrap: wrap;
        gap: .5rem;
        max-width: 100%;
        min-width: 0;
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .report-library-search > *,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .reports-v2-filter .filter-form > *,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .reports-v2-filter .inline-form > *,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .report-card-v3 .button-row > * {
        flex: 1 1 12rem;
        min-width: 0;
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .report-category-tabs {
        flex-wrap: wrap;
        max-width: 100%;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        scrollbar-gutter: stable;
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .report-category-tab {
        align-items: center;
        display: inline-flex;
        max-width: 100%;
        min-height: 38px;
        white-space: normal;
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .report-card-v3 {
        border-radius: 8px;
        min-height: 220px;
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .report-dashboard-grid .layout-card,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .report-dashboard-grid .card,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .report-card-section,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .report-library-v3,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .report-detail-v3,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .report-drilldown-summary {
        border-radius: 8px;
        overflow: hidden;
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .report-dashboard-grid .table-wrap,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .report-drilldown-table {
        max-height: 72vh;
        overflow: auto;
    }
}

/* Mobile customer, lead, and service item polish */
@media (max-width: 640px) {
    .customer-list-shell,
    .customer-list-card,
    .leads-shell,
    .pipeline-column,
    .pipeline-card,
    .lead-customer-message,
    .lead-upload-thumb,
    .service-photo-panel,
    .service-photo-card,
    .service-item-material-pricing-panel,
    .service-item-material-pricing-card,
    .service-item-inventory-planning-panel,
    .service-item-inventory-planning-card,
    .service-item-supplier-order-panel,
    .service-item-supplier-order-card,
    .service-item-material-inventory-panel,
    .service-item-material-inventory-card,
    .line-item-flow-card,
    .line-timer-readiness-panel,
    .line-timer-readiness-card,
    .service-selector-preview {
        max-width: 100%;
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .customer-list-shell .module-action-bar,
    .leads-shell .module-action-bar,
    .leads-shell .view-toggle,
    .customer-list-card .actions-cell,
    .customer-list-card .filter-actions,
    .leads-shell .filter-actions,
    .leads-shell .module-action-bar .inline-form,
    .pipeline-card .inline-form,
    .pipeline-portal-link,
    .service-photo-card .inline-form {
        align-items: stretch;
        display: grid;
        gap: .5rem;
        grid-template-columns: 1fr;
        width: 100%;
    }

    .customer-list-shell .module-action-bar > *,
    .leads-shell .module-action-bar > *,
    .leads-shell .view-toggle > *,
    .customer-list-card .actions-cell > *,
    .customer-list-card .filter-actions > *,
    .leads-shell .filter-actions > *,
    .leads-shell .module-action-bar .inline-form > *,
    .pipeline-card .inline-form > *,
    .pipeline-portal-link > *,
    .service-photo-card .inline-form > * {
        min-width: 0;
        width: 100%;
    }

    .customer-list-shell .module-action-bar .btn,
    .leads-shell .module-action-bar .btn,
    .leads-shell .module-action-bar button,
    .leads-shell .view-toggle .btn,
    .customer-list-card .btn,
    .customer-list-card button,
    .pipeline-card .btn,
    .pipeline-card button,
    .service-photo-card .btn,
    .service-photo-card button {
        min-height: 44px;
        width: 100%;
    }

    .customer-filters,
    .leads-shell .filter-toolbar,
    .lead-form .form-grid,
    .customer-form .form-grid,
    .lead-files-grid,
    .service-photo-grid,
    .service-photo-card,
    .service-item-material-pricing-grid,
    .service-item-material-pricing-form,
    .service-item-inventory-planning-grid,
    .service-item-inventory-planning-form,
    .service-item-supplier-order-grid,
    .service-item-supplier-order-form,
    .service-item-material-inventory-grid,
    .service-item-material-inventory-form,
    .line-timer-readiness-grid,
    .line-timer-readiness-header,
    .line-item-flow-card .operational-form,
    .line-item-flow-card .compact-form {
        grid-template-columns: 1fr;
    }

    .customer-filters,
    .customer-card-details,
    .leads-shell .filter-toolbar {
        align-items: stretch;
    }

    .customer-card-details {
        grid-template-columns: 1fr;
    }

    .customer-list-card {
        gap: .65rem;
        padding: .85rem;
    }

    .customer-card-heading {
        display: grid;
        gap: .45rem;
        grid-template-columns: 1fr;
    }

    .customer-card-heading .status-pill,
    .pipeline-card-header .status-pill {
        justify-self: start;
    }

    .customer-status-presets,
    .customer-quality-presets,
    .leads-shell .status-tabs {
        flex-wrap: nowrap;
        max-width: 100%;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        padding-bottom: .2rem;
        scrollbar-gutter: stable;
        touch-action: pan-x pan-y;
    }

    .customer-status-presets a,
    .customer-quality-presets a,
    .leads-shell .status-tabs a {
        flex: 0 0 auto;
        min-height: 44px;
        white-space: nowrap;
    }

    .customer-list-card p,
    .customer-list-card small,
    .customer-list-card .status-pill,
    .pipeline-card-header,
    .pipeline-card-header strong,
    .pipeline-card p,
    .pipeline-card-meta,
    .pipeline-portal-link,
    .lead-customer-message,
    .lead-upload-thumb figcaption,
    .service-photo-card strong,
    .service-photo-card p,
    .service-selector-preview {
        max-width: 100%;
        white-space: normal;
    }

    .customer-list-card .manage-dropdown,
    .customer-list-card .manage-dropdown summary,
    .leads-shell details.manage-menu,
    .leads-shell details.manage-menu summary {
        width: 100%;
    }

    .customer-list-card .manage-menu,
    .leads-shell details.manage-menu > div {
        box-shadow: none;
        margin-top: .35rem;
        min-width: 0;
        position: static;
        width: 100%;
    }

    .lead-pipeline-board {
        gap: .65rem;
        max-width: 100%;
        overflow-x: visible;
        padding-bottom: 0;
    }

    .pipeline-dropzone {
        display: grid;
        gap: .5rem;
    }

    .pipeline-column {
        padding: .65rem;
    }

    .pipeline-column-header h2 {
        font-size: .95rem;
        letter-spacing: 0;
        overflow-wrap: anywhere;
    }

    .pipeline-card {
        border-radius: 8px;
        margin-bottom: 0;
        min-height: auto;
        padding: .75rem;
    }

    .pipeline-card-header {
        align-items: flex-start;
        display: grid;
        grid-template-columns: 1fr;
    }

    .pipeline-card .inline-form select,
    .pipeline-card .inline-form button,
    .lead-upload-thumb a.btn {
        white-space: normal;
    }

    .lead-files-grid {
        display: grid;
        gap: .65rem;
    }

    .lead-upload-thumb,
    .lead-upload-thumb a,
    .lead-upload-thumb img,
    .lead-upload-thumb figcaption {
        max-width: 100%;
        min-width: 0;
    }

    .lead-upload-thumb {
        text-align: left;
    }

    .lead-upload-thumb img {
        height: auto;
        max-width: 100%;
    }

    .lead-upload-thumb figcaption {
        overflow: visible;
        text-overflow: clip;
    }

    .service-photo-primary {
        max-height: 240px;
        width: 100%;
    }

    .service-photo-card {
        gap: .65rem;
        padding: .75rem;
    }

    .service-photo-card .service-photo-thumb {
        aspect-ratio: 4 / 3;
        height: auto;
        width: 100%;
    }

    .service-photo-card .operational-form.compact-form,
    .service-photo-card .inline-form {
        align-items: stretch;
    }

    .service-photo-card .status-pill {
        display: inline-flex;
        margin: 0 .2rem .25rem 0;
        white-space: normal;
    }

    .service-item-command-summary,
    .service-item-command-summary article,
    .service-item-catalog-card,
    .service-item-profile-hero,
    .service-item-profile-photo,
    .service-item-profile-section,
    .service-item-card-meta,
    .service-item-card-title,
    .service-selector-preview[data-service-selector-panel="runtime"],
    .document-line-snapshot-card,
    .work-order-line-card {
        max-width: 100%;
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .service-item-command-summary,
    .service-item-catalog-card-grid,
    .service-item-profile-layout {
        gap: .65rem;
    }

    .service-item-command-summary article,
    .service-item-catalog-card,
    .service-item-profile-section,
    .document-line-snapshot-card,
    .work-order-line-card {
        border-radius: 8px;
        padding: .65rem;
    }

    .service-item-card-meta,
    .service-selector-metadata-grid,
    .document-line-snapshot-stats {
        gap: .35rem;
    }

    .service-item-card-meta span,
    .service-item-readiness-badges .setup-badge,
    .service-selector-preview-copy,
    .document-line-snapshot-main p {
        overflow-wrap: anywhere;
        white-space: normal;
    }

    .service-item-card-photo,
    .service-item-profile-photo,
    .service-selector-preview[data-service-selector-panel="runtime"] img {
        max-width: 100%;
        object-fit: cover;
    }

    .service-selector-preview-heading,
    .document-line-snapshot-actions {
        align-items: stretch;
        display: grid;
        grid-template-columns: 1fr;
    }

    .service-selector-preview img {
        height: auto;
        max-width: 100%;
    }

    .line-timer-readiness-status {
        justify-self: stretch;
        white-space: normal;
        width: 100%;
    }
}

/* Mobile estimate, work order, and invoice polish */
@media (max-width: 640px) {
    .operational-detail-shell,
    .document-detail-layout,
    .document-main,
    .document-preview-card,
    .summary-panel,
    .right-summary-panel,
    .right-summary-panel .card,
    .right-summary-panel .portal-admin-panel,
    .metric-strip,
    .form-section-card,
    .line-item-flow-card,
    .line-item-flow-card .table-scroll,
    .line-item-flow-card .operational-form,
    .line-item-flow-card .compact-form,
    .estimate-line-builder-shell,
    .estimate-line-builder,
    .estimate-line-editor-card,
    .estimate-line-editor-grid,
    .estimate-line-row-actions,
    .estimate-type-dialog,
    .estimate-type-dialog-header,
    .estimate-type-choice-grid,
    .estimate-type-choice-card,
    .estimate-bulk-items-panel,
    .estimate-package-review-card,
    .estimate-response-total-preview,
    .service-selector-preview,
    .customer-facing-document-page,
    .customer-document-preview,
    .portal-action-card,
    .crm-document,
    .document-card,
    .document-totals,
    .document-approval-card {
        max-width: 100%;
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .document-detail-layout,
    .document-form,
    .form-section-card,
    .document-address-grid,
    .metric-strip,
    .line-timer-rollup-grid,
    .line-timer-completion-checklist-header,
    .line-timer-completion-checklist-item,
    .document-grid,
    .customer-facing-document-page,
    .line-item-flow-card .operational-form,
    .line-item-flow-card .compact-form,
    .estimate-line-editor-grid,
    .estimate-line-row-actions,
    .estimate-line-builder-actions,
    .estimate-type-choice-grid,
    .estimate-package-choice-list,
    .portal-actions {
        grid-template-columns: 1fr;
    }

    .operational-detail-shell .module-action-bar.action-bar,
    .document-screen-actions,
    .line-timer-readiness-actions,
    .line-timer-completion-checklist-header,
    .line-item-flow-card .button-row,
    .estimate-line-row-actions,
    .estimate-line-builder-actions,
    .estimate-bulk-items-panel,
    .whole-work-order-timer-controls,
    .compact-timer-controls,
    .field-tech-workflow-card .button-row,
    .timers-field-workflow-card .button-row,
    .portal-action-card,
    .portal-actions,
    .document-approval-card form,
    .right-summary-panel .inline-form {
        align-items: stretch;
        display: grid;
        gap: .5rem;
        grid-template-columns: 1fr;
        justify-content: stretch;
        width: 100%;
    }

    .operational-detail-shell .module-action-bar.action-bar > *,
    .document-screen-actions > *,
    .line-timer-readiness-actions > *,
    .line-timer-completion-checklist-header > *,
    .line-item-flow-card .button-row > *,
    .estimate-line-row-actions > *,
    .estimate-line-builder-actions > *,
    .estimate-bulk-items-panel > *,
    .whole-work-order-timer-controls > *,
    .compact-timer-controls > *,
    .field-tech-workflow-card .button-row > *,
    .timers-field-workflow-card .button-row > *,
    .portal-action-card > *,
    .portal-actions > *,
    .document-approval-card form > *,
    .right-summary-panel .inline-form > * {
        min-width: 0;
        width: 100%;
    }

    .operational-detail-shell .module-action-bar.action-bar .btn,
    .operational-detail-shell .module-action-bar.action-bar button,
    .document-screen-actions .btn,
    .document-screen-actions button,
    .line-timer-readiness-actions .btn,
    .line-timer-readiness-actions button,
    .line-timer-completion-checklist .btn,
    .line-timer-completion-checklist button,
    .line-item-flow-card .btn,
    .line-item-flow-card button,
    .estimate-line-row-actions .btn,
    .estimate-line-row-actions button,
    .estimate-line-builder-actions .btn,
    .estimate-line-builder-actions button,
    .estimate-bulk-items-panel .btn,
    .estimate-bulk-items-panel button,
    .whole-work-order-timer-controls .btn,
    .whole-work-order-timer-controls button,
    .compact-timer-controls .btn,
    .compact-timer-controls button,
    .field-tech-workflow-card .btn,
    .field-tech-workflow-card button,
    .timers-field-workflow-card .btn,
    .timers-field-workflow-card button,
    .portal-action-card .btn,
    .portal-action-card button,
    .portal-actions .btn,
    .portal-actions button,
    .document-approval-card .btn,
    .document-approval-card button,
    .right-summary-panel .inline-form .btn,
    .right-summary-panel .inline-form button {
        min-height: 44px;
        white-space: normal;
        width: 100%;
    }

    .estimate-line-editor-heading {
        align-items: stretch;
        display: grid;
        grid-template-columns: 1fr;
    }

    .estimate-type-dialog {
        max-width: calc(100vw - 1rem);
        padding: .75rem;
        width: calc(100vw - 1rem);
    }

    .estimate-type-dialog-header {
        display: grid;
        grid-template-columns: 1fr;
    }

    .estimate-builder-summary-card p,
    .estimate-response-total-preview p {
        align-items: stretch;
        display: grid;
        gap: .25rem;
        grid-template-columns: 1fr;
    }

    .document-preview-card,
    .crm-document {
        border-radius: .65rem;
        margin-left: 0;
        margin-right: 0;
        min-height: 0;
        padding: .85rem;
    }

    .document-ribbon {
        display: inline-flex;
        left: auto;
        margin-bottom: .65rem;
        max-width: 100%;
        position: static;
        top: auto;
        transform: none;
        width: fit-content;
    }

    .document-header,
    .company-document-header,
    .document-brand {
        align-items: flex-start;
        display: grid;
        gap: .7rem;
        grid-template-columns: 1fr;
        margin-bottom: 1rem;
    }

    .document-header h1,
    .document-header h2,
    .document-brand h1,
    .document-meta h2 {
        font-size: 1.35rem;
        letter-spacing: 0;
        line-height: 1.25;
        overflow-wrap: anywhere;
    }

    .document-meta {
        min-width: 0;
        text-align: left;
    }

    .document-logo,
    .document-logo-placeholder {
        height: 64px;
        width: 64px;
    }

    .document-total,
    .document-totals {
        margin-left: 0;
        max-width: 100%;
        width: 100%;
    }

    .document-total {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .document-total span,
    .document-total strong,
    .document-totals p,
    .totals-card p {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .document-totals p,
    .totals-card p {
        flex-wrap: wrap;
        gap: .45rem;
    }

    .document-message,
    .document-card,
    .document-summary > div,
    .portal-card.document-summary-card,
    .service-photo-strip,
    .service-photo-mini figcaption,
    .document-photo-grid figcaption {
        overflow-wrap: anywhere;
    }

    .document-card,
    .line-item-flow-card .table-scroll,
    .document-lines,
    .document-line-table {
        max-width: 100%;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        touch-action: pan-x pan-y;
    }

    .document-lines,
    .document-line-table,
    .line-editor-table,
    .line-item-flow-card table {
        min-width: 720px;
    }

    .document-photo-grid {
        grid-template-columns: 1fr;
    }

    .service-selector-preview {
        display: grid;
        gap: .5rem;
    }

    .service-selector-preview img,
    .service-photo-mini .service-photo-thumb,
    .document-photo-grid img,
    .document-photo-placeholder {
        height: auto;
        max-width: 100%;
    }

    .right-summary-panel .manage-dropdown,
    .right-summary-panel .manage-dropdown summary,
    .operational-detail-shell .manage-dropdown,
    .operational-detail-shell .manage-dropdown summary {
        width: 100%;
    }

    .right-summary-panel .manage-menu,
    .operational-detail-shell .manage-menu {
        box-shadow: none;
        left: auto;
        margin-top: .35rem;
        min-width: 0;
        position: static;
        right: auto;
        width: 100%;
    }
}

/* Mobile communications files portal polish */
@media (max-width: 640px) {
    .communication-preview-card,
    .message-preview-body,
    .data-transfer-grid,
    .data-transfer-grid .instruction-card,
    .portal-public-shell,
    .portal-brand,
    .portal-hero,
    .portal-card,
    .portal-lines,
    .portal-lines article,
    .portal-rebook-line,
    .portal-photo-grid,
    .portal-file-list,
    .portal-action-card,
    .customer-facing-document-page,
    .customer-document-preview,
    .customer-document-preview .document-summary,
    .customer-document-preview .document-totals,
    .customer-document-preview .table-scroll,
    .operational-module-shell,
    .operational-table-card,
    .form-section {
        max-width: 100%;
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .data-transfer-grid,
    .cards-2,
    .checkbox-grid,
    .portal-public-shell,
    .portal-lines,
    .portal-photo-grid,
    .customer-facing-document-page {
        grid-template-columns: 1fr;
    }

    .portal-brand,
    .portal-hero,
    .company-branded-header {
        align-items: stretch;
        display: grid;
        gap: .75rem;
        grid-template-columns: 1fr;
        padding: .85rem;
    }

    .portal-brand .brand-mark,
    .portal-brand img,
    .portal-brand-placeholder {
        justify-self: start;
    }

    .portal-brand img,
    .portal-brand-placeholder {
        max-width: 100%;
    }

    .portal-card,
    .portal-action-card,
    .communication-preview-card,
    .data-transfer-grid .instruction-card,
    .form-section {
        padding: .85rem;
    }

    .portal-hero h1,
    .portal-card h1,
    .portal-card h2,
    .portal-card h3,
    .communication-preview-card h2,
    .communication-preview-card h3 {
        font-size: 1.35rem;
        letter-spacing: 0;
        line-height: 1.22;
        overflow-wrap: anywhere;
    }

    .portal-actions,
    .portal-card form,
    .portal-action-card,
    .communication-preview-card .inline-form,
    .data-transfer-grid ~ .cards-2 .stacked-form,
    .data-transfer-grid ~ .cards-2 .inline-form,
    .operational-module-shell .module-action-bar,
    .operational-filter-toolbar,
    .form-section .operational-form {
        align-items: stretch;
        display: grid;
        gap: .5rem;
        grid-template-columns: 1fr;
        justify-content: stretch;
        width: 100%;
    }

    .portal-actions > *,
    .portal-card form > *,
    .portal-action-card > *,
    .communication-preview-card .inline-form > *,
    .data-transfer-grid ~ .cards-2 .stacked-form > *,
    .data-transfer-grid ~ .cards-2 .inline-form > *,
    .operational-module-shell .module-action-bar > *,
    .operational-filter-toolbar > *,
    .form-section .operational-form > * {
        min-width: 0;
        width: 100%;
    }

    .portal-actions .btn,
    .portal-actions button,
    .portal-card form .btn,
    .portal-card form button,
    .portal-action-card .btn,
    .portal-action-card button,
    .communication-preview-card .btn,
    .communication-preview-card button,
    .data-transfer-grid ~ .cards-2 .btn,
    .data-transfer-grid ~ .cards-2 button,
    .operational-module-shell .module-action-bar .btn,
    .operational-module-shell .module-action-bar button,
    .operational-filter-toolbar .btn,
    .operational-filter-toolbar button,
    .form-section .btn,
    .form-section button {
        min-height: 44px;
        white-space: normal;
        width: 100%;
    }

    .message-preview-body {
        border: 1px solid var(--border);
        border-radius: .65rem;
        max-height: 55vh;
        overflow: auto;
        overscroll-behavior: contain;
        padding: .75rem;
        touch-action: pan-x pan-y;
        white-space: normal;
    }

    .message-preview-body a,
    .message-preview-body code,
    .communication-preview-card .warning,
    .communication-preview-card .success,
    .portal-card .status-badge,
    .portal-action-card strong,
    .portal-file-list li,
    .portal-file-list a,
    .portal-lines article p,
    .customer-document-preview .document-summary,
    .customer-document-preview .document-totals,
    .portal-rebook-line span,
    .portal-rebook-line p {
        max-width: 100%;
        overflow-wrap: anywhere;
        white-space: normal;
    }

    .communication-preview-card .warning,
    .communication-preview-card .success,
    .portal-lines article,
    .portal-rebook-line,
    .portal-file-list li,
    .customer-document-preview .document-summary > div,
    .customer-document-preview .document-card,
    .customer-document-preview .document-totals {
        border-radius: 8px;
        padding: .65rem;
    }

    .portal-photo-grid img {
        aspect-ratio: 4 / 3;
        height: auto;
        max-height: 240px;
        width: 100%;
    }

    .portal-file-list {
        display: grid;
        gap: .45rem;
        margin: 0;
        padding-left: 1rem;
    }

    .portal-lines article {
        display: grid;
        gap: .45rem;
    }

    .portal-rebook-line {
        display: grid;
        gap: .45rem;
        margin: .65rem 0;
        padding: .75rem;
    }

    .portal-rebook-line input[type="checkbox"] {
        flex: 0 0 auto;
        margin-top: .2rem;
        width: auto;
    }

    .operational-module-shell .status-tabs,
    .operational-module-shell .table-scroll,
    .customer-document-preview .table-scroll,
    .data-transfer-grid ~ .table-card .table-scroll {
        max-width: 100%;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        touch-action: pan-x pan-y;
    }

    .operational-module-shell .table-scroll table,
    .customer-document-preview .table-scroll table,
    .data-transfer-grid ~ .table-card .table-scroll table {
        min-width: 720px;
    }

    .data-import-export-page .data-transfer-table-scroll {
        display: none;
    }

    .data-import-export-page .data-transfer-mobile-plan-list {
        display: grid;
    }

    .data-import-export-page .data-transfer-mobile-plan-card {
        padding: .7rem;
    }

    .operational-module-shell .manage-dropdown,
    .operational-module-shell .manage-dropdown summary {
        width: 100%;
    }

    .operational-module-shell .manage-menu {
        box-shadow: none;
        left: auto;
        margin-top: .35rem;
        min-width: 0;
        position: static;
        right: auto;
        width: 100%;
    }
}

/* Mobile final foundation polish */
@media (max-width: 640px) {
    [data-card-key="activity-log-list"],
    [data-card-key="activity-log-list"] .layout-card-body,
    .activity-timeline,
    .activity-item,
    .activity-meta,
    .deployment-status-badge,
    .deployment-status-grid,
    .operational-module-shell[data-operational-ui="v1"],
    .operational-module-shell[data-operational-ui="v1"] .operational-table-card,
    .operational-module-shell[data-operational-ui="v1"] .table-scroll,
    .operational-module-shell[data-operational-ui="v1"] .status-tabs,
    .form-section,
    .form-section .operational-form {
        max-width: 100%;
        min-width: 0;
        overflow-wrap: anywhere;
    }

    [data-card-key="activity-log-list"] {
        padding: .85rem;
    }

    .activity-timeline {
        gap: .55rem;
    }

    .activity-item {
        padding: .75rem;
    }

    .activity-meta {
        align-items: flex-start;
        display: grid;
        gap: .35rem;
        grid-template-columns: 1fr;
    }

    [data-card-key="activity-log-list"] .table-scroll,
    .operational-module-shell[data-operational-ui="v1"] .table-scroll {
        max-width: 100%;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        scrollbar-gutter: stable;
        touch-action: pan-x pan-y;
    }

    [data-card-key="activity-log-list"] table {
        min-width: 840px;
    }

    [data-card-key="activity-log-list"] .activity-log-table-scroll {
        display: none;
    }

    [data-card-key="activity-log-list"] .activity-log-mobile-list {
        display: grid;
    }

    [data-card-key="activity-log-list"] .activity-log-mobile-card {
        padding: .7rem;
    }

    .deployment-status-badge {
        justify-content: center;
        text-align: center;
        white-space: normal;
        width: 100%;
    }

    .deployment-status-grid {
        gap: .25rem;
        grid-template-columns: 1fr;
    }

    .deployment-status-grid dt {
        margin-top: .35rem;
    }

    .deployment-status-grid dd {
        border-bottom: 1px solid var(--border);
        padding-bottom: .45rem;
    }

    .operational-module-shell[data-operational-ui="v1"] {
        border-radius: .75rem;
        padding: .85rem;
    }

    .operational-module-shell[data-operational-ui="v1"] .status-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        padding-bottom: .25rem;
        scrollbar-gutter: stable;
        touch-action: pan-x pan-y;
    }

    .operational-module-shell[data-operational-ui="v1"] .status-tabs a {
        align-items: center;
        display: inline-flex;
        flex: 0 0 auto;
        min-height: 44px;
        white-space: nowrap;
    }

    .operational-module-shell[data-operational-ui="v1"] .module-action-bar,
    .operational-module-shell[data-operational-ui="v1"] .operational-filter-toolbar,
    .form-section .operational-form {
        align-items: stretch;
        display: grid;
        gap: .5rem;
        grid-template-columns: 1fr;
        justify-content: stretch;
        width: 100%;
    }

    .operational-module-shell[data-operational-ui="v1"] .module-action-bar > *,
    .operational-module-shell[data-operational-ui="v1"] .operational-filter-toolbar > *,
    .form-section .operational-form > * {
        min-width: 0;
        width: 100%;
    }

    .operational-module-shell[data-operational-ui="v1"] .module-action-bar .btn,
    .operational-module-shell[data-operational-ui="v1"] .module-action-bar button,
    .operational-module-shell[data-operational-ui="v1"] .operational-filter-toolbar .btn,
    .operational-module-shell[data-operational-ui="v1"] .operational-filter-toolbar button,
    .form-section .btn,
    .form-section button {
        min-height: 44px;
        white-space: normal;
        width: 100%;
    }
}

/* Mobile app shell mode overrides must win after earlier mobile polish blocks. */
@media (max-width: 760px), (hover: none) and (pointer: coarse) {
    .app-shell[data-mobile-layout-mode] .mobile-app-bar {
        display: grid ;
    }

    .app-shell[data-mobile-layout-mode="auto"] .app-sidebar,
    .app-shell[data-mobile-layout-mode="auto"] .global-topbar,
    .app-shell[data-mobile-layout-mode="auto"] .bottom-nav-shell,
    .app-shell[data-mobile-layout-mode="auto"] .nav-foundation-note,
    .app-shell[data-mobile-layout-mode="auto"] .page-header,
    .app-shell[data-mobile-layout-mode="mobile"] .app-sidebar,
    .app-shell[data-mobile-layout-mode="mobile"] .global-topbar,
    .app-shell[data-mobile-layout-mode="mobile"] .bottom-nav-shell,
    .app-shell[data-mobile-layout-mode="mobile"] .nav-foundation-note,
    .app-shell[data-mobile-layout-mode="mobile"] .page-header {
        display: none ;
    }

    .app-shell[data-mobile-layout-mode="auto"] .main-content,
    .app-shell[data-mobile-layout-mode="mobile"] .main-content {
        padding: 0 0 calc(1rem + env(safe-area-inset-bottom)) ;
    }

    .app-shell[data-mobile-layout-mode="auto"] .operational-module-shell[data-operational-ui="v1"],
    .app-shell[data-mobile-layout-mode="mobile"] .operational-module-shell[data-operational-ui="v1"] {
        border-radius: 0 ;
        padding: 0 ;
    }

    .app-shell[data-mobile-layout-mode="auto"] .module-action-bar,
    .app-shell[data-mobile-layout-mode="mobile"] .module-action-bar {
        align-items: center ;
        display: flex ;
        justify-content: flex-end ;
        width: auto ;
    }

    .app-shell[data-mobile-layout-mode="auto"] .module-action-bar > *,
    .app-shell[data-mobile-layout-mode="mobile"] .module-action-bar > * {
        width: auto ;
    }

    .app-shell[data-mobile-layout-mode="auto"] .module-action-bar .btn,
    .app-shell[data-mobile-layout-mode="auto"] .module-action-bar button,
    .app-shell[data-mobile-layout-mode="mobile"] .module-action-bar .btn,
    .app-shell[data-mobile-layout-mode="mobile"] .module-action-bar button {
        width: auto ;
    }

    .app-shell[data-mobile-layout-mode="auto"] .operational-table-card .table-scroll,
    .app-shell[data-mobile-layout-mode="mobile"] .operational-table-card .table-scroll,
    .app-shell[data-mobile-layout-mode="auto"] .customer-table,
    .app-shell[data-mobile-layout-mode="mobile"] .customer-table {
        display: none ;
    }

    .app-shell[data-mobile-layout-mode="auto"] .mobile-record-card-list,
    .app-shell[data-mobile-layout-mode="mobile"] .mobile-record-card-list,
    .app-shell[data-mobile-layout-mode="auto"] .customer-card-list,
    .app-shell[data-mobile-layout-mode="mobile"] .customer-card-list {
        display: grid ;
    }

    .app-shell[data-mobile-layout-mode="desktop"] .mobile-record-card-list,
    .app-shell[data-mobile-layout-mode="desktop"] .customer-card-list {
        display: none ;
    }

    .app-shell[data-mobile-layout-mode="desktop"] .operational-table-card .table-scroll,
    .app-shell[data-mobile-layout-mode="desktop"] .customer-table {
        display: block ;
    }
}

/* Operational detail pages need forced Mobile UI containment even when the viewport is wide. */
.app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell[data-operational-ui="v1"] {
    border-radius: 0 ;
    margin: 0;
    max-width: 100%;
    overflow-x: hidden;
    padding: 0 ;
}

.app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell .detail-page-header,
.app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell .module-action-bar.action-bar,
.app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell .document-detail-layout,
.app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell .document-header,
.app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell .company-document-header,
.app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell .document-address-grid,
.app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell .metric-strip,
.app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell .line-item-flow-card .operational-form,
.app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell .line-item-flow-card .compact-form,
.app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell .work-order-command-actions,
.app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell .work-order-section-actions,
.app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell .line-item-flow-card .button-row,
.app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell .whole-work-order-timer-controls,
.app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell .compact-timer-controls,
.app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell .field-tech-workflow-card .button-row,
.app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell .timers-field-workflow-card .button-row,
.app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell .right-summary-panel .inline-form {
    align-items: stretch ;
    display: grid ;
    gap: .65rem;
    grid-template-columns: 1fr ;
    justify-content: stretch ;
    width: 100% ;
}

.app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell .document-main,
.app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell .document-preview-card,
.app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell .summary-panel,
.app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell .right-summary-panel,
.app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell .right-summary-panel .card,
.app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell .right-summary-panel .portal-admin-panel,
.app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell .line-item-flow-card,
.app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell .table-scroll,
.app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell .document-lines,
.app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell .document-line-table,
.app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell .document-card,
.app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell .work-order-command-center,
.app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell .work-order-invoice-card,
.app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell .timers-field-workflow-card,
.app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell .field-tech-workflow-card,
.app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell .work-order-scheduling-card {
    box-sizing: border-box;
    max-width: 100%;
    min-width: 0;
    overflow-wrap: anywhere;
}

.app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell .document-detail-layout {
    margin: 0;
    padding: .85rem;
}

.app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell .document-preview-card {
    border-radius: .65rem;
    margin: 0;
    min-height: 0;
    padding: .85rem;
    width: 100%;
}

.app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell .document-ribbon {
    display: inline-flex;
    left: auto;
    margin: 0 0 .65rem;
    max-width: 100%;
    position: static;
    top: auto;
    transform: none;
    width: fit-content;
}

.app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell .document-header {
    margin-bottom: 1rem;
}

.app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell .document-header h1,
.app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell .document-header h2,
.app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell .document-header p,
.app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell .document-message,
.app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell .summary-card,
.app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell .right-summary-panel p {
    letter-spacing: 0;
    max-width: 100%;
    min-width: 0;
    overflow-wrap: anywhere;
}

.app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell .document-header h2 {
    font-size: 1.35rem;
    line-height: 1.25;
}

.app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell .document-company-logo {
    height: auto;
    max-width: 96px;
}

.app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell .document-total {
    margin-left: 0;
    max-width: 100%;
    width: 100%;
}

.app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell .table-scroll,
.app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell .document-lines,
.app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell .document-line-table {
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    touch-action: pan-x pan-y;
}

.app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell .document-lines,
.app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell .document-line-table,
.app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell .line-item-flow-card table {
    min-width: 720px;
}

.app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell .document-line-snapshot-grid {
    display: grid;
}

.app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell .line-item-flow-card > .table-scroll {
    display: none;
}

.app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell .module-action-bar.action-bar > *,
.app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell .work-order-command-actions > *,
.app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell .work-order-section-actions > *,
.app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell .line-item-flow-card .button-row > *,
.app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell .whole-work-order-timer-controls > *,
.app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell .compact-timer-controls > *,
.app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell .field-tech-workflow-card .button-row > *,
.app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell .timers-field-workflow-card .button-row > *,
.app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell .right-summary-panel .inline-form > * {
    min-width: 0;
    width: 100% ;
}

.app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell .module-action-bar.action-bar .btn,
.app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell .module-action-bar.action-bar button,
.app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell .document-action-link,
.app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell .work-order-command-actions .btn,
.app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell .work-order-command-actions button,
.app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell .work-order-section-actions .btn,
.app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell .work-order-section-actions button,
.app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell .line-item-flow-card .btn,
.app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell .line-item-flow-card button,
.app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell .whole-work-order-timer-controls .btn,
.app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell .whole-work-order-timer-controls button,
.app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell .compact-timer-controls .btn,
.app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell .compact-timer-controls button,
.app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell .right-summary-panel .inline-form .btn,
.app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell .right-summary-panel .inline-form button {
    min-height: 44px;
    white-space: normal;
    width: 100% ;
}

.app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell .manage-dropdown,
.app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell .manage-dropdown summary,
.app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell .manage-menu {
    max-width: 100%;
    min-width: 0;
    width: 100% ;
}

.app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell .manage-menu {
    box-shadow: none;
    left: auto;
    margin-top: .35rem;
    position: static;
    right: auto;
}

@media (max-width: 760px), (hover: none) and (pointer: coarse) {
    .app-shell[data-mobile-layout-mode="auto"] .operational-detail-shell .module-action-bar.action-bar,
    .app-shell[data-mobile-layout-mode="auto"] .operational-detail-shell .document-detail-layout,
    .app-shell[data-mobile-layout-mode="auto"] .operational-detail-shell .work-order-command-actions,
    .app-shell[data-mobile-layout-mode="auto"] .operational-detail-shell .work-order-section-actions,
    .app-shell[data-mobile-layout-mode="auto"] .operational-detail-shell .line-item-flow-card .button-row,
    .app-shell[data-mobile-layout-mode="auto"] .operational-detail-shell .whole-work-order-timer-controls,
    .app-shell[data-mobile-layout-mode="auto"] .operational-detail-shell .compact-timer-controls,
    .app-shell[data-mobile-layout-mode="auto"] .operational-detail-shell .right-summary-panel .inline-form {
        align-items: stretch ;
        display: grid ;
        gap: .65rem;
        grid-template-columns: 1fr ;
        justify-content: stretch ;
        width: 100% ;
    }

    .app-shell[data-mobile-layout-mode="auto"] .operational-detail-shell .module-action-bar.action-bar > *,
    .app-shell[data-mobile-layout-mode="auto"] .operational-detail-shell .work-order-command-actions > *,
    .app-shell[data-mobile-layout-mode="auto"] .operational-detail-shell .work-order-section-actions > *,
    .app-shell[data-mobile-layout-mode="auto"] .operational-detail-shell .line-item-flow-card .button-row > *,
    .app-shell[data-mobile-layout-mode="auto"] .operational-detail-shell .whole-work-order-timer-controls > *,
    .app-shell[data-mobile-layout-mode="auto"] .operational-detail-shell .compact-timer-controls > *,
    .app-shell[data-mobile-layout-mode="auto"] .operational-detail-shell .right-summary-panel .inline-form > * {
        min-width: 0;
        width: 100% ;
    }
}

/* Mobile dashboard home cards */
.mobile-home-shell,
.employee-card-list,
.employee-related-card-list {
    display: none;
}

@media (max-width: 760px), (hover: none) and (pointer: coarse) {
    .app-shell[data-mobile-layout-mode="auto"] .mobile-home-shell,
    .app-shell[data-mobile-layout-mode="mobile"] .mobile-home-shell {
        background: #ffffff;
        color: #4b5563;
        display: block ;
        min-height: calc(100dvh - 64px);
        overflow: hidden;
        padding: 0 0 calc(1.5rem + env(safe-area-inset-bottom));
    }

    .app-shell[data-mobile-layout-mode="auto"] .dashboard-desktop-content,
    .app-shell[data-mobile-layout-mode="mobile"] .dashboard-desktop-content {
        display: none ;
    }

    .app-shell[data-mobile-layout-mode="desktop"] .mobile-home-shell {
        display: none ;
    }

    .app-shell[data-mobile-layout-mode="desktop"] .dashboard-desktop-content {
        display: block ;
    }

    .mobile-home-pages {
        display: flex;
        gap: 0;
        max-width: 100%;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        scroll-behavior: smooth;
        scroll-snap-type: x mandatory;
        scrollbar-gutter: stable;
        touch-action: pan-x pan-y;
    }

    .mobile-home-page {
        align-content: start;
        display: grid;
        flex: 0 0 100%;
        gap: .78rem;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: repeat(5, minmax(116px, auto));
        min-width: 0;
        padding: 1.15rem .95rem .45rem;
        scroll-snap-align: start;
    }

    .mobile-home-card {
        background: #fbfefc;
        border: 1px solid #dfe7e3;
        border-radius: .65rem;
        box-shadow: none;
        min-height: 116px;
        min-width: 0;
        overflow: hidden;
        position: relative;
    }

    .mobile-home-card-link {
        align-items: center;
        color: #555d68;
        display: grid;
        height: 100%;
        justify-items: center;
        min-height: 116px;
        padding: 1.15rem .65rem;
        place-content: center;
        text-align: center;
        text-decoration: none;
    }

    .mobile-home-card-title {
        color: #555d68;
        font-size: 1.05rem;
        font-weight: 800;
        line-height: 1.18;
        max-width: 100%;
        overflow-wrap: anywhere;
    }

    .mobile-home-card-count {
        color: #ff2b15;
        font-size: .84rem;
        font-weight: 900;
        line-height: 1;
        position: absolute;
        right: .68rem;
        top: .6rem;
        z-index: 2;
    }

    .mobile-home-shell.arrange-mode .mobile-home-card {
        display: flex;
        flex-direction: column;
        min-height: 184px;
        overflow: visible;
    }

    .mobile-home-shell.arrange-mode .mobile-home-card-link {
        flex: 1 1 auto;
        height: auto;
        min-height: 72px;
        padding-bottom: .45rem;
    }

    .mobile-home-shell.arrange-mode .mobile-home-card-link.is-arrange-disabled {
        cursor: default;
        pointer-events: none;
    }

    .mobile-home-arrange-controls {
        border-top: 1px solid #e6edf5;
        display: grid;
        flex: 0 0 auto;
        gap: .35rem;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin: 0;
        padding: .45rem;
    }

    .mobile-home-arrange-controls button {
        align-items: center;
        background: #ffffff;
        border: 1px solid #cfd9e6;
        border-radius: .5rem;
        color: #0f9f5f;
        display: inline-flex;
        font-size: .8rem;
        font-weight: 900;
        justify-content: center;
        min-height: 42px;
        padding: .35rem;
        width: 100%;
    }

    .mobile-home-page-dots {
        align-items: center;
        display: flex;
        gap: .45rem;
        justify-content: center;
        padding: .9rem 0 0;
    }

    .mobile-home-page-dots a {
        background: #d5dde8;
        border-radius: 999px;
        display: inline-block;
        height: .45rem;
        width: .45rem;
    }

    .mobile-home-page-dots a.is-active {
        background: #0f9f5f;
        width: 1.35rem;
    }

    .app-shell[data-mobile-layout-mode="auto"] .employees-list-panel .table-wrap,
    .app-shell[data-mobile-layout-mode="mobile"] .employees-list-panel .table-wrap {
        display: none ;
    }

    .app-shell[data-mobile-layout-mode="auto"] .employee-card-list,
    .app-shell[data-mobile-layout-mode="mobile"] .employee-card-list,
    .app-shell[data-mobile-layout-mode="auto"] .employee-related-card-list,
    .app-shell[data-mobile-layout-mode="mobile"] .employee-related-card-list {
        display: grid ;
        gap: .85rem;
        margin-top: .95rem;
    }

    .app-shell[data-mobile-layout-mode="auto"] .employee-related-section .table-wrap,
    .app-shell[data-mobile-layout-mode="mobile"] .employee-related-section .table-wrap,
    .app-shell[data-mobile-layout-mode="desktop"] .employee-card-list,
    .app-shell[data-mobile-layout-mode="desktop"] .employee-related-card-list {
        display: none ;
    }

    .app-shell[data-mobile-layout-mode="desktop"] .employees-list-panel .table-wrap,
    .app-shell[data-mobile-layout-mode="desktop"] .employee-related-section .table-wrap {
        display: block ;
    }

    .employee-related-section,
    .employee-related-card-list,
    .employee-related-card,
    .employee-related-card-meta,
    .employee-related-card-actions {
        max-width: 100%;
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .employee-related-section h3 {
        font-size: 1.02rem;
        line-height: 1.2;
        margin-bottom: .35rem;
        overflow-wrap: anywhere;
    }

    .employee-list-card {
        background: #f8fbff;
        border: 1px solid #d9e2ef;
        border-radius: .65rem;
        display: grid;
        gap: .85rem;
        min-width: 0;
        padding: .95rem;
    }

    .employee-related-card {
        background: #ffffff;
        border: 1px solid #d9e2ef;
        border-radius: .65rem;
        display: grid;
        gap: .75rem;
        min-width: 0;
        padding: .9rem;
    }

    .employee-related-card h4 {
        color: #111827;
        font-size: 1rem;
        line-height: 1.2;
        margin: 0;
        overflow-wrap: anywhere;
    }

    .employee-list-card-heading {
        align-items: start;
        display: grid;
        gap: .65rem;
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .employee-list-card h3 {
        font-size: 1.05rem;
        line-height: 1.2;
        margin: .15rem 0 0;
        overflow-wrap: anywhere;
    }

    .employee-list-card h3 a {
        color: #111827;
    }

    .employee-list-card-meta,
    .employee-related-card-meta {
        display: grid;
        gap: .5rem;
        margin: 0;
    }

    .employee-list-card-meta div,
    .employee-related-card-meta div {
        border-top: 1px solid #e7edf5;
        display: grid;
        gap: .2rem;
        padding-top: .5rem;
    }

    .employee-list-card-meta dt,
    .employee-related-card-meta dt {
        color: #64748b;
        font-size: .72rem;
        font-weight: 900;
        text-transform: uppercase;
    }

    .employee-list-card-meta dd,
    .employee-related-card-meta dd {
        color: #111827;
        font-weight: 800;
        max-width: 100%;
        margin: 0;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .employee-related-card-actions,
    .employee-related-card-actions .button-row,
    .employee-related-card-actions .compact-form,
    .employee-related-card-actions .inline-form {
        align-items: stretch;
        display: grid;
        gap: .45rem;
        grid-template-columns: 1fr;
        margin: 0;
        width: 100%;
    }

    .employee-related-card-actions > *,
    .employee-related-card-actions .button-row > *,
    .employee-related-card-actions .compact-form > *,
    .employee-related-card-actions .inline-form > * {
        min-width: 0;
        width: 100%;
    }

    .employee-related-card-actions .btn {
        justify-content: center;
        min-height: 2.55rem;
        white-space: normal;
    }
}

@media (max-width: 430px) {
    .mobile-home-page {
        gap: .65rem;
        grid-template-rows: repeat(5, minmax(104px, auto));
        padding-left: .75rem;
        padding-right: .75rem;
    }

    .mobile-home-card,
    .mobile-home-card-link {
        min-height: 104px;
    }

    .mobile-home-card-title {
        font-size: .96rem;
    }
}

.clock-io-page {
    display: grid;
    gap: 1rem;
}

.clock-io-status-grid {
    display: grid;
    gap: .75rem;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.clock-io-status-grid article {
    background: #f8fbff;
    border: 1px solid #d9e2ef;
    border-radius: .65rem;
    display: grid;
    gap: .25rem;
    padding: .85rem;
}

.clock-io-status-grid span {
    color: #64748b;
    font-size: .75rem;
    font-weight: 900;
    text-transform: uppercase;
}

.clock-io-status-grid strong {
    color: #111827;
    font-size: 1.1rem;
    overflow-wrap: anywhere;
}

.clock-day-control-panel {
    background: #f8fbff;
    border-color: #bfdbfe;
    display: grid;
    gap: .85rem;
}

.clock-day-control-grid {
    display: grid;
    gap: .75rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.clock-day-action-card,
.clock-day-adjustment-card {
    background: #fff;
    border: 1px solid #d9e2ef;
    border-radius: .75rem;
    display: grid;
    gap: .55rem;
    margin: 0;
    padding: .85rem;
}

.clock-day-action-card textarea,
.clock-day-adjustment-form textarea {
    min-height: 72px;
}

.clock-day-adjustment-card summary {
    cursor: pointer;
    font-weight: 950;
}

.clock-day-adjustment-form {
    margin-top: .7rem;
}

.clock-suggestion-panel {
    background: #f8fbff;
    border-color: #c7d2fe;
    display: grid;
    gap: .85rem;
}

.clock-suggestion-list {
    display: grid;
    gap: .75rem;
}

.clock-suggestion-card {
    background: #fff;
    border: 1px solid #d9e2ef;
    border-radius: .75rem;
    display: grid;
    gap: .85rem;
    grid-template-columns: minmax(0, 1fr) minmax(260px, .8fr);
    padding: .9rem;
}

.clock-suggestion-card strong {
    color: #111827;
}

.clock-suggestion-actions {
    display: grid;
    gap: .65rem;
}

.clock-suggestion-actions details {
    background: #f8fafc;
    border: 1px solid #d9e2ef;
    border-radius: .65rem;
    padding: .7rem;
}

.clock-suggestion-actions summary {
    cursor: pointer;
    font-weight: 900;
}

.clock-suggestion-dispute-form {
    margin-top: .65rem;
}

.clock-io-dashboard-grid {
    align-items: start;
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(0, 1.35fr) minmax(300px, .85fr);
}

.clock-io-primary-column,
.clock-io-side-column {
    display: grid;
    gap: 1rem;
}

.clock-today-summary,
.clock-quick-actions,
.clock-history-panel {
    display: grid;
    gap: .85rem;
}

.clock-summary-grid {
    display: grid;
    gap: .65rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.clock-summary-grid article {
    background: #fff;
    border: 1px solid #d9e2ef;
    border-radius: .65rem;
    display: grid;
    gap: .18rem;
    padding: .75rem;
}

.clock-summary-grid span,
.clock-summary-grid small {
    color: #64748b;
    font-size: .76rem;
    font-weight: 800;
}

.clock-summary-grid strong {
    color: #111827;
    font-size: 1.05rem;
}

.clock-quick-action-grid {
    display: grid;
    gap: .7rem;
}

.clock-quick-action-card,
.clock-manual-action-card,
.clock-out-action-card {
    background: #fff;
    border: 1px solid #d9e2ef;
    border-radius: .75rem;
    display: grid;
    gap: .5rem;
    margin: 0;
    padding: .8rem;
}

.clock-quick-action-card span {
    color: #64748b;
    font-size: .84rem;
    font-weight: 800;
}

.clock-quick-action-card.is-disabled {
    background: #f8fbff;
}

.clock-manual-action-card h4 {
    margin: 0;
}

.clock-out-action-card {
    border-color: #fecaca;
}

.clock-history-panel summary {
    cursor: pointer;
    font-weight: 950;
}

.clock-history-list {
    display: grid;
    gap: .65rem;
    margin-top: .75rem;
}

.clock-history-list article {
    background: #fff;
    border: 1px solid #d9e2ef;
    border-radius: .65rem;
    display: grid;
    gap: .45rem;
    padding: .75rem;
}

.clock-history-list article > div:first-child {
    display: grid;
    gap: .15rem;
}

.clock-history-list article span,
.clock-history-meta {
    color: #64748b;
    font-size: .82rem;
    font-weight: 800;
}

.clock-history-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem .65rem;
}

.clock-io-form {
    align-items: end;
}

.clock-targets-card {
    display: grid;
    gap: .85rem;
}

.clock-active-target-card {
    background: #ecfdf5;
    border-color: #bbf7d0;
}

.clock-active-target-card h3 {
    margin-bottom: .25rem;
}

.clock-correction-panel {
    background: #fff7ed;
    border-color: #fed7aa;
}

.clock-correction-card {
    border-color: #fed7aa;
}

.clock-correction-form {
    margin-top: .75rem;
}

.clock-history-correction-form {
    border-top: 1px solid #e2e8f0;
    margin-top: .55rem;
    padding-top: .65rem;
}

.clock-history-correction-form input {
    min-width: 0;
}

.clock-correction-pending {
    margin: .75rem 0 0;
}

.clock-correction-request-review {
    background: #f8fbff;
    border-color: #bfdbfe;
}

.clock-correction-request-review .clock-adjustment-review-card-list,
.app-shell[data-mobile-layout-mode="desktop"] .clock-correction-request-review .clock-adjustment-review-card-list {
    display: grid ;
    gap: .85rem;
    margin-top: .95rem;
}

.clock-adjustment-review-card {
    background: #ffffff;
    border: 1px solid #bfdbfe;
    border-radius: .75rem;
    border-color: #bfdbfe;
    display: grid;
    gap: .8rem;
    padding: .95rem;
}

.clock-adjustment-review-card .mobile-record-fields {
    display: grid;
    gap: .45rem .85rem;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.clock-correction-status-form {
    align-items: stretch;
    border-top: 1px solid #dbeafe;
    margin-top: .5rem;
    padding-top: .75rem;
}

.clock-correction-status-form label {
    min-width: min(100%, 190px);
}

.clock-correction-action-label {
    align-self: center;
    color: #1e40af;
    font-size: .75rem;
    font-weight: 950;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.clock-correction-action-buttons {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    margin: 0;
}

.clock-adjustment-review-missing-link {
    margin: .75rem 0 0;
}

.clock-active-elapsed {
    color: #047857;
    font-size: 1.35rem;
    font-weight: 950;
    margin: 0;
}

.clock-target-list {
    display: grid;
    gap: .85rem;
}

.clock-target-card {
    background: #fff;
    border: 1px solid #d9e2ef;
    border-radius: .75rem;
    display: grid;
    gap: .75rem;
    padding: .95rem;
}

.clock-target-heading {
    align-items: flex-start;
    display: flex;
    gap: .75rem;
    justify-content: space-between;
}

.clock-target-heading h4 {
    font-size: 1rem;
    margin: 0;
}

.clock-target-heading p,
.clock-target-meta,
.clock-target-empty {
    margin: 0;
}

.clock-target-meta {
    color: #64748b;
    display: flex;
    flex-wrap: wrap;
    font-size: .85rem;
    gap: .35rem .75rem;
}

.clock-shared-workflow-row {
    align-items: center;
    background: #f8fbff;
    border: 1px solid #dbeafe;
    border-radius: .65rem;
    display: grid;
    gap: .4rem;
    grid-template-columns: auto minmax(0, 1fr);
    padding: .65rem;
}

.clock-shared-workflow-row span {
    color: #475569;
    font-size: .82rem;
    font-weight: 800;
    line-height: 1.35;
}

.clock-crew-timer-status {
    background: #f8fbff;
    border: 1px solid #d9e2ef;
    border-radius: .75rem;
    display: grid;
    gap: .65rem;
    padding: .75rem;
}

.clock-crew-timer-status strong {
    color: #0f172a;
    display: block;
    font-size: .98rem;
    line-height: 1.25;
}

.clock-crew-timer-status small {
    color: #64748b;
    display: block;
    font-size: .8rem;
    font-weight: 800;
    margin-top: .25rem;
    overflow-wrap: anywhere;
}

.clock-crew-timer-status dl {
    display: grid;
    gap: .4rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0;
}

.clock-crew-timer-status dl div {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: .65rem;
    padding: .5rem;
    text-align: center;
}

.clock-crew-timer-status dt {
    color: #64748b;
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .05em;
    margin: 0 0 .1rem;
    text-transform: uppercase;
}

.clock-crew-timer-status dd {
    color: #111827;
    font-size: 1rem;
    font-weight: 900;
    margin: 0;
}

.clock-crew-timer-status p {
    margin: 0;
}

.clock-crew-timer-status.is-drive,
.clock-crew-timer-status.is-work,
.clock-crew-timer-status.is-line {
    border-color: #86efac;
    box-shadow: inset 4px 0 0 #22c55e;
}

.clock-crew-timer-status.is-idle {
    border-color: #bfdbfe;
}

.clock-target-action,
.clock-line-item-form {
    margin: 0;
}

.clock-work-order-button,
.clock-line-item-button {
    min-height: 48px;
    width: 100%;
}

.clock-line-item-list {
    display: grid;
    gap: .55rem;
}

.clock-line-item-button {
    align-items: flex-start;
    background: #f8fbff;
    border: 1px solid #d9e2ef;
    border-radius: .65rem;
    color: #111827;
    cursor: pointer;
    display: grid;
    gap: .2rem;
    padding: .75rem .85rem;
    text-align: left;
}

.clock-line-item-button:hover,
.clock-line-item-button:focus-visible {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
    outline: none;
}

.clock-line-item-button span {
    color: #64748b;
    font-size: .82rem;
    font-weight: 800;
}

.clock-line-item-button.is-current,
.clock-current-target {
    background: #ecfdf5;
    border: 1px solid #86efac;
    border-radius: .65rem;
    color: #047857;
    cursor: default;
    font-weight: 900;
    padding: .75rem .85rem;
}

.clock-current-target {
    margin: 0;
    text-align: center;
}

@media (max-width: 720px) {
    .clock-io-page h1 {
        font-size: 1.45rem;
        letter-spacing: 0;
    }

    .clock-io-page {
        gap: .75rem;
    }

    .clock-io-status-grid {
        gap: .5rem;
        grid-template-columns: 1fr 1fr;
    }

    .clock-io-form {
        grid-template-columns: 1fr;
    }

    .clock-io-dashboard-grid {
        grid-template-columns: 1fr;
    }

    .clock-day-control-grid {
        grid-template-columns: 1fr;
    }

    .clock-suggestion-card {
        grid-template-columns: 1fr;
    }

    .clock-io-status-grid article,
    .clock-summary-grid article,
    .clock-target-card,
    .clock-quick-action-card,
    .clock-manual-action-card,
    .clock-out-action-card,
    .clock-day-action-card,
    .clock-day-adjustment-card {
        border-radius: 8px;
        padding: .65rem;
    }

    .clock-target-heading {
        display: grid;
    }

    .clock-target-meta {
        display: grid;
        grid-template-columns: 1fr;
    }

    .clock-target-meta span,
    .clock-line-item-button span {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .clock-shared-workflow-row {
        grid-template-columns: 1fr;
    }

    .clock-crew-timer-status dl {
        grid-template-columns: 1fr;
    }

    .clock-shared-workflow-row .btn,
    .clock-correction-action-buttons .btn {
        width: 100%;
    }

    .clock-work-order-button,
    .clock-line-item-button {
        min-height: 44px;
    }

    .clock-correction-action-buttons {
        align-items: stretch;
        display: grid;
        grid-template-columns: 1fr;
    }
}

@media (max-width: 430px) {
    .clock-io-status-grid {
        grid-template-columns: 1fr;
    }

    .clock-summary-grid {
        grid-template-columns: 1fr;
    }
}

/* Keep operational bulk submit controls visually plain text links despite global button rules. */
.app-shell .operational-bulk-toolbar .bulk-action-panel {
    align-items: center;
    display: flex;
    gap: .45rem;
    min-width: 0;
}

.app-shell .operational-bulk-toolbar .bulk-action-links {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .15rem .65rem;
    min-width: 0;
}

.app-shell .operational-bulk-toolbar button.bulk-action-link,
.app-shell .operational-bulk-toolbar button[type="submit"].bulk-action-link,
.app-shell[data-mobile-layout-mode="auto"] .operational-bulk-toolbar button.bulk-action-link,
.app-shell[data-mobile-layout-mode="auto"] .operational-bulk-toolbar button[type="submit"].bulk-action-link,
.app-shell[data-mobile-layout-mode="mobile"] .operational-bulk-toolbar button.bulk-action-link,
.app-shell[data-mobile-layout-mode="mobile"] .operational-bulk-toolbar button[type="submit"].bulk-action-link {
    appearance: none;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    color: #1d4ed8;
    cursor: pointer;
    display: inline;
    font: inherit;
    font-size: .84rem;
    font-weight: 800;
    line-height: 1.25;
    min-height: 0;
    padding: 0;
    text-align: left;
    text-decoration: underline;
    text-underline-offset: 2px;
    transform: none;
    width: auto;
}

.app-shell .operational-bulk-toolbar button.bulk-action-link:hover,
.app-shell .operational-bulk-toolbar button.bulk-action-link:focus-visible,
.app-shell .operational-bulk-toolbar button[type="submit"].bulk-action-link:hover,
.app-shell .operational-bulk-toolbar button[type="submit"].bulk-action-link:focus-visible {
    background: transparent;
    color: #0f2f61;
    outline: 1px dotted currentColor;
    outline-offset: 2px;
    transform: none;
}

.app-shell .operational-bulk-toolbar button.bulk-action-link:disabled,
.app-shell .operational-bulk-toolbar button[type="submit"].bulk-action-link:disabled {
    cursor: not-allowed;
    opacity: .55;
}

/* Shell nav placement visual safety final guard */
.global-topbar {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    overflow: visible;
}

.global-topbar .compact-brand {
    flex: 0 0 auto;
}

.global-topbar .beta-company-switcher {
    flex: 0 1 auto;
    max-width: 100%;
}

.global-topbar .top-nav.grouped-nav {
    flex: 1 1 34rem;
    justify-content: flex-start;
    min-width: min(100%, 20rem);
}

.global-topbar .deployment-status-badge {
    align-self: center;
    flex: 0 1 24rem;
    max-width: min(100%, 24rem);
}

.global-topbar .account-area-top {
    align-items: center;
    display: flex;
    flex: 1 1 24rem;
    flex-wrap: wrap;
    justify-content: flex-end;
    max-width: 100%;
    min-width: min(100%, 18rem);
}

.global-topbar .account-area-top .account-identity {
    flex: 1 1 13rem;
    max-width: 22rem;
}

.global-topbar .account-area-top .nav-preference-form,
.global-topbar .account-area-top .mobile-preference-form,
.global-topbar .account-area-top .experience-mode-form,
.global-topbar .account-area-top .logout-form {
    flex: 0 0 auto;
}

.app-sidebar {
    align-content: stretch;
    align-items: stretch;
    display: flex;
    flex-direction: column;
}

.app-sidebar > .deployment-status-badge {
    align-self: flex-start;
    border-radius: .8rem;
    justify-content: flex-start;
    max-width: 100%;
    min-height: 0;
    text-align: left;
    white-space: normal;
    width: auto;
}

.app-sidebar > .account-area-sidebar {
    flex: 0 0 auto;
    min-width: 0;
}

.app-sidebar > .side-nav {
    flex: 1 1 auto;
    min-height: 0;
}

.account-area .account-identity,
.account-area .account-identity strong,
.account-area .account-identity small,
.account-area .account-company-link {
    overflow-wrap: break-word;
    word-break: normal;
}

.account-area-sidebar .nav-preference-form,
.account-area-sidebar .mobile-preference-form,
.account-area-sidebar .experience-mode-form {
    align-items: end;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
}

.account-area-sidebar .experience-mode-toggle {
    grid-column: 1 / -1;
}

.account-area-sidebar .logout-form {
    justify-self: start;
}

.top-nav .nav-dropdown {
    max-width: min(92vw, 42rem);
}

/* Global daily-use UI polish final guard */
.main-content,
.main-content > *,
.page-header,
.module-page-header,
.operational-module-shell,
.operational-detail-shell,
.customer-list-shell,
.leads-shell,
.record-layout-shell,
.dashboard-cards,
.dashboard-cards > *,
.customer-list-card,
.operational-table-card,
.record-detail-card,
.summary-panel,
.right-summary-panel,
.document-detail-layout,
.table-scroll,
.table-responsive,
.table-wrap {
    max-width: 100%;
    min-width: 0;
}

.page-header,
.module-page-header,
.card-heading-row,
.record-header {
    align-items: flex-start;
    gap: .75rem;
    min-width: 0;
}

.page-header h1,
.module-page-header h1,
.card h2,
.card h3,
.record-header h2,
.customer-list-card strong,
.dashboard-cards h2,
.dashboard-cards h3 {
    overflow-wrap: break-word;
    word-break: normal;
}

.module-action-bar.action-bar,
.action-bar,
.page-actions,
.form-actions,
.record-action-bar,
.filter-actions,
.actions-cell,
.mobile-record-actions,
.operational-bulk-toolbar {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    min-width: 0;
}

.module-action-bar.action-bar > *,
.action-bar > *,
.page-actions > *,
.form-actions > *,
.record-action-bar > *,
.filter-actions > *,
.actions-cell > *,
.mobile-record-actions > *,
.operational-bulk-toolbar > * {
    min-width: 0;
}

.module-action-bar .btn,
.module-action-bar button,
.module-action-bar .button-link,
.module-action-bar .link-button,
.module-action-bar .primary-action,
.action-bar .btn,
.action-bar button,
.action-bar .button-link,
.action-bar .link-button,
.action-bar .primary-action,
.page-actions .btn,
.page-actions button,
.page-actions .button-link,
.page-actions .link-button,
.page-actions .primary-action,
.form-actions .btn,
.form-actions button,
.form-actions .button-link,
.form-actions .link-button,
.form-actions .primary-action,
.record-action-bar .btn,
.record-action-bar button,
.record-action-bar .button-link,
.record-action-bar .link-button,
.record-action-bar .primary-action,
.filter-actions .btn,
.filter-actions button,
.filter-actions .button-link,
.filter-actions .link-button,
.filter-actions .primary-action,
.actions-cell .btn,
.actions-cell button,
.actions-cell .button-link,
.actions-cell .link-button,
.actions-cell .primary-action,
.mobile-record-actions .btn,
.mobile-record-actions button,
.mobile-record-actions .button-link,
.mobile-record-actions .link-button,
.mobile-record-actions .primary-action {
    max-width: 100%;
    overflow-wrap: anywhere;
    text-align: center;
    white-space: normal;
}

/* Action bar tap target polish */
.module-action-bar form,
.action-bar form,
.page-actions form,
.form-actions form,
.record-action-bar form,
.filter-actions form,
.actions-cell form,
.mobile-record-actions form {
    max-width: 100%;
    min-width: 0;
}

.filter-toolbar,
.operational-filter-toolbar,
.customer-filters,
.permission-search-toolbar,
.compact-form,
.operational-form.compact-form,
.lead-form .form-grid,
.customer-form .form-grid,
.document-form,
.stacked-form,
.inline-form {
    max-width: 100%;
    min-width: 0;
}

/* Filter toolbar wrapping polish */
.filter-toolbar,
.operational-filter-toolbar,
.customer-filters,
.permission-search-toolbar,
.compact-form,
.operational-form.compact-form {
    max-width: 100%;
    min-width: 0;
}

.filter-toolbar > *,
.operational-filter-toolbar > *,
.customer-filters > *,
.permission-search-toolbar > *,
.compact-form > *,
.operational-form.compact-form > * {
    max-width: 100%;
    min-width: 0;
}

.filter-toolbar label,
.operational-filter-toolbar label,
.customer-filters label,
.permission-search-toolbar label,
.permission-search-toolbar span,
.compact-form label,
.operational-form.compact-form label {
    max-width: 100%;
    overflow-wrap: anywhere;
    white-space: normal;
    word-break: normal;
}

.filter-toolbar input,
.filter-toolbar select,
.filter-toolbar textarea,
.operational-filter-toolbar input,
.operational-filter-toolbar select,
.operational-filter-toolbar textarea,
.customer-filters input,
.customer-filters select,
.customer-filters textarea,
.permission-search-toolbar input,
.permission-search-toolbar select,
.permission-search-toolbar textarea,
.compact-form input,
.compact-form select,
.compact-form textarea,
.operational-form.compact-form input,
.operational-form.compact-form select,
.operational-form.compact-form textarea {
    max-width: 100%;
    min-width: 0;
}

/* Record detail copy-field wrapping polish */
.copy-field,
.record-detail-card .copy-field,
.record-layout-shell .copy-field,
.portal-admin-panel .copy-field,
.estimate-review-link-card .copy-field,
.right-summary-panel .copy-field,
.record-detail-card textarea[readonly],
.operational-module-shell textarea[readonly],
.lead-forms-shell textarea[readonly] {
    box-sizing: border-box;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    overflow-wrap: anywhere;
    width: 100%;
    word-break: normal;
}

.record-detail-card p,
.record-layout-shell p,
.portal-admin-panel p,
.estimate-review-link-card p,
.right-summary-panel p,
.pipeline-portal-link,
.pipeline-portal-link a,
.pipeline-portal-link button {
    max-width: 100%;
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: normal;
}

.copy-field + .button-link,
.portal-admin-panel .button-link,
.estimate-review-link-card .button-link,
.pipeline-portal-link .btn,
[data-copy] {
    max-width: 100%;
    overflow-wrap: anywhere;
    white-space: normal;
}

/* Instruction and help panel mobile density polish */
.module-intro,
.help-panel,
.help-body,
.help-note-row,
.instruction-card,
.permission-help-toolbar,
.permission-help-card,
.form-instructions,
.field-help,
.bulk-toolbar-help,
.alert,
.notice,
.warning,
.muted-note {
    max-width: 100%;
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: normal;
}

.module-intro h2,
.help-panel h2,
.instruction-card h2,
.permission-help-card strong,
.alert strong {
    letter-spacing: 0;
}

.help-panel,
.instruction-card,
.permission-help-card {
    line-height: 1.45;
}

.help-panel p,
.help-note-row p,
.instruction-card p,
.permission-help-card p,
.module-intro p,
.alert p,
.notice p,
.warning p {
    margin-top: .35rem;
}

/* Table scroller visual containment polish */
.table-scroll,
.table-responsive,
.table-wrap {
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-gutter: stable;
    touch-action: pan-x pan-y;
}

.table-scroll > table,
.table-responsive > table,
.table-wrap > table {
    margin: 0;
    max-width: none;
    width: 100%;
}

.operational-module-shell table,
.customer-list-shell table,
.leads-shell table,
.record-layout-shell table {
    width: 100%;
}

.status-tabs {
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
    scroll-padding-inline: .5rem;
    scroll-snap-type: x proximity;
    scrollbar-gutter: stable;
}

.status-tabs a {
    flex: 0 0 auto;
    scroll-snap-align: start;
    white-space: nowrap;
}

/* Operational List Desktop Polish */
@media (min-width: 900px) {
    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-list-shell[data-operational-ui="v1"] {
        background: #ffffff;
        border: 1px solid #d8e2ed;
        border-radius: 14px;
        box-shadow: 0 18px 48px rgba(15, 23, 42, .08);
        box-sizing: border-box;
        margin: 0 auto 1.5rem;
        max-width: min(100%, 1560px);
        overflow: hidden;
        padding: 1rem;
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-list-shell[data-operational-ui="v1"] .module-page-header {
        align-items: flex-start;
        background: linear-gradient(135deg, #f8fbff 0%, #ffffff 66%, #ecfdf5 100%);
        border: 1px solid #dbe4ee;
        border-radius: 12px;
        display: flex;
        gap: 1rem;
        justify-content: space-between;
        margin-bottom: 1rem;
        padding: 1rem;
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-list-shell[data-operational-ui="v1"] .module-page-header > div:first-child {
        min-width: 0;
        width: min(100%, 62rem);
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-list-shell[data-operational-ui="v1"] .module-page-header h1 {
        font-size: clamp(1.6rem, 1.6vw, 2.2rem);
        letter-spacing: 0;
        line-height: 1.1;
        margin: .15rem 0 .4rem;
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-list-shell[data-operational-ui="v1"] .module-page-header p {
        margin: 0;
        max-width: 78ch;
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-list-shell[data-operational-ui="v1"] .module-action-bar.action-bar {
        justify-content: flex-end;
        max-width: min(100%, 42rem);
        width: auto;
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-list-shell[data-operational-ui="v1"] .operational-filter-toolbar {
        align-items: end;
        background: #f8fbff;
        border: 1px solid #dbe4ee;
        border-radius: 12px;
        display: grid;
        gap: .6rem;
        grid-template-columns: minmax(18rem, 1.4fr) repeat(auto-fit, minmax(11rem, 1fr));
        margin: 0 0 .85rem;
        padding: .85rem;
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-list-shell[data-operational-ui="v1"] .operational-filter-toolbar input,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-list-shell[data-operational-ui="v1"] .operational-filter-toolbar select,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-list-shell[data-operational-ui="v1"] .operational-filter-toolbar button,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-list-shell[data-operational-ui="v1"] .operational-filter-toolbar .btn {
        min-height: 38px;
        width: 100%;
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-list-shell[data-operational-ui="v1"] .metric-strip,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-list-shell[data-operational-ui="v1"] .work-order-command-summary {
        background: #ffffff;
        border: 1px solid #dbe4ee;
        border-radius: 12px;
        box-shadow: 0 10px 28px rgba(15, 23, 42, .045);
        margin: 0 0 .85rem;
        padding: .85rem;
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-list-shell[data-operational-ui="v1"] .metric-strip {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-list-work-orders[data-operational-ui="v1"] .work-order-command-summary {
        display: grid;
        gap: .85rem;
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-list-work-orders[data-operational-ui="v1"] .work-order-command-metrics {
        grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-list-work-orders[data-operational-ui="v1"] .work-order-attention-board {
        grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-list-shell[data-operational-ui="v1"] .status-tabs {
        background: #f8fbff;
        border: 1px solid #dbe4ee;
        border-radius: 12px;
        margin: 0 0 .85rem;
        padding: .35rem;
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-list-shell[data-operational-ui="v1"] .status-tabs a {
        border-radius: 9px;
        min-height: 36px;
        padding: .45rem .7rem;
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-list-shell[data-operational-ui="v1"] .operational-bulk-toolbar {
        align-items: center;
        background: #f8fbff;
        border: 1px solid #dbe4ee;
        border-radius: 12px;
        display: grid;
        gap: .55rem .75rem;
        grid-template-columns: auto auto minmax(0, 1fr);
        margin: 0 0 .85rem;
        padding: .75rem .85rem;
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-list-shell[data-operational-ui="v1"] .bulk-action-panel {
        align-items: center;
        display: flex;
        flex-wrap: wrap;
        gap: .4rem;
        min-width: 0;
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-list-shell[data-operational-ui="v1"] .bulk-action-links {
        display: flex;
        flex-wrap: wrap;
        gap: .4rem;
        min-width: 0;
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-list-shell[data-operational-ui="v1"] .bulk-toolbar-help {
        grid-column: 1 / -1;
        margin: 0;
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-list-shell[data-operational-ui="v1"] .operational-table-card {
        border: 1px solid #dbe4ee;
        border-radius: 12px;
        box-shadow: 0 12px 32px rgba(15, 23, 42, .06);
        margin: 0;
        overflow: hidden;
        padding: 0;
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-list-shell[data-operational-ui="v1"] .operational-table-card .table-scroll {
        border: 0;
        border-radius: 0;
        max-height: 68vh;
        overflow: auto;
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-list-shell[data-operational-ui="v1"] .data-table {
        border-collapse: separate;
        border-spacing: 0;
        min-width: 980px;
        table-layout: fixed;
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-list-work-orders[data-operational-ui="v1"] .data-table {
        min-width: 1180px;
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-list-shell[data-operational-ui="v1"] .data-table th {
        background: #f8fbff;
        border-bottom: 1px solid #dbe4ee;
        color: #526071;
        font-size: .78rem;
        letter-spacing: .02em;
        position: sticky;
        text-transform: uppercase;
        top: 0;
        z-index: 4;
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-list-shell[data-operational-ui="v1"] .data-table th,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-list-shell[data-operational-ui="v1"] .data-table td {
        line-height: 1.35;
        padding: .68rem .72rem;
        vertical-align: top;
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-list-shell[data-operational-ui="v1"] .data-table td,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-list-shell[data-operational-ui="v1"] .data-table small,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-list-shell[data-operational-ui="v1"] .work-order-next-action {
        max-width: 100%;
        min-width: 0;
        overflow-wrap: anywhere;
        word-break: normal;
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-list-shell[data-operational-ui="v1"] .bulk-select-cell {
        text-align: center;
        width: 42px;
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-list-shell[data-operational-ui="v1"] .actions-cell {
        min-width: 8.5rem;
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-list-shell[data-operational-ui="v1"] .actions-cell .manage-dropdown {
        display: inline-block;
        position: relative;
        width: auto;
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-list-shell[data-operational-ui="v1"] .actions-cell .manage-dropdown summary {
        min-height: 34px;
        width: auto;
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-list-shell[data-operational-ui="v1"] .actions-cell .manage-menu {
        box-shadow: 0 18px 40px rgba(15, 23, 42, .18);
        left: auto;
        min-width: 15rem;
        position: absolute;
        right: 0;
        top: calc(100% + .35rem);
        width: max-content;
        z-index: 80;
    }
}

@media (min-width: 1200px) {
    .app-shell[data-mobile-layout-mode="mobile"] .operational-list-shell[data-operational-ui="v1"] {
        background: #ffffff;
        border: 1px solid #d8e2ed;
        border-radius: 14px ;
        box-shadow: 0 18px 48px rgba(15, 23, 42, .08);
        margin: 0 auto 1.5rem ;
        max-width: min(100%, 1560px) ;
        overflow: hidden;
        padding: 1rem ;
    }

    .app-shell[data-mobile-layout-mode="mobile"] .operational-list-shell[data-operational-ui="v1"] .mobile-record-card-list {
        display: none ;
    }

    .app-shell[data-mobile-layout-mode="mobile"] .operational-list-shell[data-operational-ui="v1"] .operational-table-card .table-scroll {
        display: block ;
        max-height: 68vh;
        overflow: auto;
    }

    .app-shell[data-mobile-layout-mode="mobile"] .operational-list-shell[data-operational-ui="v1"] .module-page-header,
    .app-shell[data-mobile-layout-mode="mobile"] .operational-list-shell[data-operational-ui="v1"] .operational-filter-toolbar,
    .app-shell[data-mobile-layout-mode="mobile"] .operational-list-shell[data-operational-ui="v1"] .operational-bulk-toolbar,
    .app-shell[data-mobile-layout-mode="mobile"] .operational-list-shell[data-operational-ui="v1"] .status-tabs,
    .app-shell[data-mobile-layout-mode="mobile"] .operational-list-shell[data-operational-ui="v1"] .metric-strip,
    .app-shell[data-mobile-layout-mode="mobile"] .operational-list-shell[data-operational-ui="v1"] .work-order-command-summary,
    .app-shell[data-mobile-layout-mode="mobile"] .operational-list-shell[data-operational-ui="v1"] .operational-table-card {
        border-radius: 12px ;
    }

    .app-shell[data-mobile-layout-mode="mobile"] .operational-list-shell[data-operational-ui="v1"] .data-table {
        min-width: 980px;
        table-layout: fixed;
    }

    .app-shell[data-mobile-layout-mode="mobile"] .operational-list-work-orders[data-operational-ui="v1"] .data-table {
        min-width: 1180px;
    }
}

@media (max-width: 760px) {
    .status-tabs {
        background-image: linear-gradient(to right, rgba(248,250,252,.96), rgba(248,250,252,0)), linear-gradient(to left, rgba(248,250,252,.96), rgba(248,250,252,0));
        background-position: left center, right center;
        background-repeat: no-repeat;
        background-size: 1.4rem 100%;
    }
}

.manage-dropdown {
    max-width: 100%;
    min-width: 0;
}

/* Manage menu viewport containment polish */
.manage-menu,
.nav-dropdown,
.record-more div,
details.manage-menu > div,
.toolbar-menu-panel {
    max-height: min(70vh, 32rem);
    max-width: min(92vw, 22rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    overflow-wrap: anywhere;
    word-break: normal;
}

.manage-menu a,
.manage-menu button,
.nav-dropdown a,
.record-more a,
details.manage-menu a,
details.manage-menu button,
.toolbar-menu-panel .btn-toolbar {
    max-width: 100%;
    min-width: 0;
    overflow-wrap: anywhere;
    white-space: normal;
}

@media (max-width: 640px) {
    .dashboard-cards,
    .cards-3,
    .cards-2,
    .document-detail-layout,
    .customer-profile-shell.record-layout-shell {
        grid-template-columns: 1fr;
    }

    .page-header,
    .module-page-header,
    .module-action-bar.action-bar,
    .action-bar,
    .page-actions,
    .form-actions,
    .record-action-bar,
    .filter-actions,
    .actions-cell,
    .mobile-record-actions,
    .operational-filter-toolbar,
    .filter-toolbar,
    .customer-filters,
    .permission-search-toolbar,
    .compact-form,
    .operational-form.compact-form {
        align-items: stretch;
        display: grid;
        gap: .5rem;
        grid-template-columns: 1fr;
        width: 100%;
    }

    .module-action-bar.action-bar > *,
    .action-bar > *,
    .page-actions > *,
    .form-actions > *,
    .record-action-bar > *,
    .filter-actions > *,
    .actions-cell > *,
    .mobile-record-actions > *,
    .operational-filter-toolbar > *,
    .filter-toolbar > *,
    .customer-filters > *,
    .permission-search-toolbar > *,
    .compact-form > *,
    .operational-form.compact-form > * {
        min-width: 0;
        width: 100%;
    }

    .module-action-bar .btn,
    .module-action-bar button,
    .module-action-bar .button-link,
    .module-action-bar .link-button,
    .module-action-bar .primary-action,
    .action-bar .btn,
    .action-bar button,
    .action-bar .button-link,
    .action-bar .link-button,
    .action-bar .primary-action,
    .page-actions .btn,
    .page-actions button,
    .page-actions .button-link,
    .page-actions .link-button,
    .page-actions .primary-action,
    .form-actions .btn,
    .form-actions button,
    .form-actions .button-link,
    .form-actions .link-button,
    .form-actions .primary-action,
    .record-action-bar .btn,
    .record-action-bar button,
    .record-action-bar .button-link,
    .record-action-bar .link-button,
    .record-action-bar .primary-action,
    .filter-actions .btn,
    .filter-actions button,
    .filter-actions .button-link,
    .filter-actions .link-button,
    .filter-actions .primary-action,
    .actions-cell .btn,
    .actions-cell button,
    .actions-cell .button-link,
    .actions-cell .link-button,
    .actions-cell .primary-action,
    .mobile-record-actions .btn,
    .mobile-record-actions button,
    .mobile-record-actions .button-link,
    .mobile-record-actions .link-button,
    .mobile-record-actions .primary-action {
        min-height: 44px;
        width: 100%;
    }

    .module-action-bar form > button,
    .action-bar form > button,
    .page-actions form > button,
    .form-actions form > button,
    .record-action-bar form > button,
    .filter-actions form > button,
    .actions-cell form > button,
    .mobile-record-actions form > button {
        width: 100%;
    }

    .manage-dropdown,
    .manage-dropdown summary {
        width: 100%;
    }

    .manage-menu,
    .record-more div,
    details.manage-menu > div,
    .toolbar-menu-panel {
        box-shadow: none;
        left: auto;
        margin-top: .35rem;
        max-height: 55dvh;
        min-width: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        position: static;
        right: auto;
        width: 100%;
    }

    .module-intro,
    .help-panel,
    .instruction-card,
    .permission-help-card,
    .alert {
        border-radius: .75rem;
        padding: .75rem;
    }

    .instruction-card {
        min-height: auto;
    }

    .help-panel .card-heading-row,
    .permission-help-toolbar {
        align-items: stretch;
        display: grid;
        gap: .5rem;
        grid-template-columns: 1fr;
        width: 100%;
    }

    .help-panel .card-heading-row > *,
    .permission-help-toolbar > *,
    .permission-help-toolbar button {
        min-width: 0;
        width: 100%;
    }

    .help-note-row {
        padding: .5rem 0;
    }
}

/* Desktop Estimate Work Order Invoice Detail Polish */
@media (min-width: 900px) {
    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-detail-shell[data-operational-ui="v1"] {
        background: #ffffff;
        border: 1px solid #d8e2ed;
        border-radius: 14px;
        box-shadow: 0 18px 48px rgba(15, 23, 42, .08);
        box-sizing: border-box;
        margin: 0 auto 1.5rem;
        max-width: min(100%, 1560px);
        overflow: hidden;
        padding: 1rem;
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-detail-shell[data-operational-ui="v1"] .detail-page-header {
        align-items: flex-start;
        background: linear-gradient(135deg, #f8fbff 0%, #ffffff 64%, #ecfdf5 100%);
        border: 1px solid #dbe4ee;
        border-radius: 12px;
        display: flex ;
        gap: 1rem;
        justify-content: space-between;
        margin-bottom: 1rem;
        padding: 1rem;
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-detail-shell[data-operational-ui="v1"] .detail-page-header > div:first-child {
        min-width: 18rem;
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-detail-shell[data-operational-ui="v1"] .detail-page-header h1 {
        font-size: clamp(1.6rem, 1.6vw, 2.2rem);
        letter-spacing: 0;
        line-height: 1.1;
        margin: .15rem 0 .4rem;
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-detail-shell[data-operational-ui="v1"] .module-action-bar.action-bar,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-detail-shell[data-operational-ui="v1"] .work-order-command-actions,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-detail-shell[data-operational-ui="v1"] .work-order-section-actions,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-detail-shell[data-operational-ui="v1"] .work-order-form-actions,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-detail-shell[data-operational-ui="v1"] .line-item-flow-card .button-row,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-detail-shell[data-operational-ui="v1"] .whole-work-order-timer-controls,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-detail-shell[data-operational-ui="v1"] .compact-timer-controls,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-detail-shell[data-operational-ui="v1"] .field-tech-workflow-card .button-row,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-detail-shell[data-operational-ui="v1"] .timers-field-workflow-card .button-row,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-detail-shell[data-operational-ui="v1"] .right-summary-panel .inline-form {
        align-items: center ;
        display: flex ;
        flex-wrap: wrap ;
        gap: .5rem ;
        grid-template-columns: none ;
        justify-content: flex-start ;
        width: auto ;
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-detail-shell[data-operational-ui="v1"] .module-action-bar.action-bar {
        justify-content: flex-end ;
        max-width: min(100%, 54rem);
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-detail-shell[data-operational-ui="v1"] .module-action-bar.action-bar > *,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-detail-shell[data-operational-ui="v1"] .work-order-command-actions > *,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-detail-shell[data-operational-ui="v1"] .work-order-section-actions > *,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-detail-shell[data-operational-ui="v1"] .work-order-form-actions > *,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-detail-shell[data-operational-ui="v1"] .line-item-flow-card .button-row > *,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-detail-shell[data-operational-ui="v1"] .whole-work-order-timer-controls > *,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-detail-shell[data-operational-ui="v1"] .compact-timer-controls > *,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-detail-shell[data-operational-ui="v1"] .field-tech-workflow-card .button-row > *,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-detail-shell[data-operational-ui="v1"] .timers-field-workflow-card .button-row > *,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-detail-shell[data-operational-ui="v1"] .right-summary-panel .inline-form > * {
        flex: 0 1 auto ;
        min-width: 0;
        width: auto ;
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-detail-shell[data-operational-ui="v1"] .module-action-bar .btn,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-detail-shell[data-operational-ui="v1"] .module-action-bar button,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-detail-shell[data-operational-ui="v1"] .document-action-link,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-detail-shell[data-operational-ui="v1"] .work-order-section-actions .btn,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-detail-shell[data-operational-ui="v1"] .work-order-section-actions button,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-detail-shell[data-operational-ui="v1"] .line-item-flow-card .btn,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-detail-shell[data-operational-ui="v1"] .line-item-flow-card button,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-detail-shell[data-operational-ui="v1"] .whole-work-order-timer-controls .btn,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-detail-shell[data-operational-ui="v1"] .whole-work-order-timer-controls button,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-detail-shell[data-operational-ui="v1"] .compact-timer-controls .btn,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-detail-shell[data-operational-ui="v1"] .compact-timer-controls button,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-detail-shell[data-operational-ui="v1"] .field-tech-workflow-card .btn,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-detail-shell[data-operational-ui="v1"] .field-tech-workflow-card button,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-detail-shell[data-operational-ui="v1"] .timers-field-workflow-card .btn,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-detail-shell[data-operational-ui="v1"] .timers-field-workflow-card button,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-detail-shell[data-operational-ui="v1"] .right-summary-panel .inline-form .btn,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-detail-shell[data-operational-ui="v1"] .right-summary-panel .inline-form button {
        min-height: 36px ;
        width: auto ;
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-detail-shell[data-operational-ui="v1"] .manage-dropdown {
        display: inline-block;
        position: relative;
        width: auto ;
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-detail-shell[data-operational-ui="v1"] .manage-dropdown summary {
        width: auto ;
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-detail-shell[data-operational-ui="v1"] .manage-menu {
        box-shadow: 0 18px 40px rgba(15, 23, 42, .18);
        left: auto;
        min-width: 16rem;
        position: absolute;
        right: 0;
        top: calc(100% + .35rem);
        width: max-content;
        z-index: 90;
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-detail-shell[data-operational-ui="v1"] > .card,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-detail-shell[data-operational-ui="v1"] .work-order-command-center,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-detail-shell[data-operational-ui="v1"] .work-order-office-closeout-status,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-detail-shell[data-operational-ui="v1"] .work-order-production-completion-card,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-detail-shell[data-operational-ui="v1"] .work-order-closeout-checklist {
        border-radius: 12px;
        box-shadow: 0 10px 28px rgba(15, 23, 42, .045);
        margin-bottom: 1rem;
        padding: 1rem;
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-detail-shell[data-operational-ui="v1"] .work-order-command-center {
        background: #ffffff;
        border: 1px solid #dbe4ee;
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-detail-shell[data-operational-ui="v1"] .work-order-command-grid {
        grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-detail-shell[data-operational-ui="v1"] .work-order-office-closeout-pills {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-detail-shell[data-operational-ui="v1"] .work-order-closeout-grid {
        grid-template-columns: repeat(auto-fit, minmax(175px, 1fr));
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-detail-shell[data-operational-ui="v1"] .metric-strip {
        background: #f8fbff;
        border: 1px solid #dbe4ee;
        border-radius: 12px;
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
        margin: 0 0 1rem;
        padding: .85rem;
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-detail-shell[data-operational-ui="v1"] .document-detail-layout {
        align-items: start;
        display: grid ;
        gap: 1rem;
        grid-template-columns: minmax(0, 1fr) minmax(340px, 430px);
        margin-top: 1rem;
        width: 100%;
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .work-order-detail-shell[data-operational-ui="v1"] .work-order-lower-workspace {
        background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
        border: 1px solid #dbe4ee;
        border-radius: 14px;
        box-shadow: 0 16px 42px rgba(15, 23, 42, .06);
        gap: 1.1rem;
        margin-top: 1rem;
        padding: 1rem;
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .work-order-detail-shell[data-operational-ui="v1"] .work-order-primary-column {
        align-content: start;
        display: grid;
        gap: 1rem;
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .work-order-detail-shell[data-operational-ui="v1"] .work-order-side-column {
        align-content: start;
        display: grid;
        gap: .85rem;
        max-height: calc(100vh - 1.5rem);
        overflow: auto;
        padding-right: .15rem;
        position: sticky;
        top: .75rem;
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-detail-shell[data-operational-ui="v1"] .document-main,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-detail-shell[data-operational-ui="v1"] .right-summary-panel {
        min-width: 0;
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-detail-shell[data-operational-ui="v1"] .document-preview-card {
        border-radius: 12px;
        box-shadow: 0 12px 30px rgba(15, 23, 42, .075);
        margin: 0 0 1rem;
        max-width: 100%;
        min-height: 0;
        padding: clamp(1rem, 1.4vw, 1.4rem);
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .work-order-detail-shell[data-operational-ui="v1"] .document-preview-card[data-work-order-document-polish] {
        border-color: #dbe4ee;
        overflow: hidden;
        padding: 0;
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-detail-shell[data-operational-ui="v1"] .document-preview-card:not([data-work-order-document-polish]) {
        border-color: #dbe4ee;
        overflow: hidden;
        padding: 0;
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-detail-shell[data-operational-ui="v1"] .document-ribbon {
        border-radius: 999px;
        display: inline-flex;
        left: auto;
        margin: 0 0 .75rem;
        position: static;
        top: auto;
        transform: none;
        width: fit-content;
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .work-order-detail-shell[data-operational-ui="v1"] .document-preview-card[data-work-order-document-polish] .document-ribbon {
        margin: 1rem 1rem 0;
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-detail-shell[data-operational-ui="v1"] .document-header {
        align-items: flex-start;
        display: flex;
        gap: 1rem;
        margin-bottom: 1.25rem;
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .work-order-detail-shell[data-operational-ui="v1"] .document-preview-card[data-work-order-document-polish] .document-header {
        background: linear-gradient(135deg, #f8fbff 0%, #ffffff 70%);
        border-bottom: 1px solid #dbe4ee;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        margin: 0;
        padding: 1rem;
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-detail-shell[data-operational-ui="v1"] .document-preview-card:not([data-work-order-document-polish]) .document-header {
        background: linear-gradient(135deg, #f8fbff 0%, #ffffff 70%);
        border-bottom: 1px solid #dbe4ee;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        margin: 0;
        padding: 1rem;
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-detail-shell[data-operational-ui="v1"] .document-header h2 {
        font-size: clamp(1.45rem, 1.4vw, 1.85rem);
        letter-spacing: .01em;
        line-height: 1.15;
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .work-order-detail-shell[data-operational-ui="v1"] .document-preview-card[data-work-order-document-polish] .document-header > div {
        min-width: 0;
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-detail-shell[data-operational-ui="v1"] .document-preview-card:not([data-work-order-document-polish]) .document-header > div {
        min-width: 0;
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-detail-shell[data-operational-ui="v1"] .document-address-grid {
        gap: .85rem;
        margin-bottom: 1rem;
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .work-order-detail-shell[data-operational-ui="v1"] .document-preview-card[data-work-order-document-polish] .document-address-grid {
        background: #fbfdff;
        border-bottom: 1px solid #e7edf5;
        margin: 0;
        padding: 1rem;
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-detail-shell[data-operational-ui="v1"] .document-preview-card:not([data-work-order-document-polish]) .document-address-grid {
        background: #fbfdff;
        border-bottom: 1px solid #e7edf5;
        margin: 0;
        padding: 1rem;
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .work-order-detail-shell[data-operational-ui="v1"] .document-preview-card[data-work-order-document-polish] > p {
        margin: .85rem 1rem;
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-detail-shell[data-operational-ui="v1"] .document-preview-card:not([data-work-order-document-polish]) > p {
        margin: .85rem 1rem;
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .work-order-detail-shell[data-operational-ui="v1"] .document-preview-card[data-work-order-document-polish] > .table-scroll,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .invoice-detail-shell[data-operational-ui="v1"] .document-preview-card > .table-scroll {
        border: 1px solid #dbe4ee;
        border-radius: 12px;
        margin: 1rem;
        max-height: 24rem;
        overflow: auto;
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-detail-shell[data-operational-ui="v1"] .document-preview-card:not([data-work-order-document-polish]) > .table-scroll {
        border: 1px solid #dbe4ee;
        border-radius: 12px;
        margin: 1rem;
        max-height: 24rem;
        overflow: auto;
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .work-order-detail-shell[data-operational-ui="v1"] .document-preview-card[data-work-order-document-polish] .document-lines {
        font-size: .9rem;
        min-width: 720px;
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-detail-shell[data-operational-ui="v1"] .document-preview-card:not([data-work-order-document-polish]) .document-lines {
        font-size: .9rem;
        min-width: 720px;
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .work-order-detail-shell[data-operational-ui="v1"] .document-preview-card[data-work-order-document-polish] .document-lines th,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .work-order-detail-shell[data-operational-ui="v1"] .document-preview-card[data-work-order-document-polish] .document-lines td {
        padding: .65rem;
        vertical-align: top;
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-detail-shell[data-operational-ui="v1"] .document-preview-card:not([data-work-order-document-polish]) .document-lines th,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-detail-shell[data-operational-ui="v1"] .document-preview-card:not([data-work-order-document-polish]) .document-lines td {
        padding: .65rem;
        vertical-align: top;
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-detail-shell[data-operational-ui="v1"] .document-lines td,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-detail-shell[data-operational-ui="v1"] .document-message p,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-detail-shell[data-operational-ui="v1"] .work-order-line-instructions {
        line-height: 1.45;
        overflow-wrap: anywhere;
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-detail-shell[data-operational-ui="v1"] .document-lines td:nth-child(2) small {
        display: block;
        max-width: 78ch;
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .work-order-detail-shell[data-operational-ui="v1"] .document-preview-card[data-work-order-document-polish] .document-lines td:nth-child(2) small:last-child {
        border-left: 3px solid #e0f2fe;
        max-height: 7rem;
        overflow: auto;
        padding-left: .6rem;
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-detail-shell[data-operational-ui="v1"] .document-preview-card:not([data-work-order-document-polish]) .document-lines td:nth-child(2) small:last-child {
        border-left: 3px solid #e0f2fe;
        max-height: 7rem;
        overflow: auto;
        padding-left: .6rem;
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .work-order-detail-shell[data-operational-ui="v1"] .document-preview-card[data-work-order-document-polish] .document-total,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .work-order-detail-shell[data-operational-ui="v1"] .document-preview-card[data-work-order-document-polish] .document-message {
        margin: 1rem;
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-detail-shell[data-operational-ui="v1"] .document-preview-card:not([data-work-order-document-polish]) .document-total,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-detail-shell[data-operational-ui="v1"] .document-preview-card:not([data-work-order-document-polish]) .document-message {
        margin: 1rem;
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .work-order-detail-shell[data-operational-ui="v1"] .document-preview-card[data-work-order-document-polish] .document-message {
        background: #f8fbff;
        border: 1px solid #e4ebf4;
        border-radius: 12px;
        padding: 1rem;
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-detail-shell[data-operational-ui="v1"] .document-preview-card:not([data-work-order-document-polish]) .document-message {
        background: #f8fbff;
        border: 1px solid #e4ebf4;
        border-radius: 12px;
        padding: 1rem;
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-detail-shell[data-operational-ui="v1"] .right-summary-panel {
        align-content: start;
        display: grid;
        gap: .85rem;
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-detail-shell[data-operational-ui="v1"]:not(.work-order-detail-shell) {
        max-width: min(100%, 1360px);
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-detail-shell[data-operational-ui="v1"]:not(.work-order-detail-shell) .document-detail-layout {
        gap: 1.15rem;
        grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-detail-shell[data-operational-ui="v1"]:not(.work-order-detail-shell) .document-main {
        display: grid;
        gap: 1rem;
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-detail-shell[data-operational-ui="v1"]:not(.work-order-detail-shell) .right-summary-panel {
        max-height: calc(100vh - 2rem);
        overflow: auto;
        position: sticky;
        top: 1rem;
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-detail-shell[data-operational-ui="v1"]:not(.work-order-detail-shell) .right-summary-panel .card,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-detail-shell[data-operational-ui="v1"]:not(.work-order-detail-shell) .summary-card,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-detail-shell[data-operational-ui="v1"]:not(.work-order-detail-shell) .right-summary-panel .portal-admin-panel {
        box-shadow: 0 10px 24px rgba(15, 23, 42, .045);
        margin: 0;
        min-width: 0;
        overflow: hidden;
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-detail-shell[data-operational-ui="v1"]:not(.work-order-detail-shell) .right-summary-panel .table-scroll,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-detail-shell[data-operational-ui="v1"]:not(.work-order-detail-shell) .right-summary-panel table {
        max-width: 100%;
        overflow-x: auto;
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-detail-shell[data-operational-ui="v1"]:not(.work-order-detail-shell) .right-summary-panel input,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-detail-shell[data-operational-ui="v1"]:not(.work-order-detail-shell) .right-summary-panel select,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-detail-shell[data-operational-ui="v1"]:not(.work-order-detail-shell) .right-summary-panel textarea {
        max-width: 100%;
        min-width: 0;
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-detail-shell[data-operational-ui="v1"]:not(.work-order-detail-shell) .right-summary-panel .card,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-detail-shell[data-operational-ui="v1"]:not(.work-order-detail-shell) .right-summary-panel .portal-admin-panel {
        display: grid;
        gap: .65rem;
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-detail-shell[data-operational-ui="v1"]:not(.work-order-detail-shell) .right-summary-panel h3,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-detail-shell[data-operational-ui="v1"]:not(.work-order-detail-shell) .right-summary-panel p,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-detail-shell[data-operational-ui="v1"]:not(.work-order-detail-shell) .right-summary-panel a,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-detail-shell[data-operational-ui="v1"]:not(.work-order-detail-shell) .right-summary-panel code {
        max-width: 100%;
        overflow-wrap: anywhere;
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-detail-shell[data-operational-ui="v1"]:not(.work-order-detail-shell) .right-summary-panel .inline-form {
        background: #fff;
        border: 1px solid #e4ebf4;
        border-radius: 10px;
        padding: .6rem;
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-detail-shell[data-operational-ui="v1"]:not(.work-order-detail-shell) .right-summary-panel .inline-form input[type="datetime-local"],
    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-detail-shell[data-operational-ui="v1"]:not(.work-order-detail-shell) .right-summary-panel .inline-form input[type="text"],
    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-detail-shell[data-operational-ui="v1"]:not(.work-order-detail-shell) .right-summary-panel .inline-form select {
        flex: 1 1 12rem ;
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-detail-shell[data-operational-ui="v1"]:not(.work-order-detail-shell) .right-summary-panel .table-scroll {
        border: 1px solid #e4ebf4;
        border-radius: 10px;
        max-height: 18rem;
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-detail-shell[data-operational-ui="v1"] .right-summary-panel .card,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-detail-shell[data-operational-ui="v1"] .summary-card,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-detail-shell[data-operational-ui="v1"] .right-summary-panel .portal-admin-panel {
        background: #f8fafc;
        border: 1px solid #dbe4ee;
        border-radius: 12px;
        padding: .9rem;
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .work-order-detail-shell[data-operational-ui="v1"] .work-order-side-column .summary-card,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .work-order-detail-shell[data-operational-ui="v1"] .work-order-side-column .card,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .work-order-detail-shell[data-operational-ui="v1"] .work-order-side-column .portal-admin-panel {
        background: #ffffff;
        box-shadow: 0 10px 26px rgba(15, 23, 42, .045);
        margin: 0;
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .work-order-detail-shell[data-operational-ui="v1"] .work-order-side-column h3 {
        margin-top: 0;
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .work-order-detail-shell[data-operational-ui="v1"] .work-order-side-column .table-scroll,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .work-order-detail-shell[data-operational-ui="v1"] .work-order-side-column table {
        max-width: 100%;
        overflow-x: auto;
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .work-order-detail-shell[data-operational-ui="v1"] .work-order-side-column input,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .work-order-detail-shell[data-operational-ui="v1"] .work-order-side-column select,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .work-order-detail-shell[data-operational-ui="v1"] .work-order-side-column textarea {
        max-width: 100%;
        min-width: 0;
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-detail-shell[data-operational-ui="v1"] .communication-action-row,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-detail-shell[data-operational-ui="v1"] .stacked-actions {
        align-items: flex-start;
        display: grid;
        gap: .4rem;
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .work-order-detail-shell[data-operational-ui="v1"] .communication-actions-card .stacked-actions {
        grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-detail-shell[data-operational-ui="v1"] .communication-action-row .btn {
        justify-content: flex-start;
        text-align: left;
        width: 100% ;
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-detail-shell[data-operational-ui="v1"] .work-order-scheduling-card .metric-grid,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-detail-shell[data-operational-ui="v1"] .work-order-timer-metrics,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-detail-shell[data-operational-ui="v1"] .work-order-invoice-summary {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-detail-shell[data-operational-ui="v1"] .work-order-direct-schedule-form {
        align-items: start;
        background: #ffffff;
        border: 1px solid #dbe4ee;
        border-radius: 12px;
        display: grid;
        gap: .85rem 1rem;
        grid-template-columns: minmax(320px, .9fr) minmax(320px, 1.1fr);
        padding: .9rem;
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-detail-shell[data-operational-ui="v1"] .work-order-direct-schedule-form h3,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-detail-shell[data-operational-ui="v1"] .work-order-direct-schedule-form .work-order-form-actions {
        grid-column: 1 / -1;
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-detail-shell[data-operational-ui="v1"] .work-order-direct-schedule-form .form-grid-4 {
        grid-column: 1;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-detail-shell[data-operational-ui="v1"] .work-order-direct-schedule-form > label {
        grid-column: 1;
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-detail-shell[data-operational-ui="v1"] .work-order-direct-schedule-form .employee-checkbox-group {
        align-self: stretch;
        background: #f8fbff;
        border: 1px solid #dbe4ee;
        border-radius: 12px;
        grid-column: 2;
        grid-row: 2 / span 2;
        max-height: 18rem;
        min-width: 0;
        overflow: auto;
        padding: .75rem;
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-detail-shell[data-operational-ui="v1"] .employee-checkbox-group label {
        align-items: center;
        display: grid;
        gap: .45rem;
        grid-template-columns: auto minmax(0, 1fr);
        min-width: 0;
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-detail-shell[data-operational-ui="v1"] .timers-field-workflow-card,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-detail-shell[data-operational-ui="v1"] .field-tech-workflow-card,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-detail-shell[data-operational-ui="v1"] .line-item-flow-card,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-detail-shell[data-operational-ui="v1"] .work-order-invoice-card,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-detail-shell[data-operational-ui="v1"] .work-order-scheduling-card {
        border-radius: 12px;
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-detail-shell[data-operational-ui="v1"] .work-order-line-card-grid {
        display: grid;
        gap: .85rem;
        grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-detail-shell[data-operational-ui="v1"] .document-line-snapshot-grid {
        gap: .85rem;
        grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-detail-shell[data-operational-ui="v1"] .work-order-line-card,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-detail-shell[data-operational-ui="v1"] .document-line-snapshot-card {
        background: #ffffff;
        border: 1px solid #dbe4ee;
        border-radius: 12px;
        box-shadow: 0 10px 24px rgba(15, 23, 42, .04);
        min-width: 0;
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-detail-shell[data-operational-ui="v1"] .work-order-line-card-timer {
        background: #f8fbff;
        border: 1px solid #e3eaf2;
        border-radius: 10px;
        padding: .75rem;
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-detail-shell[data-operational-ui="v1"] .compact-timer-controls form,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-detail-shell[data-operational-ui="v1"] .whole-work-order-timer-controls form {
        align-items: center;
        display: inline-flex;
        flex: 0 1 auto;
        gap: .4rem;
        min-width: 0;
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-detail-shell[data-operational-ui="v1"] .compact-timer-controls form:has(input[type="number"]),
    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-detail-shell[data-operational-ui="v1"] .whole-work-order-timer-controls form:has(input[type="text"]) {
        flex: 1 1 24rem;
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-detail-shell[data-operational-ui="v1"] .compact-timer-controls input,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-detail-shell[data-operational-ui="v1"] .compact-timer-controls select,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-detail-shell[data-operational-ui="v1"] .whole-work-order-timer-controls input,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-detail-shell[data-operational-ui="v1"] .whole-work-order-timer-controls select {
        min-width: 8rem;
        width: auto;
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .work-order-detail-shell[data-operational-ui="v1"] .timers-field-workflow-card .whole-work-order-timer-controls {
        align-items: stretch ;
        display: grid ;
        gap: .65rem ;
        grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)) ;
        width: 100% ;
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .work-order-detail-shell[data-operational-ui="v1"] .timers-field-workflow-card .whole-work-order-timer-controls .inline-form {
        display: grid ;
        flex: none ;
        gap: .45rem ;
        width: auto ;
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .work-order-detail-shell[data-operational-ui="v1"] .timers-field-workflow-card .whole-work-order-timer-controls .inline-form:has(input[type="text"]),
    .app-shell:not([data-mobile-layout-mode="mobile"]) .work-order-detail-shell[data-operational-ui="v1"] .timers-field-workflow-card .whole-work-order-timer-controls .inline-form:has(select) {
        grid-column: span 2;
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .work-order-detail-shell[data-operational-ui="v1"] .timers-field-workflow-card .whole-work-order-timer-controls input,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .work-order-detail-shell[data-operational-ui="v1"] .timers-field-workflow-card .whole-work-order-timer-controls select {
        min-width: 0;
        width: 100%;
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-detail-shell[data-operational-ui="v1"] .work-order-time-override-form {
        align-items: end;
        background: #f8fafc;
        border: 1px solid #dbe4ee;
        border-radius: 12px;
        display: grid;
        gap: .75rem;
        grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
        padding: .85rem;
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-detail-shell[data-operational-ui="v1"] .work-order-time-override-form h3,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-detail-shell[data-operational-ui="v1"] .work-order-time-override-form .muted {
        grid-column: 1 / -1;
    }
}

@media (min-width: 900px) and (max-width: 1180px) {
    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-detail-shell[data-operational-ui="v1"] .document-detail-layout {
        grid-template-columns: 1fr;
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-detail-shell[data-operational-ui="v1"] .right-summary-panel {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .work-order-detail-shell[data-operational-ui="v1"] .work-order-side-column {
        position: static;
    }
}

/* Wide desktop detail failsafe: saved Mobile UI preference must not flatten desktop workspaces. */
@media (min-width: 1200px) {
    .app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell[data-operational-ui="v1"] {
        background: #ffffff;
        border: 1px solid #d8e2ed;
        border-radius: 14px ;
        box-shadow: 0 18px 48px rgba(15, 23, 42, .08);
        box-sizing: border-box;
        margin: 0 auto 1.5rem;
        max-width: min(100%, 1560px) ;
        overflow: visible;
        padding: 1rem ;
    }

    .app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell[data-operational-ui="v1"] .detail-page-header {
        align-items: flex-start ;
        background: linear-gradient(135deg, #f8fbff 0%, #ffffff 64%, #ecfdf5 100%);
        border: 1px solid #dbe4ee;
        border-radius: 12px;
        display: flex ;
        gap: 1rem ;
        grid-template-columns: none ;
        justify-content: space-between ;
        margin-bottom: 1rem;
        padding: 1rem;
        width: auto ;
    }

    .app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell[data-operational-ui="v1"] .detail-page-header h1 {
        font-size: clamp(1.6rem, 1.6vw, 2.2rem);
        line-height: 1.1;
        margin: .15rem 0 .4rem;
    }

    .app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell[data-operational-ui="v1"] .module-action-bar.action-bar,
    .app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell[data-operational-ui="v1"] .work-order-command-actions,
    .app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell[data-operational-ui="v1"] .work-order-section-actions,
    .app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell[data-operational-ui="v1"] .work-order-form-actions,
    .app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell[data-operational-ui="v1"] .line-item-flow-card .button-row,
    .app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell[data-operational-ui="v1"] .whole-work-order-timer-controls,
    .app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell[data-operational-ui="v1"] .compact-timer-controls,
    .app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell[data-operational-ui="v1"] .field-tech-workflow-card .button-row,
    .app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell[data-operational-ui="v1"] .timers-field-workflow-card .button-row,
    .app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell[data-operational-ui="v1"] .right-summary-panel .inline-form {
        align-items: center ;
        display: flex ;
        flex-wrap: wrap ;
        gap: .5rem ;
        grid-template-columns: none ;
        justify-content: flex-start ;
        width: auto ;
    }

    .app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell[data-operational-ui="v1"] .module-action-bar.action-bar {
        justify-content: flex-end ;
        max-width: min(100%, 54rem);
    }

    .app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell[data-operational-ui="v1"] .module-action-bar.action-bar > *,
    .app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell[data-operational-ui="v1"] .work-order-command-actions > *,
    .app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell[data-operational-ui="v1"] .work-order-section-actions > *,
    .app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell[data-operational-ui="v1"] .work-order-form-actions > *,
    .app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell[data-operational-ui="v1"] .line-item-flow-card .button-row > *,
    .app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell[data-operational-ui="v1"] .whole-work-order-timer-controls > *,
    .app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell[data-operational-ui="v1"] .compact-timer-controls > *,
    .app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell[data-operational-ui="v1"] .field-tech-workflow-card .button-row > *,
    .app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell[data-operational-ui="v1"] .timers-field-workflow-card .button-row > *,
    .app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell[data-operational-ui="v1"] .right-summary-panel .inline-form > * {
        flex: 0 1 auto ;
        min-width: 0;
        width: auto ;
    }

    .app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell[data-operational-ui="v1"] .module-action-bar .btn,
    .app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell[data-operational-ui="v1"] .module-action-bar button,
    .app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell[data-operational-ui="v1"] .document-action-link,
    .app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell[data-operational-ui="v1"] .work-order-section-actions .btn,
    .app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell[data-operational-ui="v1"] .work-order-section-actions button,
    .app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell[data-operational-ui="v1"] .line-item-flow-card .btn,
    .app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell[data-operational-ui="v1"] .line-item-flow-card button,
    .app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell[data-operational-ui="v1"] .whole-work-order-timer-controls .btn,
    .app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell[data-operational-ui="v1"] .whole-work-order-timer-controls button,
    .app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell[data-operational-ui="v1"] .compact-timer-controls .btn,
    .app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell[data-operational-ui="v1"] .compact-timer-controls button,
    .app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell[data-operational-ui="v1"] .field-tech-workflow-card .btn,
    .app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell[data-operational-ui="v1"] .field-tech-workflow-card button,
    .app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell[data-operational-ui="v1"] .timers-field-workflow-card .btn,
    .app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell[data-operational-ui="v1"] .timers-field-workflow-card button,
    .app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell[data-operational-ui="v1"] .right-summary-panel .inline-form .btn,
    .app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell[data-operational-ui="v1"] .right-summary-panel .inline-form button {
        min-height: 36px ;
        width: auto ;
    }

    .app-shell[data-mobile-layout-mode="mobile"] .work-order-detail-shell[data-operational-ui="v1"] .timers-field-workflow-card .whole-work-order-timer-controls {
        align-items: stretch ;
        display: grid ;
        gap: .65rem ;
        grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)) ;
        width: 100% ;
    }

    .app-shell[data-mobile-layout-mode="mobile"] .work-order-detail-shell[data-operational-ui="v1"] .timers-field-workflow-card .whole-work-order-timer-controls .inline-form {
        display: grid ;
        flex: none ;
        gap: .45rem ;
        width: auto ;
    }

    .app-shell[data-mobile-layout-mode="mobile"] .work-order-detail-shell[data-operational-ui="v1"] .timers-field-workflow-card .whole-work-order-timer-controls .inline-form:has(input[type="text"]),
    .app-shell[data-mobile-layout-mode="mobile"] .work-order-detail-shell[data-operational-ui="v1"] .timers-field-workflow-card .whole-work-order-timer-controls .inline-form:has(select) {
        grid-column: span 2;
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .app-shell[data-mobile-layout-mode="mobile"] .work-order-detail-shell[data-operational-ui="v1"] .timers-field-workflow-card .whole-work-order-timer-controls input,
    .app-shell[data-mobile-layout-mode="mobile"] .work-order-detail-shell[data-operational-ui="v1"] .timers-field-workflow-card .whole-work-order-timer-controls select {
        min-width: 0;
        width: 100% ;
    }

    .app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell[data-operational-ui="v1"] .document-detail-layout {
        align-items: start;
        display: grid ;
        gap: 1rem ;
        grid-template-columns: minmax(0, 1fr) minmax(340px, 430px) ;
        margin-top: 1rem;
        padding: 0 ;
        width: 100% ;
    }

    .app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell[data-operational-ui="v1"]:not(.work-order-detail-shell) {
        max-width: min(100%, 1360px) ;
    }

    .app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell[data-operational-ui="v1"]:not(.work-order-detail-shell) .document-detail-layout {
        gap: 1.15rem ;
        grid-template-columns: minmax(0, 1fr) minmax(300px, 380px) ;
    }

    .app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell[data-operational-ui="v1"]:not(.work-order-detail-shell) .document-main {
        display: grid ;
        gap: 1rem ;
    }

    .app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell[data-operational-ui="v1"]:not(.work-order-detail-shell) .right-summary-panel {
        max-height: calc(100vh - 2rem);
        overflow: auto;
        position: sticky;
        top: 1rem;
    }

    .app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell[data-operational-ui="v1"]:not(.work-order-detail-shell) .right-summary-panel .card,
    .app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell[data-operational-ui="v1"]:not(.work-order-detail-shell) .summary-card,
    .app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell[data-operational-ui="v1"]:not(.work-order-detail-shell) .right-summary-panel .portal-admin-panel {
        box-shadow: 0 10px 24px rgba(15, 23, 42, .045);
        margin: 0;
        min-width: 0;
        overflow: hidden;
    }

    .app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell[data-operational-ui="v1"]:not(.work-order-detail-shell) .right-summary-panel .table-scroll,
    .app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell[data-operational-ui="v1"]:not(.work-order-detail-shell) .right-summary-panel table {
        max-width: 100%;
        overflow-x: auto;
    }

    .app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell[data-operational-ui="v1"]:not(.work-order-detail-shell) .right-summary-panel .card,
    .app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell[data-operational-ui="v1"]:not(.work-order-detail-shell) .right-summary-panel .portal-admin-panel {
        display: grid;
        gap: .65rem;
    }

    .app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell[data-operational-ui="v1"]:not(.work-order-detail-shell) .right-summary-panel h3,
    .app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell[data-operational-ui="v1"]:not(.work-order-detail-shell) .right-summary-panel p,
    .app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell[data-operational-ui="v1"]:not(.work-order-detail-shell) .right-summary-panel a,
    .app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell[data-operational-ui="v1"]:not(.work-order-detail-shell) .right-summary-panel code {
        max-width: 100%;
        overflow-wrap: anywhere;
    }

    .app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell[data-operational-ui="v1"]:not(.work-order-detail-shell) .right-summary-panel .inline-form {
        background: #fff;
        border: 1px solid #e4ebf4;
        border-radius: 10px;
        padding: .6rem;
    }

    .app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell[data-operational-ui="v1"]:not(.work-order-detail-shell) .right-summary-panel .inline-form input[type="datetime-local"],
    .app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell[data-operational-ui="v1"]:not(.work-order-detail-shell) .right-summary-panel .inline-form input[type="text"],
    .app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell[data-operational-ui="v1"]:not(.work-order-detail-shell) .right-summary-panel .inline-form select {
        flex: 1 1 12rem ;
    }

    .app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell[data-operational-ui="v1"]:not(.work-order-detail-shell) .right-summary-panel .table-scroll {
        border: 1px solid #e4ebf4;
        border-radius: 10px;
        max-height: 18rem;
    }

    .app-shell[data-mobile-layout-mode="mobile"] .work-order-detail-shell[data-operational-ui="v1"] .work-order-lower-workspace {
        background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
        border: 1px solid #dbe4ee;
        border-radius: 14px;
        box-shadow: 0 16px 42px rgba(15, 23, 42, .06);
        gap: 1.1rem ;
        margin-top: 1rem;
        padding: 1rem ;
    }

    .app-shell[data-mobile-layout-mode="mobile"] .work-order-detail-shell[data-operational-ui="v1"] .work-order-primary-column {
        align-content: start;
        display: grid ;
        gap: 1rem ;
    }

    .app-shell[data-mobile-layout-mode="mobile"] .work-order-detail-shell[data-operational-ui="v1"] .work-order-side-column {
        align-content: start;
        display: grid ;
        gap: .85rem ;
        max-height: calc(100vh - 1.5rem);
        overflow: auto;
        padding-right: .15rem;
        position: sticky;
        top: .75rem;
    }

    .app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell[data-operational-ui="v1"] .document-preview-card {
        border-radius: 12px;
        box-shadow: 0 12px 30px rgba(15, 23, 42, .075);
        margin: 0 0 1rem;
        max-width: 100%;
        min-height: 0;
        padding: clamp(1rem, 1.4vw, 1.4rem);
        width: auto;
    }

    .app-shell[data-mobile-layout-mode="mobile"] .work-order-detail-shell[data-operational-ui="v1"] .document-preview-card[data-work-order-document-polish] {
        border-color: #dbe4ee;
        overflow: hidden;
        padding: 0 ;
    }

    .app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell[data-operational-ui="v1"] .document-preview-card:not([data-work-order-document-polish]) {
        border-color: #dbe4ee;
        overflow: hidden;
        padding: 0 ;
    }

    .app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell[data-operational-ui="v1"] .document-ribbon {
        border-radius: 999px;
        display: inline-flex;
        left: auto;
        margin: 0 0 .75rem;
        position: static;
        top: auto;
        transform: none;
        width: fit-content;
    }

    .app-shell[data-mobile-layout-mode="mobile"] .work-order-detail-shell[data-operational-ui="v1"] .document-preview-card[data-work-order-document-polish] .document-ribbon {
        margin: 1rem 1rem 0;
    }

    .app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell[data-operational-ui="v1"] .document-header,
    .app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell[data-operational-ui="v1"] .company-document-header {
        align-items: flex-start ;
        display: flex ;
        gap: 1rem ;
        grid-template-columns: none ;
        margin-bottom: 1.25rem;
        width: auto ;
    }

    .app-shell[data-mobile-layout-mode="mobile"] .work-order-detail-shell[data-operational-ui="v1"] .document-preview-card[data-work-order-document-polish] .document-header {
        background: linear-gradient(135deg, #f8fbff 0%, #ffffff 70%);
        border-bottom: 1px solid #dbe4ee;
        display: grid ;
        grid-template-columns: minmax(0, 1fr) auto ;
        margin: 0;
        padding: 1rem;
    }

    .app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell[data-operational-ui="v1"] .document-preview-card:not([data-work-order-document-polish]) .document-header {
        background: linear-gradient(135deg, #f8fbff 0%, #ffffff 70%);
        border-bottom: 1px solid #dbe4ee;
        display: grid ;
        grid-template-columns: minmax(0, 1fr) auto ;
        margin: 0;
        padding: 1rem;
    }

    .app-shell[data-mobile-layout-mode="mobile"] .work-order-detail-shell[data-operational-ui="v1"] .document-preview-card[data-work-order-document-polish] .document-header > div {
        min-width: 0;
    }

    .app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell[data-operational-ui="v1"] .document-preview-card:not([data-work-order-document-polish]) .document-header > div {
        min-width: 0;
    }

    .app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell[data-operational-ui="v1"] .document-address-grid,
    .app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell[data-operational-ui="v1"] .metric-strip,
    .app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell[data-operational-ui="v1"] .work-order-command-grid,
    .app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell[data-operational-ui="v1"] .work-order-office-closeout-pills,
    .app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell[data-operational-ui="v1"] .work-order-production-grid,
    .app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell[data-operational-ui="v1"] .work-order-production-drillbacks,
    .app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell[data-operational-ui="v1"] .work-order-production-timeline,
    .app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell[data-operational-ui="v1"] .work-order-closeout-grid,
    .app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell[data-operational-ui="v1"] .work-order-timer-metrics,
    .app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell[data-operational-ui="v1"] .work-order-invoice-summary {
        display: grid ;
        gap: .85rem ;
        width: auto ;
    }

    .app-shell[data-mobile-layout-mode="mobile"] .work-order-detail-shell[data-operational-ui="v1"] .document-preview-card[data-work-order-document-polish] .document-address-grid {
        background: #fbfdff;
        border-bottom: 1px solid #e7edf5;
        margin: 0;
        padding: 1rem;
    }

    .app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell[data-operational-ui="v1"] .document-preview-card:not([data-work-order-document-polish]) .document-address-grid {
        background: #fbfdff;
        border-bottom: 1px solid #e7edf5;
        margin: 0;
        padding: 1rem;
    }

    .app-shell[data-mobile-layout-mode="mobile"] .work-order-detail-shell[data-operational-ui="v1"] .document-preview-card[data-work-order-document-polish] > p {
        margin: .85rem 1rem;
    }

    .app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell[data-operational-ui="v1"] .document-preview-card:not([data-work-order-document-polish]) > p {
        margin: .85rem 1rem;
    }

    .app-shell[data-mobile-layout-mode="mobile"] .work-order-detail-shell[data-operational-ui="v1"] .document-preview-card[data-work-order-document-polish] > .table-scroll {
        border: 1px solid #dbe4ee;
        border-radius: 12px;
        margin: 1rem;
        max-height: 24rem;
        overflow: auto;
    }

    .app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell[data-operational-ui="v1"] .document-preview-card:not([data-work-order-document-polish]) > .table-scroll {
        border: 1px solid #dbe4ee;
        border-radius: 12px;
        margin: 1rem;
        max-height: 24rem;
        overflow: auto;
    }

    .app-shell[data-mobile-layout-mode="mobile"] .work-order-detail-shell[data-operational-ui="v1"] .document-preview-card[data-work-order-document-polish] .document-lines {
        font-size: .9rem;
        min-width: 720px;
    }

    .app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell[data-operational-ui="v1"] .document-preview-card:not([data-work-order-document-polish]) .document-lines {
        font-size: .9rem;
        min-width: 720px;
    }

    .app-shell[data-mobile-layout-mode="mobile"] .work-order-detail-shell[data-operational-ui="v1"] .document-preview-card[data-work-order-document-polish] .document-lines th,
    .app-shell[data-mobile-layout-mode="mobile"] .work-order-detail-shell[data-operational-ui="v1"] .document-preview-card[data-work-order-document-polish] .document-lines td {
        padding: .65rem;
        vertical-align: top;
    }

    .app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell[data-operational-ui="v1"] .document-preview-card:not([data-work-order-document-polish]) .document-lines th,
    .app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell[data-operational-ui="v1"] .document-preview-card:not([data-work-order-document-polish]) .document-lines td {
        padding: .65rem;
        vertical-align: top;
    }

    .app-shell[data-mobile-layout-mode="mobile"] .work-order-detail-shell[data-operational-ui="v1"] .document-preview-card[data-work-order-document-polish] .document-lines td:nth-child(2) small:last-child {
        border-left: 3px solid #e0f2fe;
        max-height: 7rem;
        overflow: auto;
        padding-left: .6rem;
    }

    .app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell[data-operational-ui="v1"] .document-preview-card:not([data-work-order-document-polish]) .document-lines td:nth-child(2) small:last-child {
        border-left: 3px solid #e0f2fe;
        max-height: 7rem;
        overflow: auto;
        padding-left: .6rem;
    }

    .app-shell[data-mobile-layout-mode="mobile"] .work-order-detail-shell[data-operational-ui="v1"] .document-preview-card[data-work-order-document-polish] .document-total,
    .app-shell[data-mobile-layout-mode="mobile"] .work-order-detail-shell[data-operational-ui="v1"] .document-preview-card[data-work-order-document-polish] .document-message {
        margin: 1rem;
    }

    .app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell[data-operational-ui="v1"] .document-preview-card:not([data-work-order-document-polish]) .document-total,
    .app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell[data-operational-ui="v1"] .document-preview-card:not([data-work-order-document-polish]) .document-message {
        margin: 1rem;
    }

    .app-shell[data-mobile-layout-mode="mobile"] .work-order-detail-shell[data-operational-ui="v1"] .document-preview-card[data-work-order-document-polish] .document-message {
        background: #f8fbff;
        border: 1px solid #e4ebf4;
        border-radius: 12px;
        padding: 1rem;
    }

    .app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell[data-operational-ui="v1"] .document-preview-card:not([data-work-order-document-polish]) .document-message {
        background: #f8fbff;
        border: 1px solid #e4ebf4;
        border-radius: 12px;
        padding: 1rem;
    }

    .app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell[data-operational-ui="v1"] .work-order-command-grid {
        grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)) ;
    }

    .app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell[data-operational-ui="v1"] .work-order-office-closeout-pills {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) ;
    }

    .app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell[data-operational-ui="v1"] .work-order-closeout-grid {
        grid-template-columns: repeat(auto-fit, minmax(175px, 1fr)) ;
    }

    .app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell[data-operational-ui="v1"] .metric-strip,
    .app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell[data-operational-ui="v1"] .work-order-timer-metrics,
    .app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell[data-operational-ui="v1"] .work-order-invoice-summary {
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) ;
    }

    .app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell[data-operational-ui="v1"] .right-summary-panel {
        align-content: start;
        display: grid ;
        gap: .85rem ;
        grid-template-columns: 1fr ;
        width: auto ;
    }

    .app-shell[data-mobile-layout-mode="mobile"] .work-order-detail-shell[data-operational-ui="v1"] .work-order-side-column .summary-card,
    .app-shell[data-mobile-layout-mode="mobile"] .work-order-detail-shell[data-operational-ui="v1"] .work-order-side-column .card,
    .app-shell[data-mobile-layout-mode="mobile"] .work-order-detail-shell[data-operational-ui="v1"] .work-order-side-column .portal-admin-panel {
        background: #ffffff;
        box-shadow: 0 10px 26px rgba(15, 23, 42, .045);
        margin: 0;
    }

    .app-shell[data-mobile-layout-mode="mobile"] .work-order-detail-shell[data-operational-ui="v1"] .communication-actions-card .stacked-actions {
        grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    }

    .app-shell[data-mobile-layout-mode="mobile"] .work-order-detail-shell[data-operational-ui="v1"] .work-order-side-column .table-scroll,
    .app-shell[data-mobile-layout-mode="mobile"] .work-order-detail-shell[data-operational-ui="v1"] .work-order-side-column table {
        max-width: 100%;
        overflow-x: auto;
    }

    .app-shell[data-mobile-layout-mode="mobile"] .work-order-detail-shell[data-operational-ui="v1"] .work-order-side-column input,
    .app-shell[data-mobile-layout-mode="mobile"] .work-order-detail-shell[data-operational-ui="v1"] .work-order-side-column select,
    .app-shell[data-mobile-layout-mode="mobile"] .work-order-detail-shell[data-operational-ui="v1"] .work-order-side-column textarea {
        max-width: 100%;
        min-width: 0;
    }

    .app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell[data-operational-ui="v1"] .manage-dropdown {
        display: inline-block;
        position: relative;
        width: auto ;
    }

    .app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell[data-operational-ui="v1"] .manage-menu {
        box-shadow: 0 18px 40px rgba(15, 23, 42, .18);
        left: auto;
        min-width: 16rem;
        position: absolute;
        right: 0;
        top: calc(100% + .35rem);
        width: max-content ;
        z-index: 90;
    }

    .app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell[data-operational-ui="v1"] .work-order-direct-schedule-form {
        align-items: start;
        background: #ffffff;
        border: 1px solid #dbe4ee;
        border-radius: 12px;
        display: grid ;
        gap: .85rem 1rem ;
        grid-template-columns: minmax(320px, .9fr) minmax(320px, 1.1fr) ;
        padding: .9rem;
    }

    .app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell[data-operational-ui="v1"] .work-order-direct-schedule-form h3,
    .app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell[data-operational-ui="v1"] .work-order-direct-schedule-form .work-order-form-actions {
        grid-column: 1 / -1;
    }

    .app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell[data-operational-ui="v1"] .work-order-direct-schedule-form .form-grid-4 {
        grid-column: 1;
        grid-template-columns: repeat(2, minmax(0, 1fr)) ;
    }

    .app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell[data-operational-ui="v1"] .work-order-direct-schedule-form > label {
        grid-column: 1;
    }

    .app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell[data-operational-ui="v1"] .work-order-direct-schedule-form .employee-checkbox-group {
        align-self: stretch;
        background: #f8fbff;
        border: 1px solid #dbe4ee;
        border-radius: 12px;
        grid-column: 2;
        grid-row: 2 / span 2;
        max-height: 18rem;
        overflow: auto;
        padding: .75rem;
    }

    .app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell[data-operational-ui="v1"] .work-order-line-card-grid {
        display: grid ;
        gap: .85rem ;
        grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)) ;
    }
}

/* Estimate and Work Order Detail 85% Width Guard */
@media (min-width: 900px) {
    .app-shell:not([data-mobile-layout-mode="mobile"]) .main-content:has(.estimate-detail-shell[data-operational-ui="v1"]),
    .app-shell:not([data-mobile-layout-mode="mobile"]) .main-content:has(.work-order-detail-shell[data-operational-ui="v1"]),
    .app-shell:not([data-mobile-layout-mode="mobile"]) .main-content:has(.invoice-detail-shell[data-operational-ui="v1"]) {
        max-width: min(85vw, 2200px);
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .estimate-detail-shell[data-operational-ui="v1"],
    .app-shell:not([data-mobile-layout-mode="mobile"]) .work-order-detail-shell[data-operational-ui="v1"],
    .app-shell:not([data-mobile-layout-mode="mobile"]) .invoice-detail-shell[data-operational-ui="v1"] {
        max-width: 100%;
        overflow: visible;
        width: 100%;
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .estimate-detail-shell[data-operational-ui="v1"] .document-detail-layout {
        grid-template-columns: minmax(0, 1fr) minmax(300px, 340px);
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .work-order-detail-shell[data-operational-ui="v1"] .document-detail-layout {
        grid-template-columns: minmax(0, 1fr) minmax(320px, 380px);
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .estimate-detail-shell[data-operational-ui="v1"] .document-preview-card > .table-scroll,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .work-order-detail-shell[data-operational-ui="v1"] .document-preview-card > .table-scroll,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .invoice-detail-shell[data-operational-ui="v1"] .document-preview-card > .table-scroll {
        max-height: none ;
        overflow: visible ;
    }


/* Invoice Payment Detail Density Guard */
.invoice-detail-shell[data-operational-ui="v1"],
.invoice-detail-shell[data-operational-ui="v1"] .document-main,
.invoice-detail-shell[data-operational-ui="v1"] .right-summary-panel,
.invoice-detail-shell[data-operational-ui="v1"] .invoice-payment-card,
.invoice-detail-shell[data-operational-ui="v1"] .invoice-tip-link-card,
.invoice-detail-shell[data-operational-ui="v1"] .invoice-payments-collections-readiness-card,
.invoice-detail-shell[data-operational-ui="v1"] .invoice-payment-summary-card,
.invoice-detail-shell[data-operational-ui="v1"] .portal-link-card-invoice-view {
    min-width: 0;
    overflow-wrap: anywhere;
}

.invoice-detail-shell[data-operational-ui="v1"] .invoice-document-extra {
    background: #f8fbff;
    border: 1px solid #dbe4ee;
    border-radius: 10px;
    display: grid;
    gap: .35rem;
    margin: .75rem 0;
    padding: .75rem;
}

.invoice-detail-shell[data-operational-ui="v1"] .invoice-document-extra p {
    margin: 0;
}

.document-readiness-panel,
.estimate-builder-approval-readiness-card,
.estimate-review-status-grid,
.document-handoff-summary {
    min-width: 0;
}

.document-readiness-panel {
    background: #fffaf0;
    border: 1px solid #f1d28a;
    border-radius: 10px;
    display: grid;
    gap: .65rem;
    margin: .85rem 0;
    padding: .8rem;
}

.document-readiness-heading {
    align-items: baseline;
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    justify-content: space-between;
}

.document-readiness-heading strong,
.document-readiness-label strong,
.estimate-review-status-card strong {
    color: #17233a;
}

.document-readiness-heading span,
.document-readiness-label small,
.estimate-review-status-card small {
    color: #526579;
    line-height: 1.35;
}

.document-readiness-grid,
.estimate-review-status-grid,
.document-handoff-summary {
    display: grid;
    gap: .55rem;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.document-readiness-label,
.estimate-review-status-card,
.document-handoff-summary span {
    background: #ffffff;
    border: 1px solid #dbe4ee;
    border-radius: 8px;
    display: grid;
    gap: .22rem;
    min-width: 0;
    overflow-wrap: anywhere;
    padding: .65rem;
}

.document-readiness-label b,
.estimate-review-status-card b {
    color: #0f172a;
    font-size: .95rem;
}

.document-readiness-label.is-ready,
.estimate-review-status-card.is-ready {
    border-color: #a9dfbd;
}

.document-readiness-label.is-warning,
.estimate-review-status-card.is-warning {
    border-color: #f1c76f;
}

.document-readiness-label.is-neutral,
.estimate-review-status-card.is-neutral {
    border-color: #d8e3ea;
}

.estimate-review-status-grid {
    margin: .75rem 0;
}

.document-handoff-summary {
    margin: .75rem 0;
}

.document-handoff-summary span strong {
    color: #526579;
    display: block;
    font-size: .72rem;
    text-transform: uppercase;
}

.invoice-detail-shell[data-operational-ui="v1"] .invoice-payment-card,
.invoice-detail-shell[data-operational-ui="v1"] .invoice-tip-link-card {
    overflow: hidden;
}

.square-invoice-payment-card .invoice-link-actions,
.square-invoice-payment-card .invoice-pay-now-panel,
.square-invoice-payment-card .invoice-other-payment-form {
    min-width: 0;
}

.square-invoice-payment-card .invoice-pay-now-panel {
    background: #f8fafc;
    border: 1px solid #dbe4ee;
    border-radius: 8px;
    display: grid;
    gap: .65rem;
    padding: .75rem;
}

.square-invoice-payment-card .invoice-pay-now-panel h3 {
    margin: 0;
}

.square-invoice-payment-card .invoice-other-payment-form {
    background: #ffffff;
    border: 1px solid #e4ebf4;
    border-radius: 8px;
    display: grid;
    gap: .65rem;
    padding: .7rem;
}

.square-invoice-payment-card .invoice-other-payment-form fieldset {
    border: 0;
    margin: 0;
    min-width: 0;
    padding: 0;
}

.square-invoice-payment-card .invoice-other-payment-form legend {
    color: #17233a;
    font-weight: 700;
    margin-bottom: .45rem;
}

.square-invoice-payment-card .invoice-payment-method-grid {
    display: grid;
    gap: .4rem;
    grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
}

.square-invoice-payment-card .invoice-payment-method-option {
    align-items: center;
    background: #f8fafc;
    border: 1px solid #e4ebf4;
    border-radius: 8px;
    display: flex;
    gap: .4rem;
    min-height: 2.25rem;
    padding: .35rem .45rem;
}

.square-invoice-payment-card .invoice-other-payment-form input[type="text"],
.square-invoice-payment-card .invoice-other-payment-form input:not([type]),
.square-invoice-payment-card .invoice-other-payment-form textarea {
    max-width: 100%;
    width: 100%;
}

.square-location-tools,
.square-capability-roadmap,
.square-invoice-payment-card .invoice-payment-timeline,
.square-invoice-payment-card .square-refund-reconciliation-panel {
    background: #f8fafc;
    border: 1px solid #dbe4ee;
    border-radius: 8px;
    display: grid;
    gap: .65rem;
    margin-top: .75rem;
    min-width: 0;
    padding: .75rem;
}

.square-location-tools h3,
.square-capability-roadmap h3,
.square-invoice-payment-card .invoice-payment-timeline h3,
.square-invoice-payment-card .square-refund-reconciliation-panel h3,
.square-invoice-payment-card .square-refund-reconciliation-panel h4 {
    margin: 0;
}

.square-location-select-form {
    display: grid;
    gap: .55rem;
    max-width: min(520px, 100%);
}

.square-location-select-form select {
    max-width: 100%;
    width: 100%;
}

.square-capability-roadmap ul {
    display: grid;
    gap: .45rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.square-capability-item {
    align-items: start;
    background: #ffffff;
    border: 1px solid #e4ebf4;
    border-radius: 8px;
    display: grid;
    gap: .5rem;
    grid-template-columns: minmax(0, 1fr) auto;
    min-width: 0;
    padding: .55rem .65rem;
}

.square-capability-item strong,
.square-capability-item small {
    display: block;
    overflow-wrap: anywhere;
}

.square-capability-item small {
    color: var(--muted);
    margin-top: .15rem;
}

.square-capability-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem .4rem;
    margin-top: .4rem;
}

.square-capability-meta span {
    background: #eef6ff;
    border: 1px solid #d7e8fb;
    border-radius: 999px;
    color: #335067;
    display: inline-block;
    font-size: .72rem;
    line-height: 1.2;
    padding: .16rem .45rem;
}

.square-advanced-controls {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color, #d7e1ef);
}

.square-advanced-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1rem;
}

.square-advanced-proof-form textarea,
.square-terminal-device-form input,
.square-terminal-checkout-form select {
    width: 100%;
}

.square-terminal-device-list {
    display: grid;
    gap: .5rem;
    margin: .75rem 0;
    padding: 0;
    list-style: none;
}

.square-terminal-device-list li {
    display: grid;
    gap: .15rem;
    padding: .6rem;
    border: 1px solid var(--border-color, #d7e1ef);
    border-radius: 8px;
    background: #f8fafc;
}

.square-terminal-device-list strong,
.square-terminal-device-list span,
.square-terminal-device-list small {
    min-width: 0;
    overflow-wrap: anywhere;
}

@media (max-width: 780px) {
    .square-advanced-grid {
        grid-template-columns: 1fr;
    }
}

.square-invoice-payment-card .invoice-payment-timeline ol {
    display: grid;
    gap: .5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.square-invoice-payment-card .invoice-payment-timeline-item {
    background: #ffffff;
    border: 1px solid #e4ebf4;
    border-radius: 8px;
    display: grid;
    gap: .25rem;
    min-width: 0;
    padding: .6rem;
}

.square-invoice-payment-card .invoice-payment-timeline-item strong,
.square-invoice-payment-card .invoice-payment-timeline-item span,
.square-invoice-payment-card .invoice-payment-timeline-item small,
.square-invoice-payment-card .invoice-payment-timeline-item em {
    overflow-wrap: anywhere;
}

.square-invoice-payment-card .invoice-payment-timeline-item span {
    color: #17233a;
    font-weight: 800;
    text-transform: capitalize;
}

.square-invoice-payment-card .invoice-payment-timeline-item small,
.square-invoice-payment-card .invoice-payment-timeline-item em {
    color: var(--muted);
}

.square-invoice-payment-card .square-refund-reconciliation-grid {
    display: grid;
    gap: .65rem;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    min-width: 0;
}

.square-invoice-payment-card .square-refund-reconciliation-grid > div,
.square-invoice-payment-card .square-refund-review-form {
    background: #ffffff;
    border: 1px solid #e4ebf4;
    border-radius: 8px;
    display: grid;
    gap: .5rem;
    min-width: 0;
    padding: .65rem;
}

.square-invoice-payment-card .square-refund-review-form select,
.square-invoice-payment-card .square-refund-review-form input,
.square-invoice-payment-card .square-refund-review-form textarea {
    max-width: 100%;
    width: 100%;
}

.square-invoice-payment-card .square-refund-reconciliation-grid ul {
    display: grid;
    gap: .35rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.square-invoice-payment-card .square-refund-reconciliation-grid li {
    display: grid;
    gap: .15rem;
    min-width: 0;
}

.square-invoice-payment-card .square-refund-reconciliation-grid li strong,
.square-invoice-payment-card .square-refund-reconciliation-grid li span,
.square-invoice-payment-card .square-refund-reconciliation-grid li small,
.square-invoice-payment-card .square-refund-review-form small {
    overflow-wrap: anywhere;
}

.invoice-detail-shell[data-operational-ui="v1"] .portal-link-card-invoice-view .table-scroll {
    max-width: 100%;
    overflow: auto;
}

.invoice-detail-shell[data-operational-ui="v1"] .portal-link-card-invoice-view table {
    min-width: 640px;
}

.invoice-payments-collections-readiness-card {
    display: grid;
    gap: .8rem;
}

.invoice-payments-collections-readiness-card h3 {
    margin: .3rem 0 0;
}

.invoice-payments-collections-grid,
.invoice-payments-collections-link-grid {
    display: grid;
    gap: .55rem;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}

.invoice-payments-collections-card,
.invoice-payments-collections-link {
    background: #ffffff;
    border: 1px solid #dbe4ee;
    border-radius: 8px;
    display: grid;
    gap: .24rem;
    min-width: 0;
    overflow-wrap: anywhere;
    padding: .68rem;
    text-decoration: none;
}

.invoice-payments-collections-card strong,
.invoice-payments-collections-link strong {
    color: #17233a;
}

.invoice-payments-collections-card b,
.invoice-payments-collections-link span {
    color: #0f172a;
    font-size: .95rem;
}

.invoice-payments-collections-card small {
    color: #526579;
    line-height: 1.35;
}

.invoice-payments-collections-card.is-ready,
.invoice-payments-collections-link.is-ready {
    border-color: #a9dfbd;
}

.invoice-payments-collections-card.is-warning,
.invoice-payments-collections-link.is-warning {
    border-color: #f1c76f;
}

.invoice-payments-collections-card.is-neutral,
.invoice-payments-collections-link.is-neutral {
    border-color: #d8e3ea;
}

@media (min-width: 900px) {
    .app-shell:not([data-mobile-layout-mode="mobile"]) .invoice-detail-shell[data-operational-ui="v1"] {
        max-width: min(100%, 1440px);
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .invoice-detail-shell[data-operational-ui="v1"] .document-detail-layout {
        grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .invoice-detail-shell[data-operational-ui="v1"] .invoice-payment-card,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .invoice-detail-shell[data-operational-ui="v1"] .invoice-tip-link-card,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .invoice-detail-shell[data-operational-ui="v1"] .invoice-payments-collections-readiness-card {
        box-shadow: 0 10px 24px rgba(15, 23, 42, .045);
        display: grid;
        gap: .65rem;
        padding: .95rem;
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .invoice-detail-shell[data-operational-ui="v1"] .invoice-payment-card .inline-form,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .invoice-detail-shell[data-operational-ui="v1"] .invoice-payment-summary-card .inline-form {
        align-items: center ;
        display: inline-flex ;
        flex-wrap: wrap ;
        gap: .5rem ;
        width: auto ;
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .invoice-detail-shell[data-operational-ui="v1"] .portal-link-card-invoice-view {
        background: #f8fafc;
        border: 1px solid #dbe4ee;
        border-radius: 12px;
        display: grid;
        gap: .55rem;
        padding: .85rem;
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .invoice-detail-shell[data-operational-ui="v1"] .portal-link-card-invoice-view .inline-form {
        align-items: center ;
        background: #ffffff;
        border: 1px solid #e4ebf4;
        border-radius: 10px;
        display: grid ;
        gap: .45rem ;
        grid-template-columns: 1fr ;
        padding: .55rem;
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .invoice-detail-shell[data-operational-ui="v1"] .portal-link-card-invoice-view .table-scroll {
        border: 1px solid #e4ebf4;
        border-radius: 10px;
        max-height: 14rem;
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-list-invoices[data-operational-ui="v1"] .data-table {
        min-width: 1040px;
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-list-invoices[data-operational-ui="v1"] .data-table td {
        overflow-wrap: anywhere;
        vertical-align: middle;
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-list-invoices[data-operational-ui="v1"] .data-table td:nth-child(2),
    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-list-invoices[data-operational-ui="v1"] .data-table td:nth-child(4) {
        vertical-align: top;
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-list-invoices[data-operational-ui="v1"] .actions-cell {
        min-width: 9rem;
        width: 9rem;
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-list-invoices[data-operational-ui="v1"] .status-badge {
        white-space: nowrap;
    }
}

@media (min-width: 1200px) {
    .app-shell[data-mobile-layout-mode="mobile"] .invoice-detail-shell[data-operational-ui="v1"] {
        max-width: min(100%, 1440px) ;
    }

    .app-shell[data-mobile-layout-mode="mobile"] .invoice-detail-shell[data-operational-ui="v1"] .document-detail-layout {
        display: grid ;
        gap: 1rem ;
        grid-template-columns: minmax(0, 1fr) minmax(280px, 340px) ;
    }
}

@media (max-width: 760px) {
    .invoice-detail-shell[data-operational-ui="v1"] .portal-link-card-invoice-view table {
        min-width: 560px;
    }

    .invoice-payments-collections-grid,
    .invoice-payments-collections-link-grid {
        grid-template-columns: 1fr;
    }

    .invoice-detail-shell[data-operational-ui="v1"] .invoice-payment-card .inline-form button,
    .invoice-detail-shell[data-operational-ui="v1"] .invoice-payment-summary-card .inline-form button {
        width: 100%;
    }

    .square-invoice-payment-card .invoice-payment-method-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* Customers Leads Daily Workspace Density Guard */
.customer-list-shell[data-operational-ui="v1"],
.customer-profile-shell.record-layout-shell,
.leads-shell[data-operational-ui="v1"],
.leads-shell .lead-pipeline-board,
.leads-shell .pipeline-column,
.leads-shell .pipeline-card,
.leads-shell .table-card,
.leads-shell .responsive-table,
.leads-shell .lead-customer-message,
.leads-shell .lead-files-grid,
.leads-shell .lead-upload-thumb {
    max-width: 100%;
    min-width: 0;
    overflow-wrap: anywhere;
}

.customer-list-shell[data-operational-ui="v1"] .customer-table,
.customer-list-shell[data-operational-ui="v1"] .table-scroll,
.leads-shell[data-operational-ui="v1"] .responsive-table,
.leads-shell[data-operational-ui="v1"] .table-scroll {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y;
}

.customer-list-shell[data-operational-ui="v1"] .customer-table table,
.leads-shell[data-operational-ui="v1"] .responsive-table table {
    min-width: 980px;
}

.customer-list-shell[data-operational-ui="v1"] td,
.customer-list-shell[data-operational-ui="v1"] small,
.customer-list-shell[data-operational-ui="v1"] a,
.leads-shell[data-operational-ui="v1"] td,
.leads-shell[data-operational-ui="v1"] small,
.leads-shell[data-operational-ui="v1"] a,
.leads-shell[data-operational-ui="v1"] .pipeline-card strong,
.leads-shell[data-operational-ui="v1"] .pipeline-card p {
    max-width: 100%;
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: normal;
}

.customer-list-shell[data-operational-ui="v1"] .manage-dropdown,
.customer-list-shell[data-operational-ui="v1"] .manage-menu,
.leads-shell[data-operational-ui="v1"] details.manage-menu,
.leads-shell[data-operational-ui="v1"] details.manage-menu > div {
    max-width: min(92vw, 22rem);
}

@media (min-width: 900px) {
    .app-shell:not([data-mobile-layout-mode="mobile"]) .customer-profile-grid:has(.customer-list-shell[data-operational-ui="v1"]),
    .app-shell:not([data-mobile-layout-mode="mobile"]) .leads-shell[data-operational-ui="v1"] {
        background: #ffffff;
        border: 1px solid #d8e2ed;
        border-radius: 14px;
        box-shadow: 0 18px 48px rgba(15, 23, 42, .08);
        box-sizing: border-box;
        margin: 0 auto 1.5rem;
        max-width: min(100%, 1560px);
        overflow: hidden;
        padding: 1rem;
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .customer-profile-grid:has(.customer-list-shell[data-operational-ui="v1"]) > .layout-card {
        border: 0;
        box-shadow: none;
        margin: 0;
        padding: 0;
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .customer-profile-grid:has(.customer-list-shell[data-operational-ui="v1"]) > .layout-card > .card-heading-row {
        display: none;
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .customer-profile-grid:has(.customer-list-shell[data-operational-ui="v1"]) > .layout-card > .layout-card-body {
        padding: 0;
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .customer-list-shell[data-operational-ui="v1"] .module-page-header,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .leads-shell[data-operational-ui="v1"] .module-page-header {
        align-items: flex-start;
        background: linear-gradient(135deg, #f8fbff 0%, #ffffff 66%, #ecfdf5 100%);
        border: 1px solid #dbe4ee;
        border-radius: 12px;
        display: flex;
        gap: 1rem;
        justify-content: space-between;
        margin-bottom: 1rem;
        padding: 1rem;
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .customer-list-shell[data-operational-ui="v1"] .module-page-header > div:first-child,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .leads-shell[data-operational-ui="v1"] .module-page-header > div:first-child {
        min-width: 0;
        width: min(100%, 62rem);
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .customer-list-shell[data-operational-ui="v1"] .module-page-header h1,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .leads-shell[data-operational-ui="v1"] .module-page-header h1 {
        font-size: clamp(1.6rem, 1.6vw, 2.2rem);
        letter-spacing: 0;
        line-height: 1.1;
        margin: .15rem 0 .4rem;
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .customer-list-shell[data-operational-ui="v1"] .module-action-bar.action-bar,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .leads-shell[data-operational-ui="v1"] .module-action-bar.action-bar {
        justify-content: flex-end;
        max-width: min(100%, 42rem);
        width: auto;
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .customer-list-shell[data-operational-ui="v1"] .status-tabs,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .leads-shell[data-operational-ui="v1"] .status-tabs,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .leads-shell[data-operational-ui="v1"] .view-toggle {
        background: #f8fbff;
        border: 1px solid #dbe4ee;
        border-radius: 12px;
        margin: 0 0 .85rem;
        padding: .35rem;
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .leads-shell[data-operational-ui="v1"] .filter-toolbar,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .customer-list-shell[data-operational-ui="v1"] .customer-filters {
        align-items: end;
        background: #f8fbff;
        border: 1px solid #dbe4ee;
        border-radius: 12px;
        display: grid;
        gap: .6rem;
        grid-template-columns: minmax(18rem, 1.4fr) repeat(auto-fit, minmax(11rem, 1fr));
        margin: 0 0 .85rem;
        padding: .85rem;
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .customer-list-shell[data-operational-ui="v1"] .customer-table,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .leads-shell[data-operational-ui="v1"] .table-card {
        border: 1px solid #dbe4ee;
        border-radius: 12px;
        box-shadow: 0 12px 32px rgba(15, 23, 42, .06);
        margin: 0;
        overflow: hidden;
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .customer-list-shell[data-operational-ui="v1"] .customer-table table,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .leads-shell[data-operational-ui="v1"] .responsive-table table {
        border-collapse: separate;
        border-spacing: 0;
        min-width: 1040px;
        table-layout: fixed;
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .customer-list-shell[data-operational-ui="v1"] th,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .leads-shell[data-operational-ui="v1"] th {
        background: #f8fbff;
        border-bottom: 1px solid #dbe4ee;
        color: #526071;
        font-size: .78rem;
        letter-spacing: .02em;
        position: sticky;
        text-transform: uppercase;
        top: 0;
        z-index: 4;
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .customer-list-shell[data-operational-ui="v1"] th,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .customer-list-shell[data-operational-ui="v1"] td,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .leads-shell[data-operational-ui="v1"] th,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .leads-shell[data-operational-ui="v1"] td {
        line-height: 1.35;
        padding: .68rem .72rem;
        vertical-align: top;
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .leads-shell[data-operational-ui="v1"] .lead-pipeline-board {
        grid-template-columns: repeat(6, minmax(210px, 1fr));
        max-height: 70vh;
        overflow: auto;
        padding-bottom: .5rem;
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .leads-shell[data-operational-ui="v1"] .pipeline-column {
        border-radius: 12px;
        min-width: 210px;
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .leads-shell[data-operational-ui="v1"] .pipeline-card {
        border-radius: 10px;
        box-shadow: 0 8px 20px rgba(15, 23, 42, .055);
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .customer-profile-shell.record-layout-shell {
        max-width: min(100%, 1560px);
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .customer-profile-shell.record-layout-shell .record-main.layout-grid,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .leads-shell:not([data-operational-ui="v1"]) .layout-grid {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    }
}

/* Scheduling Workspace Density Guard */
.scheduling-workspace,
.scheduling-calendar-shell,
.scheduling-calendar-map-shell,
.dispatch-workspace-v3,
.dispatch-panel,
.dispatch-map-panel,
.dispatch-map-panel .leaflet-dispatch-map,
.calendar-module-board,
.calendar-month-grid-v2,
.calendar-week-grid,
.calendar-map-layout,
.calendar-map-list-panel,
.calendar-map-canvas-panel,
.calendar-map-work-card,
.route-group-card,
.workspace-route-group.route-group-card,
.route-group-builder,
.route-group-builder-grid,
.route-group-summary,
.route-group-readiness,
.route-group-actions,
.route-group-secondary-actions,
.route-group-workload-strip,
.route-group-detail-totals,
.route-group-prediction-grid,
.route-group-edit-form,
.route-group-edit-employees,
.route-schedule-command-panel,
.dispatch-detail-grid,
.work-order-open-list,
.schedule-board,
.map-marker-list,
.map-marker-card,
.schedule-card {
    box-sizing: border-box;
    max-width: 100%;
    min-width: 0;
    overflow-wrap: anywhere;
}

.scheduling-workspace .responsive-table,
.scheduling-workspace .table-scroll,
.scheduling-calendar-shell .responsive-table,
.scheduling-calendar-shell .table-scroll,
.scheduling-calendar-map-shell .responsive-table,
.scheduling-calendar-map-shell .table-scroll,
.route-group-card .responsive-table,
.route-group-card .table-scroll {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y;
}

.scheduling-workspace table,
.scheduling-calendar-shell table,
.scheduling-calendar-map-shell table,
.route-group-card table {
    min-width: 760px;
}

.scheduling-workspace :where(h1, h2, h3, h4, p, small, a, span, strong, td, th, label, button),
.scheduling-calendar-shell :where(h1, h2, h3, h4, p, small, a, span, strong, td, th, label, button),
.scheduling-calendar-map-shell :where(h1, h2, h3, h4, p, small, a, span, strong, td, th, label, button),
.route-group-card :where(h1, h2, h3, h4, p, small, a, span, strong, td, th, label, button) {
    max-width: 100%;
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: normal;
}

@media (min-width: 900px) {
    .app-shell:not([data-mobile-layout-mode="mobile"]) .scheduling-workspace,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .scheduling-calendar-shell,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .scheduling-calendar-map-shell {
        box-sizing: border-box;
        margin-inline: auto;
        max-width: min(100%, 1560px);
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .scheduling-calendar-shell > .layout-card,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .scheduling-calendar-map-shell > .layout-card,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .scheduling-workspace > .layout-card {
        overflow: hidden;
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .scheduling-calendar-command-bar,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .calendar-map-topbar,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .calendar-map-filter-bar,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .route-group-builder,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .route-schedule-command-panel {
        border-radius: 8px;
        max-width: 100%;
        min-width: 0;
        overflow: hidden;
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .scheduling-view-switcher,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .calendar-map-list-tabs,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .calendar-nav,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .calendar-arrange-toolbar,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .route-group-actions,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .route-group-secondary-actions {
        display: flex;
        flex-wrap: wrap;
        gap: .4rem;
        max-width: 100%;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        padding-bottom: .1rem;
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .dispatch-workspace-v3 {
        align-items: start;
        grid-template-columns: minmax(240px, .72fr) minmax(0, 1.7fr) minmax(280px, .88fr);
        max-width: 100%;
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .dispatch-map-panel,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .calendar-map-canvas-panel {
        overflow: hidden;
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .dispatch-map-panel .leaflet-dispatch-map,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .calendar-map-canvas {
        max-height: 68vh;
        min-height: 420px;
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .calendar-map-layout {
        grid-template-columns: minmax(300px, .82fr) minmax(0, 1.38fr);
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .calendar-map-list-panel {
        max-height: 72vh;
        overflow-y: auto;
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .calendar-map-metrics,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .calendar-selected-day-metrics,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .route-group-detail-totals,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .route-group-quality-grid,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .route-group-prediction-grid,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .dispatch-detail-grid {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .route-group-builder-grid,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .route-group-edit-form {
        align-items: start;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .route-group-card,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .workspace-route-group.route-group-card,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .calendar-map-work-card,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .schedule-card,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .map-marker-card {
        border-radius: 8px;
        overflow: hidden;
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .route-group-card .card-heading-row,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .calendar-map-canvas-heading,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .calendar-map-list-heading {
        align-items: flex-start;
        gap: .6rem;
        min-width: 0;
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .route-group-workload-strip,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .route-group-readiness,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .route-group-summary,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .calendar-map-warning-list,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .calendar-map-suggestion-list {
        max-height: 24rem;
        overflow: auto;
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .route-group-card select[multiple],
    .app-shell:not([data-mobile-layout-mode="mobile"]) .route-group-builder select[multiple] {
        max-height: 16rem;
        overflow: auto;
    }
}

/* Employees Clock Payroll Density Guard */
.employees-center-layout,
.employees-list-panel,
.employees-detail-panel,
.employees-list-panel .table-wrap,
.employees-detail-panel .table-wrap,
.employee-related-section,
.employee-related-card-list,
.employee-related-card,
.employee-permission-matrix-grid,
.employee-route-page,
.employee-route-work-card,
.employee-route-bring-panel,
.employee-chat-page,
.employee-chat-thread-panel,
.employee-chat-detail-panel,
.employee-chat-create-card,
.employee-chat-message-list,
.employee-chat-message,
.employee-documents-page,
.employee-document-page,
.employee-document-detail-card,
.clock-io-page,
.clock-io-dashboard-grid,
.clock-io-primary-column,
.clock-io-side-column,
.clock-target-card,
.clock-target-meta,
.clock-day-adjustment-card,
.clock-correction-panel,
.clock-correction-card,
.clock-review-panel,
.clock-review-card-list,
.clock-review-action-form,
.clock-correction-request-panel,
.clock-correction-request-card-list,
.clock-crew-review-panel,
.clock-crew-review-card-list,
.clock-crew-review-action-form,
.payroll-dashboard-grid,
.payroll-dashboard-grid .table-wrap,
.payroll-dashboard-grid .compact-form,
.payroll-dashboard-grid .inline-form,
.payroll-dashboard-grid .button-row {
    box-sizing: border-box;
    max-width: 100%;
    min-width: 0;
    overflow-wrap: anywhere;
}

.employees-list-panel .table-wrap,
.employees-detail-panel .table-wrap,
.clock-review-panel .table-wrap,
.clock-crew-review-panel .table-wrap,
.employee-chat-thread-scroll,
.employee-documents-list .table-wrap,
.payroll-dashboard-grid .table-wrap {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y;
}

.employees-list-panel table,
.employees-detail-panel .table-wrap table,
.clock-review-panel table,
.clock-crew-review-panel table,
.employee-chat-thread-table,
.employee-documents-list table,
.payroll-dashboard-grid .table-wrap table {
    min-width: 760px;
}

.clock-review-panel table,
.clock-crew-review-panel table {
    table-layout: fixed;
}

.employees-center-layout :where(h1, h2, h3, h4, p, small, a, span, strong, td, th, label, button, code),
.employee-route-page :where(h1, h2, h3, h4, p, small, a, span, strong, td, th, label, button, code),
.employee-chat-page :where(h1, h2, h3, h4, p, small, a, span, strong, td, th, label, button, code),
.employee-documents-page :where(h1, h2, h3, h4, p, small, a, span, strong, td, th, label, button, code),
.clock-io-page :where(h1, h2, h3, h4, p, small, a, span, strong, td, th, label, button, code),
.clock-review-panel :where(h1, h2, h3, h4, p, small, a, span, strong, td, th, label, button, code),
.clock-crew-review-panel :where(h1, h2, h3, h4, p, small, a, span, strong, td, th, label, button, code),
.payroll-dashboard-grid :where(h1, h2, h3, h4, p, small, a, span, strong, td, th, label, button, code) {
    max-width: 100%;
    min-width: 0;
    overflow-wrap: anywhere;
    white-space: normal;
    word-break: normal;
}

@media (min-width: 900px) {
    .app-shell:not([data-mobile-layout-mode="mobile"]) .employees-center-layout,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .clock-io-page,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .clock-review-panel,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .payroll-dashboard-grid {
        margin-inline: auto;
        max-width: min(100%, 1560px);
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .employees-center-layout {
        grid-template-columns: minmax(300px, .82fr) minmax(0, 1.55fr);
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .clock-io-dashboard-grid {
        align-items: start;
        display: grid;
        gap: 1rem;
        grid-template-columns: minmax(0, 1.4fr) minmax(280px, .72fr);
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .clock-review-panel > .button-row,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .clock-review-panel > .filters-row,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .clock-crew-review-filter,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .clock-day-adjustment-form,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .clock-history-correction-form,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .clock-correction-form,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .payroll-dashboard-grid .button-row,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .payroll-dashboard-grid .compact-form,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .payroll-dashboard-grid .inline-form {
        align-items: end;
        display: flex;
        flex-wrap: wrap;
        gap: .5rem;
        max-width: 100%;
        min-width: 0;
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .clock-review-panel > .filters-row > *,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .clock-crew-review-filter > *,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .payroll-dashboard-grid .compact-form > *,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .payroll-dashboard-grid .inline-form > * {
        flex: 1 1 12rem;
        min-width: 0;
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .clock-review-action-form,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .clock-crew-review-action-form {
        display: grid;
        gap: .4rem;
        min-width: min(100%, 16rem);
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .clock-review-action-form textarea,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .clock-crew-review-action-form textarea {
        min-width: 0;
        width: 100%;
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .clock-crew-review-summary,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .payroll-dashboard-grid .metric-grid,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .payroll-dashboard-grid .metric-list,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .employee-related-card-list {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .clock-review-card-list,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .clock-correction-request-card-list,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .clock-crew-review-card-list {
        display: grid;
        gap: .75rem;
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .employees-list-panel,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .employees-detail-panel,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .clock-io-page,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .clock-review-panel,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .clock-crew-review-panel,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .payroll-dashboard-grid .card,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .payroll-dashboard-grid .layout-card {
        border-radius: 8px;
        overflow: hidden;
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .clock-io-side-column,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .clock-review-panel .table-wrap,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .clock-crew-review-panel .table-wrap,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .payroll-dashboard-grid .table-wrap {
        max-height: 72vh;
        overflow: auto;
    }
}

/* Communications Tasks Notifications Density Guard */
.communication-preview-card,
.message-preview-body,
.operational-list-communications,
.operational-list-tasks,
.operational-list-notifications,
.operational-list-communications .operational-table-card,
.operational-list-tasks .operational-table-card,
.operational-list-notifications .operational-table-card,
.operational-list-communications .table-scroll,
.operational-list-tasks .table-scroll,
.operational-list-notifications .table-scroll,
.operational-list-communications .status-tabs,
.operational-list-tasks .status-tabs,
.operational-list-notifications .status-tabs,
.operational-list-communications .module-action-bar,
.operational-list-tasks .module-action-bar,
.operational-list-notifications .module-action-bar,
.operational-list-communications .operational-filter-toolbar,
.operational-list-tasks .operational-filter-toolbar,
.operational-list-notifications .operational-filter-toolbar,
.operational-list-communications .mobile-record-card-list,
.operational-list-tasks .mobile-record-card-list,
.operational-list-notifications .mobile-record-card-list,
.operational-list-communications .mobile-record-card,
.operational-list-tasks .mobile-record-card,
.operational-list-notifications .mobile-record-card,
.employee-chat-page,
.employee-chat-thread-panel,
.employee-chat-detail-panel,
.employee-chat-create-card,
.employee-chat-message-list,
.employee-chat-message,
.employee-related-section,
.employee-related-card-list,
.employee-related-card {
    box-sizing: border-box;
    max-width: 100%;
    min-width: 0;
    overflow-wrap: anywhere;
}

.message-preview-body {
    border: 1px solid var(--border);
    border-radius: 8px;
    max-height: min(62vh, 42rem);
    overflow: auto;
    overscroll-behavior: contain;
    padding: .85rem;
    white-space: normal;
}

.message-preview-body :where(a, code, pre, p, span, strong),
.communication-preview-card :where(.warning, .success, .notice, dd, dt, h2, h3, label, button),
.operational-list-communications :where(h1, h2, h3, p, a, span, strong, small, td, th, label, button, code),
.operational-list-tasks :where(h1, h2, h3, p, a, span, strong, small, td, th, label, button, code),
.operational-list-notifications :where(h1, h2, h3, p, a, span, strong, small, td, th, label, button, code),
.employee-chat-page :where(h1, h2, h3, p, a, span, strong, small, td, th, label, button, code),
.employee-related-section :where(h1, h2, h3, p, a, span, strong, small, td, th, label, button, code) {
    max-width: 100%;
    min-width: 0;
    overflow-wrap: anywhere;
    white-space: normal;
    word-break: normal;
}

.operational-list-communications .table-scroll,
.operational-list-tasks .table-scroll,
.operational-list-notifications .table-scroll,
.employee-chat-thread-scroll,
.employee-related-section .table-wrap {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y;
}

.operational-list-communications .table-scroll table,
.operational-list-tasks .table-scroll table,
.operational-list-notifications .table-scroll table,
.employee-chat-thread-table {
    min-width: 760px;
}

.operational-list-communications .module-action-bar,
.operational-list-tasks .module-action-bar,
.operational-list-notifications .module-action-bar,
.operational-list-communications .operational-filter-toolbar,
.operational-list-tasks .operational-filter-toolbar,
.operational-list-notifications .operational-filter-toolbar,
.communication-preview-card .inline-form,
.employee-chat-quick-actions,
.employee-chat-create-form,
.employee-chat-reply-form,
.employee-related-card-actions {
    align-items: end;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    max-width: 100%;
    min-width: 0;
}

.operational-list-communications .module-action-bar > *,
.operational-list-tasks .module-action-bar > *,
.operational-list-notifications .module-action-bar > *,
.operational-list-communications .operational-filter-toolbar > *,
.operational-list-tasks .operational-filter-toolbar > *,
.operational-list-notifications .operational-filter-toolbar > *,
.communication-preview-card .inline-form > *,
.employee-chat-create-form > *,
.employee-chat-reply-form > * {
    min-width: 0;
}

.operational-list-communications .status-tabs,
.operational-list-tasks .status-tabs,
.operational-list-notifications .status-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    padding-bottom: .2rem;
    scrollbar-gutter: stable;
    touch-action: pan-x pan-y;
}

.operational-list-communications .status-tabs a,
.operational-list-tasks .status-tabs a,
.operational-list-notifications .status-tabs a {
    flex: 0 0 auto;
}

.operational-list-communications .manage-dropdown,
.operational-list-tasks .manage-dropdown,
.operational-list-notifications .manage-dropdown,
.operational-list-communications .manage-dropdown summary,
.operational-list-tasks .manage-dropdown summary,
.operational-list-notifications .manage-dropdown summary {
    max-width: 100%;
}

.operational-list-communications .manage-menu,
.operational-list-tasks .manage-menu,
.operational-list-notifications .manage-menu {
    max-width: min(92vw, 24rem);
    overflow-wrap: anywhere;
}

@media (min-width: 900px) {
    .app-shell:not([data-mobile-layout-mode="mobile"]) .communication-preview-card,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-list-communications,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-list-tasks,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-list-notifications,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .employee-chat-page,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .employee-related-section {
        margin-inline: auto;
        max-width: min(100%, 1560px);
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-list-communications .operational-filter-toolbar > *,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-list-tasks .operational-filter-toolbar > *,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-list-notifications .operational-filter-toolbar > * {
        flex: 1 1 13rem;
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-list-communications .table-scroll,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-list-tasks .table-scroll,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-list-notifications .table-scroll,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .employee-chat-thread-scroll {
        max-height: 72vh;
        overflow: auto;
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-list-communications .operational-table-card,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-list-tasks .operational-table-card,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-list-notifications .operational-table-card,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .communication-preview-card,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .employee-chat-thread-panel,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .employee-chat-detail-panel,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .employee-chat-create-card,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .employee-related-card {
        border-radius: 8px;
        overflow: hidden;
    }
}

@media (max-width: 760px) {
    .communication-preview-card,
    .operational-list-communications,
    .operational-list-tasks,
    .operational-list-notifications,
    .employee-chat-page,
    .employee-related-section {
        padding: .85rem;
    }

    .communication-preview-card .inline-form,
    .employee-chat-quick-actions,
    .employee-chat-create-form,
    .employee-chat-reply-form,
    .employee-related-card-actions,
    .operational-list-communications .module-action-bar,
    .operational-list-tasks .module-action-bar,
    .operational-list-notifications .module-action-bar,
    .operational-list-communications .operational-filter-toolbar,
    .operational-list-tasks .operational-filter-toolbar,
    .operational-list-notifications .operational-filter-toolbar {
        align-items: stretch;
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
    }

    .communication-preview-card .inline-form > *,
    .employee-chat-quick-actions > *,
    .employee-chat-create-form > *,
    .employee-chat-reply-form > *,
    .employee-related-card-actions > *,
    .operational-list-communications .module-action-bar > *,
    .operational-list-tasks .module-action-bar > *,
    .operational-list-notifications .module-action-bar > *,
    .operational-list-communications .operational-filter-toolbar > *,
    .operational-list-tasks .operational-filter-toolbar > *,
    .operational-list-notifications .operational-filter-toolbar > * {
        width: 100%;
    }

    .communication-preview-card button,
    .communication-preview-card .btn,
    .employee-chat-page button,
    .employee-chat-page .btn,
    .employee-related-section button,
    .employee-related-section .btn,
    .operational-list-communications button,
    .operational-list-communications .btn,
    .operational-list-tasks button,
    .operational-list-tasks .btn,
    .operational-list-notifications button,
    .operational-list-notifications .btn {
        min-height: 44px;
        white-space: normal;
    }

    .message-preview-body {
        max-height: 55vh;
    }
}

/* Settings Onboarding Help Density Guard */
.company-profile-page,
.company-onboarding-page,
.help-desk-page,
.company-profile-page .layout-grid,
.company-onboarding-page .grid,
.help-desk-page .module-foundation-grid,
.company-profile-page .layout-card,
.company-onboarding-page .card,
.help-desk-page .layout-card,
.help-desk-page .status-card,
.help-desk-page .compact-filter-card,
.help-desk-page .empty-state,
.help-desk-page .button-row,
.help-desk-page .filter-form,
.company-profile-page .button-row,
.company-onboarding-page .button-row,
.company-profile-form,
.company-logo-form,
.company-message-template-card,
.company-template-mobile-card {
    box-sizing: border-box;
    max-width: 100%;
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: normal;
}

.company-profile-page,
.company-onboarding-page,
.help-desk-page {
    margin-inline: auto;
    width: 100%;
}

.company-profile-page .layout-grid,
.company-onboarding-page .grid,
.help-desk-page .module-foundation-grid {
    align-items: stretch;
    gap: .85rem;
}

.company-onboarding-page .grid.cards-4 {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.company-profile-page .card,
.company-onboarding-page .card,
.help-desk-page .card {
    border-radius: 8px;
    overflow: hidden;
}

.help-desk-page .button-row,
.company-onboarding-page .button-row,
.company-profile-page .button-row {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
}

.help-desk-page .button-row > *,
.company-onboarding-page .button-row > *,
.company-profile-page .button-row > *,
.company-onboarding-page .actions-cell > *,
.company-profile-page .paid-feature-review-form > *,
.company-profile-page .paid-feature-request-form > * {
    min-width: 0;
}

.help-desk-page .filter-form {
    align-items: end;
    display: grid;
    gap: .65rem;
    grid-template-columns: minmax(15rem, 1.4fr) repeat(auto-fit, minmax(12rem, 1fr)) auto auto;
}

.help-desk-page .filter-form label,
.company-profile-form label,
.company-logo-form label,
.company-onboarding-page label {
    min-width: 0;
}

.help-desk-page .filter-form input,
.help-desk-page .filter-form select,
.help-desk-page .filter-form button,
.help-desk-page .filter-form .btn,
.company-profile-form input,
.company-profile-form select,
.company-profile-form textarea,
.company-logo-form input,
.company-logo-form button,
.company-onboarding-page input,
.company-onboarding-page select,
.company-onboarding-page textarea,
.company-onboarding-page button,
.company-onboarding-page .btn,
.company-onboarding-page .button-link {
    max-width: 100%;
    min-width: 0;
}

.company-onboarding-page .table-scroll table,
.company-profile-page .company-template-table-scroll table,
.help-desk-page .table-scroll table {
    min-width: 720px;
}

.company-template-mobile-list,
.company-template-fields,
.company-template-card-head {
    max-width: 100%;
    min-width: 0;
}

.company-template-card-head,
.company-template-fields > div {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem .6rem;
}

.company-template-fields {
    display: grid;
    gap: .45rem;
    margin: .65rem 0 0;
}

.help-desk-page .layout-card h2,
.company-onboarding-page h2,
.company-profile-page h2,
.company-profile-page h3 {
    letter-spacing: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
}

@media (min-width: 900px) {
    .app-shell:not([data-mobile-layout-mode="mobile"]) .company-profile-page,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .company-onboarding-page,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .help-desk-page {
        max-width: min(100%, 1480px);
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .help-desk-page .module-foundation-grid,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .company-profile-page .layout-grid {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .help-desk-page .layout-full,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .company-profile-page .layout-full {
        grid-column: 1 / -1;
    }

    .app-shell:not([data-mobile-layout-mode="mobile"]) .help-desk-page .layout-card,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .company-profile-page .layout-card,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .company-onboarding-page .card {
        box-shadow: 0 10px 26px rgba(15, 23, 42, .045);
    }
}

@media (max-width: 760px) {
    .company-profile-page,
    .company-onboarding-page,
    .help-desk-page {
        padding: .75rem;
    }

    .company-profile-page .layout-grid,
    .company-onboarding-page .grid.cards-4,
    .help-desk-page .module-foundation-grid,
    .help-desk-page .filter-form,
    .company-profile-form .form-grid-2,
    .company-profile-form .form-grid-3,
    .company-profile-form .form-grid-4 {
        display: grid;
        grid-template-columns: 1fr;
    }

    .help-desk-page .button-row,
    .company-onboarding-page .button-row,
    .company-onboarding-page .actions-cell,
    .company-profile-page .button-row,
    .company-logo-form,
    .company-profile-page .paid-feature-request-form,
    .company-profile-page .paid-feature-review-form {
        align-items: stretch;
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
    }

    .help-desk-page .button-row > *,
    .help-desk-page .filter-form > *,
    .company-onboarding-page .button-row > *,
    .company-onboarding-page .actions-cell > *,
    .company-profile-page .button-row > *,
    .company-profile-page .paid-feature-request-form > *,
    .company-profile-page .paid-feature-review-form > * {
        width: 100%;
    }

    .help-desk-page button,
    .help-desk-page .btn,
    .company-onboarding-page button,
    .company-onboarding-page .btn,
    .company-onboarding-page .button-link,
    .company-profile-page button,
    .company-profile-page .btn {
        justify-content: center;
        min-height: 44px;
        white-space: normal;
    }

    .company-onboarding-page .table-scroll table,
    .company-profile-page .company-template-table-scroll table,
    .help-desk-page .table-scroll table {
        min-width: 620px;
    }
}

/* Recurring Services Density Guard */
.operational-list-recurring-services,
.recurring-detail-shell,
.operational-list-recurring-services .module-page-header,
.recurring-detail-shell .module-page-header,
.operational-list-recurring-services .module-action-bar,
.recurring-detail-shell .module-action-bar,
.operational-list-recurring-services .operational-filter-toolbar,
.operational-list-recurring-services .status-tabs,
.operational-list-recurring-services .operational-table-card,
.recurring-detail-shell .document-detail-layout,
.recurring-detail-shell .document-main,
.recurring-detail-shell .right-summary-panel,
.recurring-detail-shell .recurring-account-generation-panel,
.recurring-detail-shell .recurring-account-value-readiness-card,
.recurring-detail-shell .recurring-account-generation-panel .metric-grid,
.recurring-detail-shell .recurring-account-value-grid,
.recurring-detail-shell .recurring-account-value-link-grid,
.recurring-detail-shell .recurring-account-generation-panel .button-row,
.recurring-detail-shell .recurring-account-generation-panel .operational-form {
    box-sizing: border-box;
    max-width: 100%;
    min-width: 0;
    overflow-wrap: anywhere;
}

.operational-list-recurring-services .recurring-account-generate-due-form {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    justify-content: flex-end;
    max-width: 100%;
}

.operational-list-recurring-services .recurring-account-generate-due-form input[type="date"] {
    flex: 1 1 11rem;
    min-width: 0;
}

.recurring-detail-shell .document-detail-layout {
    align-items: start;
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
}

.recurring-detail-shell .document-main,
.recurring-detail-shell .right-summary-panel {
    width: 100%;
}

.recurring-detail-shell .recurring-account-generation-panel {
    border-radius: 8px;
    overflow: hidden;
}

.recurring-account-value-readiness-card {
    display: grid;
    gap: .8rem;
}

.recurring-account-value-readiness-card h3 {
    margin: .3rem 0 0;
}

.recurring-account-value-grid,
.recurring-account-value-link-grid {
    display: grid;
    gap: .55rem;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}

.recurring-account-value-card,
.recurring-account-value-link {
    background: #ffffff;
    border: 1px solid #dbe4ee;
    border-radius: 8px;
    display: grid;
    gap: .24rem;
    min-width: 0;
    overflow-wrap: anywhere;
    padding: .68rem;
    text-decoration: none;
}

.recurring-account-value-card strong,
.recurring-account-value-link strong {
    color: #17233a;
}

.recurring-account-value-card b,
.recurring-account-value-link span {
    color: #0f172a;
    font-size: .95rem;
}

.recurring-account-value-card small {
    color: #526579;
    line-height: 1.35;
}

.recurring-account-value-card.is-ready,
.recurring-account-value-link.is-ready {
    border-color: #a9dfbd;
}

.recurring-account-value-card.is-warning,
.recurring-account-value-link.is-warning {
    border-color: #f1c76f;
}

.recurring-account-value-card.is-neutral,
.recurring-account-value-link.is-neutral {
    border-color: #d8e3ea;
}

.recurring-detail-shell .recurring-account-generation-panel .metric-grid {
    display: grid;
    gap: .65rem;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.recurring-detail-shell .recurring-account-generation-panel .operational-form {
    align-items: end;
    display: grid;
    gap: .65rem;
    grid-template-columns: minmax(12rem, 1fr) auto;
}

.recurring-detail-shell .recurring-account-generation-panel .button-row {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
}

.recurring-detail-shell .recurring-account-generation-panel .button-row > *,
.recurring-detail-shell .recurring-account-generation-panel .operational-form > *,
.operational-list-recurring-services .module-action-bar > *,
.operational-list-recurring-services .operational-filter-toolbar > * {
    min-width: 0;
}

@media (min-width: 900px) {
    .app-shell:not([data-mobile-layout-mode="mobile"]) .operational-list-recurring-services,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .recurring-detail-shell {
        max-width: min(100%, 1480px);
    }
}

@media (max-width: 760px) {
    .operational-list-recurring-services,
    .recurring-detail-shell {
        padding: .85rem;
    }

    .operational-list-recurring-services .module-action-bar,
    .operational-list-recurring-services .recurring-account-generate-due-form,
    .operational-list-recurring-services .operational-filter-toolbar,
    .recurring-detail-shell .module-action-bar,
    .recurring-detail-shell .document-detail-layout,
    .recurring-detail-shell .recurring-account-generation-panel .metric-grid,
    .recurring-detail-shell .recurring-account-value-grid,
    .recurring-detail-shell .recurring-account-value-link-grid,
    .recurring-detail-shell .recurring-account-generation-panel .button-row,
    .recurring-detail-shell .recurring-account-generation-panel .operational-form {
        align-items: stretch;
        display: grid;
        gap: .5rem;
        grid-template-columns: 1fr;
        width: 100%;
    }

    .operational-list-recurring-services .module-action-bar > *,
    .operational-list-recurring-services .recurring-account-generate-due-form > *,
    .operational-list-recurring-services .operational-filter-toolbar > *,
    .recurring-detail-shell .module-action-bar > *,
    .recurring-detail-shell .recurring-account-generation-panel .button-row > *,
    .recurring-detail-shell .recurring-account-generation-panel .operational-form > * {
        width: 100%;
    }

    .operational-list-recurring-services button,
    .operational-list-recurring-services .btn,
    .recurring-detail-shell button,
    .recurring-detail-shell .btn {
        justify-content: center;
        min-height: 44px;
        white-space: normal;
    }
}

/* Customer Portal Estimate Review Density Guard */
.portal-public-shell,
.public-portal-page,
.portal-brand,
.portal-hero,
.portal-card,
.portal-lines,
.portal-lines article,
.portal-rebook-line,
.portal-file-list,
.portal-action-card,
.portal-actions,
.customer-facing-document-page,
.customer-document-preview,
.customer-document-preview .document-preview-card,
.customer-document-preview .crm-document,
.document-screen-actions,
.document-grid,
.document-card,
.document-totals,
.document-line-card-list,
.document-line-card,
.document-contact-dialog,
.document-contact-form,
.document-customer-actions,
.customer-document-support-grid,
.document-approval-card {
    box-sizing: border-box;
    max-width: 100%;
    min-width: 0;
    overflow-wrap: anywhere;
}

.portal-public-shell {
    margin-inline: auto;
    max-width: min(100%, 1280px);
    padding: clamp(.75rem, 2vw, 1.25rem);
    width: 100%;
}

.public-shell .main-content.portal-public-main {
    align-content: start;
    justify-items: center;
    max-width: 100%;
    width: 100%;
}

.portal-card,
.portal-hero,
.portal-action-card {
    border-radius: 8px;
    overflow: hidden;
}

.portal-lines,
.portal-file-list {
    display: grid;
    gap: .65rem;
}

.portal-file-list li,
.portal-lines article,
.portal-rebook-line {
    min-width: 0;
    overflow-wrap: anywhere;
}

.customer-facing-document-page {
    align-items: start;
    gap: 1rem;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
    max-width: min(100%, 1280px);
}

.portal-public-shell:has(.customer-facing-document-page--wide) {
    max-width: 100%;
}

.customer-facing-document-page--wide {
    justify-content: center;
    justify-self: center;
    grid-template-columns: minmax(0, 1fr);
    margin-inline: auto;
    max-width: min(85vw, calc(100vw - 2rem));
    width: min(85vw, calc(100vw - 2rem));
}

.customer-facing-document-page--wide .customer-document-preview {
    grid-column: 1;
    width: 100%;
}

.customer-facing-document-page--wide .portal-action-card {
    grid-column: 1;
    justify-self: end;
    max-width: min(100%, 320px);
    order: -1;
    position: static;
    width: 100%;
}

.customer-facing-document-page > .customer-document-preview:only-child {
    grid-column: 1 / -1;
}

.customer-document-preview {
    min-width: 0;
}

.customer-document-preview .document-preview-card,
.customer-document-preview .crm-document {
    margin-inline: auto;
    width: 100%;
}

.customer-document-preview .table-scroll,
.portal-public-shell .table-scroll,
.document-preview-card .table-scroll {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y;
}

.customer-document-preview .document-line-table,
.portal-public-shell .document-line-table,
.document-preview-card .document-line-table {
    min-width: 680px;
}

.document-line-table-wrap {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.customer-manual-receipt-list {
    display: grid;
    gap: .6rem;
    list-style: none;
    margin: .75rem 0 0;
    padding: 0;
}

.customer-manual-receipt-list li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: .35rem 1rem;
    border: 1px solid #dbe3ed;
    border-radius: .6rem;
    padding: .7rem .85rem;
}

.customer-manual-receipt-list li > * {
    min-width: 0;
    overflow-wrap: anywhere;
}

.document-line-table th,
.document-line-table td {
    overflow-wrap: anywhere;
    white-space: normal;
}

.customer-safe-document .document-line-table--customer {
    min-width: 900px;
    table-layout: fixed;
}

.customer-safe-document .document-line-col-qty {
    width: 5.5rem;
}

.customer-safe-document .document-line-col-money {
    width: 9.75rem;
}

.document-line-main-cell {
    min-width: 0;
}

.document-line-name {
    color: #172033;
    display: block;
    font-size: 1.02rem;
    font-weight: 850;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.document-line-description {
    color: #34435a;
    line-height: 1.45;
    margin: .35rem 0 0;
    overflow-wrap: anywhere;
}

.document-line-badges {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin-top: .3rem;
}

.customer-safe-document .document-line-table--customer .document-number-cell,
.customer-safe-document .document-line-table--customer .document-money-cell,
.document-totals strong,
.estimate-response-total-preview strong {
    font-variant-numeric: tabular-nums;
    overflow-wrap: normal;
    text-align: right;
    white-space: nowrap;
}

.customer-safe-document .document-line-table--customer .document-money-cell {
    min-width: 8.75rem;
}

.customer-safe-document .document-totals {
    max-width: min(100%, 32rem);
    min-width: min(100%, 24rem);
    width: fit-content;
}

.customer-safe-document .document-totals p {
    gap: 1.25rem;
}

.customer-safe-document .document-totals span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.document-customer-actions {
    margin-top: .75rem;
}

.document-line-card-list {
    display: none;
    gap: .75rem;
}

.document-line-card {
    border: 1px solid #dbe4f0;
    border-radius: 8px;
    display: grid;
    gap: .5rem;
    padding: .85rem;
}

.document-line-card > div:first-child {
    align-items: flex-start;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    justify-content: space-between;
}

.document-preview-line-card-list {
    display: none;
    gap: .75rem;
}

.document-preview-line-card {
    border: 1px solid #dbe4f0;
    border-radius: 8px;
    display: grid;
    gap: .65rem;
    padding: .85rem;
}

.document-preview-line-card-main {
    display: grid;
    gap: .35rem;
    min-width: 0;
}

.document-preview-line-card dl {
    display: grid;
    gap: .5rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0;
}

.document-preview-line-card dt {
    color: var(--muted);
    font-size: .72rem;
    font-weight: 850;
}

.document-preview-line-card dd {
    font-variant-numeric: tabular-nums;
    margin: .15rem 0 0;
}

.document-line-card dl {
    display: grid;
    gap: .5rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0;
}

.document-line-card dt {
    color: #64748b;
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
}

.document-line-card dd {
    margin: 0;
}

.document-total-note {
    color: #64748b;
    font-size: .92rem;
}

.document-contact-dialog {
    border: 1px solid #dbe4f0;
    border-radius: 8px;
    box-shadow: 0 24px 80px rgba(15, 23, 42, .22);
    max-height: min(90vh, 760px);
    max-width: min(94vw, 760px);
    padding: 0;
    width: 100%;
}

.document-contact-dialog::backdrop {
    background: rgba(15, 23, 42, .45);
}

.document-contact-form {
    display: grid;
    gap: 1rem;
    padding: 1rem;
}

.document-contact-dialog-header {
    align-items: center;
    display: flex;
    gap: .75rem;
    justify-content: space-between;
}

.document-contact-dialog-header h3 {
    margin: 0;
}

.portal-action-card {
    align-self: start;
    max-height: calc(100vh - 2rem);
    overflow: auto;
}

.portal-action-card .btn,
.portal-actions .btn,
.document-screen-actions .btn,
.document-approval-card button,
.document-approval-card .btn {
    min-height: 44px;
    white-space: normal;
}

.document-screen-actions,
.portal-actions,
.document-approval-card form {
    align-items: stretch;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.document-screen-actions > *,
.portal-actions > *,
.document-approval-card form > * {
    min-width: 0;
}

@media (min-width: 900px) {
    .portal-lines {
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    }

    .portal-action-card {
        position: sticky;
        top: 1rem;
    }
}

@media (max-width: 800px) {
    .portal-public-shell {
        padding: .75rem;
    }

    .customer-facing-document-page,
    .document-grid,
    .document-address-grid {
        grid-template-columns: 1fr;
    }

    .customer-facing-document-page--wide {
        max-width: 100%;
        width: 100%;
    }

    .portal-action-card {
        max-height: none;
        position: static;
    }

    .document-screen-actions,
    .portal-actions,
    .document-approval-card form {
        display: grid;
        grid-template-columns: 1fr;
    }

    .document-screen-actions > *,
    .portal-actions > *,
    .document-approval-card form > * {
        width: 100%;
    }

    .customer-document-preview .document-line-table,
    .portal-public-shell .document-line-table,
    .document-preview-card .document-line-table {
        min-width: 0;
    }

    .customer-safe-document .document-line-table-wrap {
        display: none;
    }

    .customer-safe-document .document-line-card-list {
        display: grid;
    }

    .app-shell .crm-document.internal-document .document-line-items-card > .document-line-table-wrap {
        display: none;
    }

    .app-shell .crm-document.internal-document .document-line-items-card > .document-line-card-list {
        display: grid;
    }

    .document-line-card dl {
        grid-template-columns: 1fr;
    }

    .document-contact-dialog {
        max-height: 94vh;
        max-width: 94vw;
    }
}

/* Service Item Profile Desktop Overflow Guard */
.service-item-profile-layout[data-service-item-profile="operational"] {
    contain: inline-size;
    max-width: 100%;
    min-width: 0;
    overflow-x: clip;
}

.service-item-profile-layout[data-service-item-profile="operational"],
.service-item-profile-layout[data-service-item-profile="operational"] > *,
.service-item-profile-layout[data-service-item-profile="operational"] .document-main,
.service-item-profile-layout[data-service-item-profile="operational"] .right-summary-panel,
.service-item-profile-layout[data-service-item-profile="operational"] .service-item-profile-section,
.service-item-profile-layout[data-service-item-profile="operational"] .summary-panel,
.service-item-profile-layout[data-service-item-profile="operational"] .card {
    box-sizing: border-box;
    max-width: 100%;
    min-width: 0;
}

.service-item-profile-layout[data-service-item-profile="operational"] :where(.service-item-profile-hero, .service-item-profile-main, .service-item-duration-profile-heading, .service-item-duration-profile-metrics, .service-item-duration-profile-actions, .service-item-pricing-profile-metrics, .service-item-supplier-inventory-profile-metrics, .service-item-reporting-profile-metrics, .service-item-cleanup-heading, .service-item-cleanup-priority-grid, .service-item-pricing-inventory-lineage-grid, .service-item-bring-list-grid, .service-item-material-grid, .service-item-material-pricing-grid, .service-item-inventory-planning-grid, .service-item-supplier-order-grid, .service-item-material-inventory-grid, .service-item-usage-grid, .service-item-flag-grid, .service-item-lineage-actions, .service-item-profile-review-actions, .detail-list, .detail-list div, .inline-form, .compact-form, .button-row) {
    max-width: 100%;
    min-width: 0;
    overflow-wrap: anywhere;
}

.service-item-profile-layout[data-service-item-profile="operational"] :where(.table-scroll, .table-wrap, .table-responsive) {
    max-width: 100%;
    overflow-x: auto;
}

.service-item-profile-layout[data-service-item-profile="operational"] :where(table) {
    max-width: 100%;
}

@media (min-width: 900px) {
    .app-shell:not([data-mobile-layout-mode="mobile"]) .service-item-profile-layout[data-service-item-profile="operational"],
    .app-shell[data-mobile-layout-mode="mobile"] .service-item-profile-layout[data-service-item-profile="operational"] {
        grid-template-columns: minmax(0, 1fr) minmax(300px, 380px) ;
        width: 100% ;
    }
}

@media (max-width: 899px) {
    .service-item-profile-layout[data-service-item-profile="operational"] {
        grid-template-columns: 1fr ;
    }
}

/* Sitewide In-Place List Pagination */
.sitewide-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin: .85rem 0 0;
    padding: .75rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: color-mix(in srgb, var(--surface, #fff) 92%, #f8fafc);
}

.sitewide-pagination-summary {
    color: var(--muted);
    font-size: .9rem;
    line-height: 1.35;
    white-space: nowrap;
}

.sitewide-pagination-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .35rem;
}

.sitewide-pagination-button {
    min-width: 2.35rem;
    min-height: 2.35rem;
    padding: .45rem .7rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
    color: var(--text);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.sitewide-pagination-button:hover,
.sitewide-pagination-button:focus {
    border-color: var(--primary);
    outline: 2px solid color-mix(in srgb, var(--primary) 28%, transparent);
    outline-offset: 1px;
}

.sitewide-pagination-button.is-active {
    border-color: var(--primary);
    background: var(--primary);
    color: #fff;
}

.sitewide-pagination-button:disabled {
    cursor: not-allowed;
    opacity: .45;
}

.sitewide-pagination-ellipsis {
    display: inline-flex;
    align-items: center;
    min-height: 2.35rem;
    padding: 0 .25rem;
    color: var(--muted);
    font-weight: 700;
}

@media (max-width: 720px) {
    .sitewide-pagination {
        align-items: stretch;
        flex-direction: column;
        padding: .65rem;
    }

    .sitewide-pagination-summary {
        white-space: normal;
    }

    .sitewide-pagination-buttons {
        justify-content: flex-start;
    }

    .sitewide-pagination-button {
        min-height: 2.5rem;
        min-width: 2.5rem;
        padding-inline: .65rem;
    }
}

/* Paid Training SOP and Handbook Runtime */
.help-paid-training-summary,
.paid-training-lock-card,
.help-sop-card,
.help-handbook-card {
    overflow-wrap: anywhere;
}

.help-paid-training-links {
    margin-top: .85rem;
}

.help-sop-card h3,
.help-handbook-card h3 {
    margin-bottom: .35rem;
    margin-top: 1rem;
}

.help-sop-card ul,
.help-handbook-card ul {
    padding-left: 1.15rem;
}

.paid-training-lock-card {
    border-color: color-mix(in srgb, #f59e0b 42%, var(--border));
}

@media (max-width: 720px) {
    .help-sop-overlay-grid,
    .help-handbook-grid {
        grid-template-columns: 1fr;
    }
}

/* Appearance theme preview and QA tooling */
.appearance-theme-preview-grid {
    display: grid;
    gap: .85rem;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    margin-top: 1rem;
}

.appearance-theme-preview-card {
    --preview-bg: #f8fafc;
    --preview-panel: #ffffff;
    --preview-soft: #eef4fb;
    --preview-text: #111827;
    --preview-muted: #526579;
    --preview-accent: #2563eb;
    --preview-border: #d7dee8;
    background: var(--preview-bg);
    border: 1px solid var(--preview-border);
    border-radius: .75rem;
    box-shadow: var(--shadow-soft);
    color: var(--preview-text);
    display: grid;
    gap: .65rem;
    padding: .8rem;
}

.appearance-theme-preview-card.theme-preview-light {
    --preview-bg: #f8fbff;
    --preview-panel: #ffffff;
    --preview-soft: #eaf2ff;
    --preview-text: #111827;
    --preview-muted: #526579;
    --preview-accent: #3b82f6;
    --preview-border: #cfe0f5;
}

.appearance-theme-preview-card.theme-preview-medium {
    --preview-bg: #dbe7f3;
    --preview-panel: #f7fafc;
    --preview-soft: #e8f0f8;
    --preview-text: #142033;
    --preview-muted: #516175;
    --preview-accent: #1d4ed8;
    --preview-border: #aebed1;
}

.appearance-theme-preview-card.theme-preview-dark {
    --preview-bg: #020617;
    --preview-panel: #111827;
    --preview-soft: #172235;
    --preview-text: #e5edf7;
    --preview-muted: #a8b6cb;
    --preview-accent: #60a5fa;
    --preview-border: #334155;
}

.appearance-theme-preview-card.is-current {
    outline: 3px solid color-mix(in srgb, var(--preview-accent) 55%, transparent);
    outline-offset: 2px;
}

.appearance-theme-preview-card.is-locked {
    opacity: .72;
}

.theme-preview-topline {
    align-items: center;
    display: flex;
    gap: .6rem;
    justify-content: space-between;
}

.theme-preview-topline strong,
.theme-preview-panel strong {
    color: var(--preview-text);
}

.theme-preview-topline span,
.theme-preview-panel span {
    color: var(--preview-muted);
    font-size: .82rem;
}

.theme-preview-shell {
    background: var(--preview-soft);
    border: 1px solid var(--preview-border);
    border-radius: .55rem;
    display: grid;
    gap: .45rem;
    grid-template-columns: 28px 1fr;
    min-height: 72px;
    padding: .5rem;
}

.theme-preview-nav {
    background: var(--preview-panel);
    border-radius: .4rem;
}

.theme-preview-body {
    display: grid;
    gap: .35rem;
}

.theme-preview-body span {
    background: var(--preview-panel);
    border: 1px solid var(--preview-border);
    border-radius: .35rem;
    display: block;
    min-height: 16px;
}

.theme-preview-body span:first-child {
    background: var(--preview-accent);
}

.theme-preview-panel {
    background: var(--preview-panel);
    border: 1px solid var(--preview-border);
    border-radius: .55rem;
    display: grid;
    gap: .35rem;
    padding: .6rem;
}

.theme-preview-button {
    align-self: start;
    background: var(--preview-accent);
    border: 0;
    border-radius: .45rem;
    color: #ffffff;
    cursor: default;
    font-weight: 800;
    padding: .45rem .7rem;
}

.appearance-theme-qa-shell .appearance-theme-qa-card {
    min-height: 100%;
}

.appearance-theme-token-list {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    margin-top: .8rem;
}

.appearance-theme-token-list span {
    background: var(--theme-button-subtle-bg, #edf4fb);
    border: 1px solid var(--border, #d7dee8);
    border-radius: 999px;
    color: var(--theme-button-subtle-text, #1e3a5f);
    font-size: .78rem;
    font-weight: 800;
    padding: .35rem .55rem;
}

.appearance-theme-qa-table th {
    min-width: 180px;
}

.theme-preview-document-boundary {
    background: #ffffff;
    border: 1px solid #dbe4ee;
    border-radius: .75rem;
    color: #111827;
    display: grid;
    gap: .35rem;
    margin-top: 1rem;
    padding: 1rem;
}

.theme-preview-document-boundary span {
    color: #526579;
}

/* Appearance theme shared token groups:
   token palettes, staff shell coverage, specialized protected internals,
   and public/print preservation are intentionally separate coverage layers.
*/

/* Appearance theme final guard */
.app-shell.theme-light {
    --bg: #f8fafc;
    --panel: #ffffff;
    --panel-soft: #f1f5f9;
    --surface: #ffffff;
    --surface-muted: #f1f5f9;
    --surface-raised: #ffffff;
    --text: #111827;
    --heading: #0f172a;
    --muted: #475569;
    --muted-color: #475569;
    --primary: #1d4ed8;
    --primary-dark: #1e40af;
    --accent: #0f766e;
    --sidebar: #1f2937;
    --border: #dbe3ef;
    --border-color: #dbe3ef;
    --border-strong: #9aa9bc;
    --shadow: 0 16px 38px rgba(15, 23, 42, .07);
    --shadow-soft: 0 8px 22px rgba(15, 23, 42, .06);
    --focus: 0 0 0 3px rgba(29, 78, 216, .24);
    --theme-app-bg: linear-gradient(180deg, #f8fafc 0%, #eef4fb 100%);
    --theme-topbar-bg: rgba(255, 255, 255, .94);
    --theme-card-bg: #ffffff;
    --theme-soft-bg: #f1f5f9;
    --theme-menu-bg: #ffffff;
    --theme-menu-hover-bg: #eef2ff;
    --theme-input-bg: #ffffff;
    --theme-table-head-bg: #edf2f7;
    --theme-row-alt-bg: #f8fafc;
    --theme-row-hover-bg: #eef4ff;
    --theme-button-subtle-bg: #f8fafc;
    --theme-button-subtle-text: #1e3a5f;
    --theme-alert-info-bg: #e0edff;
    --theme-alert-info-text: #1e40af;
    --theme-alert-warning-bg: #fff7df;
    --theme-alert-warning-text: #8a4b05;
    --theme-alert-danger-bg: #fee2e2;
    --theme-alert-danger-text: #991b1b;
    --theme-alert-success-bg: #dcfce7;
    --theme-alert-success-text: #166534;
    --status-success-bg: #d9fbe7;
    --status-success-text: #14532d;
    --status-info-bg: #dbeafe;
    --status-info-text: #1e40af;
    --status-warning-bg: #fef3c7;
    --status-warning-text: #92400e;
    --status-danger-bg: #fee2e2;
    --status-danger-text: #991b1b;
    --status-neutral-bg: #e2e8f0;
    --status-neutral-text: #334155;
}

.app-shell.theme-medium {
    --bg: #dbe7f3;
    --panel: #f2f6fb;
    --panel-soft: #e6eef7;
    --surface: #f7fafc;
    --surface-muted: #e8f0f8;
    --surface-raised: #ffffff;
    --text: #142033;
    --heading: #0f172a;
    --muted: #516175;
    --muted-color: #516175;
    --primary: #1d4ed8;
    --primary-dark: #1e40af;
    --accent: #0f766e;
    --sidebar: #1e293b;
    --border: #aebed1;
    --border-color: #aebed1;
    --border-strong: #74849a;
    --shadow: 0 18px 42px rgba(30, 41, 59, .12);
    --shadow-soft: 0 8px 22px rgba(30, 41, 59, .10);
    --focus: 0 0 0 3px rgba(29, 78, 216, .28);
    --theme-app-bg:
        radial-gradient(circle at top left, rgba(37, 99, 235, .14), transparent 34rem),
        linear-gradient(180deg, #eaf2fb 0%, #dbe7f3 48%, #d2dfec 100%);
    --theme-topbar-bg: rgba(247, 250, 252, .94);
    --theme-card-bg: #f7fafc;
    --theme-soft-bg: #e8f0f8;
    --theme-menu-bg: #f8fbff;
    --theme-menu-hover-bg: #dbeafe;
    --theme-input-bg: #ffffff;
    --theme-table-head-bg: #dfeaf5;
    --theme-row-alt-bg: #edf4fb;
    --theme-row-hover-bg: #edf5ff;
    --theme-button-subtle-bg: #edf4fb;
    --theme-button-subtle-text: #1e3a5f;
    --theme-alert-info-bg: #e0edff;
    --theme-alert-info-text: #1e40af;
    --theme-alert-warning-bg: #fff3cd;
    --theme-alert-warning-text: #8a4b05;
    --theme-alert-danger-bg: #fee2e2;
    --theme-alert-danger-text: #991b1b;
    --theme-alert-success-bg: #dcfce7;
    --theme-alert-success-text: #166534;
    --status-success-bg: #d9fbe7;
    --status-success-text: #14532d;
    --status-info-bg: #dbeafe;
    --status-info-text: #1e40af;
    --status-warning-bg: #fef3c7;
    --status-warning-text: #92400e;
    --status-danger-bg: #fee2e2;
    --status-danger-text: #991b1b;
    --status-neutral-bg: #e2e8f0;
    --status-neutral-text: #334155;
}

.app-shell.theme-dark {
    --bg: #07111f;
    --panel: #111827;
    --panel-soft: #172235;
    --surface: #101827;
    --surface-muted: #172235;
    --surface-raised: #1f2937;
    --text: #e5edf7;
    --heading: #f8fafc;
    --muted: #a8b6cb;
    --muted-color: #a8b6cb;
    --primary: #60a5fa;
    --primary-dark: #93c5fd;
    --accent: #5eead4;
    --sidebar: #020617;
    --border: #334155;
    --border-color: #334155;
    --border-strong: #64748b;
    --danger: #f87171;
    --danger-dark: #ef4444;
    --warning: #fbbf24;
    --shadow: 0 22px 50px rgba(0, 0, 0, .38);
    --shadow-soft: 0 12px 28px rgba(0, 0, 0, .28);
    --focus: 0 0 0 3px rgba(96, 165, 250, .34);
    --theme-app-bg:
        radial-gradient(circle at top left, rgba(96, 165, 250, .14), transparent 34rem),
        linear-gradient(180deg, #020617 0%, #07111f 45%, #0f172a 100%);
    --theme-topbar-bg: rgba(15, 23, 42, .94);
    --theme-card-bg: #111827;
    --theme-soft-bg: #172235;
    --theme-menu-bg: #111827;
    --theme-menu-hover-bg: #1e293b;
    --theme-input-bg: #0f172a;
    --theme-table-head-bg: #172235;
    --theme-row-alt-bg: #151f31;
    --theme-row-hover-bg: #1e293b;
    --theme-button-subtle-bg: #172235;
    --theme-button-subtle-text: #dbeafe;
    --theme-alert-info-bg: rgba(96, 165, 250, .16);
    --theme-alert-info-text: #bfdbfe;
    --theme-alert-warning-bg: rgba(251, 191, 36, .15);
    --theme-alert-warning-text: #fde68a;
    --theme-alert-danger-bg: rgba(248, 113, 113, .16);
    --theme-alert-danger-text: #fecaca;
    --theme-alert-success-bg: rgba(74, 222, 128, .14);
    --theme-alert-success-text: #bbf7d0;
    --status-success-bg: rgba(34, 197, 94, .16);
    --status-success-text: #bbf7d0;
    --status-info-bg: rgba(96, 165, 250, .18);
    --status-info-text: #bfdbfe;
    --status-warning-bg: rgba(251, 191, 36, .18);
    --status-warning-text: #fde68a;
    --status-danger-bg: rgba(248, 113, 113, .17);
    --status-danger-text: #fecaca;
    --status-neutral-bg: rgba(148, 163, 184, .16);
    --status-neutral-text: #cbd5e1;
}

.app-shell.theme-medium,
.app-shell.theme-dark {
    background: var(--theme-app-bg);
    color: var(--text);
}

.app-shell.theme-medium :where(.main-content),
.app-shell.theme-dark :where(.main-content) {
    color: var(--text);
}

.app-shell.theme-medium :where(.global-topbar, .bottom-nav-shell, .app-sidebar, .account-area-sidebar, .mobile-app-bar),
.app-shell.theme-dark :where(.global-topbar, .bottom-nav-shell, .app-sidebar, .account-area-sidebar, .mobile-app-bar) {
    background: var(--theme-topbar-bg);
    border-color: var(--border);
    box-shadow: var(--shadow-soft);
    color: var(--text);
}

.app-shell.theme-medium :where(.app-sidebar),
.app-shell.theme-dark :where(.app-sidebar) {
    background: var(--sidebar);
}

.app-shell.theme-medium :where(.compact-brand, .brand),
.app-shell.theme-dark :where(.compact-brand, .brand) {
    background: none;
    -webkit-background-clip: initial;
    background-clip: initial;
    color: var(--heading);
}

.app-shell.theme-medium :where(.app-sidebar .brand),
.app-shell.theme-dark :where(.app-sidebar .brand) {
    color: #f8fafc;
}

.app-shell.theme-medium :where(.nav-link, .nav-group-label),
.app-shell.theme-dark :where(.nav-link, .nav-group-label) {
    color: var(--theme-button-subtle-text);
}

.app-shell.theme-medium :where(.side-nav .nav-link, .side-nav .nav-group-label),
.app-shell.theme-dark :where(.side-nav .nav-link, .side-nav .nav-group-label) {
    color: #dbeafe;
}

.app-shell.theme-medium :where(.nav-link:hover, .nav-link.is-active, .nav-group-label:hover, .nav-group-label.is-active),
.app-shell.theme-dark :where(.nav-link:hover, .nav-link.is-active, .nav-group-label:hover, .nav-group-label.is-active) {
    background: var(--theme-menu-hover-bg);
    color: var(--primary-dark);
}

.app-shell.theme-medium :where(.side-nav .nav-link:hover, .side-nav .nav-link.is-active, .side-nav .nav-group-label:hover, .side-nav .nav-group-label.is-active),
.app-shell.theme-dark :where(.side-nav .nav-link:hover, .side-nav .nav-link.is-active, .side-nav .nav-group-label:hover, .side-nav .nav-group-label.is-active) {
    background: rgba(255, 255, 255, .12);
    color: #ffffff;
}

.app-shell.theme-medium :where(.nav-dropdown, .toolbar-menu-panel, .manage-menu, .record-more, .mobile-nav-panel, .card-layout-menu),
.app-shell.theme-dark :where(.nav-dropdown, .toolbar-menu-panel, .manage-menu, .record-more, .mobile-nav-panel, .card-layout-menu) {
    background: var(--theme-menu-bg);
    border-color: var(--border);
    box-shadow: var(--shadow);
    color: var(--text);
}

.app-shell.theme-medium :where(.nav-dropdown a, .manage-menu a, .record-more a, .toolbar-menu-panel .btn-toolbar),
.app-shell.theme-dark :where(.nav-dropdown a, .manage-menu a, .record-more a, .toolbar-menu-panel .btn-toolbar) {
    color: var(--text);
}

.app-shell.theme-medium :where(.page-header, .module-page-header, .detail-page-header, .record-header),
.app-shell.theme-dark :where(.page-header, .module-page-header, .detail-page-header, .record-header) {
    background: linear-gradient(135deg, var(--theme-card-bg), var(--theme-soft-bg));
    border-color: var(--border);
    box-shadow: var(--shadow-soft);
    color: var(--text);
}

.app-shell.theme-medium :where(.module-intro),
.app-shell.theme-dark :where(.module-intro) {
    background: linear-gradient(135deg, var(--sidebar), var(--primary));
    border: 1px solid var(--border);
    color: #ffffff;
}

.app-shell.theme-medium :where(.card, .ui-panel, .empty-state, .sub-card, .placeholder-card, .form-subsection, .inline-card-form, .customer-list-card, .operational-module-shell, .operational-detail-shell, .record-layout-shell, .record-detail-card, .summary-panel, .right-summary-panel, .operational-table-card, .activity-item, .deployment-status-grid, .status-card, .help-panel, .layout-card, .document-preview-card, .permission-compare-panel, .quick-permissions-panel, .permission-health-grid article, .permission-health-lists section, .metric-list div, .category-card, .report-card-v3, .report-metric-link, .sitewide-pagination),
.app-shell.theme-dark :where(.card, .ui-panel, .empty-state, .sub-card, .placeholder-card, .form-subsection, .inline-card-form, .customer-list-card, .operational-module-shell, .operational-detail-shell, .record-layout-shell, .record-detail-card, .summary-panel, .right-summary-panel, .operational-table-card, .activity-item, .deployment-status-grid, .status-card, .help-panel, .layout-card, .document-preview-card, .permission-compare-panel, .quick-permissions-panel, .permission-health-grid article, .permission-health-lists section, .metric-list div, .category-card, .report-card-v3, .report-metric-link, .sitewide-pagination) {
    background: var(--theme-card-bg);
    border-color: var(--border);
    box-shadow: var(--shadow-soft);
    color: var(--text);
}

.app-shell.theme-medium .card::before,
.app-shell.theme-dark .card::before {
    background: linear-gradient(90deg, color-mix(in srgb, var(--primary) 68%, transparent), color-mix(in srgb, var(--accent) 34%, transparent), transparent);
}

.app-shell.theme-medium :where(.page-header h1, .module-page-header h1, .detail-page-header h1, .card h2, .card h3, .metric-card h2, .record-header h2, .dashboard-cards h2, .dashboard-cards h3, .metric-value, .related-summary-card strong, .detail-list dt, .detail-list dd, strong),
.app-shell.theme-dark :where(.page-header h1, .module-page-header h1, .detail-page-header h1, .card h2, .card h3, .metric-card h2, .record-header h2, .dashboard-cards h2, .dashboard-cards h3, .metric-value, .related-summary-card strong, .detail-list dt, .detail-list dd, strong) {
    color: var(--heading);
}

.app-shell.theme-medium :where(p, small, .muted, .muted-note, .form-instructions, .field-help, label small, .account-identity small, .activity-meta, .sitewide-pagination-summary, .deployment-status-grid dt),
.app-shell.theme-dark :where(p, small, .muted, .muted-note, .form-instructions, .field-help, label small, .account-identity small, .activity-meta, .sitewide-pagination-summary, .deployment-status-grid dt) {
    color: var(--muted);
}

.app-shell.theme-medium :where(.eyebrow, .main-content a:not(.nav-link):not(.nav-group-label):not(.btn):not(.button-link):not(.link-button):not(.primary-action):not(.deployment-status-badge), .inline-editor summary, .account-company-link, .report-metric-link span),
.app-shell.theme-dark :where(.eyebrow, .main-content a:not(.nav-link):not(.nav-group-label):not(.btn):not(.button-link):not(.link-button):not(.primary-action):not(.deployment-status-badge), .inline-editor summary, .account-company-link, .report-metric-link span) {
    color: var(--primary-dark);
}

.app-shell.theme-medium :where(label, th, td),
.app-shell.theme-dark :where(label, th, td) {
    color: var(--text);
}

.app-shell.theme-medium :where(input, select, textarea, .copy-field),
.app-shell.theme-dark :where(input, select, textarea, .copy-field) {
    background: var(--theme-input-bg);
    border-color: var(--border);
    color: var(--text);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .08);
}

.app-shell.theme-medium input::placeholder,
.app-shell.theme-medium textarea::placeholder,
.app-shell.theme-dark input::placeholder,
.app-shell.theme-dark textarea::placeholder {
    color: var(--muted);
    opacity: .8;
}

.app-shell.theme-medium :where(.table-scroll, .table-responsive, .table-wrap, .data-transfer-table-scroll, .activity-log-table-scroll, .company-template-table-scroll),
.app-shell.theme-dark :where(.table-scroll, .table-responsive, .table-wrap, .data-transfer-table-scroll, .activity-log-table-scroll, .company-template-table-scroll) {
    background: var(--theme-card-bg);
    border-color: var(--border);
}

.app-shell.theme-medium :where(table),
.app-shell.theme-dark :where(table) {
    background: var(--theme-card-bg);
    color: var(--text);
}

.app-shell.theme-medium :where(th),
.app-shell.theme-dark :where(th) {
    background: var(--theme-table-head-bg);
    border-bottom-color: var(--border-strong);
    color: var(--muted);
}

.app-shell.theme-medium :where(td),
.app-shell.theme-dark :where(td) {
    border-bottom-color: var(--border);
    color: var(--text);
}

.app-shell.theme-medium :where(tbody tr:hover),
.app-shell.theme-dark :where(tbody tr:hover) {
    background: var(--theme-row-hover-bg);
}

.app-shell.theme-medium :where(.detail-list div, .permission-search-toolbar, .permission-help-toolbar, .checkbox-row, .permission-fieldset, .permission-fieldset details, .card-toolbar, .layout-controls),
.app-shell.theme-dark :where(.detail-list div, .permission-search-toolbar, .permission-help-toolbar, .checkbox-row, .permission-fieldset, .permission-fieldset details, .card-toolbar, .layout-controls) {
    background: var(--theme-soft-bg);
    border-color: var(--border);
    color: var(--text);
}

.app-shell.theme-medium :where(.btn-subtle, .link-button, .button-link, .secondary-button, .btn-secondary, .btn-toolbar, .sitewide-pagination-button, .beta-profile-button, .beta-profile-manage),
.app-shell.theme-dark :where(.btn-subtle, .link-button, .button-link, .secondary-button, .btn-secondary, .btn-toolbar, .sitewide-pagination-button, .beta-profile-button, .beta-profile-manage) {
    background: var(--theme-button-subtle-bg);
    border-color: var(--border);
    color: var(--theme-button-subtle-text);
}

.app-shell.theme-medium :where(.btn-primary, .primary-action, button[type="submit"]:not(.btn-subtle):not(.btn-danger):not(.btn-toolbar), .sitewide-pagination-button.is-active),
.app-shell.theme-dark :where(.btn-primary, .primary-action, button[type="submit"]:not(.btn-subtle):not(.btn-danger):not(.btn-toolbar), .sitewide-pagination-button.is-active) {
    background: var(--primary);
    border-color: var(--primary);
    color: #ffffff;
}

.app-shell.theme-medium :where(.btn-subtle:hover, .link-button:hover, .button-link:hover, .secondary-button:hover, .btn-secondary:hover, .btn-toolbar:hover, .sitewide-pagination-button:hover),
.app-shell.theme-dark :where(.btn-subtle:hover, .link-button:hover, .button-link:hover, .secondary-button:hover, .btn-secondary:hover, .btn-toolbar:hover, .sitewide-pagination-button:hover) {
    background: var(--theme-menu-hover-bg);
    border-color: var(--primary);
    color: var(--primary-dark);
}

.app-shell.theme-medium :where(.btn-danger, .danger-button, .logout-button),
.app-shell.theme-dark :where(.btn-danger, .danger-button, .logout-button) {
    background: var(--theme-alert-danger-bg);
    border-color: var(--danger-dark);
    color: var(--theme-alert-danger-text);
}

.app-shell.theme-medium :where(.alert-info, .nav-foundation-note),
.app-shell.theme-dark :where(.alert-info, .nav-foundation-note) {
    background: var(--theme-alert-info-bg);
    border-color: color-mix(in srgb, var(--primary) 36%, var(--border));
    color: var(--theme-alert-info-text);
}

.app-shell.theme-medium :where(.alert-warning, .alert-foundation, .warning, .warning-button, .duplicate-warning, .permission-help-card),
.app-shell.theme-dark :where(.alert-warning, .alert-foundation, .warning, .warning-button, .duplicate-warning, .permission-help-card) {
    background: var(--theme-alert-warning-bg);
    border-color: color-mix(in srgb, #f59e0b 42%, var(--border));
    color: var(--theme-alert-warning-text);
}

.app-shell.theme-medium :where(.alert-error, .alert-danger, .form-error),
.app-shell.theme-dark :where(.alert-error, .alert-danger, .form-error) {
    background: var(--theme-alert-danger-bg);
    border-color: color-mix(in srgb, var(--danger) 44%, var(--border));
    color: var(--theme-alert-danger-text);
}

.app-shell.theme-medium :where(.alert-success, .status-card.success),
.app-shell.theme-dark :where(.alert-success, .status-card.success) {
    background: var(--theme-alert-success-bg);
    border-color: color-mix(in srgb, #22c55e 44%, var(--border));
    color: var(--theme-alert-success-text);
}

.app-shell.theme-medium :where(.status-active, .status-approved, .status-paid, .status-completed, .status-converted, .status-ready),
.app-shell.theme-dark :where(.status-active, .status-approved, .status-paid, .status-completed, .status-converted, .status-ready) {
    background: var(--status-success-bg);
    border-color: color-mix(in srgb, #22c55e 40%, var(--border));
    color: var(--status-success-text);
}

.app-shell.theme-medium :where(.status-sent, .status-scheduled, .status-in-progress, .status-invoiced, .status-foundation, .status-draft, .status-placeholder, .status-badge-blue),
.app-shell.theme-dark :where(.status-sent, .status-scheduled, .status-in-progress, .status-invoiced, .status-foundation, .status-draft, .status-placeholder, .status-badge-blue) {
    background: var(--status-info-bg);
    border-color: color-mix(in srgb, var(--primary) 38%, var(--border));
    color: var(--status-info-text);
}

.app-shell.theme-medium :where(.status-unscheduled, .status-unpaid, .status-overdue, .status-warning, .status-urgent, .status-open, .status-needs-more-data, .status-badge-orange),
.app-shell.theme-dark :where(.status-unscheduled, .status-unpaid, .status-overdue, .status-warning, .status-urgent, .status-open, .status-needs-more-data, .status-badge-orange) {
    background: var(--status-warning-bg);
    border-color: color-mix(in srgb, #f59e0b 42%, var(--border));
    color: var(--status-warning-text);
}

.app-shell.theme-medium :where(.status-inactive, .status-paused, .status-canceled, .status-deleted, .status-coming-soon, .status-badge-gray),
.app-shell.theme-dark :where(.status-inactive, .status-paused, .status-canceled, .status-deleted, .status-coming-soon, .status-badge-gray) {
    background: var(--status-neutral-bg);
    border-color: var(--border);
    color: var(--status-neutral-text);
}

.app-shell.theme-medium :where(.status-denied, .status-danger, .status-badge-red),
.app-shell.theme-dark :where(.status-denied, .status-danger, .status-badge-red) {
    background: var(--status-danger-bg);
    border-color: color-mix(in srgb, var(--danger) 42%, var(--border));
    color: var(--status-danger-text);
}

.app-shell.theme-medium :where(code),
.app-shell.theme-dark :where(code) {
    background: var(--theme-soft-bg);
    color: var(--primary-dark);
}

.app-shell.theme-medium :where(hr),
.app-shell.theme-dark :where(hr) {
    border-color: var(--border);
}

/* Appearance theme list-surface final guard */
.app-shell.theme-medium .global-topbar .top-nav.grouped-nav,
.app-shell.theme-medium .global-topbar .account-area-top,
.app-shell.theme-medium .operational-list-shell[data-operational-ui="v1"],
.app-shell.theme-medium[data-mobile-layout-mode="mobile"] .operational-list-shell[data-operational-ui="v1"] {
    background: var(--theme-card-bg);
    border-color: var(--border);
    box-shadow: var(--shadow-soft);
    color: var(--text);
}

.app-shell.theme-dark .global-topbar .top-nav.grouped-nav,
.app-shell.theme-dark .global-topbar .account-area-top,
.app-shell.theme-dark .operational-list-shell[data-operational-ui="v1"],
.app-shell.theme-dark[data-mobile-layout-mode="mobile"] .operational-list-shell[data-operational-ui="v1"] {
    background: var(--theme-card-bg);
    border-color: var(--border);
    box-shadow: var(--shadow-soft);
    color: var(--text);
}

.app-shell.theme-medium .global-topbar .top-nav .nav-link,
.app-shell.theme-medium .global-topbar .top-nav .nav-group-label,
.app-shell.theme-dark .global-topbar .top-nav .nav-link,
.app-shell.theme-dark .global-topbar .top-nav .nav-group-label {
    background: var(--theme-button-subtle-bg);
    border-color: var(--border);
    color: var(--theme-button-subtle-text);
}

.app-shell.theme-medium .global-topbar .top-nav .nav-link:hover,
.app-shell.theme-medium .global-topbar .top-nav .nav-link.is-active,
.app-shell.theme-medium .global-topbar .top-nav .nav-group-label:hover,
.app-shell.theme-medium .global-topbar .top-nav .nav-group-label.is-active,
.app-shell.theme-dark .global-topbar .top-nav .nav-link:hover,
.app-shell.theme-dark .global-topbar .top-nav .nav-link.is-active,
.app-shell.theme-dark .global-topbar .top-nav .nav-group-label:hover,
.app-shell.theme-dark .global-topbar .top-nav .nav-group-label.is-active {
    background: var(--theme-menu-hover-bg);
    border-color: var(--primary);
    color: var(--primary-dark);
}

.app-shell.theme-medium .account-area-top .account-identity,
.app-shell.theme-medium .account-area-top .account-identity strong,
.app-shell.theme-medium .account-area-top .nav-preference-form label,
.app-shell.theme-medium .account-area-top .mobile-preference-form label,
.app-shell.theme-medium .account-area-top .experience-mode-form,
.app-shell.theme-medium .account-area-top .nav-preference-form span,
.app-shell.theme-medium .account-area-top .mobile-preference-form span,
.app-shell.theme-medium .account-area-top .experience-mode-form span,
.app-shell.theme-dark .account-area-top .account-identity,
.app-shell.theme-dark .account-area-top .account-identity strong,
.app-shell.theme-dark .account-area-top .nav-preference-form label,
.app-shell.theme-dark .account-area-top .mobile-preference-form label,
.app-shell.theme-dark .account-area-top .experience-mode-form,
.app-shell.theme-dark .account-area-top .nav-preference-form span,
.app-shell.theme-dark .account-area-top .mobile-preference-form span,
.app-shell.theme-dark .account-area-top .experience-mode-form span {
    color: var(--text);
}

.app-shell.theme-medium .account-area-top .account-identity small,
.app-shell.theme-dark .account-area-top .account-identity small {
    color: var(--muted);
}

.app-shell.theme-medium .account-area-top .account-company-link,
.app-shell.theme-dark .account-area-top .account-company-link {
    color: var(--primary-dark);
}

.app-shell.theme-medium .operational-list-shell[data-operational-ui="v1"] .module-page-header,
.app-shell.theme-medium .operational-list-shell[data-operational-ui="v1"] .operational-filter-toolbar,
.app-shell.theme-medium .operational-list-shell[data-operational-ui="v1"] .status-tabs,
.app-shell.theme-medium .operational-list-shell[data-operational-ui="v1"] .operational-bulk-toolbar,
.app-shell.theme-medium .operational-list-shell[data-operational-ui="v1"] .metric-strip,
.app-shell.theme-medium .operational-list-shell[data-operational-ui="v1"] .work-order-command-summary,
.app-shell.theme-medium .operational-list-shell[data-operational-ui="v1"] .operational-table-card {
    background: var(--theme-soft-bg);
    border-color: var(--border);
    box-shadow: var(--shadow-soft);
    color: var(--text);
}

.app-shell.theme-dark .operational-list-shell[data-operational-ui="v1"] .module-page-header,
.app-shell.theme-dark .operational-list-shell[data-operational-ui="v1"] .operational-filter-toolbar,
.app-shell.theme-dark .operational-list-shell[data-operational-ui="v1"] .status-tabs,
.app-shell.theme-dark .operational-list-shell[data-operational-ui="v1"] .operational-bulk-toolbar,
.app-shell.theme-dark .operational-list-shell[data-operational-ui="v1"] .metric-strip,
.app-shell.theme-dark .operational-list-shell[data-operational-ui="v1"] .work-order-command-summary,
.app-shell.theme-dark .operational-list-shell[data-operational-ui="v1"] .operational-table-card {
    background: var(--theme-soft-bg);
    border-color: var(--border);
    box-shadow: var(--shadow-soft);
    color: var(--text);
}

.app-shell.theme-medium .operational-list-shell[data-operational-ui="v1"] .operational-table-card .table-scroll,
.app-shell.theme-medium .operational-list-shell[data-operational-ui="v1"] .data-table,
.app-shell.theme-dark .operational-list-shell[data-operational-ui="v1"] .operational-table-card .table-scroll,
.app-shell.theme-dark .operational-list-shell[data-operational-ui="v1"] .data-table {
    background: var(--theme-card-bg);
    color: var(--text);
}

.app-shell.theme-medium .operational-list-shell[data-operational-ui="v1"] .data-table th,
.app-shell.theme-dark .operational-list-shell[data-operational-ui="v1"] .data-table th {
    background: var(--theme-table-head-bg);
    border-bottom-color: var(--border-strong);
    color: var(--muted);
}

.app-shell.theme-medium .operational-list-shell[data-operational-ui="v1"] .data-table tbody tr {
    background: var(--theme-card-bg);
}

.app-shell.theme-medium .operational-list-shell[data-operational-ui="v1"] .data-table tbody tr:nth-child(even) {
    background: color-mix(in srgb, var(--theme-soft-bg) 72%, var(--theme-card-bg));
}

.app-shell.theme-dark .operational-list-shell[data-operational-ui="v1"] .data-table tbody tr {
    background: #101827;
}

.app-shell.theme-dark .operational-list-shell[data-operational-ui="v1"] .data-table tbody tr:nth-child(even) {
    background: #151f31;
}

.app-shell.theme-medium .operational-list-shell[data-operational-ui="v1"] .data-table tbody tr:hover,
.app-shell.theme-dark .operational-list-shell[data-operational-ui="v1"] .data-table tbody tr:hover {
    background: var(--theme-row-hover-bg);
}

.app-shell.theme-medium .operational-list-shell[data-operational-ui="v1"] .data-table td,
.app-shell.theme-dark .operational-list-shell[data-operational-ui="v1"] .data-table td {
    border-bottom-color: var(--border);
    color: var(--text);
}

.app-shell.theme-medium .operational-list-shell[data-operational-ui="v1"] .data-table small,
.app-shell.theme-medium .operational-list-shell[data-operational-ui="v1"] .bulk-toolbar-help,
.app-shell.theme-medium .operational-list-shell[data-operational-ui="v1"] .bulk-action-panel-title,
.app-shell.theme-dark .operational-list-shell[data-operational-ui="v1"] .data-table small,
.app-shell.theme-dark .operational-list-shell[data-operational-ui="v1"] .bulk-toolbar-help,
.app-shell.theme-dark .operational-list-shell[data-operational-ui="v1"] .bulk-action-panel-title {
    color: var(--muted);
}

.app-shell.theme-medium .operational-list-shell[data-operational-ui="v1"] .data-table a:not(.btn),
.app-shell.theme-medium .operational-list-shell[data-operational-ui="v1"] .data-table a:not(.btn) strong,
.app-shell.theme-medium .operational-list-shell[data-operational-ui="v1"] .status-tabs a,
.app-shell.theme-medium .operational-list-shell[data-operational-ui="v1"] .operational-bulk-toolbar button.bulk-action-link,
.app-shell.theme-medium .operational-list-shell[data-operational-ui="v1"] .operational-bulk-toolbar button[type="submit"].bulk-action-link,
.app-shell.theme-dark .operational-list-shell[data-operational-ui="v1"] .data-table a:not(.btn),
.app-shell.theme-dark .operational-list-shell[data-operational-ui="v1"] .data-table a:not(.btn) strong,
.app-shell.theme-dark .operational-list-shell[data-operational-ui="v1"] .status-tabs a,
.app-shell.theme-dark .operational-list-shell[data-operational-ui="v1"] .operational-bulk-toolbar button.bulk-action-link,
.app-shell.theme-dark .operational-list-shell[data-operational-ui="v1"] .operational-bulk-toolbar button[type="submit"].bulk-action-link {
    color: var(--primary-dark);
}

.app-shell.theme-medium .operational-list-shell[data-operational-ui="v1"] .status-tabs a.is-active,
.app-shell.theme-dark .operational-list-shell[data-operational-ui="v1"] .status-tabs a.is-active {
    background: var(--status-success-bg);
    border-bottom-color: var(--accent);
    color: var(--status-success-text);
}

.app-shell.theme-medium .operational-list-shell[data-operational-ui="v1"] .bulk-select-visible,
.app-shell.theme-dark .operational-list-shell[data-operational-ui="v1"] .bulk-select-visible {
    color: var(--text);
}

.app-shell.theme-medium .operational-list-shell[data-operational-ui="v1"] .bulk-selected-count,
.app-shell.theme-dark .operational-list-shell[data-operational-ui="v1"] .bulk-selected-count {
    background: var(--theme-input-bg);
    border-color: var(--border);
    color: var(--text);
}

/* Appearance theme operational list-surface v2 parity (Service Items list uses data-operational-ui="v2") */
.app-shell.theme-medium .operational-list-shell[data-operational-ui="v2"] .module-page-header,
.app-shell.theme-medium .operational-list-shell[data-operational-ui="v2"] .operational-filter-toolbar,
.app-shell.theme-medium .operational-list-shell[data-operational-ui="v2"] .status-tabs,
.app-shell.theme-medium .operational-list-shell[data-operational-ui="v2"] .operational-bulk-toolbar,
.app-shell.theme-medium .operational-list-shell[data-operational-ui="v2"] .metric-strip,
.app-shell.theme-medium .operational-list-shell[data-operational-ui="v2"] .operational-table-card,
.app-shell.theme-dark .operational-list-shell[data-operational-ui="v2"] .module-page-header,
.app-shell.theme-dark .operational-list-shell[data-operational-ui="v2"] .operational-filter-toolbar,
.app-shell.theme-dark .operational-list-shell[data-operational-ui="v2"] .status-tabs,
.app-shell.theme-dark .operational-list-shell[data-operational-ui="v2"] .operational-bulk-toolbar,
.app-shell.theme-dark .operational-list-shell[data-operational-ui="v2"] .metric-strip,
.app-shell.theme-dark .operational-list-shell[data-operational-ui="v2"] .operational-table-card {
    background: var(--theme-soft-bg);
    border-color: var(--border);
    box-shadow: var(--shadow-soft);
    color: var(--text);
}

.app-shell.theme-medium .operational-list-shell[data-operational-ui="v2"] .operational-table-card .table-scroll,
.app-shell.theme-medium .operational-list-shell[data-operational-ui="v2"] .data-table,
.app-shell.theme-dark .operational-list-shell[data-operational-ui="v2"] .operational-table-card .table-scroll,
.app-shell.theme-dark .operational-list-shell[data-operational-ui="v2"] .data-table {
    background: var(--theme-card-bg);
    color: var(--text);
}

.app-shell.theme-medium .operational-list-shell[data-operational-ui="v2"] .data-table th,
.app-shell.theme-dark .operational-list-shell[data-operational-ui="v2"] .data-table th {
    background: var(--theme-table-head-bg);
    border-bottom-color: var(--border-strong);
    color: var(--muted);
}

.app-shell.theme-medium .operational-list-shell[data-operational-ui="v2"] .data-table tbody tr {
    background: var(--theme-card-bg);
}

.app-shell.theme-medium .operational-list-shell[data-operational-ui="v2"] .data-table tbody tr:nth-child(even) {
    background: color-mix(in srgb, var(--theme-soft-bg) 72%, var(--theme-card-bg));
}

.app-shell.theme-dark .operational-list-shell[data-operational-ui="v2"] .data-table tbody tr {
    background: #101827;
}

.app-shell.theme-dark .operational-list-shell[data-operational-ui="v2"] .data-table tbody tr:nth-child(even) {
    background: #151f31;
}

.app-shell.theme-medium .operational-list-shell[data-operational-ui="v2"] .data-table tbody tr:hover,
.app-shell.theme-dark .operational-list-shell[data-operational-ui="v2"] .data-table tbody tr:hover {
    background: var(--theme-row-hover-bg);
}

.app-shell.theme-medium .operational-list-shell[data-operational-ui="v2"] .data-table td,
.app-shell.theme-dark .operational-list-shell[data-operational-ui="v2"] .data-table td {
    border-bottom-color: var(--border);
    color: var(--text);
}

.app-shell.theme-medium .operational-list-shell[data-operational-ui="v2"] .data-table small,
.app-shell.theme-medium .operational-list-shell[data-operational-ui="v2"] .bulk-toolbar-help,
.app-shell.theme-medium .operational-list-shell[data-operational-ui="v2"] .bulk-action-panel-title,
.app-shell.theme-dark .operational-list-shell[data-operational-ui="v2"] .data-table small,
.app-shell.theme-dark .operational-list-shell[data-operational-ui="v2"] .bulk-toolbar-help,
.app-shell.theme-dark .operational-list-shell[data-operational-ui="v2"] .bulk-action-panel-title {
    color: var(--muted);
}

.app-shell.theme-medium .operational-list-shell[data-operational-ui="v2"] .data-table a:not(.btn),
.app-shell.theme-medium .operational-list-shell[data-operational-ui="v2"] .data-table a:not(.btn) strong,
.app-shell.theme-medium .operational-list-shell[data-operational-ui="v2"] .status-tabs a,
.app-shell.theme-medium .operational-list-shell[data-operational-ui="v2"] .operational-bulk-toolbar button.bulk-action-link,
.app-shell.theme-medium .operational-list-shell[data-operational-ui="v2"] .operational-bulk-toolbar button[type="submit"].bulk-action-link,
.app-shell.theme-dark .operational-list-shell[data-operational-ui="v2"] .data-table a:not(.btn),
.app-shell.theme-dark .operational-list-shell[data-operational-ui="v2"] .data-table a:not(.btn) strong,
.app-shell.theme-dark .operational-list-shell[data-operational-ui="v2"] .status-tabs a,
.app-shell.theme-dark .operational-list-shell[data-operational-ui="v2"] .operational-bulk-toolbar button.bulk-action-link,
.app-shell.theme-dark .operational-list-shell[data-operational-ui="v2"] .operational-bulk-toolbar button[type="submit"].bulk-action-link {
    color: var(--primary-dark);
}

.app-shell.theme-medium .operational-list-shell[data-operational-ui="v2"] .status-tabs a.is-active,
.app-shell.theme-dark .operational-list-shell[data-operational-ui="v2"] .status-tabs a.is-active {
    background: var(--status-success-bg);
    border-bottom-color: var(--accent);
    color: var(--status-success-text);
}

.app-shell.theme-medium .operational-list-shell[data-operational-ui="v2"] .bulk-select-visible,
.app-shell.theme-dark .operational-list-shell[data-operational-ui="v2"] .bulk-select-visible {
    color: var(--text);
}

.app-shell.theme-medium .operational-list-shell[data-operational-ui="v2"] .bulk-selected-count,
.app-shell.theme-dark .operational-list-shell[data-operational-ui="v2"] .bulk-selected-count {
    background: var(--theme-input-bg);
    border-color: var(--border);
    color: var(--text);
}

/* Appearance theme widget-surface final guard */
.app-shell.theme-medium .customer-profile-grid:has(.customer-list-shell[data-operational-ui="v1"]),
.app-shell.theme-medium .customer-list-shell[data-operational-ui="v1"] .module-page-header,
.app-shell.theme-medium .customer-list-shell[data-operational-ui="v1"] .customer-filters,
.app-shell.theme-medium .customer-list-shell[data-operational-ui="v1"] .status-tabs,
.app-shell.theme-medium .customer-list-shell[data-operational-ui="v1"] .customer-table,
.app-shell.theme-medium .leads-shell[data-operational-ui="v1"],
.app-shell.theme-medium .leads-shell[data-operational-ui="v1"] .module-page-header,
.app-shell.theme-medium .leads-shell[data-operational-ui="v1"] .filter-toolbar,
.app-shell.theme-medium .leads-shell[data-operational-ui="v1"] .status-tabs,
.app-shell.theme-medium .leads-shell[data-operational-ui="v1"] .view-toggle,
.app-shell.theme-medium .leads-shell[data-operational-ui="v1"] .table-card,
.app-shell.theme-dark .customer-profile-grid:has(.customer-list-shell[data-operational-ui="v1"]),
.app-shell.theme-dark .customer-list-shell[data-operational-ui="v1"] .module-page-header,
.app-shell.theme-dark .customer-list-shell[data-operational-ui="v1"] .customer-filters,
.app-shell.theme-dark .customer-list-shell[data-operational-ui="v1"] .status-tabs,
.app-shell.theme-dark .customer-list-shell[data-operational-ui="v1"] .customer-table,
.app-shell.theme-dark .leads-shell[data-operational-ui="v1"],
.app-shell.theme-dark .leads-shell[data-operational-ui="v1"] .module-page-header,
.app-shell.theme-dark .leads-shell[data-operational-ui="v1"] .filter-toolbar,
.app-shell.theme-dark .leads-shell[data-operational-ui="v1"] .status-tabs,
.app-shell.theme-dark .leads-shell[data-operational-ui="v1"] .view-toggle,
.app-shell.theme-dark .leads-shell[data-operational-ui="v1"] .table-card {
    background: var(--theme-soft-bg);
    border-color: var(--border);
    box-shadow: var(--shadow-soft);
    color: var(--text);
}

.app-shell.theme-medium .customer-list-shell[data-operational-ui="v1"] .customer-table th,
.app-shell.theme-medium .leads-shell[data-operational-ui="v1"] th,
.app-shell.theme-dark .customer-list-shell[data-operational-ui="v1"] .customer-table th,
.app-shell.theme-dark .leads-shell[data-operational-ui="v1"] th {
    background: var(--theme-table-head-bg);
    border-bottom-color: var(--border-strong);
    color: var(--muted);
}

.app-shell.theme-medium .customer-list-shell[data-operational-ui="v1"] .customer-table tbody tr,
.app-shell.theme-medium .leads-shell[data-operational-ui="v1"] tbody tr {
    background: var(--theme-card-bg);
}

.app-shell.theme-medium .customer-list-shell[data-operational-ui="v1"] .customer-table tbody tr:nth-child(even),
.app-shell.theme-medium .leads-shell[data-operational-ui="v1"] tbody tr:nth-child(even) {
    background: color-mix(in srgb, var(--theme-soft-bg) 72%, var(--theme-card-bg));
}

.app-shell.theme-dark .customer-list-shell[data-operational-ui="v1"] .customer-table tbody tr,
.app-shell.theme-dark .leads-shell[data-operational-ui="v1"] tbody tr {
    background: #101827;
}

.app-shell.theme-dark .customer-list-shell[data-operational-ui="v1"] .customer-table tbody tr:nth-child(even),
.app-shell.theme-dark .leads-shell[data-operational-ui="v1"] tbody tr:nth-child(even) {
    background: #151f31;
}

.app-shell.theme-medium .customer-list-shell[data-operational-ui="v1"] .customer-table td,
.app-shell.theme-medium .customer-list-shell[data-operational-ui="v1"] .customer-table small,
.app-shell.theme-medium .leads-shell[data-operational-ui="v1"] td,
.app-shell.theme-medium .leads-shell[data-operational-ui="v1"] small,
.app-shell.theme-dark .customer-list-shell[data-operational-ui="v1"] .customer-table td,
.app-shell.theme-dark .customer-list-shell[data-operational-ui="v1"] .customer-table small,
.app-shell.theme-dark .leads-shell[data-operational-ui="v1"] td,
.app-shell.theme-dark .leads-shell[data-operational-ui="v1"] small {
    border-bottom-color: var(--border);
    color: var(--text);
}

.app-shell.theme-medium .customer-list-shell[data-operational-ui="v1"] .customer-table a:not(.btn),
.app-shell.theme-medium .leads-shell[data-operational-ui="v1"] a:not(.btn),
.app-shell.theme-dark .customer-list-shell[data-operational-ui="v1"] .customer-table a:not(.btn),
.app-shell.theme-dark .leads-shell[data-operational-ui="v1"] a:not(.btn) {
    color: var(--primary-dark);
}

.app-shell.theme-medium .leads-shell[data-operational-ui="v1"] .pipeline-column,
.app-shell.theme-medium .leads-shell[data-operational-ui="v1"] .pipeline-card,
.app-shell.theme-medium .leads-shell[data-operational-ui="v1"] .col-count,
.app-shell.theme-medium .operational-list-service-items[data-operational-ui="v1"] .service-item-command-summary,
.app-shell.theme-medium .operational-list-service-items[data-operational-ui="v1"] .service-item-command-summary article,
.app-shell.theme-medium .operational-list-service-items[data-operational-ui="v1"] .service-item-catalog-card,
.app-shell.theme-medium .operational-list-work-orders[data-operational-ui="v1"] .work-order-command-summary,
.app-shell.theme-medium .operational-list-work-orders[data-operational-ui="v1"] .work-order-command-metrics article,
.app-shell.theme-medium .operational-list-work-orders[data-operational-ui="v1"] .work-order-attention-card,
.app-shell.theme-dark .leads-shell[data-operational-ui="v1"] .pipeline-column,
.app-shell.theme-dark .leads-shell[data-operational-ui="v1"] .pipeline-card,
.app-shell.theme-dark .leads-shell[data-operational-ui="v1"] .col-count,
.app-shell.theme-dark .operational-list-service-items[data-operational-ui="v1"] .service-item-command-summary,
.app-shell.theme-dark .operational-list-service-items[data-operational-ui="v1"] .service-item-command-summary article,
.app-shell.theme-dark .operational-list-service-items[data-operational-ui="v1"] .service-item-catalog-card,
.app-shell.theme-dark .operational-list-work-orders[data-operational-ui="v1"] .work-order-command-summary,
.app-shell.theme-dark .operational-list-work-orders[data-operational-ui="v1"] .work-order-command-metrics article,
.app-shell.theme-dark .operational-list-work-orders[data-operational-ui="v1"] .work-order-attention-card {
    background: var(--theme-card-bg);
    border-color: var(--border);
    box-shadow: var(--shadow-soft);
    color: var(--text);
}

.app-shell.theme-medium .leads-shell[data-operational-ui="v1"] .pipeline-column-closed,
.app-shell.theme-medium .leads-shell[data-operational-ui="v1"] .pipeline-card--unviewed,
.app-shell.theme-medium .operational-list-service-items[data-operational-ui="v1"] .service-item-card-photo,
.app-shell.theme-medium .operational-list-service-items[data-operational-ui="v1"] .service-item-card-meta span,
.app-shell.theme-dark .leads-shell[data-operational-ui="v1"] .pipeline-column-closed,
.app-shell.theme-dark .leads-shell[data-operational-ui="v1"] .pipeline-card--unviewed,
.app-shell.theme-dark .operational-list-service-items[data-operational-ui="v1"] .service-item-card-photo,
.app-shell.theme-dark .operational-list-service-items[data-operational-ui="v1"] .service-item-card-meta span {
    background: var(--theme-soft-bg);
    border-color: var(--border);
    color: var(--muted);
}

.app-shell.theme-medium .leads-shell[data-operational-ui="v1"] .pipeline-column-header h2,
.app-shell.theme-medium .leads-shell[data-operational-ui="v1"] .pipeline-card strong,
.app-shell.theme-medium .operational-list-service-items[data-operational-ui="v1"] .service-item-command-summary strong,
.app-shell.theme-medium .operational-list-service-items[data-operational-ui="v1"] .service-item-card-title a,
.app-shell.theme-medium .operational-list-work-orders[data-operational-ui="v1"] .work-order-command-metrics strong,
.app-shell.theme-medium .operational-list-work-orders[data-operational-ui="v1"] .work-order-attention-card strong,
.app-shell.theme-dark .leads-shell[data-operational-ui="v1"] .pipeline-column-header h2,
.app-shell.theme-dark .leads-shell[data-operational-ui="v1"] .pipeline-card strong,
.app-shell.theme-dark .operational-list-service-items[data-operational-ui="v1"] .service-item-command-summary strong,
.app-shell.theme-dark .operational-list-service-items[data-operational-ui="v1"] .service-item-card-title a,
.app-shell.theme-dark .operational-list-work-orders[data-operational-ui="v1"] .work-order-command-metrics strong,
.app-shell.theme-dark .operational-list-work-orders[data-operational-ui="v1"] .work-order-attention-card strong {
    color: var(--heading);
}

.app-shell.theme-medium .leads-shell[data-operational-ui="v1"] .pipeline-card small,
.app-shell.theme-medium .leads-shell[data-operational-ui="v1"] .pipeline-card p,
.app-shell.theme-medium .operational-list-service-items[data-operational-ui="v1"] .service-item-command-summary span,
.app-shell.theme-medium .operational-list-service-items[data-operational-ui="v1"] .service-item-card-subtitle,
.app-shell.theme-medium .operational-list-work-orders[data-operational-ui="v1"] .work-order-command-metrics span,
.app-shell.theme-medium .operational-list-work-orders[data-operational-ui="v1"] .work-order-attention-card span,
.app-shell.theme-medium .operational-list-work-orders[data-operational-ui="v1"] .work-order-attention-card small,
.app-shell.theme-medium .operational-list-work-orders[data-operational-ui="v1"] .work-order-attention-note,
.app-shell.theme-dark .leads-shell[data-operational-ui="v1"] .pipeline-card small,
.app-shell.theme-dark .leads-shell[data-operational-ui="v1"] .pipeline-card p,
.app-shell.theme-dark .operational-list-service-items[data-operational-ui="v1"] .service-item-command-summary span,
.app-shell.theme-dark .operational-list-service-items[data-operational-ui="v1"] .service-item-card-subtitle,
.app-shell.theme-dark .operational-list-work-orders[data-operational-ui="v1"] .work-order-command-metrics span,
.app-shell.theme-dark .operational-list-work-orders[data-operational-ui="v1"] .work-order-attention-card span,
.app-shell.theme-dark .operational-list-work-orders[data-operational-ui="v1"] .work-order-attention-card small,
.app-shell.theme-dark .operational-list-work-orders[data-operational-ui="v1"] .work-order-attention-note {
    color: var(--muted);
}

.app-shell.theme-medium .clock-io-page .clock-io-status-grid article,
.app-shell.theme-medium .clock-io-page .clock-day-control-panel,
.app-shell.theme-medium .clock-io-page .clock-day-action-card,
.app-shell.theme-medium .clock-io-page .clock-day-adjustment-card,
.app-shell.theme-medium .clock-io-page .clock-suggestion-panel,
.app-shell.theme-medium .clock-io-page .clock-suggestion-card,
.app-shell.theme-medium .clock-io-page .clock-suggestion-actions details,
.app-shell.theme-medium .clock-io-page .clock-summary-grid article,
.app-shell.theme-medium .clock-io-page .clock-quick-action-card,
.app-shell.theme-medium .clock-io-page .clock-manual-action-card,
.app-shell.theme-medium .clock-io-page .clock-out-action-card,
.app-shell.theme-medium .clock-io-page .clock-history-list article,
.app-shell.theme-medium .clock-io-page .clock-target-card,
.app-shell.theme-medium .clock-io-page .clock-active-target-card,
.app-shell.theme-medium .clock-io-page .clock-correction-panel,
.app-shell.theme-medium .clock-io-page .clock-correction-card,
.app-shell.theme-medium .clock-io-page .clock-correction-request-review,
.app-shell.theme-medium .clock-io-page .clock-adjustment-review-card,
.app-shell.theme-medium .clock-io-page .clock-shared-workflow-row,
.app-shell.theme-medium .clock-io-page .clock-crew-timer-status,
.app-shell.theme-medium .clock-io-page .clock-crew-timer-status dl div,
.app-shell.theme-medium .clock-review-panel .clock-review-action-form,
.app-shell.theme-medium .clock-review-panel .clock-adjustment-review-card,
.app-shell.theme-medium .clock-crew-review-panel,
.app-shell.theme-medium .clock-crew-review-filter,
.app-shell.theme-medium .clock-crew-review-summary span,
.app-shell.theme-medium .clock-crew-review-panel .clock-crew-review-action-form,
.app-shell.theme-dark .clock-io-page .clock-io-status-grid article,
.app-shell.theme-dark .clock-io-page .clock-day-control-panel,
.app-shell.theme-dark .clock-io-page .clock-day-action-card,
.app-shell.theme-dark .clock-io-page .clock-day-adjustment-card,
.app-shell.theme-dark .clock-io-page .clock-suggestion-panel,
.app-shell.theme-dark .clock-io-page .clock-suggestion-card,
.app-shell.theme-dark .clock-io-page .clock-suggestion-actions details,
.app-shell.theme-dark .clock-io-page .clock-summary-grid article,
.app-shell.theme-dark .clock-io-page .clock-quick-action-card,
.app-shell.theme-dark .clock-io-page .clock-manual-action-card,
.app-shell.theme-dark .clock-io-page .clock-out-action-card,
.app-shell.theme-dark .clock-io-page .clock-history-list article,
.app-shell.theme-dark .clock-io-page .clock-target-card,
.app-shell.theme-dark .clock-io-page .clock-active-target-card,
.app-shell.theme-dark .clock-io-page .clock-correction-panel,
.app-shell.theme-dark .clock-io-page .clock-correction-card,
.app-shell.theme-dark .clock-io-page .clock-correction-request-review,
.app-shell.theme-dark .clock-io-page .clock-adjustment-review-card,
.app-shell.theme-dark .clock-io-page .clock-shared-workflow-row,
.app-shell.theme-dark .clock-io-page .clock-crew-timer-status,
.app-shell.theme-dark .clock-io-page .clock-crew-timer-status dl div,
.app-shell.theme-dark .clock-review-panel .clock-review-action-form,
.app-shell.theme-dark .clock-review-panel .clock-adjustment-review-card,
.app-shell.theme-dark .clock-crew-review-panel,
.app-shell.theme-dark .clock-crew-review-filter,
.app-shell.theme-dark .clock-crew-review-summary span,
.app-shell.theme-dark .clock-crew-review-panel .clock-crew-review-action-form {
    background: var(--theme-card-bg);
    border-color: var(--border);
    color: var(--text);
}

.app-shell.theme-medium .clock-io-page :where(.clock-io-status-grid span, .clock-summary-grid span, .clock-summary-grid small, .clock-quick-action-card span, .clock-history-list article span, .clock-history-meta, .clock-target-meta, .clock-target-empty, .clock-crew-timer-status small, .clock-crew-timer-status dt, .clock-crew-review-response),
.app-shell.theme-dark .clock-io-page :where(.clock-io-status-grid span, .clock-summary-grid span, .clock-summary-grid small, .clock-quick-action-card span, .clock-history-list article span, .clock-history-meta, .clock-target-meta, .clock-target-empty, .clock-crew-timer-status small, .clock-crew-timer-status dt, .clock-crew-review-response) {
    color: var(--muted);
}

.app-shell.theme-medium .clock-io-page :where(.clock-io-status-grid strong, .clock-summary-grid strong, .clock-suggestion-card strong, .clock-target-heading h4, .clock-crew-timer-status strong, .clock-crew-timer-status dd),
.app-shell.theme-dark .clock-io-page :where(.clock-io-status-grid strong, .clock-summary-grid strong, .clock-suggestion-card strong, .clock-target-heading h4, .clock-crew-timer-status strong, .clock-crew-timer-status dd) {
    color: var(--heading);
}

.app-shell.theme-medium .scheduling-calendar-shell .scheduling-calendar-command-bar,
.app-shell.theme-medium .scheduling-calendar-shell .calendar-arrange-toggle,
.app-shell.theme-medium .scheduling-calendar-shell .calendar-module-panel,
.app-shell.theme-medium .scheduling-calendar-shell .calendar-legend-grid span,
.app-shell.theme-medium .scheduling-calendar-shell .calendar-selected-day-metrics span,
.app-shell.theme-medium .scheduling-calendar-shell .calendar-selected-drilldown-card,
.app-shell.theme-medium .scheduling-calendar-shell .calendar-selected-mini-list a,
.app-shell.theme-medium .scheduling-calendar-shell .calendar-selected-mini-list span,
.app-shell.theme-medium .scheduling-calendar-shell .calendar-selected-stop-list a,
.app-shell.theme-medium .scheduling-calendar-shell .calendar-selected-route-list a,
.app-shell.theme-medium .scheduling-calendar-shell .calendar-selected-route-list span,
.app-shell.theme-medium .scheduling-calendar-shell .calendar-day-cell,
.app-shell.theme-medium .scheduling-calendar-shell .calendar-work-order-pill,
.app-shell.theme-medium .scheduling-calendar-shell .calendar-day-dialog-work-card,
.app-shell.theme-dark .scheduling-calendar-shell .scheduling-calendar-command-bar,
.app-shell.theme-dark .scheduling-calendar-shell .calendar-arrange-toggle,
.app-shell.theme-dark .scheduling-calendar-shell .calendar-module-panel,
.app-shell.theme-dark .scheduling-calendar-shell .calendar-legend-grid span,
.app-shell.theme-dark .scheduling-calendar-shell .calendar-selected-day-metrics span,
.app-shell.theme-dark .scheduling-calendar-shell .calendar-selected-drilldown-card,
.app-shell.theme-dark .scheduling-calendar-shell .calendar-selected-mini-list a,
.app-shell.theme-dark .scheduling-calendar-shell .calendar-selected-mini-list span,
.app-shell.theme-dark .scheduling-calendar-shell .calendar-selected-stop-list a,
.app-shell.theme-dark .scheduling-calendar-shell .calendar-selected-route-list a,
.app-shell.theme-dark .scheduling-calendar-shell .calendar-selected-route-list span,
.app-shell.theme-dark .scheduling-calendar-shell .calendar-day-cell,
.app-shell.theme-dark .scheduling-calendar-shell .calendar-work-order-pill,
.app-shell.theme-dark .scheduling-calendar-shell .calendar-day-dialog-work-card {
    background: var(--theme-card-bg);
    border-color: var(--border);
    color: var(--text);
}

.app-shell.theme-medium .scheduling-calendar-shell .calendar-day-blank,
.app-shell.theme-medium .scheduling-calendar-shell .calendar-day-outside-month,
.app-shell.theme-medium .scheduling-calendar-shell .calendar-day-metrics span,
.app-shell.theme-dark .scheduling-calendar-shell .calendar-day-blank,
.app-shell.theme-dark .scheduling-calendar-shell .calendar-day-outside-month,
.app-shell.theme-dark .scheduling-calendar-shell .calendar-day-metrics span {
    background: var(--theme-soft-bg);
    border-color: var(--border);
    color: var(--muted);
}

.app-shell.theme-medium .scheduling-calendar-shell .calendar-day-today,
.app-shell.theme-dark .scheduling-calendar-shell .calendar-day-today {
    background: color-mix(in srgb, var(--primary) 18%, var(--theme-card-bg));
    border-color: var(--primary);
}

.app-shell.theme-medium .scheduling-calendar-shell :where(.scheduling-calendar-command-main strong, .calendar-module-heading h2, .calendar-guidance-list strong, .calendar-selected-day-metrics strong, .calendar-selected-day-grid h3, .calendar-selected-drilldown-card > strong, .calendar-selected-mini-list strong, .calendar-selected-stop-list strong, .calendar-day-num, .calendar-pill-title, .calendar-day-dialog-work-card strong),
.app-shell.theme-dark .scheduling-calendar-shell :where(.scheduling-calendar-command-main strong, .calendar-module-heading h2, .calendar-guidance-list strong, .calendar-selected-day-metrics strong, .calendar-selected-day-grid h3, .calendar-selected-drilldown-card > strong, .calendar-selected-mini-list strong, .calendar-selected-stop-list strong, .calendar-day-num, .calendar-pill-title, .calendar-day-dialog-work-card strong) {
    color: var(--heading);
}

.app-shell.theme-medium .scheduling-calendar-shell :where(.calendar-filter-summary, .calendar-month-header span, .calendar-group-count, .calendar-minutes, .calendar-employees, .calendar-empty-day, .calendar-selected-day-metrics small, .calendar-selected-drilldown-card p, .calendar-selected-drilldown-card small, .calendar-selected-mini-list span span, .calendar-selected-mini-list a span, .calendar-selected-stop-list span, .calendar-pill-time, .calendar-pill-customer, .calendar-day-dialog-work-card span, .calendar-day-dialog-work-card small),
.app-shell.theme-dark .scheduling-calendar-shell :where(.calendar-filter-summary, .calendar-month-header span, .calendar-group-count, .calendar-minutes, .calendar-employees, .calendar-empty-day, .calendar-selected-day-metrics small, .calendar-selected-drilldown-card p, .calendar-selected-drilldown-card small, .calendar-selected-mini-list span span, .calendar-selected-mini-list a span, .calendar-selected-stop-list span, .calendar-pill-time, .calendar-pill-customer, .calendar-day-dialog-work-card span, .calendar-day-dialog-work-card small) {
    color: var(--muted);
}

.app-shell.theme-medium .operational-detail-shell[data-operational-ui="v1"] .detail-page-header,
.app-shell.theme-medium .operational-detail-shell[data-operational-ui="v1"] .document-preview-card,
.app-shell.theme-medium .operational-detail-shell[data-operational-ui="v1"] .summary-card,
.app-shell.theme-medium .operational-detail-shell[data-operational-ui="v1"] .right-summary-panel .card,
.app-shell.theme-medium .operational-detail-shell[data-operational-ui="v1"] .right-summary-panel .portal-admin-panel,
.app-shell.theme-medium .operational-detail-shell[data-operational-ui="v1"] .document-readiness-panel,
.app-shell.theme-medium .operational-detail-shell[data-operational-ui="v1"] .document-readiness-label,
.app-shell.theme-medium .operational-detail-shell[data-operational-ui="v1"] .document-total strong:last-child,
.app-shell.theme-medium .operational-detail-shell[data-operational-ui="v1"] .document-message,
.app-shell.theme-medium .operational-detail-shell[data-operational-ui="v1"] .document-line-snapshot-card,
.app-shell.theme-medium .operational-detail-shell[data-operational-ui="v1"] .document-line-snapshot-empty,
.app-shell.theme-medium .operational-detail-shell[data-operational-ui="v1"] .document-line-snapshot-stats span,
.app-shell.theme-medium .operational-detail-shell[data-operational-ui="v1"] .line-timer-readiness-panel,
.app-shell.theme-medium .operational-detail-shell[data-operational-ui="v1"] .line-timer-readiness-card,
.app-shell.theme-dark .operational-detail-shell[data-operational-ui="v1"] .detail-page-header,
.app-shell.theme-dark .operational-detail-shell[data-operational-ui="v1"] .document-preview-card,
.app-shell.theme-dark .operational-detail-shell[data-operational-ui="v1"] .summary-card,
.app-shell.theme-dark .operational-detail-shell[data-operational-ui="v1"] .right-summary-panel .card,
.app-shell.theme-dark .operational-detail-shell[data-operational-ui="v1"] .right-summary-panel .portal-admin-panel,
.app-shell.theme-dark .operational-detail-shell[data-operational-ui="v1"] .document-readiness-panel,
.app-shell.theme-dark .operational-detail-shell[data-operational-ui="v1"] .document-readiness-label,
.app-shell.theme-dark .operational-detail-shell[data-operational-ui="v1"] .document-total strong:last-child,
.app-shell.theme-dark .operational-detail-shell[data-operational-ui="v1"] .document-message,
.app-shell.theme-dark .operational-detail-shell[data-operational-ui="v1"] .document-line-snapshot-card,
.app-shell.theme-dark .operational-detail-shell[data-operational-ui="v1"] .document-line-snapshot-empty,
.app-shell.theme-dark .operational-detail-shell[data-operational-ui="v1"] .document-line-snapshot-stats span,
.app-shell.theme-dark .operational-detail-shell[data-operational-ui="v1"] .line-timer-readiness-panel,
.app-shell.theme-dark .operational-detail-shell[data-operational-ui="v1"] .line-timer-readiness-card {
    background: var(--theme-card-bg);
    border-color: var(--border);
    box-shadow: var(--shadow-soft);
    color: var(--text);
}

.app-shell.theme-medium .estimate-detail-shell[data-operational-ui="v1"] .document-preview-card,
.app-shell.theme-medium .estimate-detail-shell[data-operational-ui="v1"] .document-readiness-panel,
.app-shell.theme-medium .invoice-detail-shell[data-operational-ui="v1"] .document-preview-card,
.app-shell.theme-medium .invoice-detail-shell[data-operational-ui="v1"] .document-readiness-panel,
.app-shell.theme-dark .estimate-detail-shell[data-operational-ui="v1"] .document-preview-card,
.app-shell.theme-dark .estimate-detail-shell[data-operational-ui="v1"] .document-readiness-panel,
.app-shell.theme-dark .invoice-detail-shell[data-operational-ui="v1"] .document-preview-card,
.app-shell.theme-dark .invoice-detail-shell[data-operational-ui="v1"] .document-readiness-panel {
    background: var(--theme-card-bg);
    border-color: var(--border);
    color: var(--text);
}

.app-shell.theme-medium .operational-detail-shell[data-operational-ui="v1"] .document-address-grid,
.app-shell.theme-medium .operational-detail-shell[data-operational-ui="v1"] .document-lines,
.app-shell.theme-medium .operational-detail-shell[data-operational-ui="v1"] .document-lines th,
.app-shell.theme-medium .operational-detail-shell[data-operational-ui="v1"] .document-total,
.app-shell.theme-medium .operational-detail-shell[data-operational-ui="v1"] .document-card,
.app-shell.theme-medium .operational-detail-shell[data-operational-ui="v1"] .document-totals,
.app-shell.theme-dark .operational-detail-shell[data-operational-ui="v1"] .document-address-grid,
.app-shell.theme-dark .operational-detail-shell[data-operational-ui="v1"] .document-lines,
.app-shell.theme-dark .operational-detail-shell[data-operational-ui="v1"] .document-lines th,
.app-shell.theme-dark .operational-detail-shell[data-operational-ui="v1"] .document-total,
.app-shell.theme-dark .operational-detail-shell[data-operational-ui="v1"] .document-card,
.app-shell.theme-dark .operational-detail-shell[data-operational-ui="v1"] .document-totals {
    background: var(--theme-soft-bg);
    border-color: var(--border);
    color: var(--text);
}

.app-shell.theme-medium .operational-detail-shell[data-operational-ui="v1"] .document-lines td,
.app-shell.theme-medium .operational-detail-shell[data-operational-ui="v1"] .document-lines th,
.app-shell.theme-medium .operational-detail-shell[data-operational-ui="v1"] .document-line-table td,
.app-shell.theme-medium .operational-detail-shell[data-operational-ui="v1"] .document-line-table th,
.app-shell.theme-dark .operational-detail-shell[data-operational-ui="v1"] .document-lines td,
.app-shell.theme-dark .operational-detail-shell[data-operational-ui="v1"] .document-lines th,
.app-shell.theme-dark .operational-detail-shell[data-operational-ui="v1"] .document-line-table td,
.app-shell.theme-dark .operational-detail-shell[data-operational-ui="v1"] .document-line-table th {
    border-bottom-color: var(--border);
    color: var(--text);
}

.app-shell.theme-medium .operational-detail-shell[data-operational-ui="v1"] :where(.document-header h2, .document-address-grid strong, .document-line-name, .document-total strong, .document-readiness-heading strong, .document-readiness-label strong, .document-readiness-label b, .document-line-snapshot-main h3, .document-line-snapshot-total, .document-line-snapshot-stats strong),
.app-shell.theme-dark .operational-detail-shell[data-operational-ui="v1"] :where(.document-header h2, .document-address-grid strong, .document-line-name, .document-total strong, .document-readiness-heading strong, .document-readiness-label strong, .document-readiness-label b, .document-line-snapshot-main h3, .document-line-snapshot-total, .document-line-snapshot-stats strong) {
    color: var(--heading);
}

.app-shell.theme-medium .operational-detail-shell[data-operational-ui="v1"] :where(.document-header p, .document-address-grid p, .document-line-description, .document-message p, .document-readiness-heading span, .document-readiness-label small, .document-line-snapshot-main p),
.app-shell.theme-dark .operational-detail-shell[data-operational-ui="v1"] :where(.document-header p, .document-address-grid p, .document-line-description, .document-message p, .document-readiness-heading span, .document-readiness-label small, .document-line-snapshot-main p) {
    color: var(--muted);
}

.app-shell.theme-medium .work-order-detail-shell[data-operational-ui="v1"] .work-order-command-card,
.app-shell.theme-medium .work-order-detail-shell[data-operational-ui="v1"] .work-order-office-closeout-heading > strong,
.app-shell.theme-medium .work-order-detail-shell[data-operational-ui="v1"] .work-order-office-closeout-pill,
.app-shell.theme-medium .work-order-detail-shell[data-operational-ui="v1"] .shared-workflow-next-action,
.app-shell.theme-medium .work-order-detail-shell[data-operational-ui="v1"] .work-order-field-flow-guide,
.app-shell.theme-medium .work-order-detail-shell[data-operational-ui="v1"] .work-order-field-flow-step,
.app-shell.theme-medium .work-order-detail-shell[data-operational-ui="v1"] .work-order-field-flow-exception,
.app-shell.theme-medium .work-order-detail-shell[data-operational-ui="v1"] .whole-work-order-timer-controls,
.app-shell.theme-medium .work-order-detail-shell[data-operational-ui="v1"] .whole-work-order-timer-controls .inline-form,
.app-shell.theme-medium .work-order-detail-shell[data-operational-ui="v1"] .compact-timer-controls,
.app-shell.theme-medium .work-order-detail-shell[data-operational-ui="v1"] .work-order-schedule-context,
.app-shell.theme-medium .work-order-detail-shell[data-operational-ui="v1"] .work-order-invoice-summary span,
.app-shell.theme-medium .work-order-detail-shell[data-operational-ui="v1"] .work-order-closeout-next,
.app-shell.theme-medium .work-order-detail-shell[data-operational-ui="v1"] .work-order-closeout-status,
.app-shell.theme-medium .work-order-detail-shell[data-operational-ui="v1"] .work-order-closeout-item,
.app-shell.theme-medium .work-order-detail-shell[data-operational-ui="v1"] .metric-strip,
.app-shell.theme-medium .work-order-detail-shell[data-operational-ui="v1"] .metric-strip article,
.app-shell.theme-medium .work-order-detail-shell[data-operational-ui="v1"] .work-order-assignment-checkboxes label,
.app-shell.theme-dark .work-order-detail-shell[data-operational-ui="v1"] .work-order-command-card,
.app-shell.theme-dark .work-order-detail-shell[data-operational-ui="v1"] .work-order-office-closeout-heading > strong,
.app-shell.theme-dark .work-order-detail-shell[data-operational-ui="v1"] .work-order-office-closeout-pill,
.app-shell.theme-dark .work-order-detail-shell[data-operational-ui="v1"] .shared-workflow-next-action,
.app-shell.theme-dark .work-order-detail-shell[data-operational-ui="v1"] .work-order-field-flow-guide,
.app-shell.theme-dark .work-order-detail-shell[data-operational-ui="v1"] .work-order-field-flow-step,
.app-shell.theme-dark .work-order-detail-shell[data-operational-ui="v1"] .work-order-field-flow-exception,
.app-shell.theme-dark .work-order-detail-shell[data-operational-ui="v1"] .whole-work-order-timer-controls,
.app-shell.theme-dark .work-order-detail-shell[data-operational-ui="v1"] .whole-work-order-timer-controls .inline-form,
.app-shell.theme-dark .work-order-detail-shell[data-operational-ui="v1"] .compact-timer-controls,
.app-shell.theme-dark .work-order-detail-shell[data-operational-ui="v1"] .work-order-schedule-context,
.app-shell.theme-dark .work-order-detail-shell[data-operational-ui="v1"] .work-order-invoice-summary span,
.app-shell.theme-dark .work-order-detail-shell[data-operational-ui="v1"] .work-order-closeout-next,
.app-shell.theme-dark .work-order-detail-shell[data-operational-ui="v1"] .work-order-closeout-status,
.app-shell.theme-dark .work-order-detail-shell[data-operational-ui="v1"] .work-order-closeout-item,
.app-shell.theme-dark .work-order-detail-shell[data-operational-ui="v1"] .metric-strip,
.app-shell.theme-dark .work-order-detail-shell[data-operational-ui="v1"] .metric-strip article,
.app-shell.theme-dark .work-order-detail-shell[data-operational-ui="v1"] .work-order-assignment-checkboxes label {
    background: var(--theme-card-bg);
    border-color: var(--border);
    color: var(--text);
}

.app-shell.theme-medium .work-order-detail-shell[data-operational-ui="v1"] :where(.work-order-command-card strong, .work-order-office-closeout-pill strong, .work-order-closeout-next strong, .work-order-closeout-status strong, .work-order-closeout-item strong, .work-order-closeout-item em, .work-order-field-flow-step strong, .work-order-field-flow-exception strong, .work-order-invoice-summary strong, .metric-strip strong),
.app-shell.theme-dark .work-order-detail-shell[data-operational-ui="v1"] :where(.work-order-command-card strong, .work-order-office-closeout-pill strong, .work-order-closeout-next strong, .work-order-closeout-status strong, .work-order-closeout-item strong, .work-order-closeout-item em, .work-order-field-flow-step strong, .work-order-field-flow-exception strong, .work-order-invoice-summary strong, .metric-strip strong) {
    color: var(--heading);
}

.app-shell.theme-medium .work-order-detail-shell[data-operational-ui="v1"] :where(.work-order-command-card span, .work-order-command-card small, .work-order-office-closeout-pill span, .work-order-closeout-next span, .work-order-closeout-next small, .work-order-closeout-status span, .work-order-closeout-item span, .work-order-closeout-item small, .work-order-field-flow-step span, .work-order-field-flow-step small, .work-order-field-flow-exception span, .work-order-invoice-summary span),
.app-shell.theme-dark .work-order-detail-shell[data-operational-ui="v1"] :where(.work-order-command-card span, .work-order-command-card small, .work-order-office-closeout-pill span, .work-order-closeout-next span, .work-order-closeout-next small, .work-order-closeout-status span, .work-order-closeout-item span, .work-order-closeout-item small, .work-order-field-flow-step span, .work-order-field-flow-step small, .work-order-field-flow-exception span, .work-order-invoice-summary span) {
    color: var(--muted);
}

/* Appearance theme specialized-surface final guard */
.app-shell.theme-medium :where(
    .service-item-command-summary,
    .service-item-command-summary article,
    .service-item-metric-grid article,
    .service-item-usage-grid article,
    .service-item-flag-grid article,
    .service-item-catalog-card,
    .service-item-lifecycle-card,
    .service-item-tree-shell,
    .service-item-tree-safety,
    .service-item-tree-host-card,
    .service-item-tree-current article,
    .service-item-tree-builder-heading,
    .service-item-tree-toolbar,
    .service-item-tree-scenario,
    .service-item-tree-legend,
    .service-item-tree-workspace,
    .service-item-tree-canvas-wrap,
    .service-item-tree-tray,
    .service-item-tree-tray-item,
    .service-item-tree-inspector,
    .service-item-tree-color-panel,
    .service-item-tree-dock-controls,
    .service-item-tree-empty,
    .service-item-tree-empty-real,
    .service-item-tree-state,
    .service-item-tree-root,
    .service-item-tree-node-card,
    .service-item-tree-canvas-node,
    .mobile-work-order-hero,
    .mobile-work-order-card,
    .mobile-work-order-mode-selector,
    .mobile-work-order-status-row > span,
    .mobile-work-order-standard-meta span,
    .mobile-work-order-field-list dl > div,
    .mobile-work-order-note-box,
    .mobile-work-order-action,
    .mobile-work-order-line-card,
    .mobile-work-order-standard-line,
    .mobile-work-order-crew-boundary-grid article,
    .mobile-work-order-command-card,
    .mobile-work-order-checklist-next,
    .mobile-work-order-checklist-item,
    .mobile-work-order-advanced-task,
    .mobile-work-order-advanced-modules,
    .mobile-work-order-advanced-panel,
    .mobile-work-order-checklist-status,
    .mobile-work-order-empty,
    .mobile-work-order-sticky-actions,
    .mobile-document-advanced-panel,
    .mobile-document-note,
    .mobile-document-line,
    .customer-profile-shell .related-summary-card,
    .customer-profile-shell .section-summary-card,
    .record-main.layout-grid .related-summary-card,
    .premium-portal-panel,
    .premium-portal-metric,
    .estimate-review-link-card,
    .paid-feature-card,
    .paid-feature-platform-billing-card,
    .paid-ui-preferences-card,
    .paid-branding-preferences-card,
    .billing-revenue-readiness-card,
    .integrations-api-readiness-card,
    .marketing-web-readiness-card,
    .paid-operations-readiness-card,
    .paid-operations-group,
    .square-payment-connection-card,
    .square-capability-roadmap,
    .square-capability-item,
    .square-capability-meta span,
    .square-advanced-controls,
    .square-advanced-grid > div,
    .square-terminal-device-list li,
    .work-order-production-completion-card,
    .work-order-production-label,
    .work-order-production-drillback,
    .work-order-production-timeline-event,
    .work-order-line-card,
    .work-order-line-card-timer,
    .work-order-timer-visibility,
    .work-order-timer-visibility-groups article,
    .work-order-timer-visibility-row,
    .work-order-timer-visibility-pill
),
.app-shell.theme-dark :where(
    .service-item-command-summary,
    .service-item-command-summary article,
    .service-item-metric-grid article,
    .service-item-usage-grid article,
    .service-item-flag-grid article,
    .service-item-catalog-card,
    .service-item-lifecycle-card,
    .service-item-tree-shell,
    .service-item-tree-safety,
    .service-item-tree-host-card,
    .service-item-tree-current article,
    .service-item-tree-builder-heading,
    .service-item-tree-toolbar,
    .service-item-tree-scenario,
    .service-item-tree-legend,
    .service-item-tree-workspace,
    .service-item-tree-canvas-wrap,
    .service-item-tree-tray,
    .service-item-tree-tray-item,
    .service-item-tree-inspector,
    .service-item-tree-color-panel,
    .service-item-tree-dock-controls,
    .service-item-tree-empty,
    .service-item-tree-empty-real,
    .service-item-tree-state,
    .service-item-tree-root,
    .service-item-tree-node-card,
    .service-item-tree-canvas-node,
    .mobile-work-order-hero,
    .mobile-work-order-card,
    .mobile-work-order-mode-selector,
    .mobile-work-order-status-row > span,
    .mobile-work-order-standard-meta span,
    .mobile-work-order-field-list dl > div,
    .mobile-work-order-note-box,
    .mobile-work-order-action,
    .mobile-work-order-line-card,
    .mobile-work-order-standard-line,
    .mobile-work-order-crew-boundary-grid article,
    .mobile-work-order-command-card,
    .mobile-work-order-checklist-next,
    .mobile-work-order-checklist-item,
    .mobile-work-order-advanced-task,
    .mobile-work-order-advanced-modules,
    .mobile-work-order-advanced-panel,
    .mobile-work-order-checklist-status,
    .mobile-work-order-empty,
    .mobile-work-order-sticky-actions,
    .mobile-document-advanced-panel,
    .mobile-document-note,
    .mobile-document-line,
    .customer-profile-shell .related-summary-card,
    .customer-profile-shell .section-summary-card,
    .record-main.layout-grid .related-summary-card,
    .premium-portal-panel,
    .premium-portal-metric,
    .estimate-review-link-card,
    .paid-feature-card,
    .paid-feature-platform-billing-card,
    .paid-ui-preferences-card,
    .paid-branding-preferences-card,
    .billing-revenue-readiness-card,
    .integrations-api-readiness-card,
    .marketing-web-readiness-card,
    .paid-operations-readiness-card,
    .paid-operations-group,
    .square-payment-connection-card,
    .square-capability-roadmap,
    .square-capability-item,
    .square-capability-meta span,
    .square-advanced-controls,
    .square-advanced-grid > div,
    .square-terminal-device-list li,
    .work-order-production-completion-card,
    .work-order-production-label,
    .work-order-production-drillback,
    .work-order-production-timeline-event,
    .work-order-line-card,
    .work-order-line-card-timer,
    .work-order-timer-visibility,
    .work-order-timer-visibility-groups article,
    .work-order-timer-visibility-row,
    .work-order-timer-visibility-pill
) {
    background: var(--theme-card-bg);
    border-color: var(--border);
    box-shadow: var(--shadow-soft);
    color: var(--text);
}

.app-shell.theme-medium :where(.service-item-tree-canvas, .service-item-tree-lines),
.app-shell.theme-dark :where(.service-item-tree-canvas, .service-item-tree-lines) {
    background: transparent;
}

.app-shell.theme-medium :where(
    .service-item-tree-canvas-wrap,
    .service-item-tree-tray,
    .service-item-tree-inspector,
    .mobile-work-order-status-row > span,
    .mobile-work-order-standard-meta span,
    .mobile-work-order-field-list dl > div,
    .mobile-work-order-note-box,
    .mobile-work-order-empty,
    .square-capability-meta span,
    .work-order-production-label,
    .work-order-production-drillback,
    .work-order-production-timeline-event,
    .work-order-timer-visibility-pill
),
.app-shell.theme-dark :where(
    .service-item-tree-canvas-wrap,
    .service-item-tree-tray,
    .service-item-tree-inspector,
    .mobile-work-order-status-row > span,
    .mobile-work-order-standard-meta span,
    .mobile-work-order-field-list dl > div,
    .mobile-work-order-note-box,
    .mobile-work-order-empty,
    .square-capability-meta span,
    .work-order-production-label,
    .work-order-production-drillback,
    .work-order-production-timeline-event,
    .work-order-timer-visibility-pill
) {
    background: var(--theme-soft-bg);
    border-color: var(--border);
    color: var(--text);
}

.app-shell.theme-medium :where(
    .service-item-command-summary strong,
    .service-item-metric-grid strong,
    .service-item-usage-grid strong,
    .service-item-tree-root strong,
    .service-item-tree-node-main strong,
    .service-item-tree-canvas-node-title strong,
    .service-item-tree-tray-item strong,
    .service-item-tree-panel-heading strong,
    .mobile-work-order-hero h1,
    .mobile-work-order-customer h2,
    .mobile-work-order-section-heading h2,
    .mobile-work-order-line-card h3,
    .mobile-work-order-standard-line strong,
    .mobile-work-order-metrics strong,
    .mobile-work-order-line-stats strong,
    .mobile-work-order-line-timer-metrics strong,
    .mobile-work-order-action strong,
    .mobile-work-order-command-card strong,
    .mobile-work-order-checklist-next strong,
    .mobile-work-order-checklist-status strong,
    .mobile-work-order-checklist-item strong,
    .mobile-work-order-advanced-task strong,
    .customer-profile-shell .related-summary-card strong,
    .customer-profile-shell .section-summary-card strong,
    .record-main.layout-grid .related-summary-card strong,
    .premium-portal-metric strong,
    .square-capability-item strong,
    .work-order-production-label strong,
    .work-order-production-drillback strong,
    .work-order-production-timeline-event strong,
    .work-order-line-card-main h3,
    .work-order-timer-visibility-heading h3,
    .work-order-timer-visibility-row strong
),
.app-shell.theme-dark :where(
    .service-item-command-summary strong,
    .service-item-metric-grid strong,
    .service-item-usage-grid strong,
    .service-item-tree-root strong,
    .service-item-tree-node-main strong,
    .service-item-tree-canvas-node-title strong,
    .service-item-tree-tray-item strong,
    .service-item-tree-panel-heading strong,
    .mobile-work-order-hero h1,
    .mobile-work-order-customer h2,
    .mobile-work-order-section-heading h2,
    .mobile-work-order-line-card h3,
    .mobile-work-order-standard-line strong,
    .mobile-work-order-metrics strong,
    .mobile-work-order-line-stats strong,
    .mobile-work-order-line-timer-metrics strong,
    .mobile-work-order-action strong,
    .mobile-work-order-command-card strong,
    .mobile-work-order-checklist-next strong,
    .mobile-work-order-checklist-status strong,
    .mobile-work-order-checklist-item strong,
    .mobile-work-order-advanced-task strong,
    .customer-profile-shell .related-summary-card strong,
    .customer-profile-shell .section-summary-card strong,
    .record-main.layout-grid .related-summary-card strong,
    .premium-portal-metric strong,
    .square-capability-item strong,
    .work-order-production-label strong,
    .work-order-production-drillback strong,
    .work-order-production-timeline-event strong,
    .work-order-line-card-main h3,
    .work-order-timer-visibility-heading h3,
    .work-order-timer-visibility-row strong
) {
    color: var(--heading);
}

.app-shell.theme-medium :where(
    .service-item-command-summary span,
    .service-item-card-subtitle,
    .service-item-tree-root span,
    .service-item-tree-root small,
    .service-item-tree-node-main small,
    .service-item-tree-canvas-node-title small,
    .service-item-tree-tray-item span,
    .service-item-tree-inspector .muted,
    .mobile-work-order-hero p,
    .mobile-work-order-section-heading p,
    .mobile-work-order-customer p,
    .mobile-work-order-line-card p,
    .mobile-work-order-line-timer p,
    .mobile-work-order-action span,
    .mobile-work-order-command-card span,
    .mobile-work-order-checklist-next span,
    .mobile-work-order-checklist-item span,
    .mobile-work-order-checklist-status span,
    .mobile-work-order-command-card small,
    .mobile-work-order-checklist-next small,
    .mobile-work-order-checklist-item small,
    .mobile-work-order-advanced-task small,
    .mobile-work-order-advanced-task p,
    .customer-profile-shell .related-summary-card span,
    .customer-profile-shell .related-summary-card p,
    .customer-profile-shell .section-summary-card span,
    .customer-profile-shell .section-summary-card p,
    .record-main.layout-grid .related-summary-card span,
    .record-main.layout-grid .related-summary-card p,
    .premium-portal-metric p,
    .square-capability-item small,
    .work-order-production-label small,
    .work-order-production-drillback span,
    .work-order-production-timeline-event small,
    .work-order-timer-visibility-heading p,
    .work-order-timer-visibility-row span,
    .work-order-timer-visibility-row small
),
.app-shell.theme-dark :where(
    .service-item-command-summary span,
    .service-item-card-subtitle,
    .service-item-tree-root span,
    .service-item-tree-root small,
    .service-item-tree-node-main small,
    .service-item-tree-canvas-node-title small,
    .service-item-tree-tray-item span,
    .service-item-tree-inspector .muted,
    .mobile-work-order-hero p,
    .mobile-work-order-section-heading p,
    .mobile-work-order-customer p,
    .mobile-work-order-line-card p,
    .mobile-work-order-line-timer p,
    .mobile-work-order-action span,
    .mobile-work-order-command-card span,
    .mobile-work-order-checklist-next span,
    .mobile-work-order-checklist-item span,
    .mobile-work-order-checklist-status span,
    .mobile-work-order-command-card small,
    .mobile-work-order-checklist-next small,
    .mobile-work-order-checklist-item small,
    .mobile-work-order-advanced-task small,
    .mobile-work-order-advanced-task p,
    .customer-profile-shell .related-summary-card span,
    .customer-profile-shell .related-summary-card p,
    .customer-profile-shell .section-summary-card span,
    .customer-profile-shell .section-summary-card p,
    .record-main.layout-grid .related-summary-card span,
    .record-main.layout-grid .related-summary-card p,
    .premium-portal-metric p,
    .square-capability-item small,
    .work-order-production-label small,
    .work-order-production-drillback span,
    .work-order-production-timeline-event small,
    .work-order-timer-visibility-heading p,
    .work-order-timer-visibility-row span,
    .work-order-timer-visibility-row small
) {
    color: var(--muted);
}

.app-shell.theme-medium :where(.service-item-tree-drag-handle, .service-item-tree-badges span, .setup-badge, .mobile-work-order-mode-selector a:not(.is-active), .mobile-work-order-text-link, .customer-profile-shell .related-summary-card a:not(.btn), .record-main.layout-grid .related-summary-card a:not(.btn), .premium-portal-metric span),
.app-shell.theme-dark :where(.service-item-tree-drag-handle, .service-item-tree-badges span, .setup-badge, .mobile-work-order-mode-selector a:not(.is-active), .mobile-work-order-text-link, .customer-profile-shell .related-summary-card a:not(.btn), .record-main.layout-grid .related-summary-card a:not(.btn), .premium-portal-metric span) {
    background: var(--theme-input-bg);
    border-color: var(--border);
    color: var(--primary-dark);
}

.app-shell.theme-medium :where(.service-item-tree-level, .service-item-tree-node::before),
.app-shell.theme-dark :where(.service-item-tree-level, .service-item-tree-node::before) {
    border-color: var(--border);
}

.app-shell.theme-medium .service-item-tree-node::before,
.app-shell.theme-dark .service-item-tree-node::before {
    background: var(--border);
}

.app-shell.theme-medium .service-item-tree-line,
.app-shell.theme-dark .service-item-tree-line {
    stroke: var(--border-strong);
}

/* Appearance theme Service Items list v2 parity (catalog summary/cards render with data-operational-ui="v2") */
.app-shell.theme-medium .operational-list-service-items[data-operational-ui="v2"] .service-item-command-summary,
.app-shell.theme-medium .operational-list-service-items[data-operational-ui="v2"] .service-item-command-summary article,
.app-shell.theme-medium .operational-list-service-items[data-operational-ui="v2"] .service-item-catalog-card,
.app-shell.theme-dark .operational-list-service-items[data-operational-ui="v2"] .service-item-command-summary,
.app-shell.theme-dark .operational-list-service-items[data-operational-ui="v2"] .service-item-command-summary article,
.app-shell.theme-dark .operational-list-service-items[data-operational-ui="v2"] .service-item-catalog-card {
    background: var(--theme-card-bg);
    border-color: var(--border);
    box-shadow: var(--shadow-soft);
    color: var(--text);
}

.app-shell.theme-medium .operational-list-service-items[data-operational-ui="v2"] .service-item-card-photo,
.app-shell.theme-medium .operational-list-service-items[data-operational-ui="v2"] .service-item-card-meta span,
.app-shell.theme-dark .operational-list-service-items[data-operational-ui="v2"] .service-item-card-photo,
.app-shell.theme-dark .operational-list-service-items[data-operational-ui="v2"] .service-item-card-meta span {
    background: var(--theme-soft-bg);
    border-color: var(--border);
    color: var(--muted);
}

.app-shell.theme-medium .operational-list-service-items[data-operational-ui="v2"] .service-item-command-summary strong,
.app-shell.theme-medium .operational-list-service-items[data-operational-ui="v2"] .service-item-card-title a,
.app-shell.theme-dark .operational-list-service-items[data-operational-ui="v2"] .service-item-command-summary strong,
.app-shell.theme-dark .operational-list-service-items[data-operational-ui="v2"] .service-item-card-title a {
    color: var(--heading);
}

.app-shell.theme-medium .operational-list-service-items[data-operational-ui="v2"] .service-item-command-summary span,
.app-shell.theme-medium .operational-list-service-items[data-operational-ui="v2"] .service-item-card-subtitle,
.app-shell.theme-dark .operational-list-service-items[data-operational-ui="v2"] .service-item-command-summary span,
.app-shell.theme-dark .operational-list-service-items[data-operational-ui="v2"] .service-item-card-subtitle {
    color: var(--muted);
}

/* Appearance theme Service Item profile/cleanup/lineage coverage */
.app-shell.theme-medium :where(.service-item-profile-photo, .service-item-cleanup-card),
.app-shell.theme-dark :where(.service-item-profile-photo, .service-item-cleanup-card) {
    background: var(--theme-soft-bg);
    border-color: var(--border);
    color: var(--text);
}

.app-shell.theme-medium :where(.service-item-flag-grid span, .service-item-profile-review-actions .btn span, .service-item-advanced-review-actions .btn span, .service-item-cleanup-card em, .scheduling-dispatch-confidence-card b),
.app-shell.theme-dark :where(.service-item-flag-grid span, .service-item-profile-review-actions .btn span, .service-item-advanced-review-actions .btn span, .service-item-cleanup-card em, .scheduling-dispatch-confidence-card b) {
    color: var(--muted);
}

.app-shell.theme-medium :where(.service-item-lineage-note, .service-item-lineage-filter-notice),
.app-shell.theme-dark :where(.service-item-lineage-note, .service-item-lineage-filter-notice) {
    background: var(--theme-soft-bg);
    border-color: var(--border);
    color: var(--text);
}

/* Appearance theme form/line-editor card coverage (estimate builder, service-item forms) */
.app-shell.theme-medium :where(.form-section-card, .estimate-line-editor-card, .document-line-edit-row),
.app-shell.theme-dark :where(.form-section-card, .estimate-line-editor-card, .document-line-edit-row) {
    background: var(--theme-card-bg);
    border-color: var(--border);
    color: var(--text);
}

/* Appearance theme scheduling workspace/dispatch coverage */
.app-shell.theme-medium :where(.workspace-panel, .workspace-job-card, .workspace-stop-card, .scheduling-readiness-panel, .scheduling-readiness-card, .scheduling-dispatch-confidence-panel, .scheduling-map-provider-readiness, .mobile-dispatch-coverage-strip, .scheduling-dispatch-confidence-card, .scheduling-dispatch-confidence-link),
.app-shell.theme-dark :where(.workspace-panel, .workspace-job-card, .workspace-stop-card, .scheduling-readiness-panel, .scheduling-readiness-card, .scheduling-dispatch-confidence-panel, .scheduling-map-provider-readiness, .mobile-dispatch-coverage-strip, .scheduling-dispatch-confidence-card, .scheduling-dispatch-confidence-link) {
    background: var(--theme-card-bg);
    border-color: var(--border);
    color: var(--text);
}

.app-shell.theme-medium .scheduling-readiness-header > strong,
.app-shell.theme-dark .scheduling-readiness-header > strong {
    background: var(--theme-input-bg);
    border-color: var(--border);
    color: var(--text);
}

.app-shell.theme-medium :where(.scheduling-readiness-card span, .scheduling-dispatch-section-heading span, .job-card-body),
.app-shell.theme-dark :where(.scheduling-readiness-card span, .scheduling-dispatch-section-heading span, .job-card-body) {
    color: var(--muted);
}

.app-shell.theme-medium .workspace-job-card.scheduled,
.app-shell.theme-dark .workspace-job-card.scheduled {
    background: color-mix(in srgb, var(--theme-card-bg) 70%, #22c55e 14%);
    border-color: var(--border);
}

.app-shell.theme-dark .color-swatch span {
    border-color: var(--panel);
}

/* Appearance theme Service Item profile metric tile guard */
.app-shell[data-appearance-theme]:not([data-appearance-theme="default"]) .service-item-profile-layout[data-service-item-profile="operational"] :where(
    .service-item-duration-profile-metrics article,
    .service-item-pricing-inventory-lineage-grid article,
    .service-item-bring-list-card,
    .service-item-bring-list-empty,
    .service-item-material-card,
    .service-item-material-empty,
    .service-item-material-pricing-card,
    .service-item-material-pricing-empty,
    .service-item-inventory-planning-card,
    .service-item-inventory-planning-empty,
    .service-item-supplier-order-card,
    .service-item-supplier-order-empty,
    .service-item-material-inventory-card,
    .service-item-material-inventory-empty
) {
    background: var(--theme-soft-bg, var(--panel-soft)) ;
    border-color: var(--border) ;
    color: var(--text) ;
}

.app-shell[data-appearance-theme]:not([data-appearance-theme="default"]) .service-item-profile-layout[data-service-item-profile="operational"] :where(
    .service-item-duration-profile-heading p,
    .service-item-duration-profile-note,
    .service-item-duration-profile-metrics span,
    .service-item-pricing-inventory-lineage-grid span,
    .service-item-bring-list-card p,
    .service-item-material-card p,
    .service-item-material-pricing-card p,
    .service-item-inventory-planning-card p,
    .service-item-supplier-order-card p,
    .service-item-material-inventory-card p
) {
    color: var(--muted) ;
}

.app-shell[data-appearance-theme]:not([data-appearance-theme="default"]) .service-item-profile-layout[data-service-item-profile="operational"] :where(
    .service-item-duration-profile-state > span:first-child,
    .service-item-duration-profile-metrics strong,
    .service-item-pricing-inventory-lineage-grid strong,
    .service-item-bring-list-card strong,
    .service-item-material-card strong,
    .service-item-material-pricing-card strong,
    .service-item-inventory-planning-card strong,
    .service-item-supplier-order-card strong,
    .service-item-material-inventory-card strong
) {
    color: var(--heading) ;
}

.app-shell[data-appearance-theme]:not([data-appearance-theme="default"]) .service-item-advanced-build-shell :where(
    .service-item-advanced-current article,
    .service-item-advanced-card,
    .service-item-advanced-safety,
    .service-item-advanced-review-card,
    .service-item-advanced-rule-panel,
    .service-item-advanced-rule-grid article,
    .form-section-card,
    .inline-card-form,
    .detail-list div,
    .checkbox-row
) {
    background: var(--theme-soft-bg, var(--panel-soft)) ;
    border-color: var(--border) ;
    color: var(--text) ;
}

.app-shell[data-appearance-theme]:not([data-appearance-theme="default"]) .service-item-advanced-build-shell :where(
    .service-item-advanced-card h2,
    .service-item-advanced-safety h2,
    .service-item-advanced-rule-panel h2,
    .service-item-advanced-current strong,
    .service-item-advanced-rule-grid strong,
    .detail-list dt,
    strong
) {
    color: var(--heading) ;
}

.app-shell[data-appearance-theme]:not([data-appearance-theme="default"]) .service-item-advanced-build-shell :where(
    .service-item-advanced-card p,
    .service-item-advanced-safety p,
    .service-item-advanced-safety li,
    .service-item-advanced-rule-panel p,
    .service-item-advanced-current span,
    .service-item-advanced-rule-grid span,
    .detail-list dd,
    .muted,
    small
) {
    color: var(--muted) ;
}

/* Appearance theme selected-layout nested surface guard */
.app-shell[data-appearance-theme]:not([data-appearance-theme="default"]) :where(
    .work-order-detail-shell[data-operational-ui="v1"] .work-order-command-center,
    .work-order-detail-shell[data-operational-ui="v1"] .work-order-office-closeout-status,
    .work-order-detail-shell[data-operational-ui="v1"] .work-order-closeout-checklist,
    .work-order-detail-shell[data-operational-ui="v1"] .work-order-production-completion-card,
    .work-order-detail-shell[data-operational-ui="v1"] .work-order-command-grid,
    .work-order-detail-shell[data-operational-ui="v1"] .work-order-command-grid article,
    .work-order-detail-shell[data-operational-ui="v1"] .work-order-office-closeout-pills,
    .work-order-detail-shell[data-operational-ui="v1"] .work-order-office-closeout-pill,
    .work-order-detail-shell[data-operational-ui="v1"] .metric-strip,
    .work-order-detail-shell[data-operational-ui="v1"] .metric-strip article,
    .work-order-detail-shell[data-operational-ui="v1"] .line-item-flow-card,
    .work-order-detail-shell[data-operational-ui="v1"] .work-order-lower-workspace,
    .work-order-detail-shell[data-operational-ui="v1"] .work-order-primary-column,
    .work-order-detail-shell[data-operational-ui="v1"] .work-order-side-column,
    .scheduling-workspace .help-panel,
    .scheduling-workspace .scheduling-readiness-panel,
    .scheduling-workspace .scheduling-readiness-card,
    .scheduling-workspace .workspace-panel,
    .scheduling-workspace .workspace-job-card,
    .scheduling-workspace .workspace-stop-card,
    .scheduling-workspace .create-route-group-form,
    .scheduling-workspace .route-group-builder,
    .scheduling-workspace .route-group-card,
    .scheduling-workspace .workspace-route-group,
    .scheduling-workspace .schedule-board,
    .admin-form,
    .impersonation-controls,
    .permission-module-group,
    .permission-help-toolbar,
    .permission-search-toolbar,
    .permission-fieldset,
    .permission-fieldset details,
    .checkbox-row,
    .quick-permissions-panel
) {
    background: var(--theme-card-bg, var(--panel)) ;
    border-color: var(--border) ;
    box-shadow: var(--shadow-soft, var(--shadow)) ;
    color: var(--text) ;
}

.app-shell[data-appearance-theme]:not([data-appearance-theme="default"]) :where(
    .work-order-detail-shell[data-operational-ui="v1"] .work-order-command-grid article,
    .work-order-detail-shell[data-operational-ui="v1"] .work-order-office-closeout-pill,
    .work-order-detail-shell[data-operational-ui="v1"] .metric-strip article,
    .scheduling-workspace .scheduling-readiness-card,
    .scheduling-workspace .workspace-job-card,
    .scheduling-workspace .workspace-stop-card,
    .scheduling-workspace .route-group-card,
    .scheduling-workspace .workspace-route-group,
    .admin-form .form-subsection,
    .admin-form .permission-module-group,
    .admin-form .checkbox-row,
    .admin-form .permission-fieldset,
    .admin-form .permission-fieldset details
) {
    background: var(--theme-soft-bg, var(--panel-soft)) ;
    border-color: var(--border) ;
    color: var(--text) ;
}

.app-shell[data-appearance-theme]:not([data-appearance-theme="default"]) :where(
    .work-order-detail-shell[data-operational-ui="v1"] .work-order-command-grid strong,
    .work-order-detail-shell[data-operational-ui="v1"] .work-order-office-closeout-pill strong,
    .work-order-detail-shell[data-operational-ui="v1"] .metric-strip strong,
    .scheduling-workspace .scheduling-readiness-card strong,
    .scheduling-workspace .workspace-job-card strong,
    .scheduling-workspace .workspace-stop-card strong,
    .scheduling-workspace .route-group-card strong,
    .admin-form strong,
    .admin-form legend
) {
    color: var(--heading) ;
}

.app-shell[data-appearance-theme]:not([data-appearance-theme="default"]) :where(
    .work-order-detail-shell[data-operational-ui="v1"] .work-order-command-grid span,
    .work-order-detail-shell[data-operational-ui="v1"] .work-order-command-grid small,
    .work-order-detail-shell[data-operational-ui="v1"] .work-order-office-closeout-pill span,
    .work-order-detail-shell[data-operational-ui="v1"] .metric-strip span,
    .scheduling-workspace .scheduling-readiness-card span,
    .scheduling-workspace .scheduling-readiness-card small,
    .scheduling-workspace .workspace-job-card span,
    .scheduling-workspace .workspace-job-card small,
    .scheduling-workspace .workspace-stop-card span,
    .scheduling-workspace .workspace-stop-card small,
    .scheduling-workspace .route-group-card span,
    .scheduling-workspace .route-group-card small,
    .admin-form small,
    .admin-form .muted
) {
    color: var(--muted) ;
}

/* Appearance theme generic staff-shell final guard */
.app-shell[data-appearance-theme]:not([data-appearance-theme="default"]) {
    background: var(--theme-app-bg, var(--bg)) ;
    color: var(--text) ;
}

.app-shell[data-appearance-theme]:not([data-appearance-theme="default"]) :is(.main-content) {
    color: var(--text) ;
}

.app-shell[data-appearance-theme]:not([data-appearance-theme="default"]) :is(
    .global-topbar,
    .bottom-nav-shell,
    .app-sidebar,
    .account-area-top,
    .account-area-sidebar,
    .mobile-app-bar,
    .top-nav.grouped-nav,
    .side-nav,
    .nav-dropdown,
    .toolbar-menu-panel,
    .admin-tabs,
    .manage-menu,
    .record-more,
    .record-more > div,
    .record-tabs,
    .mobile-nav-panel,
    .card-layout-menu
) {
    background: var(--theme-topbar-bg, var(--panel)) ;
    border-color: var(--border) ;
    box-shadow: var(--shadow-soft, var(--shadow)) ;
    color: var(--text) ;
}

.app-shell[data-appearance-theme]:not([data-appearance-theme="default"]) :is(.app-sidebar) {
    background: var(--sidebar) ;
}

.app-shell[data-appearance-theme]:not([data-appearance-theme="default"]) :is(.nav-link, .nav-group-label, .admin-tabs a, .btn-subtle, .link-button, .button-link, .secondary-button, .btn-secondary, .btn-toolbar, .sitewide-pagination-button) {
    background: var(--theme-button-subtle-bg, var(--panel-soft)) ;
    border-color: var(--border) ;
    color: var(--theme-button-subtle-text, var(--primary-dark)) ;
}

.app-shell[data-appearance-theme]:not([data-appearance-theme="default"]) :is(.nav-link:hover, .nav-link.is-active, .nav-group-label:hover, .nav-group-label.is-active, .admin-tabs a:hover, .admin-tabs a.active, .btn-subtle:hover, .link-button:hover, .button-link:hover, .secondary-button:hover, .btn-secondary:hover, .btn-toolbar:hover, .sitewide-pagination-button:hover) {
    background: var(--theme-menu-hover-bg, var(--panel-soft)) ;
    border-color: var(--primary) ;
    color: var(--primary-dark) ;
}

.app-shell[data-appearance-theme]:not([data-appearance-theme="default"]) :is(.app-sidebar .nav-link, .app-sidebar .nav-group-label, .side-nav .nav-link, .side-nav .nav-group-label) {
    background: transparent ;
    color: #dbeafe ;
}

.app-shell[data-appearance-theme]:not([data-appearance-theme="default"]) :is(.app-sidebar .nav-link:hover, .app-sidebar .nav-link.is-active, .app-sidebar .nav-group-label:hover, .app-sidebar .nav-group-label.is-active, .side-nav .nav-link:hover, .side-nav .nav-link.is-active, .side-nav .nav-group-label:hover, .side-nav .nav-group-label.is-active) {
    background: rgba(255, 255, 255, .12) ;
    color: #ffffff ;
}

.app-shell[data-appearance-theme]:not([data-appearance-theme="default"]) :is(
    .page-header,
    .module-page-header,
    .detail-page-header,
    .record-header,
    .module-intro,
    .card,
    .ui-panel,
    .empty-state,
    .sub-card,
    .placeholder-card,
    .form-subsection,
    .inline-card-form,
    .layout-card,
    .customer-list-card,
    .customer-list-shell,
    .customer-profile-shell,
    .leads-shell,
    .operational-module-shell,
    .operational-list-shell,
    .operational-detail-shell,
    .record-layout-shell,
    .record-main,
    .record-detail-card,
    .summary-panel,
    .right-summary-panel,
    .summary-card,
    .operational-table-card,
    .table-card,
    .activity-item,
    .deployment-status-grid,
    .status-card,
    .help-panel,
    .permission-compare-panel,
    .quick-permissions-panel,
    .permission-health-grid article,
    .permission-health-lists section,
    .metric-list div,
    .category-card,
    .report-card-v3,
    .report-metric-link,
    .sitewide-pagination,
    .operational-filter-toolbar,
    .filter-toolbar,
    .customer-filters,
    .status-tabs,
    .view-toggle,
    .operational-bulk-toolbar,
    .metric-strip,
    .work-order-command-summary,
    .service-item-command-summary,
    .service-item-command-summary article,
    .work-order-field-flow-guide,
    .work-order-field-flow-step,
    .work-order-field-flow-exception,
    .work-order-mobile-safety-grid,
    .work-order-mobile-safety-grid span,
    .service-item-catalog-card,
    .pipeline-column,
    .pipeline-card,
    .lead-customer-message,
    .calendar-module-panel,
    .calendar-day-cell,
    .calendar-work-order-pill,
    .calendar-workspace-link,
    .calendar-day-dialog-work-card,
    .clock-day-control-panel,
    .clock-day-action-card,
    .clock-review-action-form,
    .clock-crew-review-panel,
    .service-item-tree-root,
    .service-item-tree-canvas-wrap,
    .service-item-tree-tray,
    .service-item-tree-inspector,
    .service-item-tree-canvas-node,
    .mobile-work-order-card,
    .mobile-work-order-command-card,
    .mobile-work-order-section,
    .mobile-work-order-line-card,
    .mobile-work-order-line-timer,
    .mobile-work-order-compact-form,
    .mobile-work-order-action,
    .mobile-work-order-checklist-next,
    .mobile-work-order-checklist-status,
    .mobile-work-order-checklist-item,
    .mobile-work-order-advanced-task,
    .mobile-document-customer,
    .mobile-document-note,
    .mobile-document-lines,
    .mobile-document-line,
    .mobile-document-advanced-panel,
    .document-readiness-panel,
    .work-order-command-card,
    .work-order-closeout-item,
    .work-order-production-completion-card,
    .work-order-production-label,
    .work-order-production-drillback,
    .work-order-production-timeline-event,
    .work-order-line-card,
    .work-order-line-card-timer,
    .work-order-line-total,
    .work-order-field-flow-guide,
    .work-order-field-flow-step,
    .work-order-field-flow-exception,
    .work-order-mobile-safety-grid,
    .work-order-mobile-safety-grid span,
    .line-timer-rollup-metric,
    .work-order-assignment-card,
    .employee-checkbox-group,
    .communication-actions-card,
    .work-order-direct-schedule-form,
    .work-order-timer-visibility,
    .work-order-timer-visibility-row,
    .related-summary-card,
    .section-summary-card,
    .premium-portal-metric,
    .estimate-review-link-card,
    .paid-feature-card,
    .paid-feature-platform-billing-card,
    .paid-ui-preferences-card,
    .paid-branding-preferences-card,
    .billing-revenue-readiness-card,
    .integrations-api-readiness-card,
    .marketing-web-readiness-card,
    .paid-operations-readiness-card,
    .paid-operations-group,
    .square-payment-connection-card,
    .square-location-tools,
    .square-capability-roadmap,
    .square-capability-item,
    .square-advanced-controls,
    .square-advanced-grid > div,
    .square-terminal-device-list li,
    .crm-document,
    .crm-document.internal-document,
    .document-screen-actions,
    .document-summary > div,
    .document-card,
    .invoice-document-extra,
    .document-handoff-summary span,
    .document-line-table-wrap,
    .document-line-card-list,
    .document-line-card,
    .document-photo-grid figure,
    .document-totals,
    .document-approval-card,
    .document-contact-dialog,
    .document-contact-form,
    .document-footer,
    .business-only-payment-history,
    .square-invoice-payment-card,
    .invoice-pay-now-panel,
    .invoice-other-payment-form,
    .invoice-payment-timeline,
    .invoice-payment-timeline-item,
    .square-refund-reconciliation-panel,
    .square-refund-reconciliation-grid > div,
    .document-preview-card,
    .document-preview-card .document-header,
    .document-preview-card .company-document-header,
    .document-preview-card .document-address-grid,
    .document-preview-card .document-lines,
    .document-preview-card .document-total,
    .document-preview-card .document-message,
    .inline-form,
    .manage-menu > div,
    .grand-total,
    .service-selector-preview,
    .service-selector-preview-copy,
    .service-selector-photo-placeholder,
    .service-selector-metadata-grid > div,
    .estimate-review-status-card,
    .invoice-payments-collections-card,
    .invoice-payments-collections-link,
    .service-item-tree-entitlement,
    .service-item-tree-quick-add,
    .service-item-tree-preview-panel,
    .customer-work-snapshot-grid article
) {
    background: var(--theme-card-bg, var(--panel));
    border-color: var(--border);
    box-shadow: var(--shadow-soft, var(--shadow));
    color: var(--text);
}

.app-shell[data-appearance-theme]:not([data-appearance-theme="default"]) :is(.module-intro) {
    background: linear-gradient(135deg, var(--sidebar), var(--primary));
    color: #ffffff;
}

.app-shell[data-appearance-theme]:not([data-appearance-theme="default"]) :is(
    .module-intro p,
    .module-intro small,
    .module-intro .muted,
    .module-intro .eyebrow
) {
    color: color-mix(in srgb, #ffffff 82%, var(--primary));
}

.app-shell[data-appearance-theme]:not([data-appearance-theme="default"]) :is(
    .form-section-card,
    .estimate-line-editor-card,
    .detail-list div,
    .permission-search-toolbar,
    .permission-help-toolbar,
    .checkbox-row,
    .permission-fieldset,
    .permission-fieldset details,
    .card-toolbar,
    .layout-controls,
    .pipeline-column-closed,
    .pipeline-card--unviewed,
    .service-item-card-photo,
    .service-item-card-meta span,
    .calendar-day-blank,
    .calendar-day-outside-month,
    .calendar-day-metrics span,
    .mobile-work-order-status-row > span,
    .mobile-work-order-standard-meta span,
    .mobile-work-order-field-list dl > div,
    .mobile-work-order-note-box,
    .mobile-work-order-empty,
    .mobile-work-order-line-timer-metrics span,
    .work-order-timer-visibility-pill,
    .work-order-line-stats span,
    .work-order-line-photo,
    .work-order-line-photo-placeholder,
    .selector-chip-row span,
    .work-order-crew-chip,
    .line-timer-readiness-status,
    .invoice-payment-method-option,
    .service-item-tree-legend-pill,
    .service-item-tree-legend-warning,
    .square-capability-meta span,
    .document-logo,
    .document-logo-placeholder,
    .document-photo-placeholder,
    .copy-field
) {
    background: var(--theme-soft-bg, var(--panel-soft));
    border-color: var(--border);
    color: var(--text);
}

.app-shell[data-appearance-theme]:not([data-appearance-theme="default"]) :is(
    h1,
    h2,
    h3,
    h4,
    .page-header h1,
    .module-page-header h1,
    .detail-page-header h1,
    .card h2,
    .card h3,
    .metric-card h2,
    .record-header h2,
    .dashboard-cards h2,
    .dashboard-cards h3,
    .metric-value,
    .related-summary-card strong,
    .section-summary-card strong,
    .detail-list dt,
    .detail-list dd,
    strong,
    b,
    .document-line-name,
    .document-total strong
) {
    color: var(--heading);
}

.app-shell[data-appearance-theme]:not([data-appearance-theme="default"]) :is(
    p,
    small,
    .muted,
    .muted-note,
    .form-instructions,
    .field-help,
    label small,
    .account-identity small,
    .activity-meta,
    .sitewide-pagination-summary,
    .deployment-status-grid dt,
    .document-line-description,
    .document-message p,
    .document-footer,
    .document-total-note,
    .document-line-card dt,
    .document-photo-grid figcaption,
    .document-totals span,
    .bulk-toolbar-help,
    .bulk-action-panel-title
) {
    color: var(--muted);
}

.app-shell[data-appearance-theme]:not([data-appearance-theme="default"]) :is(
    .eyebrow,
    .main-content a:not(.nav-link):not(.nav-group-label):not(.btn):not(.button-link):not(.link-button):not(.primary-action):not(.deployment-status-badge),
    .inline-editor summary,
    .account-company-link,
    .report-metric-link span,
    .data-table a:not(.btn),
    .customer-table a:not(.btn),
    .status-tabs a,
    .bulk-action-link
) {
    color: var(--primary-dark);
}

.app-shell[data-appearance-theme]:not([data-appearance-theme="default"]) :is(label, th, td) {
    color: var(--text);
}

.app-shell[data-appearance-theme]:not([data-appearance-theme="default"]) :is(input, select, textarea, .copy-field) {
    background: var(--theme-input-bg, var(--panel));
    border-color: var(--border);
    color: var(--text);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .08);
}

.app-shell[data-appearance-theme]:not([data-appearance-theme="default"]) input::placeholder,
.app-shell[data-appearance-theme]:not([data-appearance-theme="default"]) textarea::placeholder {
    color: var(--muted);
    opacity: .82;
}

.app-shell[data-appearance-theme]:not([data-appearance-theme="default"]) :is(.table-scroll, .table-responsive, .table-wrap, .data-transfer-table-scroll, .activity-log-table-scroll, .company-template-table-scroll, table, .data-table, .customer-table, .document-lines) {
    background: var(--theme-card-bg, var(--panel));
    border-color: var(--border);
    color: var(--text);
}

.app-shell[data-appearance-theme]:not([data-appearance-theme="default"]) :is(th, .data-table th, .customer-table th, .document-lines th) {
    background: var(--theme-table-head-bg, var(--panel-soft));
    border-bottom-color: var(--border-strong);
    color: var(--muted);
}

.app-shell[data-appearance-theme]:not([data-appearance-theme="default"]) :is(td, .data-table td, .customer-table td, .document-lines td) {
    border-bottom-color: var(--border);
    color: var(--text);
}

.app-shell[data-appearance-theme]:not([data-appearance-theme="default"]) :is(tbody tr, .data-table tbody tr, .customer-table tbody tr) {
    background: var(--theme-card-bg, var(--panel));
}

.app-shell[data-appearance-theme]:not([data-appearance-theme="default"]) :is(tbody tr:nth-child(even), .data-table tbody tr:nth-child(even), .customer-table tbody tr:nth-child(even)) {
    background: var(--theme-row-alt-bg, var(--theme-soft-bg, var(--panel-soft)));
}

.app-shell[data-appearance-theme]:not([data-appearance-theme="default"]) :is(tbody tr:hover, .data-table tbody tr:hover, .customer-table tbody tr:hover) {
    background: var(--theme-row-hover-bg, var(--theme-soft-bg, var(--panel-soft)));
}

/* Appearance theme staff hard specificity guard */
.app-shell[data-appearance-theme]:not([data-appearance-theme="default"]) :is(
    .page-header,
    .module-page-header,
    .detail-page-header,
    .record-header,
    .module-intro,
    .card,
    .ui-panel,
    .customer-list-shell,
    .customer-profile-shell,
    .leads-shell,
    .operational-module-shell,
    .operational-list-shell,
    .operational-detail-shell,
    .record-layout-shell,
    .record-main,
    .record-detail-card,
    .summary-panel,
    .right-summary-panel,
    .summary-card,
    .operational-table-card,
    .activity-item,
    .status-card,
    .help-panel,
    .layout-card,
    .operational-filter-toolbar,
    .filter-toolbar,
    .status-tabs,
    .operational-bulk-toolbar,
    .metric-strip,
    .service-item-command-summary,
    .service-item-command-summary article,
    .service-item-catalog-card,
    .pipeline-column,
    .pipeline-card,
    .calendar-module-panel,
    .calendar-day-cell,
    .calendar-work-order-pill,
    .calendar-workspace-link,
    .clock-day-control-panel,
    .clock-day-action-card,
    .clock-review-action-form,
    .service-item-tree-root,
    .service-item-tree-canvas-wrap,
    .service-item-tree-tray,
    .service-item-tree-inspector,
    .service-item-tree-canvas-node,
    .mobile-work-order-card,
    .mobile-work-order-command-card,
    .mobile-work-order-section,
    .mobile-work-order-line-card,
    .mobile-work-order-action,
    .mobile-work-order-checklist-next,
    .mobile-work-order-checklist-status,
    .mobile-work-order-checklist-item,
    .mobile-work-order-advanced-task,
    .mobile-document-customer,
    .mobile-document-note,
    .mobile-document-lines,
    .mobile-document-line,
    .mobile-document-advanced-panel,
    .document-readiness-panel,
    .work-order-command-card,
    .work-order-closeout-item,
    .work-order-production-completion-card,
    .work-order-production-label,
    .work-order-production-drillback,
    .work-order-production-timeline-event,
    .work-order-line-card,
    .work-order-line-card-timer,
    .work-order-line-total,
    .line-timer-rollup-metric,
    .work-order-assignment-card,
    .employee-checkbox-group,
    .communication-actions-card,
    .work-order-direct-schedule-form,
    .work-order-timer-visibility,
    .work-order-timer-visibility-row,
    .related-summary-card,
    .section-summary-card,
    .premium-portal-metric,
    .estimate-review-link-card,
    .paid-feature-card,
    .paid-feature-platform-billing-card,
    .paid-ui-preferences-card,
    .paid-branding-preferences-card,
    .billing-revenue-readiness-card,
    .integrations-api-readiness-card,
    .marketing-web-readiness-card,
    .paid-operations-readiness-card,
    .paid-operations-group,
    .square-payment-connection-card,
    .square-location-tools,
    .square-capability-roadmap,
    .square-capability-item,
    .square-advanced-controls,
    .square-advanced-grid > div,
    .square-terminal-device-list li,
    .crm-document,
    .crm-document.internal-document,
    .document-screen-actions,
    .document-summary > div,
    .document-card,
    .invoice-document-extra,
    .document-handoff-summary span,
    .document-line-table-wrap,
    .document-line-card-list,
    .document-line-card,
    .document-photo-grid figure,
    .document-totals,
    .document-approval-card,
    .document-contact-dialog,
    .document-contact-form,
    .document-footer,
    .business-only-payment-history,
    .square-invoice-payment-card,
    .invoice-pay-now-panel,
    .invoice-other-payment-form,
    .invoice-payment-timeline,
    .invoice-payment-timeline-item,
    .square-refund-reconciliation-panel,
    .square-refund-reconciliation-grid > div,
    .document-preview-card,
    .document-preview-card .document-header,
    .document-preview-card .company-document-header,
    .document-preview-card .document-address-grid,
    .document-preview-card .document-lines,
    .document-preview-card .document-total,
    .document-preview-card .document-message,
    .inline-form,
    .grand-total,
    .service-selector-preview,
    .service-selector-preview-copy,
    .service-selector-photo-placeholder,
    .service-selector-metadata-grid > div,
    .estimate-review-status-card,
    .invoice-payments-collections-card,
    .invoice-payments-collections-link,
    .service-item-tree-entitlement,
    .service-item-tree-quick-add,
    .service-item-tree-preview-panel,
    .customer-work-snapshot-grid article
) {
    background: var(--theme-card-bg, var(--panel)) ;
    border-color: var(--border) ;
    box-shadow: var(--shadow-soft, var(--shadow)) ;
    color: var(--text) ;
}

.app-shell[data-appearance-theme]:not([data-appearance-theme="default"]) :is(
    .document-handoff-summary span,
    .invoice-payment-method-option,
    .work-order-line-photo,
    .work-order-line-photo-placeholder
) {
    background: var(--theme-soft-bg, var(--panel-soft)) ;
    border-color: var(--border) ;
    color: var(--text) ;
}

.app-shell[data-appearance-theme]:not([data-appearance-theme="default"]) :is(
    .document-preview-card strong,
    .document-preview-card b,
    .document-preview-card h1,
    .document-preview-card h2,
    .document-preview-card h3,
    .document-preview-card .document-line-name,
    .document-preview-card .document-total strong,
    .crm-document.internal-document strong,
    .crm-document.internal-document b,
    .crm-document.internal-document h1,
    .crm-document.internal-document h2,
    .crm-document.internal-document h3,
    .crm-document.internal-document .document-line-name,
    .crm-document.internal-document .document-totals strong
) {
    color: var(--heading) ;
}

.app-shell[data-appearance-theme]:not([data-appearance-theme="default"]) :is(
    .document-preview-card p,
    .document-preview-card small,
    .document-preview-card .document-line-description,
    .document-preview-card .document-message p,
    .crm-document.internal-document p,
    .crm-document.internal-document small,
    .crm-document.internal-document .muted,
    .crm-document.internal-document .document-line-description,
    .crm-document.internal-document .document-footer,
    .crm-document.internal-document .document-total-note,
    .crm-document.internal-document .document-line-card dt,
    .crm-document.internal-document .document-photo-grid figcaption,
    .crm-document.internal-document .document-totals span
) {
    color: var(--muted) ;
}

.app-shell[data-appearance-theme]:not([data-appearance-theme="default"]) :is(
    .table-scroll,
    .table-responsive,
    .table-wrap,
    table,
    .data-table,
    .customer-table,
    .document-lines,
    .document-line-table
) {
    background: var(--theme-card-bg, var(--panel)) ;
    border-color: var(--border) ;
    color: var(--text) ;
}

.app-shell[data-appearance-theme]:not([data-appearance-theme="default"]) :is(
    input,
    select,
    textarea,
    .copy-field
) {
    background: var(--theme-input-bg, var(--panel)) ;
    border-color: var(--border) ;
    color: var(--text) ;
}

.app-shell[data-appearance-theme]:not([data-appearance-theme="default"]) :is(.btn-primary, .primary-action, button[type="submit"]:not(.btn-subtle):not(.btn-danger):not(.btn-toolbar), .sitewide-pagination-button.is-active) {
    background: var(--primary) ;
    border-color: var(--primary) ;
    color: #ffffff ;
}

.app-shell[data-appearance-theme]:not([data-appearance-theme="default"]) :is(.btn-danger, .danger-button, .logout-button) {
    background: var(--theme-alert-danger-bg, #fee2e2) ;
    border-color: var(--danger-dark, #b91c1c) ;
    color: var(--theme-alert-danger-text, #991b1b) ;
}

.app-shell[data-appearance-theme]:not([data-appearance-theme="default"]) :is(.alert-info, .nav-foundation-note) {
    background: var(--theme-alert-info-bg, #e0edff) ;
    border-color: color-mix(in srgb, var(--primary) 36%, var(--border)) ;
    color: var(--theme-alert-info-text, var(--primary-dark)) ;
}

.app-shell[data-appearance-theme]:not([data-appearance-theme="default"]) :is(.alert-warning, .alert-foundation, .warning, .warning-button, .duplicate-warning, .permission-help-card) {
    background: var(--theme-alert-warning-bg, #fff7df) ;
    border-color: color-mix(in srgb, #f59e0b 42%, var(--border)) ;
    color: var(--theme-alert-warning-text, #8a4b05) ;
}

.app-shell[data-appearance-theme]:not([data-appearance-theme="default"]) :is(.alert-error, .alert-danger, .form-error) {
    background: var(--theme-alert-danger-bg, #fee2e2) ;
    border-color: color-mix(in srgb, var(--danger, #ef4444) 44%, var(--border)) ;
    color: var(--theme-alert-danger-text, #991b1b) ;
}

.app-shell[data-appearance-theme]:not([data-appearance-theme="default"]) :is(.alert-success, .status-card.success) {
    background: var(--theme-alert-success-bg, #dcfce7) ;
    border-color: color-mix(in srgb, #22c55e 44%, var(--border)) ;
    color: var(--theme-alert-success-text, #166534) ;
}

.app-shell[data-appearance-theme]:not([data-appearance-theme="default"]) :is(.status-active, .status-approved, .status-paid, .status-completed, .status-converted, .status-ready) {
    background: var(--status-success-bg, #dcfce7) ;
    border-color: color-mix(in srgb, #22c55e 40%, var(--border)) ;
    color: var(--status-success-text, #166534) ;
}

.app-shell[data-appearance-theme]:not([data-appearance-theme="default"]) :is(.status-sent, .status-scheduled, .status-in-progress, .status-invoiced, .status-foundation, .status-draft, .status-placeholder, .status-badge-blue) {
    background: var(--status-info-bg, #dbeafe) ;
    border-color: color-mix(in srgb, var(--primary) 38%, var(--border)) ;
    color: var(--status-info-text, var(--primary-dark)) ;
}

.app-shell[data-appearance-theme]:not([data-appearance-theme="default"]) :is(.status-unscheduled, .status-unpaid, .status-overdue, .status-warning, .status-urgent, .status-open, .status-needs-more-data, .status-badge-orange) {
    background: var(--status-warning-bg, #fef3c7) ;
    border-color: color-mix(in srgb, #f59e0b 42%, var(--border)) ;
    color: var(--status-warning-text, #92400e) ;
}

.app-shell[data-appearance-theme]:not([data-appearance-theme="default"]) :is(.status-inactive, .status-paused, .status-canceled, .status-deleted, .status-coming-soon, .status-badge-gray) {
    background: var(--status-neutral-bg, #e2e8f0) ;
    border-color: var(--border) ;
    color: var(--status-neutral-text, #334155) ;
}

.app-shell[data-appearance-theme]:not([data-appearance-theme="default"]) :is(.status-denied, .status-danger, .status-badge-red) {
    background: var(--status-danger-bg, #fee2e2) ;
    border-color: color-mix(in srgb, var(--danger, #ef4444) 42%, var(--border)) ;
    color: var(--status-danger-text, #991b1b) ;
}

.app-shell[data-appearance-theme]:not([data-appearance-theme="default"]) :is(.service-item-tree-canvas, .service-item-tree-lines) {
    background: transparent;
}

.app-shell[data-appearance-theme]:not([data-appearance-theme="default"]) :is(.service-item-tree-level) {
    border-color: var(--border);
}

.app-shell[data-appearance-theme]:not([data-appearance-theme="default"]) .service-item-tree-node::before {
    background: var(--border);
    border-color: var(--border);
}

.app-shell[data-appearance-theme]:not([data-appearance-theme="default"]) .service-item-tree-line {
    stroke: var(--border-strong);
}

/* Appearance theme staff route catch-up guard */
.app-shell[data-appearance-theme]:not([data-appearance-theme="default"]) :is(
    .mobile-home-shell,
    .mobile-home-card,
    .mobile-home-arrange-controls,
    .mobile-home-arrange-controls button,
    .mobile-record-card,
    .mobile-record-fields span,
    .employee-list-card,
    .employee-related-card,
    .activity-log-mobile-card,
    .company-template-mobile-card,
    .line-timer-review-card,
    .line-timer-review-filters,
    .reports-command-center-card,
    .report-category-tab,
    .estimate-builder-readiness-strip,
    .estimate-builder-readiness-strip span,
    .estimate-line-name-combobox,
    .estimate-bulk-service-panel,
    .estimate-bulk-service-option,
    .estimate-quick-add-panel,
    .estimate-quick-add-button,
    .service-item-review-center-safety,
    .service-item-review-center-card,
    .service-item-review-center-metrics div,
    .service-item-cost-margin-review-safety,
    .service-item-cost-margin-review-metrics article,
    .service-item-cost-margin-review-card,
    .service-item-cost-margin-review-empty,
    .service-item-cost-margin-review-details div,
    .service-item-duration-readiness-review-safety,
    .service-item-duration-readiness-review-metrics article,
    .service-item-duration-readiness-review-card,
    .service-item-duration-readiness-review-empty,
    .service-item-duration-readiness-review-details div,
    .service-item-inventory-review-safety,
    .service-item-inventory-review-metrics article,
    .service-item-inventory-review-card,
    .service-item-inventory-review-empty,
    .service-item-inventory-review-details div,
    .service-item-supplier-order-review-safety,
    .service-item-supplier-order-review-metrics article,
    .service-item-supplier-order-review-card,
    .service-item-supplier-order-review-empty,
    .service-item-supplier-order-review-details div,
    .service-item-cleanup-primary,
    .service-item-bring-empty,
    .service-item-bring-form,
    .service-item-material-form,
    .service-item-material-pricing-form,
    .service-item-inventory-planning-form,
    .service-item-supplier-order-form,
    .service-item-material-inventory-form,
    .document-readiness-label,
    .document-line-snapshot-card,
    .route-sheet-safety,
    .route-sheet-filter-panel,
    .route-sheet-metric,
    .calendar-map-topbar,
    .calendar-map-day,
    .calendar-map-filter-bar,
    .calendar-map-metrics span,
    .calendar-map-legend-panel,
    .calendar-map-warning-panel,
    .calendar-map-suggestions,
    .calendar-map-address-review,
    .calendar-map-suggestion-list article,
    .calendar-map-list-panel,
    .calendar-map-canvas-panel,
    .calendar-map-work-card,
    .calendar-map-work-meta span,
    .mobile-calendar-bring-panel,
    .employee-route-header,
    .employee-route-view-tabs,
    .employee-route-view-tabs a,
    .employee-route-day-card,
    .employee-route-duration,
    .employee-route-bring-panel,
    .employee-route-work-list,
    .employee-route-map-card,
    .employee-route-map-empty
) {
    background: var(--theme-card-bg, var(--panel)) ;
    border-color: var(--border) ;
    box-shadow: var(--shadow-soft, var(--shadow)) ;
    color: var(--text) ;
}

.app-shell[data-appearance-theme]:not([data-appearance-theme="default"]) :is(
    .mobile-home-card-link,
    .mobile-home-card-title,
    .employee-list-card h3,
    .employee-list-card h3 a,
    .employee-related-card h4,
    .employee-list-card-meta dd,
    .employee-related-card-meta dd,
    .reports-command-center-card strong,
    .estimate-builder-readiness-strip strong,
    .estimate-bulk-service-option strong,
    .estimate-quick-add-button strong,
    .service-item-review-center-card-title h2,
    .service-item-review-center-metrics dd,
    .service-item-cost-margin-review-card-title h2,
    .service-item-cost-margin-review-metrics strong,
    .service-item-cost-margin-review-details dd,
    .service-item-duration-readiness-review-card-title h2,
    .service-item-duration-readiness-review-metrics strong,
    .service-item-duration-readiness-review-details dd,
    .service-item-inventory-review-card-title h2,
    .service-item-inventory-review-metrics strong,
    .service-item-inventory-review-details dd,
    .service-item-supplier-order-review-card-title h2,
    .service-item-supplier-order-review-metrics strong,
    .service-item-supplier-order-review-details dd,
    .document-readiness-label strong,
    .document-readiness-label b,
    .document-line-snapshot-card h3,
    .route-sheet-metric strong,
    .calendar-map-topbar strong,
    .calendar-map-day strong,
    .calendar-map-metrics strong,
    .calendar-map-legend-panel strong,
    .calendar-map-warning-panel strong,
    .calendar-map-suggestions strong,
    .calendar-map-address-review strong,
    .calendar-map-list-heading h2,
    .calendar-map-canvas-heading h2,
    .calendar-map-list-section h3,
    .employee-route-header h1,
    .employee-route-work-list h2,
    .employee-route-duration strong,
    .employee-route-bring-panel summary span,
    .employee-route-day-card strong
) {
    color: var(--heading) ;
}

.app-shell[data-appearance-theme]:not([data-appearance-theme="default"]) :is(
    .mobile-home-page-dots a,
    .employee-list-card-meta div,
    .employee-related-card-meta div,
    .report-category-tab:not(.active),
    .estimate-builder-readiness-strip small,
    .estimate-bulk-service-option small,
    .estimate-quick-add-button small,
    .service-item-review-center-card-title p,
    .service-item-review-center-metrics dt,
    .service-item-review-center-availability,
    .service-item-cost-margin-review-card-title p,
    .service-item-cost-margin-review-metrics span,
    .service-item-cost-margin-review-details dt,
    .service-item-duration-readiness-review-card-title p,
    .service-item-duration-readiness-review-metrics span,
    .service-item-duration-readiness-review-details dt,
    .service-item-inventory-review-card-title p,
    .service-item-inventory-review-metrics span,
    .service-item-inventory-review-details dt,
    .service-item-supplier-order-review-card-title p,
    .service-item-supplier-order-review-metrics span,
    .service-item-supplier-order-review-details dt,
    .document-readiness-label small,
    .document-line-snapshot-card p,
    .route-sheet-filter-panel p,
    .route-sheet-metric span,
    .route-sheet-metric small,
    .calendar-map-day span,
    .calendar-map-metrics small,
    .calendar-map-metrics em,
    .calendar-map-warning-panel p,
    .calendar-map-suggestions p,
    .calendar-map-address-review p,
    .calendar-map-suggestion-list span,
    .calendar-map-suggestion-list small,
    .calendar-map-list-heading p,
    .calendar-map-canvas-heading p,
    .calendar-map-work-main p,
    .calendar-map-work-main small,
    .calendar-map-work-meta span,
    .employee-route-header p,
    .employee-route-duration span,
    .employee-route-bring-panel li span
) {
    color: var(--muted) ;
}

.app-shell[data-appearance-theme]:not([data-appearance-theme="default"]) :is(
    .report-category-tab.active,
    .report-category-tab:hover,
    .report-category-tab:focus,
    .employee-route-view-tabs a.is-active,
    .calendar-map-day.is-active,
    .mobile-home-page-dots a.is-active
) {
    background: var(--primary) ;
    border-color: var(--primary) ;
    color: #ffffff ;
}

@media (max-width: 760px), (hover: none) and (pointer: coarse) {
    .app-shell[data-mobile-layout-mode="auto"] :is(.page-header, .module-page-header, .detail-page-header, .employee-route-header),
    .app-shell[data-mobile-layout-mode="mobile"] :is(.page-header, .module-page-header, .detail-page-header, .employee-route-header) {
        align-items: stretch ;
        display: grid ;
        grid-template-columns: 1fr ;
        justify-items: stretch ;
    }

    .app-shell[data-mobile-layout-mode="auto"] :is(.page-header h1, .module-page-header h1, .detail-page-header h1, .employee-route-header h1),
    .app-shell[data-mobile-layout-mode="mobile"] :is(.page-header h1, .module-page-header h1, .detail-page-header h1, .employee-route-header h1) {
        overflow-wrap: normal ;
        text-wrap: balance;
        word-break: normal ;
    }

    .app-shell[data-mobile-layout-mode="auto"] :is(.module-action-bar, .page-header .button-row, .detail-page-header .button-row, .employee-route-header .button-row),
    .app-shell[data-mobile-layout-mode="mobile"] :is(.module-action-bar, .page-header .button-row, .detail-page-header .button-row, .employee-route-header .button-row) {
        justify-content: flex-start ;
        width: 100%;
    }
}

/* Staff sweep target-size final guard */
.app-shell .toolbar-menu-panel {
    min-width: min(92vw, 12rem) ;
    overflow-wrap: normal ;
}

.app-shell .toolbar-menu-panel .btn-toolbar,
.app-shell[data-appearance-theme]:not([data-appearance-theme="default"]) .toolbar-menu-panel .btn-toolbar {
    align-items: center ;
    display: flex ;
    justify-content: flex-start ;
    line-height: 1.25 ;
    min-height: 2.75rem ;
    min-width: 8rem ;
    text-align: left ;
    white-space: nowrap ;
    width: 100% ;
}

.app-shell .toolbar-menu-panel .layout-action-symbol {
    flex: 0 0 1.25rem ;
    min-width: 1.25rem ;
    text-align: center ;
}

.app-shell .toolbar-menu-panel .layout-action-text {
    flex: 1 1 auto ;
    min-width: 0 ;
    overflow-wrap: normal ;
    white-space: normal ;
    word-break: normal ;
}

@media (max-width: 640px) {
    .app-shell .card-heading-row:has(.card-toolbar-menu[open]),
    .app-shell .layout-card:has(.card-toolbar-menu[open]) .card-heading-row {
        align-items: stretch ;
        flex-wrap: wrap ;
    }

    .app-shell .layout-card:has(.card-toolbar-menu[open]) .layout-controls,
    .app-shell .card-heading-row:has(.card-toolbar-menu[open]) .layout-controls {
        flex: 1 1 100% ;
        grid-column: 1 / -1 ;
        max-width: 100% ;
        width: 100% ;
    }

    .app-shell .card-toolbar-menu[open] {
        display: block ;
        max-width: 100% ;
        width: 100% ;
    }

    .app-shell .card-toolbar-menu[open] > summary.card-layout-toggle {
        margin-left: auto ;
    }

    .app-shell .card-toolbar-menu[open] .toolbar-menu-panel {
        left: auto ;
        max-width: 100% ;
        min-width: 0 ;
        position: static ;
        right: auto ;
        width: 100% ;
    }

    .app-shell .card-toolbar-menu[open] .toolbar-menu-panel .btn-toolbar,
    .app-shell[data-appearance-theme]:not([data-appearance-theme="default"]) .card-toolbar-menu[open] .toolbar-menu-panel .btn-toolbar {
        min-width: 0 ;
        width: 100% ;
    }
}

.app-shell .operational-bulk-toolbar button.bulk-action-link,
.app-shell .operational-bulk-toolbar button[type="submit"].bulk-action-link,
.app-shell[data-mobile-layout-mode="auto"] .operational-bulk-toolbar button.bulk-action-link,
.app-shell[data-mobile-layout-mode="auto"] .operational-bulk-toolbar button[type="submit"].bulk-action-link,
.app-shell[data-mobile-layout-mode="mobile"] .operational-bulk-toolbar button.bulk-action-link,
.app-shell[data-mobile-layout-mode="mobile"] .operational-bulk-toolbar button[type="submit"].bulk-action-link {
    align-items: center ;
    display: inline-flex ;
    line-height: 1.3 ;
    min-height: 1.5rem ;
    min-width: 2.25rem ;
    padding: .08rem 0 ;
}

.app-shell .data-table input[type="checkbox"],
.app-shell .operational-table input[type="checkbox"],
.app-shell .record-table input[type="checkbox"],
.app-shell .operational-list-table input[type="checkbox"],
.app-shell .operational-bulk-toolbar input[type="checkbox"],
.app-shell .mobile-record-select input[type="checkbox"] {
    flex: 0 0 2.25rem ;
    height: 1.5rem ;
    min-height: 1.5rem ;
    min-width: 2.25rem ;
    width: 2.25rem ;
}

/* Staff document right rail unclipped final guard */
.app-shell .operational-detail-shell[data-operational-ui="v1"] .right-summary-panel,
.app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell[data-operational-ui="v1"] .right-summary-panel,
.app-shell .work-order-detail-shell[data-operational-ui="v1"] .work-order-side-column,
.app-shell[data-mobile-layout-mode="mobile"] .work-order-detail-shell[data-operational-ui="v1"] .work-order-side-column {
    align-content: start ;
    align-self: start ;
    box-sizing: border-box ;
    display: grid ;
    gap: .85rem ;
    grid-template-columns: minmax(0, 1fr) ;
    max-height: none ;
    min-width: 0 ;
    overflow: visible ;
    padding-right: 0 ;
    position: static ;
    width: 100% ;
}

.app-shell .operational-detail-shell[data-operational-ui="v1"] .right-summary-panel :is(.card, .summary-card, .portal-admin-panel),
.app-shell .work-order-detail-shell[data-operational-ui="v1"] .work-order-side-column :is(.card, .summary-card, .portal-admin-panel) {
    box-sizing: border-box ;
    height: auto ;
    max-height: none ;
    max-width: 100% ;
    min-height: 0 ;
    min-width: 0 ;
    overflow: visible ;
    width: 100% ;
}

.app-shell .operational-detail-shell[data-operational-ui="v1"] .right-summary-panel :where(h2, h3, h4, p, small, a, code, span, strong, b),
.app-shell .work-order-detail-shell[data-operational-ui="v1"] .work-order-side-column :where(h2, h3, h4, p, small, a, code, span, strong, b) {
    max-width: 100% ;
    min-width: 0 ;
    overflow-wrap: anywhere ;
    white-space: normal;
    word-break: normal ;
}

.app-shell .operational-detail-shell[data-operational-ui="v1"] .right-summary-panel :is(.button-row, .stacked-actions, .inline-form),
.app-shell .work-order-detail-shell[data-operational-ui="v1"] .work-order-side-column :is(.button-row, .stacked-actions, .inline-form) {
    max-width: 100% ;
    min-width: 0 ;
}

/* Staff Work Order detail horizontal containment final guard */
.app-shell .work-order-detail-shell[data-operational-ui="v1"],
.app-shell .work-order-detail-shell[data-operational-ui="v1"] .document-detail-layout,
.app-shell .work-order-detail-shell[data-operational-ui="v1"] .work-order-lower-workspace,
.app-shell .work-order-detail-shell[data-operational-ui="v1"] .work-order-primary-column,
.app-shell .work-order-detail-shell[data-operational-ui="v1"] .document-main,
.app-shell .work-order-detail-shell[data-operational-ui="v1"] .document-preview-card,
.app-shell .work-order-detail-shell[data-operational-ui="v1"] .line-item-flow-card,
.app-shell .work-order-detail-shell[data-operational-ui="v1"] .timers-field-workflow-card,
.app-shell .work-order-detail-shell[data-operational-ui="v1"] .work-order-command-center,
.app-shell .work-order-detail-shell[data-operational-ui="v1"] .work-order-production-completion-card {
    box-sizing: border-box ;
    max-width: 100% ;
    min-width: 0 ;
    width: 100% ;
}

.app-shell .work-order-detail-shell[data-operational-ui="v1"] {
    overflow-x: clip ;
}

.app-shell .work-order-detail-shell[data-operational-ui="v1"] .document-preview-card[data-work-order-document-polish] > .table-scroll,
.app-shell .work-order-detail-shell[data-operational-ui="v1"] .line-item-flow-card .table-scroll,
.app-shell .work-order-detail-shell[data-operational-ui="v1"] .timers-field-workflow-card .table-scroll {
    box-sizing: border-box ;
    max-width: 100% ;
    min-width: 0 ;
    overflow-x: auto ;
    overflow-y: visible ;
    width: 100% ;
}

.app-shell .work-order-detail-shell[data-operational-ui="v1"] .document-line-service-meta,
.app-shell .work-order-detail-shell[data-operational-ui="v1"] .document-line-service-description,
.app-shell .work-order-detail-shell[data-operational-ui="v1"] .work-order-line-instructions {
    max-width: 100% ;
    min-width: 0 ;
    overflow-wrap: anywhere ;
}

@media (min-width: 1181px) {
    .app-shell:not([data-mobile-layout-mode="mobile"]) .work-order-detail-shell[data-operational-ui="v1"] .work-order-lower-workspace {
        grid-template-columns: minmax(0, 1fr) minmax(280px, min(30%, 340px)) ;
    }
}

/* Work Order detail edit unblocker: keep document lines, task cards, side forms, and timer buttons usable. */
.app-shell .work-order-detail-shell[data-operational-ui="v1"] :where(.btn, button, .status-badge) {
    hyphens: none ;
    overflow-wrap: normal ;
    word-break: normal ;
}

.app-shell .work-order-detail-shell[data-operational-ui="v1"] .status-badge {
    align-items: center ;
    display: inline-flex ;
    max-width: 100% ;
    white-space: normal ;
}

.app-shell .work-order-detail-shell[data-operational-ui="v1"] .work-order-side-column .work-order-direct-schedule-form,
.app-shell[data-mobile-layout-mode="mobile"] .work-order-detail-shell[data-operational-ui="v1"] .work-order-side-column .work-order-direct-schedule-form {
    grid-template-columns: 1fr ;
}

.app-shell .work-order-detail-shell[data-operational-ui="v1"] .work-order-side-column .work-order-direct-schedule-form > *,
.app-shell .work-order-detail-shell[data-operational-ui="v1"] .work-order-side-column .work-order-direct-schedule-form .form-grid-4,
.app-shell .work-order-detail-shell[data-operational-ui="v1"] .work-order-side-column .work-order-direct-schedule-form .employee-checkbox-group,
.app-shell[data-mobile-layout-mode="mobile"] .work-order-detail-shell[data-operational-ui="v1"] .work-order-side-column .work-order-direct-schedule-form > *,
.app-shell[data-mobile-layout-mode="mobile"] .work-order-detail-shell[data-operational-ui="v1"] .work-order-side-column .work-order-direct-schedule-form .form-grid-4,
.app-shell[data-mobile-layout-mode="mobile"] .work-order-detail-shell[data-operational-ui="v1"] .work-order-side-column .work-order-direct-schedule-form .employee-checkbox-group {
    grid-column: 1 / -1 ;
    grid-row: auto ;
}

.app-shell .work-order-detail-shell[data-operational-ui="v1"] .work-order-side-column .work-order-direct-schedule-form .form-grid-4,
.app-shell[data-mobile-layout-mode="mobile"] .work-order-detail-shell[data-operational-ui="v1"] .work-order-side-column .work-order-direct-schedule-form .form-grid-4 {
    grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)) ;
}

.app-shell .work-order-detail-shell[data-operational-ui="v1"] .work-order-side-column .work-order-section-actions,
.app-shell .work-order-detail-shell[data-operational-ui="v1"] .work-order-side-column .work-order-form-actions,
.app-shell[data-mobile-layout-mode="mobile"] .work-order-detail-shell[data-operational-ui="v1"] .work-order-side-column .work-order-section-actions,
.app-shell[data-mobile-layout-mode="mobile"] .work-order-detail-shell[data-operational-ui="v1"] .work-order-side-column .work-order-form-actions {
    align-items: stretch ;
    display: grid ;
    gap: .45rem ;
    grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)) ;
}

.app-shell .work-order-detail-shell[data-operational-ui="v1"] .document-preview-card[data-work-order-document-polish] .document-lines {
    max-width: 100% ;
    min-width: 0 ;
    table-layout: fixed ;
    width: 100% ;
}

.app-shell .work-order-detail-shell[data-operational-ui="v1"] .document-preview-card[data-work-order-document-polish] > .table-scroll {
    box-sizing: border-box ;
    max-width: 100% ;
    overflow-x: clip ;
    overflow-y: visible ;
    padding-right: .4rem ;
}

.app-shell .work-order-detail-shell[data-operational-ui="v1"] .document-preview-card[data-work-order-document-polish] .document-line-number-col {
    width: 2.25rem ;
}

.app-shell .work-order-detail-shell[data-operational-ui="v1"] .document-preview-card[data-work-order-document-polish] .document-line-qty-col {
    width: 3.75rem ;
}

.app-shell .work-order-detail-shell[data-operational-ui="v1"] .document-preview-card[data-work-order-document-polish] .document-line-money-col {
    width: 6.5rem ;
}

.app-shell .work-order-detail-shell[data-operational-ui="v1"] .document-preview-card[data-work-order-document-polish] .document-lines th:nth-child(3),
.app-shell .work-order-detail-shell[data-operational-ui="v1"] .document-preview-card[data-work-order-document-polish] .document-lines td:nth-child(3),
.app-shell .work-order-detail-shell[data-operational-ui="v1"] .document-preview-card[data-work-order-document-polish] .document-lines th:nth-child(4),
.app-shell .work-order-detail-shell[data-operational-ui="v1"] .document-preview-card[data-work-order-document-polish] .document-lines td:nth-child(4),
.app-shell .work-order-detail-shell[data-operational-ui="v1"] .document-preview-card[data-work-order-document-polish] .document-lines th:nth-child(5),
.app-shell .work-order-detail-shell[data-operational-ui="v1"] .document-preview-card[data-work-order-document-polish] .document-lines td:nth-child(5) {
    box-sizing: border-box ;
    max-width: 6.5rem ;
    overflow-wrap: normal ;
    text-align: right ;
    white-space: nowrap ;
}

.app-shell .work-order-detail-shell[data-operational-ui="v1"] .document-preview-card[data-work-order-document-polish] .document-line-service-name,
.app-shell .work-order-detail-shell[data-operational-ui="v1"] .document-preview-card[data-work-order-document-polish] .document-line-service-meta,
.app-shell .work-order-detail-shell[data-operational-ui="v1"] .document-preview-card[data-work-order-document-polish] .document-line-service-description {
    max-width: 76ch ;
    overflow-wrap: break-word ;
    word-break: normal ;
}

.app-shell .work-order-detail-shell[data-operational-ui="v1"] .document-preview-card[data-work-order-document-polish] .document-line-service-description {
    display: block ;
    margin-top: .45rem ;
}

/* Staff document money-column containment: keep Estimate, Work Order, and Invoice totals inside split detail views. */
.app-shell .estimate-detail-shell[data-operational-ui="v1"] .document-preview-card > .table-scroll,
.app-shell .work-order-detail-shell[data-operational-ui="v1"] .document-preview-card[data-work-order-document-polish] > .table-scroll,
.app-shell .invoice-detail-shell[data-operational-ui="v1"] .document-preview-card > .table-scroll {
    box-sizing: border-box ;
    max-width: 100% ;
    overflow-x: clip ;
    overflow-y: visible ;
    padding-right: .4rem ;
}

.app-shell .estimate-detail-shell[data-operational-ui="v1"] .document-preview-card .document-lines,
.app-shell .work-order-detail-shell[data-operational-ui="v1"] .document-preview-card[data-work-order-document-polish] .document-lines,
.app-shell .invoice-detail-shell[data-operational-ui="v1"] .document-preview-card .document-lines {
    max-width: 100% ;
    min-width: 0 ;
    table-layout: fixed ;
    width: 100% ;
}

.app-shell .estimate-detail-shell[data-operational-ui="v1"] .document-preview-card .document-lines col.document-line-qty-col,
.app-shell .work-order-detail-shell[data-operational-ui="v1"] .document-preview-card[data-work-order-document-polish] .document-lines col.document-line-qty-col,
.app-shell .invoice-detail-shell[data-operational-ui="v1"] .document-preview-card .document-lines col.document-line-qty-col {
    width: 3.75rem ;
}

.app-shell .estimate-detail-shell[data-operational-ui="v1"] .document-preview-card .document-lines col.document-line-money-col,
.app-shell .work-order-detail-shell[data-operational-ui="v1"] .document-preview-card[data-work-order-document-polish] .document-lines col.document-line-money-col,
.app-shell .invoice-detail-shell[data-operational-ui="v1"] .document-preview-card .document-lines col.document-line-money-col {
    width: 6.5rem ;
}

.app-shell .estimate-detail-shell[data-operational-ui="v1"] .document-preview-card .document-lines th:nth-child(3),
.app-shell .estimate-detail-shell[data-operational-ui="v1"] .document-preview-card .document-lines td:nth-child(3),
.app-shell .work-order-detail-shell[data-operational-ui="v1"] .document-preview-card[data-work-order-document-polish] .document-lines th:nth-child(3),
.app-shell .work-order-detail-shell[data-operational-ui="v1"] .document-preview-card[data-work-order-document-polish] .document-lines td:nth-child(3),
.app-shell .invoice-detail-shell[data-operational-ui="v1"] .document-preview-card .document-lines th:nth-child(3),
.app-shell .invoice-detail-shell[data-operational-ui="v1"] .document-preview-card .document-lines td:nth-child(3) {
    box-sizing: border-box ;
    max-width: 3.75rem ;
    text-align: right ;
    white-space: nowrap ;
}

.app-shell .estimate-detail-shell[data-operational-ui="v1"] .document-preview-card .document-lines th:nth-child(4),
.app-shell .estimate-detail-shell[data-operational-ui="v1"] .document-preview-card .document-lines td:nth-child(4),
.app-shell .estimate-detail-shell[data-operational-ui="v1"] .document-preview-card .document-lines th:nth-child(5),
.app-shell .estimate-detail-shell[data-operational-ui="v1"] .document-preview-card .document-lines td:nth-child(5),
.app-shell .work-order-detail-shell[data-operational-ui="v1"] .document-preview-card[data-work-order-document-polish] .document-lines th:nth-child(4),
.app-shell .work-order-detail-shell[data-operational-ui="v1"] .document-preview-card[data-work-order-document-polish] .document-lines td:nth-child(4),
.app-shell .work-order-detail-shell[data-operational-ui="v1"] .document-preview-card[data-work-order-document-polish] .document-lines th:nth-child(5),
.app-shell .work-order-detail-shell[data-operational-ui="v1"] .document-preview-card[data-work-order-document-polish] .document-lines td:nth-child(5),
.app-shell .invoice-detail-shell[data-operational-ui="v1"] .document-preview-card .document-lines th:nth-child(4),
.app-shell .invoice-detail-shell[data-operational-ui="v1"] .document-preview-card .document-lines td:nth-child(4),
.app-shell .invoice-detail-shell[data-operational-ui="v1"] .document-preview-card .document-lines th:nth-child(5),
.app-shell .invoice-detail-shell[data-operational-ui="v1"] .document-preview-card .document-lines td:nth-child(5) {
    box-sizing: border-box ;
    max-width: 6.5rem ;
    min-width: 0 ;
    overflow-wrap: normal ;
    padding-left: .45rem ;
    padding-right: .45rem ;
    text-align: right ;
    white-space: nowrap ;
    word-break: normal ;
}

.app-shell .estimate-detail-shell[data-operational-ui="v1"] .document-preview-card .document-line-service-name,
.app-shell .estimate-detail-shell[data-operational-ui="v1"] .document-preview-card .document-line-service-meta,
.app-shell .estimate-detail-shell[data-operational-ui="v1"] .document-preview-card .document-line-service-description,
.app-shell .work-order-detail-shell[data-operational-ui="v1"] .document-preview-card[data-work-order-document-polish] .document-line-service-name,
.app-shell .work-order-detail-shell[data-operational-ui="v1"] .document-preview-card[data-work-order-document-polish] .document-line-service-meta,
.app-shell .work-order-detail-shell[data-operational-ui="v1"] .document-preview-card[data-work-order-document-polish] .document-line-service-description,
.app-shell .invoice-detail-shell[data-operational-ui="v1"] .document-preview-card .document-line-service-name,
.app-shell .invoice-detail-shell[data-operational-ui="v1"] .document-preview-card .document-line-service-meta,
.app-shell .invoice-detail-shell[data-operational-ui="v1"] .document-preview-card .document-line-service-description {
    max-width: min(76ch, 100%) ;
    overflow-wrap: break-word ;
    word-break: normal ;
}

.app-shell .work-order-detail-shell[data-operational-ui="v1"] .work-order-line-card-grid,
.app-shell[data-mobile-layout-mode="mobile"] .work-order-detail-shell[data-operational-ui="v1"] .work-order-line-card-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 32rem), 1fr)) ;
}

.app-shell .work-order-detail-shell[data-operational-ui="v1"] .work-order-line-card,
.app-shell[data-mobile-layout-mode="mobile"] .work-order-detail-shell[data-operational-ui="v1"] .work-order-line-card {
    align-content: start ;
    overflow: hidden ;
}

.app-shell .work-order-detail-shell[data-operational-ui="v1"] .work-order-line-card-main,
.app-shell[data-mobile-layout-mode="mobile"] .work-order-detail-shell[data-operational-ui="v1"] .work-order-line-card-main {
    display: grid ;
    grid-template-columns: 86px minmax(0, 1fr) auto ;
}

.app-shell .work-order-detail-shell[data-operational-ui="v1"] .work-order-line-stats,
.app-shell[data-mobile-layout-mode="mobile"] .work-order-detail-shell[data-operational-ui="v1"] .work-order-line-stats {
    display: grid ;
    grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)) ;
}

.app-shell .work-order-detail-shell[data-operational-ui="v1"] .work-order-line-card-actions,
.app-shell .work-order-detail-shell[data-operational-ui="v1"] .compact-timer-controls,
.app-shell[data-mobile-layout-mode="mobile"] .work-order-detail-shell[data-operational-ui="v1"] .work-order-line-card-actions,
.app-shell[data-mobile-layout-mode="mobile"] .work-order-detail-shell[data-operational-ui="v1"] .compact-timer-controls {
    align-items: stretch ;
    display: grid ;
    gap: .45rem ;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)) ;
}

.app-shell .work-order-detail-shell[data-operational-ui="v1"] .compact-timer-controls .inline-form,
.app-shell[data-mobile-layout-mode="mobile"] .work-order-detail-shell[data-operational-ui="v1"] .compact-timer-controls .inline-form {
    align-items: stretch ;
    display: grid ;
    gap: .4rem ;
    min-width: 0 ;
    width: 100% ;
}

.app-shell .work-order-detail-shell[data-operational-ui="v1"] .compact-timer-controls .inline-form:has(input[name="actual_minutes"]),
.app-shell[data-mobile-layout-mode="mobile"] .work-order-detail-shell[data-operational-ui="v1"] .compact-timer-controls .inline-form:has(input[name="actual_minutes"]) {
    grid-column: 1 / -1 ;
    grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)) ;
}

.app-shell .work-order-detail-shell[data-operational-ui="v1"] .compact-timer-controls :where(input, select, button, .btn),
.app-shell[data-mobile-layout-mode="mobile"] .work-order-detail-shell[data-operational-ui="v1"] .compact-timer-controls :where(input, select, button, .btn),
.app-shell .work-order-detail-shell[data-operational-ui="v1"] .work-order-line-card-actions .btn,
.app-shell[data-mobile-layout-mode="mobile"] .work-order-detail-shell[data-operational-ui="v1"] .work-order-line-card-actions .btn {
    max-width: 100% ;
    min-height: 2.35rem ;
    min-width: 0 ;
    text-align: center ;
    width: 100% ;
}

@media (max-width: 620px) {
    .app-shell .work-order-detail-shell[data-operational-ui="v1"] .work-order-line-card-main,
    .app-shell[data-mobile-layout-mode="mobile"] .work-order-detail-shell[data-operational-ui="v1"] .work-order-line-card-main {
        grid-template-columns: 72px minmax(0, 1fr) ;
    }

    .app-shell .work-order-detail-shell[data-operational-ui="v1"] .work-order-line-total,
    .app-shell[data-mobile-layout-mode="mobile"] .work-order-detail-shell[data-operational-ui="v1"] .work-order-line-total {
        grid-column: 1 / -1;
        justify-self: start;
    }
}

/* Appearance theme public and print preservation guard */
.public-shell :where(.customer-facing-document-page, .customer-document-preview, .crm-document.customer-safe-document, .document-preview-card, .document-preview-card .document-header, .document-preview-card .company-document-header, .document-preview-card .document-address-grid, .document-preview-card .document-lines, .document-preview-card .document-total, .document-preview-card .document-message, .document-card, .document-summary > div, .document-line-table, .document-line-card, .document-totals, .document-approval-card, .document-footer),
.portal-public-shell :where(.customer-facing-document-page, .customer-document-preview, .crm-document.customer-safe-document, .document-preview-card, .document-preview-card .document-header, .document-preview-card .company-document-header, .document-preview-card .document-address-grid, .document-preview-card .document-lines, .document-preview-card .document-total, .document-preview-card .document-message, .document-card, .document-summary > div, .document-line-table, .document-line-card, .document-totals, .document-approval-card, .document-footer),
.customer-facing-document-page :where(.crm-document.customer-safe-document, .document-preview-card, .document-header, .company-document-header, .document-address-grid, .document-lines, .document-total, .document-message, .document-card, .document-summary > div, .document-line-table, .document-line-card, .document-totals, .document-approval-card, .document-footer) {
    background: #ffffff;
    border-color: #dbe4ee;
    color: #111827;
}

.public-shell :where(.document-preview-card strong, .document-preview-card b, .crm-document.customer-safe-document strong, .crm-document.customer-safe-document b, .document-line-name, .document-total strong, .document-totals strong),
.portal-public-shell :where(.document-preview-card strong, .document-preview-card b, .crm-document.customer-safe-document strong, .crm-document.customer-safe-document b, .document-line-name, .document-total strong, .document-totals strong),
.customer-facing-document-page :where(strong, b, .document-line-name, .document-total strong, .document-totals strong) {
    color: #111827;
}

.public-shell :where(.document-preview-card p, .document-preview-card small, .crm-document.customer-safe-document p, .crm-document.customer-safe-document small, .document-line-description, .document-footer),
.portal-public-shell :where(.document-preview-card p, .document-preview-card small, .crm-document.customer-safe-document p, .crm-document.customer-safe-document small, .document-line-description, .document-footer),
.customer-facing-document-page :where(p, small, .document-line-description, .document-footer) {
    color: #526579;
}

@media print {
    .app-shell[data-appearance-theme] :where(.document-preview-card, .document-preview-card .document-header, .document-preview-card .company-document-header, .document-preview-card .document-address-grid, .document-preview-card .document-lines, .document-preview-card .document-total, .document-preview-card .document-message),
    .public-shell :where(.document-preview-card, .document-preview-card .document-header, .document-preview-card .company-document-header, .document-preview-card .document-address-grid, .document-preview-card .document-lines, .document-preview-card .document-total, .document-preview-card .document-message),
    .portal-public-shell :where(.document-preview-card, .document-preview-card .document-header, .document-preview-card .company-document-header, .document-preview-card .document-address-grid, .document-preview-card .document-lines, .document-preview-card .document-total, .document-preview-card .document-message) {
        background: #ffffff ;
        box-shadow: none ;
        color: #111827 ;
    }

    .app-shell[data-appearance-theme] :where(.document-preview-card strong, .document-preview-card b, .document-line-name, .document-total strong),
    .public-shell :where(.document-preview-card strong, .document-preview-card b, .document-line-name, .document-total strong),
    .portal-public-shell :where(.document-preview-card strong, .document-preview-card b, .document-line-name, .document-total strong) {
        color: #111827 ;
    }

    .app-shell[data-appearance-theme] :where(.document-preview-card p, .document-preview-card small, .document-line-description),
    .public-shell :where(.document-preview-card p, .document-preview-card small, .document-line-description),
    .portal-public-shell :where(.document-preview-card p, .document-preview-card small, .document-line-description) {
        color: #526579 ;
    }
}

@media screen {
    /* Sitewide 85 percent page width final guard */
    .app-shell .main-content,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .main-content,
    .app-shell[data-mobile-layout-mode="mobile"] .main-content,
    .app-shell:not([data-mobile-layout-mode="mobile"]) .main-content:has(.estimate-detail-shell[data-operational-ui="v1"]),
    .app-shell:not([data-mobile-layout-mode="mobile"]) .main-content:has(.work-order-detail-shell[data-operational-ui="v1"]),
    .app-shell:not([data-mobile-layout-mode="mobile"]) .main-content:has(.invoice-detail-shell[data-operational-ui="v1"]),
    .app-shell[data-mobile-layout-mode="mobile"] .main-content:has(.estimate-detail-shell[data-operational-ui="v1"]),
    .app-shell[data-mobile-layout-mode="mobile"] .main-content:has(.work-order-detail-shell[data-operational-ui="v1"]),
    .app-shell[data-mobile-layout-mode="mobile"] .main-content:has(.invoice-detail-shell[data-operational-ui="v1"]),
    .app-shell:not([data-mobile-layout-mode="mobile"]) .main-content.operational-detail-main-content,
    .app-shell[data-mobile-layout-mode="mobile"] .main-content.operational-detail-main-content {
        --crm-workspace-width: 85vw ;
        box-sizing: border-box ;
        margin-inline: auto ;
        max-width: var(--crm-workspace-width) ;
        width: min(100%, var(--crm-workspace-width)) ;
    }

    .app-shell[data-workspace-width="wide"] .main-content {
        --crm-workspace-width: 85vw ;
    }
    .app-shell[data-workspace-width="full"] .main-content {
        --crm-workspace-width: 100% ;
    }

    .app-shell .main-content > :not(script),
    .app-shell:not([data-mobile-layout-mode="mobile"]) .main-content :is(
        .estimate-form-shell[data-operational-ui="v3"],
        .operational-list-shell[data-operational-ui="v1"],
        .operational-detail-shell[data-operational-ui="v1"],
        .invoice-detail-shell[data-operational-ui="v1"],
        .customer-profile-grid:has(.customer-list-shell[data-operational-ui="v1"]),
        .customer-list-shell[data-operational-ui="v1"],
        .leads-shell[data-operational-ui="v1"],
        .customer-profile-shell.record-layout-shell,
        .scheduling-workspace,
        .scheduling-calendar-shell,
        .scheduling-calendar-map-shell,
        .dispatch-workspace-v3,
        .employees-center-layout,
        .clock-io-page,
        .clock-review-panel,
        .payroll-dashboard-grid,
        .communication-preview-card,
        .operational-list-communications,
        .operational-list-tasks,
        .operational-list-notifications,
        .employee-chat-page,
        .employee-related-section,
        .company-profile-page,
        .company-onboarding-page,
        .help-desk-page,
        .operational-list-recurring-services,
        .recurring-detail-shell,
        .lead-forms-shell,
        .dashboard-desktop-content,
        .report-library-v3,
        .report-card-section,
        .report-detail-v3,
        .report-drilldown-summary,
        .report-section-nav,
        .reports-v2-filter,
        .report-dashboard-grid
    ),
    .app-shell[data-mobile-layout-mode="mobile"] .main-content :is(
        .estimate-form-shell[data-operational-ui="v3"],
        .operational-list-shell[data-operational-ui="v1"],
        .operational-detail-shell[data-operational-ui="v1"],
        .invoice-detail-shell[data-operational-ui="v1"],
        .customer-profile-grid:has(.customer-list-shell[data-operational-ui="v1"]),
        .customer-list-shell[data-operational-ui="v1"],
        .leads-shell[data-operational-ui="v1"],
        .customer-profile-shell.record-layout-shell,
        .scheduling-workspace,
        .scheduling-calendar-shell,
        .scheduling-calendar-map-shell,
        .dispatch-workspace-v3,
        .employees-center-layout,
        .clock-io-page,
        .clock-review-panel,
        .payroll-dashboard-grid,
        .communication-preview-card,
        .operational-list-communications,
        .operational-list-tasks,
        .operational-list-notifications,
        .employee-chat-page,
        .employee-related-section,
        .company-profile-page,
        .company-onboarding-page,
        .help-desk-page,
        .operational-list-recurring-services,
        .recurring-detail-shell,
        .lead-forms-shell,
        .dashboard-desktop-content,
        .report-library-v3,
        .report-card-section,
        .report-detail-v3,
        .report-drilldown-summary,
        .report-section-nav,
        .reports-v2-filter,
        .report-dashboard-grid
    ) {
        box-sizing: border-box ;
        margin-left: auto ;
        margin-right: auto ;
        max-width: 100% ;
        min-width: 0 ;
        width: 100% ;
    }

    .public-shell .main-content,
    .public-shell .main-content.administration-main-content,
    .public-shell .main-content.portal-public-main,
    .public-shell.lead-form-public,
    .portal-public-shell,
    .customer-facing-document-page,
    .customer-facing-document-page--wide {
        box-sizing: border-box ;
        margin-inline: auto ;
        max-width: 85vw ;
        min-width: 0 ;
        width: min(100%, 85vw) ;
    }

    .public-shell.lead-form-public .card,
    .portal-public-shell > *,
    .customer-facing-document-page > * {
        max-width: 100% ;
        min-width: 0 ;
        width: 100% ;
    }

    @supports selector(:has(*)) {
        .app-shell .main-content:has(.service-item-tree-shell),
        .app-shell:not([data-mobile-layout-mode="mobile"]) .main-content:has(.service-item-tree-shell),
        .app-shell[data-mobile-layout-mode="mobile"] .main-content:has(.service-item-tree-shell) {
            --crm-workspace-width: 100% ;
            max-width: none ;
            width: 100% ;
        }
    }

    @media (max-width: 760px) {
        .app-shell .main-content,
        .app-shell:not([data-mobile-layout-mode="mobile"]) .main-content,
        .app-shell[data-mobile-layout-mode="mobile"] .main-content,
        .public-shell .main-content,
        .public-shell .main-content.administration-main-content,
        .public-shell .main-content.portal-public-main,
        .public-shell.lead-form-public,
        .portal-public-shell,
        .customer-facing-document-page,
        .customer-facing-document-page--wide {
            --crm-workspace-width: 100% ;
            max-width: 100% ;
            width: 100% ;
        }
    }
}

/* Lead form builder final override guard. Keep this after theme-wide app-shell rules. */
.app-shell.theme-dark .lead-form-source-helper,
.app-shell.theme-medium .lead-form-source-helper,
.app-shell.theme-dark .lead-form-source-activation-card,
.app-shell.theme-medium .lead-form-source-activation-card,
.lead-form-source-helper,
.lead-form-source-activation-card {
    background: color-mix(in srgb, var(--primary, #1d4ed8) 10%, var(--panel, #fff)) ;
    border-color: color-mix(in srgb, var(--primary, #1d4ed8) 38%, var(--border, #dbe3ef)) ;
    border-radius: 8px ;
    color: var(--text, #172033) ;
    display: grid ;
    gap: .55rem ;
    margin: .75rem 0 1rem ;
    min-width: 0 ;
    overflow-wrap: anywhere ;
    padding: .85rem ;
}

.lead-form-source-activation-card {
    align-items: end ;
    grid-template-columns: minmax(260px, .8fr) minmax(0, 1.2fr) auto ;
}

.lead-form-source-helper p,
.lead-form-source-activation-card p {
    margin: 0 ;
}

.lead-form-source-helper code,
.lead-form-source-activation-card code {
    background: var(--theme-input-bg, #f8fafc) ;
    border: 1px solid var(--border, #dbe3ef) ;
    border-radius: 6px ;
    color: var(--heading, #0f172a) ;
    display: inline-block ;
    padding: .2rem .35rem ;
}

.lead-form-source-activation-card textarea {
    min-height: 92px ;
    resize: vertical ;
}

.app-shell.theme-dark .lead-form-builder-form .lead-form-builder-field,
.app-shell.theme-medium .lead-form-builder-form .lead-form-builder-field,
.lead-form-builder-form .lead-form-builder-field {
    background: var(--theme-card-bg, var(--panel, #fff)) ;
    border-color: var(--border, #dbe3ef) ;
    color: var(--text, #172033) ;
    opacity: 1 ;
    pointer-events: auto ;
}

.lead-form-builder-form .lead-form-builder-field *,
.lead-form-builder-form .lead-form-field-editor * {
    opacity: 1 ;
    pointer-events: auto ;
}

.lead-form-builder-form .lead-form-builder-field label,
.lead-form-builder-form .lead-form-builder-field strong,
.lead-form-builder-form .lead-form-builder-field small,
.lead-form-builder-form .lead-form-field-editor label,
.lead-form-builder-form .lead-form-field-editor strong,
.lead-form-builder-form .lead-form-field-editor small {
    color: var(--text, #172033) ;
}

.lead-form-builder-form .lead-form-builder-field input,
.lead-form-builder-form .lead-form-builder-field select,
.lead-form-builder-form .lead-form-builder-field textarea,
.lead-form-builder-form .lead-form-field-editor input,
.lead-form-builder-form .lead-form-field-editor select,
.lead-form-builder-form .lead-form-field-editor textarea {
    background: var(--theme-input-bg, #fff) ;
    border-color: var(--border, #dbe3ef) ;
    color: var(--text, #172033) ;
    opacity: 1 ;
}

.lead-form-builder-form input[type="checkbox"],
.lead-form-builder-form input[type="radio"],
.lead-form-live-preview input[type="checkbox"],
.lead-form-live-preview input[type="radio"] {
    accent-color: var(--lf-theme, var(--primary, #1d4ed8)) ;
    cursor: pointer ;
    height: 18px ;
    min-height: 18px ;
    min-width: 18px ;
    width: 18px ;
}

.app-shell.theme-dark .lead-form-public,
.app-shell.theme-medium .lead-form-public,
.lead-form-public {
    background: var(--lf-page-bg, #ffffff) ;
    color: var(--lf-text, #111827) ;
}

.app-shell.theme-dark .lead-form-public.light,
.app-shell.theme-dark .lead-form-public.light .card,
.app-shell.theme-medium .lead-form-public.light,
.app-shell.theme-medium .lead-form-public.light .card,
.lead-form-public.light,
.lead-form-public.light .card {
    background: var(--lf-form-bg, #ffffff) ;
    border-color: var(--lf-form-border, #dbe3ef) ;
    color: var(--lf-text, #111827) ;
}

.app-shell.theme-dark .lead-form-public.dark,
.app-shell.theme-dark .lead-form-public.dark .card,
.app-shell.theme-medium .lead-form-public.dark,
.app-shell.theme-medium .lead-form-public.dark .card,
.lead-form-public.dark,
.lead-form-public.dark .card {
    background: var(--lf-form-bg, #ffffff) ;
    border-color: var(--lf-form-border, #dbe3ef) ;
    color: var(--lf-text, #111827) ;
}

.app-shell.theme-dark .lead-form-public.custom-colors .card,
.app-shell.theme-medium .lead-form-public.custom-colors .card,
.lead-form-public.custom-colors .card,
.lead-form-public .card {
    background: var(--lf-form-bg, #ffffff) ;
    border-color: var(--lf-form-border, #dbe3ef) ;
    color: var(--lf-text, #111827) ;
}

.app-shell.theme-dark .lead-form-public :where(h1, h2, h3, legend, label, p, small),
.app-shell.theme-medium .lead-form-public :where(h1, h2, h3, legend, label, p, small),
.lead-form-public :where(h1, h2, h3, legend, label, p, small) {
    color: var(--lf-text, #111827) ;
}

.app-shell.theme-dark .lead-form-public :where(input, select, textarea),
.app-shell.theme-medium .lead-form-public :where(input, select, textarea),
.lead-form-public :where(input, select, textarea) {
    background: var(--lf-field-bg, #ffffff) ;
    border-color: var(--lf-field-border, #cbd5e1) ;
    color: var(--lf-field-text, #111827) ;
}

.app-shell.theme-dark .lead-form-public :where(fieldset, .lead-form-option-fieldset),
.app-shell.theme-medium .lead-form-public :where(fieldset, .lead-form-option-fieldset),
.lead-form-public :where(fieldset, .lead-form-option-fieldset) {
    border-color: var(--lf-field-border, #cbd5e1) ;
}

.app-shell.theme-dark .lead-form-public :where(.btn-primary, button[type="submit"], button[type="button"].btn-primary),
.app-shell.theme-medium .lead-form-public :where(.btn-primary, button[type="submit"], button[type="button"].btn-primary),
.lead-form-public :where(.btn-primary, button[type="submit"], button[type="button"].btn-primary) {
    background: var(--lf-button, #145c9e) ;
    border-color: var(--lf-button, #145c9e) ;
    color: var(--lf-button-text, #ffffff) ;
}

.public-shell.lead-form-public {
    align-content: start ;
    box-sizing: border-box ;
    justify-items: center ;
    max-width: none ;
    min-height: 0 ;
    padding: clamp(1rem, 3vw, 2rem) ;
    width: 100% ;
}

.lead-form-public .card {
    box-sizing: border-box ;
    max-width: 100% ;
}

.public-shell.lead-form-public.width-small .card {
    width: min(100%, 520px) ;
}

.public-shell.lead-form-public.width-medium .card {
    width: min(100%, 760px) ;
}

.public-shell.lead-form-public.width-full .card {
    width: min(100%, 1120px) ;
}

.lead-form-live-preview.width-small .card {
    width: 72% ;
}

.lead-form-live-preview.width-medium .card {
    width: 88% ;
}

.lead-form-live-preview.width-full .card {
    width: 100% ;
}

.lead-form-public.font-system,
.lead-form-public.font-system :where(.card, form, h1, h2, h3, label, legend, input, select, textarea, button, p, small, span) {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif ;
}

.lead-form-public.font-serif,
.lead-form-public.font-serif :where(.card, form, h1, h2, h3, label, legend, input, select, textarea, button, p, small, span) {
    font-family: Georgia, "Times New Roman", serif ;
}

.lead-form-public.font-sans,
.lead-form-public.font-sans :where(.card, form, h1, h2, h3, label, legend, input, select, textarea, button, p, small, span) {
    font-family: Arial, Helvetica, sans-serif ;
}

.lead-form-public.font-mono,
.lead-form-public.font-mono :where(.card, form, h1, h2, h3, label, legend, input, select, textarea, button, p, small, span) {
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace ;
}

.lead-form-public.layout-vertical form {
    display: grid ;
    grid-template-columns: 1fr ;
}

.lead-form-public.layout-horizontal form {
    align-items: start ;
    display: grid ;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)) ;
}

.lead-form-public.layout-horizontal :where(.field-type-long_text, .field-type-address, .field-type-photo_upload, .lead-form-option-fieldset, button[type="submit"]) {
    grid-column: 1 / -1 ;
}

.lead-form-public .lead-form-public-address {
    display: grid ;
    gap: .75rem ;
}

.lead-form-public .address-autocomplete-field {
    position: relative ;
}

.lead-form-public .address-autocomplete-suggestions {
    background: #ffffff ;
    border: 1px solid #cbd5e1 ;
    box-shadow: 0 16px 34px rgba(15, 23, 42, .18) ;
    color: #0f172a ;
    max-height: 13rem ;
    z-index: 10000 ;
}

.lead-form-public .address-suggestion-option {
    background: #f8fafc ;
    border: 1px solid transparent ;
    color: #0f172a ;
    font-weight: 700 ;
    line-height: 1.25 ;
    opacity: 1 ;
}

.lead-form-public .address-suggestion-option:hover,
.lead-form-public .address-suggestion-option:focus {
    background: #e0f2fe ;
    border-color: #38bdf8 ;
    color: #0f172a ;
}

.lead-form-public .lead-form-address-grid {
    display: grid ;
    gap: .55rem ;
    grid-template-columns: minmax(0, 1.25fr) minmax(4.25rem, .45fr) minmax(5.5rem, .55fr) ;
}

.lead-form-public .lead-form-option-fieldset label {
    align-items: center ;
    display: flex ;
    flex-direction: row ;
    gap: .5rem ;
    justify-content: flex-start ;
}

.lead-form-public .lead-form-option-fieldset input[type="checkbox"],
.lead-form-public .lead-form-option-fieldset input[type="radio"] {
    flex: 0 0 auto ;
    margin: 0 ;
}

.lead-form-public .lead-form-services-grid {
    display: grid ;
    grid-template-columns: repeat(2, minmax(0, 1fr)) ;
}

.lead-form-public .lead-form-services-grid legend,
.lead-form-public .lead-form-services-grid small {
    grid-column: 1 / -1 ;
}

.lead-form-public .lead-form-contact-method-row {
    align-items: center ;
    column-gap: 1rem ;
    display: grid ;
    grid-template-columns: repeat(4, max-content) ;
    row-gap: .45rem ;
}

.lead-form-public .lead-form-contact-method-row legend,
.lead-form-public .lead-form-contact-method-row small {
    grid-column: 1 / -1 ;
}

@media (max-width: 980px) {
    .lead-form-source-activation-card {
        grid-template-columns: 1fr ;
    }
}

@media (max-width: 420px) {
    .lead-form-public .lead-form-address-grid,
    .lead-form-public .lead-form-services-grid,
    .lead-form-public .lead-form-contact-method-row {
        grid-template-columns: 1fr ;
    }
}

.billing-marketplace-intro {
    align-items: center;
}

.billing-marketplace-grid {
    align-items: start;
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 1rem;
}

.billing-marketplace-slot {
    min-width: 0;
}

.billing-marketplace-slot-half {
    grid-column: span 1;
}

.billing-marketplace-slot-full {
    grid-column: 1 / -1;
}

.billing-marketplace-slot .card,
.billing-marketplace-slot > section {
    box-sizing: border-box;
    height: 100%;
    min-width: 0;
}

.billing-marketplace-slot .card-heading-row {
    align-items: start;
    gap: .75rem;
}

.billing-marketplace-addon-card,
.support-donation-card,
.billing-marketplace-info-card,
.billing-addons-catalog-card,
.billing-requests-card {
    border-color: #cbd5e1;
    box-shadow: 0 8px 22px rgba(15, 23, 42, .06);
}

.billing-marketplace-addon-card {
    align-content: start;
    border-radius: 8px;
    padding: .85rem;
}

.billing-marketplace-addon-card-enabled {
    border-color: #22c55e;
    box-shadow: 0 8px 24px rgba(34, 197, 94, .14);
}

.billing-marketplace-addon-card h2,
.support-donation-card h2,
.billing-marketplace-info-card h2 {
    font-size: 1rem;
    line-height: 1.25;
}

.billing-marketplace-addon-card .card-heading-row {
    align-items: start;
    display: grid;
    gap: .5rem;
    grid-template-columns: 1fr;
}

.billing-marketplace-addon-card .paid-feature-badges {
    justify-content: flex-start;
}

.marketplace-card-copy {
    color: #475569;
    line-height: 1.45;
    margin-bottom: .75rem;
}

.billing-marketplace-addon-card .marketplace-card-copy {
    display: -webkit-box;
    font-size: .88rem;
    line-height: 1.38;
    margin-bottom: .35rem;
    min-height: 3.65rem;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.billing-card-destination {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: -.2rem 0 .75rem;
    min-width: 0;
}

.billing-card-destination small {
    color: #64748b;
    font-weight: 750;
    overflow-wrap: anywhere;
}

.billing-card-price-line {
    align-items: center;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    color: #0f172a;
    display: flex;
    font-weight: 700;
    justify-content: space-between;
    min-height: 2.5rem;
    padding: .6rem .75rem;
}

.billing-marketplace-addon-card .billing-card-price-line {
    font-size: .86rem;
    min-height: 2.2rem;
    padding: .45rem .55rem;
}

.billing-card-manage-link {
    justify-content: center;
    margin-top: .2rem;
    min-height: 2.1rem;
    width: 100%;
}

.theme-dark .billing-card-price-line,
.theme-medium .billing-card-price-line,
.app-shell.theme-dark .billing-card-price-line,
.app-shell.theme-medium .billing-card-price-line {
    background: rgba(15, 23, 42, .82);
    border-color: rgba(148, 163, 184, .46);
    color: #e5edf8;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}

.app-shell.theme-dark .donation-preset,
.app-shell.theme-medium .donation-preset {
    background: rgba(15, 23, 42, .82);
    border-color: rgba(148, 163, 184, .46);
    color: #e5edf8;
}

.billing-card-details {
    border-top: 1px solid #e2e8f0;
    margin-top: .35rem;
    padding-top: .55rem;
}

.billing-card-details > summary {
    align-items: center;
    background: #145c9e;
    border: 1px solid #145c9e;
    border-radius: 6px;
    color: #fff;
    cursor: pointer;
    display: flex;
    font-weight: 800;
    justify-content: center;
    list-style: none;
    min-height: 2.1rem;
    padding: .4rem .6rem;
}

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

.billing-card-details[open] > summary {
    margin-bottom: .75rem;
}

.paid-feature-square-checkout-form,
.support-donation-form {
    gap: .65rem;
    margin-top: .75rem;
}

.donation-preset-grid {
    display: grid;
    gap: .5rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.donation-preset {
    align-items: center;
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    display: flex;
    font-weight: 800;
    gap: .45rem;
    justify-content: center;
    min-height: 2.5rem;
    padding: .45rem;
}

.billing-marketplace-layout-admin-form input[type="number"] {
    max-width: 7rem;
}

.billing-addon-workspace-page {
    display: grid;
    gap: 1rem;
}

.billing-addon-detail-intro {
    align-items: center;
}

.billing-addon-detail-actions {
    align-items: flex-end;
    display: grid;
    gap: .65rem;
    justify-items: end;
}

.billing-addon-detail-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
}

.billing-addon-detail-full {
    grid-column: 1 / -1;
}

.billing-addon-action-card,
.billing-addon-module-link-card,
.billing-addon-status-card,
.billing-addon-operation-workspace {
    border-radius: 8px;
}

.billing-addon-price-line {
    margin: .75rem 0;
}

.billing-addon-request-form {
    border-top: 1px solid var(--border);
    margin-top: .85rem;
    padding-top: .85rem;
}

.billing-addon-operation-grid {
    display: grid;
    gap: .85rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: .85rem;
}

.billing-addon-operation-card {
    background: rgba(15, 23, 42, .035);
    border: 1px solid var(--border);
    border-radius: 8px;
    display: grid;
    gap: .45rem;
    padding: .85rem;
}

.billing-addon-operation-card h3 {
    font-size: 1rem;
    line-height: 1.25;
    margin: 0;
}

.billing-addon-operation-card p {
    margin: 0;
}

.app-shell.theme-dark .billing-addon-operation-card,
.app-shell.theme-medium .billing-addon-operation-card {
    background: rgba(15, 23, 42, .6);
    border-color: rgba(148, 163, 184, .38);
}

@media (max-width: 900px) {
    .billing-marketplace-grid {
        grid-template-columns: 1fr;
    }

    .billing-marketplace-slot-half,
    .billing-marketplace-slot-full {
        grid-column: 1 / -1;
    }

    .paid-feature-grid,
    .billing-addon-operation-grid,
    .billing-addon-detail-grid {
        grid-template-columns: 1fr;
    }

    .billing-addon-detail-actions {
        align-items: stretch;
        justify-items: stretch;
    }
}

@media (max-width: 520px) {
    .donation-preset-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .billing-marketplace-slot .card-heading-row {
        align-items: stretch;
        flex-direction: column;
    }
}

.supplier-inventory-workspace {
    display: grid;
    gap: 1rem;
}

.supplier-inventory-intro {
    align-items: center;
}

.supplier-inventory-summary {
    display: grid;
    gap: .75rem;
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.supplier-inventory-summary article,
.supplier-inventory-admin-card,
.supplier-inventory-card,
.supplier-inventory-locked-card {
    border-color: rgba(20, 92, 158, .28);
    border-radius: 8px;
}

.supplier-inventory-summary article {
    background: rgba(20, 92, 158, .07);
    border: 1px solid rgba(20, 92, 158, .18);
    padding: .75rem;
}

.supplier-inventory-summary strong {
    display: block;
    font-size: 1.35rem;
    line-height: 1.1;
    margin-top: .25rem;
}

.supplier-inventory-grid {
    align-items: start;
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.supplier-inventory-slot {
    min-width: 0;
}

.supplier-inventory-slot-wide {
    grid-column: 1 / -1;
}

.supplier-packet-line-list {
    border: 1px solid var(--border, rgba(148, 163, 184, .32));
    border-radius: 8px;
    display: grid;
    gap: .45rem;
    max-height: 18rem;
    overflow: auto;
    padding: .6rem;
}

.supplier-packet-line-choice {
    align-items: center;
    background: rgba(15, 23, 42, .035);
    border: 1px solid rgba(148, 163, 184, .22);
    border-radius: 8px;
    display: grid;
    gap: .5rem;
    grid-template-columns: auto minmax(0, 1fr) minmax(5rem, .22fr);
    padding: .5rem;
}

.supplier-packet-line-choice input[type="number"] {
    min-width: 0;
}

.supplier-inventory-safety-card .compact-list {
    margin-bottom: 0;
}

.theme-dark .supplier-inventory-summary article,
.theme-medium .supplier-inventory-summary article,
.theme-dark .supplier-packet-line-choice,
.theme-medium .supplier-packet-line-choice,
.app-shell.theme-dark .supplier-inventory-summary article,
.app-shell.theme-medium .supplier-inventory-summary article,
.app-shell.theme-dark .supplier-packet-line-choice,
.app-shell.theme-medium .supplier-packet-line-choice {
    background: rgba(15, 23, 42, .72);
    border-color: rgba(148, 163, 184, .34);
    color: #e5edf8;
}

@media (max-width: 1100px) {
    .supplier-inventory-summary {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .supplier-inventory-grid,
    .supplier-inventory-summary {
        grid-template-columns: 1fr;
    }

    .supplier-inventory-slot-wide {
        grid-column: 1 / -1;
    }
}

@media (max-width: 560px) {
    .supplier-packet-line-choice {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .supplier-packet-line-choice input[type="number"] {
        grid-column: 1 / -1;
    }
}

.physical-mail-workspace {
    display: grid;
    gap: 1rem;
}

.physical-mail-grid {
    align-items: start;
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.physical-mail-slot {
    min-width: 0;
}

.physical-mail-slot-full,
.physical-mail-slot-request {
    grid-column: 1 / -1;
}

.physical-mail-wallet-card,
.physical-mail-card-setup-card,
.physical-mail-request-card,
.physical-mail-rates-card,
.physical-mail-requests-card,
.physical-mail-ledger-card,
.physical-mail-admin-config,
.physical-mail-admin-rate-card,
.physical-mail-admin-queue,
.physical-mail-admin-wallets {
    border-color: rgba(66, 153, 225, .28);
}

.physical-mail-cost-preview {
    display: grid;
    gap: .5rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: .75rem 0;
}

.physical-mail-cost-preview span,
.physical-mail-square-card-container,
[data-physical-mail-card-status] {
    background: var(--surface-muted, rgba(15, 23, 42, .055));
    border: 1px solid var(--border, rgba(148, 163, 184, .28));
    border-radius: 8px;
    color: var(--text, #172033);
}

.physical-mail-cost-preview span {
    display: block;
    font-weight: 700;
    padding: .65rem .75rem;
}

.physical-mail-square-card-container {
    min-height: 92px;
    padding: .75rem;
}

[data-physical-mail-card-status] {
    padding: .55rem .7rem;
}

[data-physical-mail-card-status][data-status="ready"] {
    border-color: rgba(34, 197, 94, .4);
}

[data-physical-mail-card-status][data-status="error"],
[data-physical-mail-card-status][data-status="warning"] {
    border-color: rgba(245, 158, 11, .55);
}

.theme-dark .physical-mail-cost-preview span,
.theme-dark .physical-mail-square-card-container,
.theme-dark [data-physical-mail-card-status],
.app-shell.theme-dark .physical-mail-cost-preview span,
.app-shell.theme-dark .physical-mail-square-card-container,
.app-shell.theme-dark [data-physical-mail-card-status],
.app-shell.theme-medium .physical-mail-cost-preview span,
.app-shell.theme-medium .physical-mail-square-card-container,
.app-shell.theme-medium [data-physical-mail-card-status] {
    background: rgba(15, 23, 42, .74);
    border-color: rgba(148, 163, 184, .28);
    color: #e5eefc;
}

.physical-mail-print-main {
    margin: 0 auto;
    max-width: 980px;
}

.physical-mail-print-packet {
    display: grid;
    gap: 1rem;
}

.physical-mail-packet-address {
    font-size: 1.08rem;
    line-height: 1.6;
}

@media (max-width: 900px) {
    .physical-mail-grid,
    .physical-mail-cost-preview {
        grid-template-columns: 1fr;
    }
}

@media print {
    .physical-mail-print-main {
        max-width: none;
    }

    .physical-mail-print-packet .module-intro .button-row {
        display: none ;
    }
}

.communications-launch-main {
    background: var(--page-bg, #07111f);
}

.communications-launch-intro,
.communications-launch-card,
.communications-launch-main .card,
.communications-launch-main .sub-card {
    border-color: rgba(66, 153, 225, .26);
}

.communications-launch-summary {
    display: grid;
    gap: .75rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0 0 1rem;
}

.communications-launch-summary article {
    background: var(--surface, #ffffff);
    border: 1px solid var(--border, rgba(148, 163, 184, .32));
    border-radius: 8px;
    padding: .8rem .9rem;
}

.communications-launch-summary span {
    color: var(--muted, #64748b);
    display: block;
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
}

.communications-launch-summary strong {
    color: var(--text, #172033);
    display: block;
    font-size: 1.2rem;
    margin-top: .2rem;
}

.communications-launch-grid {
    align-items: stretch;
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 1rem 0;
}

.communications-campaign-form {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.communications-campaign-form .span-2 {
    grid-column: span 2;
}

.communications-launch-main textarea[readonly] {
    min-height: 4.5rem;
}

.review-widget-preview {
    display: grid;
    gap: .55rem;
}

.theme-dark .communications-launch-summary article,
.app-shell.theme-dark .communications-launch-summary article,
.app-shell.theme-medium .communications-launch-summary article,
.theme-dark .communications-launch-main .card,
.theme-dark .communications-launch-main .sub-card,
.app-shell.theme-dark .communications-launch-main .card,
.app-shell.theme-dark .communications-launch-main .sub-card,
.app-shell.theme-medium .communications-launch-main .card,
.app-shell.theme-medium .communications-launch-main .sub-card {
    background: rgba(15, 23, 42, .88);
    border-color: rgba(148, 163, 184, .28);
    color: #e5eefc;
}

.theme-dark .communications-launch-summary strong,
.app-shell.theme-dark .communications-launch-summary strong,
.app-shell.theme-medium .communications-launch-summary strong {
    color: #f8fbff;
}

.theme-dark .communications-launch-summary span,
.app-shell.theme-dark .communications-launch-summary span,
.app-shell.theme-medium .communications-launch-summary span {
    color: #9fb5d3;
}

@media (max-width: 1180px) {
    .communications-campaign-form,
    .communications-launch-summary,
    .communications-launch-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .communications-campaign-form,
    .communications-launch-summary,
    .communications-launch-grid {
        grid-template-columns: 1fr;
    }

    .communications-campaign-form .span-2 {
        grid-column: 1;
    }
}
.public-growth-main,
.public-growth-admin-main {
    color-scheme: dark;
}

.public-growth-main .card,
.public-growth-admin-main .card {
    background: var(--surface-panel, #0f1726);
    border: 1px solid var(--border-subtle, #26384f);
    box-shadow: none;
}

.public-growth-owner-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 14px;
}

.public-growth-owner-nav a {
    align-items: center;
    background: rgba(15, 23, 42, 0.72);
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 7px;
    color: var(--text-main, #e5edf8);
    display: inline-flex;
    font-size: 0.86rem;
    font-weight: 800;
    min-height: 38px;
    padding: 8px 12px;
    text-decoration: none;
}

.public-growth-owner-nav a.active {
    background: rgba(29, 114, 184, 0.28);
    border-color: rgba(125, 211, 252, 0.55);
    color: #ffffff;
}

.public-growth-workspace-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 14px;
}

.public-growth-workspace-card {
    display: grid;
    gap: 14px;
    min-height: 180px;
}

.public-growth-workspace-card .btn {
    align-self: end;
    justify-self: start;
}

.public-growth-metric-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin: 14px 0;
}

.public-growth-metric-grid article {
    background: rgba(7, 18, 32, 0.64);
    border: 1px solid rgba(125, 211, 252, 0.22);
    border-radius: 8px;
    padding: 12px;
}

.public-growth-metric-grid strong {
    color: var(--text-main, #e5edf8);
    display: block;
    font-size: 1.35rem;
    line-height: 1.1;
}

.public-growth-metric-grid span {
    color: var(--text-muted, #9fb2ca);
    display: block;
    font-size: 0.72rem;
    font-weight: 800;
    margin-top: 4px;
    text-transform: uppercase;
}

.public-growth-entitlement-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
    margin: 14px 0;
}

.public-growth-entitlement-grid article,
.public-growth-schema-pills {
    background: rgba(15, 23, 42, 0.62);
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 8px;
    padding: 10px;
}

.public-growth-entitlement-grid article {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.public-growth-entitlement-grid strong {
    font-size: 0.78rem;
    overflow-wrap: anywhere;
}

.public-growth-schema-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.public-growth-site-card textarea,
.public-growth-content-card textarea,
.public-growth-directory-card textarea,
.public-growth-booking-card textarea,
.booking-feature-builder-card textarea,
.public-growth-domain-card textarea,
.public-growth-qr-card textarea,
.public-growth-edit-request-card textarea,
.public-growth-admin-site-controls textarea,
.public-growth-code-editor-card textarea {
    min-height: 74px;
}

.public-growth-site-card input,
.public-growth-site-card select,
.public-growth-site-card textarea,
.public-growth-content-card input,
.public-growth-content-card select,
.public-growth-content-card textarea,
.public-growth-files-card input,
.public-growth-files-card textarea,
.public-growth-directory-card input,
.public-growth-directory-card select,
.public-growth-directory-card textarea,
.public-growth-booking-card input,
.public-growth-booking-card select,
.public-growth-booking-card textarea,
.booking-feature-builder-card input,
.booking-feature-builder-card select,
.booking-feature-builder-card textarea,
.public-growth-domain-card input,
.public-growth-domain-card select,
.public-growth-qr-card input,
.public-growth-qr-card select,
.public-growth-qr-card textarea,
.public-growth-edit-request-card input,
.public-growth-edit-request-card select,
.public-growth-edit-request-card textarea,
.public-growth-admin-main input,
.public-growth-admin-main select,
.public-growth-admin-main textarea,
.public-growth-code-editor-card textarea {
    background: var(--input-bg, #101a2b);
    color: var(--text-main, #e5edf8);
    border-color: var(--border-subtle, #2d4058);
}

.public-growth-code-editor-card textarea {
    min-height: 62vh;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    font-size: 0.92rem;
    line-height: 1.45;
    tab-size: 2;
    white-space: pre;
    overflow: auto;
}

.public-growth-zip-upload-form,
.billing-owner-feature-access-card {
    border: 1px solid rgba(125, 211, 252, 0.28);
}

.billing-owner-feature-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    max-height: 420px;
    overflow: auto;
    padding-right: 4px;
}

.billing-owner-feature-row {
    align-items: flex-start;
    background: rgba(15, 23, 42, 0.58);
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 8px;
    gap: 8px;
    padding: 9px;
}

.billing-owner-feature-row span {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.billing-owner-feature-row small {
    color: var(--text-muted, #9fb2ca);
    overflow-wrap: anywhere;
}

.public-growth-files-card[data-public-growth-file-manager],
.public-growth-files-card[data-public-growth-owner-file-status],
.public-growth-admin-file-manager,
.public-growth-admin-publish,
.public-growth-admin-edit-requests,
.public-growth-admin-health,
.public-growth-admin-site-controls,
.public-growth-directory-card[data-public-growth-directory],
.public-growth-booking-card[data-public-growth-booking],
.public-growth-domain-card[data-public-growth-custom-domains],
.public-growth-qr-card[data-public-growth-qr] {
    position: relative;
}

.public-growth-files-card[data-public-growth-file-manager]::before,
.public-growth-files-card[data-public-growth-owner-file-status]::before,
.public-growth-admin-file-manager::before,
.public-growth-admin-publish::before,
.public-growth-admin-site-controls::before,
.public-growth-directory-card[data-public-growth-directory]::before,
.public-growth-booking-card[data-public-growth-booking]::before,
.public-growth-domain-card[data-public-growth-custom-domains]::before,
.public-growth-qr-card[data-public-growth-qr]::before {
    content: "";
    position: absolute;
    inset: 0 auto auto 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, #1d72b8, #2bb673);
    border-radius: 8px 8px 0 0;
}

.booking-platform-metrics,
.booking-setup-path,
.booking-platform-foundation-grid,
.booking-feature-split-grid,
.booking-builder-card-grid,
.booking-pricing-rule-grid,
.booking-import-card-grid,
.booking-window-type-card-grid,
.booking-package-choice-grid {
    display: grid;
    gap: 10px;
}

.booking-feature-split-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 14px 0;
}

.booking-feature-tile,
.booking-builder-band,
.booking-display-links-panel,
.booking-preview-surface,
.booking-builder-card,
.booking-service-item-picker,
.booking-import-card,
.booking-window-type-card,
.booking-window-preferences-card,
.booking-window-inventory-flow,
.booking-feature-price-editor {
    background: rgba(15, 23, 42, 0.62);
    border: 1px solid rgba(148, 163, 184, 0.24);
    border-radius: 8px;
    min-width: 0;
    padding: 14px;
}

.booking-feature-builder-card,
.booking-feature-builder-card *,
.booking-builder-band,
.booking-builder-card-grid,
.booking-pricing-rule-grid,
.booking-pricing-rule-grid article {
    box-sizing: border-box;
    max-width: 100%;
}

.booking-feature-builder-card label,
.booking-feature-builder-card .form-grid-2 > *,
.booking-feature-builder-card .form-grid-3 > *,
.booking-feature-builder-card .form-grid-4 > *,
.booking-builder-card > *,
.booking-pricing-rule-grid article > *,
.booking-import-card > *,
.booking-window-type-card > *,
.booking-feature-price-editor > * {
    min-width: 0;
    max-width: 100%;
}

.booking-feature-builder-card input,
.booking-feature-builder-card select,
.booking-feature-builder-card textarea {
    min-width: 0;
    width: 100%;
}

.booking-feature-tile {
    display: grid;
    gap: 10px;
}

.booking-window-preferences-card,
.booking-window-inventory-flow,
.booking-window-preferences-face,
.booking-window-inventory-page,
.booking-window-repair-list {
    display: grid;
    gap: 12px;
}

.booking-window-segment-group {
    border: 0;
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
}

.booking-window-segment-group legend {
    color: var(--text-main, var(--text, #e5edf8));
    font-weight: 800;
}

.booking-window-segment-group > div,
.booking-window-global-service-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.booking-window-segment-group label,
.booking-window-global-addon {
    min-width: 0;
}

.booking-window-card-visual {
    align-items: center;
    background: color-mix(in srgb, var(--primary, #1d72b8) 14%, transparent);
    border: 1px solid var(--border-subtle, var(--border, #2d4058));
    border-radius: 8px;
    color: var(--primary, #1d72b8);
    display: flex;
    font-weight: 900;
    min-height: 52px;
    justify-content: center;
}

.booking-feature-tile h2,
.booking-builder-band h3,
.booking-display-links-panel h2,
.booking-preview-surface h3 {
    margin-top: 0;
}

.booking-builder-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.booking-builder-visual-workbench {
    background: var(--surface-panel, var(--theme-card-bg, var(--panel, #0f1726)));
    border-color: var(--border-subtle, var(--border, #26384f));
    color: var(--text-main, var(--text, #e5edf8));
    display: grid;
    gap: 16px;
}

.booking-builder-visual-workbench h3,
.booking-builder-visual-workbench h4,
.booking-builder-visual-workbench strong,
.booking-builder-visual-workbench label {
    color: var(--text-main, var(--text, #e5edf8));
}

.booking-builder-visual-workbench p,
.booking-builder-visual-workbench small,
.booking-builder-visual-workbench .muted,
.booking-builder-visual-workbench .booking-feature-price-heading small,
.booking-builder-visual-workbench .booking-window-type-card-heading small,
.booking-builder-visual-workbench .booking-window-type-card small,
.booking-builder-visual-workbench .booking-window-type-price-row > span,
.booking-builder-visual-workbench [data-window-type-line-total] {
    color: var(--text-muted, var(--muted, #9fb2ca));
}

.booking-builder-visual-workbench input,
.booking-builder-visual-workbench select,
.booking-builder-visual-workbench textarea {
    background: var(--input-bg, var(--theme-input-bg, #101a2b));
    border: 1px solid var(--border-subtle, var(--border, #2d4058));
    color: var(--text-main, var(--text, #e5edf8));
}

.booking-builder-visual-workbench input::placeholder,
.booking-builder-visual-workbench textarea::placeholder {
    color: var(--text-muted, var(--muted, #9fb2ca));
}

.booking-builder-visual-workbench input[type="checkbox"] {
    accent-color: var(--primary, #1d72b8);
}

.booking-builder-visual-workbench .checkbox-row {
    background: color-mix(in srgb, var(--input-bg, #101a2b) 78%, transparent);
    border: 1px solid var(--border-subtle, var(--border, #2d4058));
    border-radius: 8px;
    color: var(--text-main, var(--text, #e5edf8));
}

.booking-builder-visual-workbench .checkbox-row span,
.booking-builder-visual-workbench .booking-owner-tile-preview,
.booking-builder-visual-workbench .booking-owner-tile-preview span {
    color: var(--text-main, var(--text, #e5edf8));
}

.booking-builder-visual-workbench .status-pill.status-muted {
    background: var(--status-neutral-bg, rgba(148, 163, 184, .16));
    border-color: var(--border-subtle, var(--border, #2d4058));
    color: var(--status-neutral-text, var(--text-main, #cbd5e1));
}

.booking-builder-canvas {
    background: var(--theme-soft-bg, var(--panel-soft, rgba(15, 23, 42, 0.58)));
    border: 1px solid var(--border-subtle, var(--border, #2d4058));
    border-radius: 8px;
    color: var(--text-main, var(--text, #e5edf8));
    display: grid;
    gap: 14px;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 0.8fr);
    padding: 16px;
}

.booking-builder-canvas h3,
.booking-builder-canvas p {
    margin: 0;
}

.booking-builder-canvas-head {
    display: grid;
    gap: 5px;
}

.booking-builder-flow-strip {
    align-content: center;
    display: grid;
    gap: 8px;
}

.booking-builder-flow-strip span {
    background: var(--theme-card-bg, var(--surface-panel, var(--panel, #0f1726)));
    border: 1px solid var(--border-subtle, var(--border, #2d4058));
    border-radius: 8px;
    color: var(--text-main, var(--text, #e5edf8));
    font-weight: 800;
    padding: 9px 10px;
}

.booking-builder-card-grid-visual {
    align-items: start;
}

.booking-builder-card {
    display: grid;
    gap: 10px;
}

.booking-builder-step-card {
    background: var(--surface-panel, var(--theme-card-bg, var(--panel, #0f1726)));
    border-color: var(--border-subtle, var(--border, #2d4058));
    color: var(--text-main, var(--text, #e5edf8));
    padding: 0;
}

.booking-calculator-builder-card summary {
    align-items: flex-start;
    cursor: pointer;
    display: flex;
    gap: 12px;
    justify-content: space-between;
    list-style: none;
    padding: 14px;
}

.booking-calculator-builder-card summary::-webkit-details-marker {
    display: none;
}

.booking-calculator-builder-card summary > span:first-child {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.booking-calculator-card-body {
    display: grid;
    gap: 10px;
    min-width: 0;
    padding: 0 14px 14px;
}

.booking-owner-tile-preview {
    align-items: center;
    display: flex;
    gap: 10px;
    min-width: 0;
}

.booking-owner-tile-check {
    background: var(--input-bg, var(--theme-input-bg, #101a2b));
    border: 2px solid var(--primary, #1d72b8);
    border-radius: 6px;
    height: 26px;
    width: 26px;
}

.booking-builder-edit-panels {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.booking-builder-edit-panel {
    background: var(--theme-soft-bg, var(--panel-soft, rgba(15, 23, 42, 0.58)));
    border: 1px solid var(--border-subtle, var(--border, #2d4058));
    border-radius: 8px;
    display: grid;
    gap: 10px;
    min-width: 0;
    padding: 12px;
}

.booking-builder-visual-workbench .booking-window-type-card,
.booking-builder-visual-workbench .booking-feature-price-editor,
.booking-builder-visual-workbench .booking-feature-price-row {
    background: color-mix(in srgb, var(--surface-panel, var(--theme-card-bg, #0f1726)) 84%, transparent);
    border-color: var(--border-subtle, var(--border, #2d4058));
    color: var(--text-main, var(--text, #e5edf8));
}

.booking-builder-visual-workbench .booking-window-type-card-grid {
    align-items: stretch;
}

.booking-builder-edit-panel h4 {
    margin: 0;
}

.booking-builder-edit-panel-wide {
    grid-column: 1 / -1;
}

.booking-service-item-picker {
    display: grid;
    gap: 12px;
    margin: 12px 0;
}

.booking-import-card-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.booking-window-type-card-grid {
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.booking-import-card {
    display: grid;
    gap: 7px;
}

.booking-window-type-card {
    display: grid;
    gap: 10px;
}

.booking-window-type-card-heading {
    display: grid;
    gap: 4px;
}

.booking-window-type-card-heading strong {
    overflow-wrap: anywhere;
}

.booking-window-type-card-heading small {
    color: var(--text-muted, #9fb2ca);
    font-size: 0.82rem;
}

.booking-window-type-price-row {
    align-items: end;
    display: grid;
    gap: 8px;
    grid-template-columns: minmax(0, 1fr) minmax(120px, auto);
}

.booking-window-type-price-row > span,
[data-window-type-line-total] {
    color: var(--text-muted, #9fb2ca);
    font-size: 0.86rem;
    font-weight: 700;
}

.booking-import-card strong,
.booking-feature-price-heading strong {
    overflow-wrap: anywhere;
}

.booking-import-card small,
.booking-import-card-meta,
.booking-feature-price-heading small {
    color: var(--text-muted, #9fb2ca);
    font-size: 0.82rem;
}

.booking-import-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.booking-import-card-meta span {
    background: rgba(14, 165, 233, 0.08);
    border: 1px solid rgba(125, 211, 252, 0.2);
    border-radius: 999px;
    padding: 3px 8px;
}

.booking-feature-price-editor {
    display: grid;
    gap: 10px;
}

.booking-feature-price-heading {
    display: grid;
    gap: 4px;
}

.booking-feature-price-grid {
    display: grid;
    gap: 8px;
}

.booking-feature-price-row {
    align-items: end;
    background: rgba(7, 18, 32, 0.44);
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 8px;
    display: grid;
    gap: 8px;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.4fr) minmax(96px, 0.55fr) minmax(120px, 0.75fr);
    padding: 9px;
}

.booking-compatibility-tools {
    background: #f8fafc;
    border: 1px dashed #b8c5d8;
    border-radius: 8px;
    color: #314256;
    padding: 12px;
}

.booking-pricing-rule-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.booking-pricing-rule-grid article {
    background: rgba(7, 18, 32, 0.48);
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 8px;
    min-width: 0;
    padding: 12px;
}

.booking-publish-checklist {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.booking-preview-surface {
    align-items: stretch;
    display: grid;
    gap: 16px;
    grid-template-columns: minmax(0, 1fr) 280px;
    margin: 14px 0;
}

.booking-preview-phone {
    background: rgba(8, 17, 31, 0.9);
    border: 1px solid rgba(125, 211, 252, 0.26);
    border-radius: 8px;
    display: grid;
    gap: 10px;
    padding: 14px;
}

.booking-preview-phone-bar {
    background: rgba(148, 163, 184, 0.32);
    border-radius: 999px;
    height: 5px;
    width: 78px;
}

.booking-setup-path {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 12px 0;
}

.booking-setup-path article {
    align-items: start;
    background: rgba(14, 165, 233, 0.08);
    border: 1px solid rgba(125, 211, 252, 0.24);
    border-radius: 8px;
    display: grid;
    gap: 7px;
    grid-template-columns: auto 1fr;
    min-width: 0;
    padding: 11px;
}

.booking-setup-path strong {
    align-items: center;
    background: rgba(29, 114, 184, 0.24);
    border: 1px solid rgba(125, 211, 252, 0.3);
    border-radius: 999px;
    display: inline-flex;
    height: 28px;
    justify-content: center;
    width: 28px;
}

.booking-setup-path span {
    color: var(--text-main, #e5edf8);
    font-size: 0.86rem;
    font-weight: 700;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.booking-setup-guide {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 12px 0;
}

.booking-setup-guide article {
    background: rgba(14, 165, 233, 0.08);
    border: 1px solid rgba(125, 211, 252, 0.22);
    border-radius: 8px;
    display: grid;
    gap: 8px;
    grid-template-columns: auto minmax(0, 1fr);
    min-width: 0;
    padding: 12px;
}

.booking-setup-guide strong {
    align-items: center;
    background: rgba(29, 114, 184, 0.24);
    border: 1px solid rgba(125, 211, 252, 0.28);
    border-radius: 999px;
    display: inline-flex;
    height: 30px;
    justify-content: center;
    width: 30px;
}

.booking-setup-guide span {
    color: var(--text-main, #e5edf8);
    font-size: 0.88rem;
    font-weight: 700;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.booking-standard-setup-card .booking-builder-band[data-standard-booking-visual-builder] {
    border-color: rgba(96, 165, 250, 0.4);
}

.booking-package-setup-card .booking-builder-band[data-package-builder-visual-cards] {
    border-color: rgba(45, 212, 191, 0.36);
}

.booking-owner-builder-layout {
    align-items: start;
    display: grid;
    gap: 16px;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
}

.booking-owner-builder-main,
.booking-owner-builder-side,
.booking-owner-live-preview,
.booking-publish-repair-panel,
.booking-owner-walkthrough,
.booking-builder-toolbar,
.booking-builder-preset-row,
.booking-card-blocker-list,
.booking-owner-card-preview,
.booking-owner-mini-tile {
    min-width: 0;
}

.booking-owner-builder-side {
    display: grid;
    gap: 12px;
    position: sticky;
    top: 84px;
}

.booking-owner-live-preview,
.booking-publish-repair-panel,
.booking-owner-walkthrough {
    background: var(--surface-panel, var(--theme-card-bg, var(--panel, #0f1726)));
    border: 1px solid var(--border-subtle, var(--border, #2d4058));
    border-radius: 8px;
    color: var(--text-main, var(--text, #e5edf8));
    padding: 14px;
}

.booking-owner-walkthrough {
    align-items: center;
    display: flex;
    gap: 12px;
    justify-content: space-between;
}

.booking-owner-walkthrough h3,
.booking-owner-walkthrough p,
.booking-owner-live-preview h3,
.booking-publish-repair-panel h3 {
    margin: 0;
}

.booking-owner-guided-package-card > summary {
    align-items: center;
    display: flex;
    gap: 12px;
    justify-content: space-between;
}

.booking-owner-package-decision-card,
.booking-owner-window-price-gate,
.booking-owner-window-price-panel {
    background: rgba(14, 165, 233, .08);
    border: 1px solid rgba(125, 211, 252, .22);
    border-radius: 8px;
    display: grid;
    gap: 12px;
    margin-top: 12px;
    padding: 14px;
}

.booking-owner-package-decision-card h3,
.booking-owner-window-price-gate h3 {
    margin: 2px 0 4px;
}

.booking-owner-package-decision-card p,
.booking-owner-window-price-gate p {
    color: var(--text-muted, #9fb2ca);
    margin: 0;
}

.booking-owner-answer-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.booking-calculator-card-body[hidden],
.booking-owner-window-price-panel[hidden],
.booking-owner-window-type-card[hidden] {
    display: none ;
}

.booking-owner-window-pricing-flow {
    display: grid;
    gap: 12px;
}

.booking-owner-window-price-panel .booking-feature-price-heading {
    align-items: start;
    display: flex;
    gap: 12px;
    justify-content: space-between;
}

.booking-owner-window-price-panel .booking-window-type-card-grid {
    grid-template-columns: repeat(2, minmax(220px, 1fr));
}

.booking-owner-preview-phone {
    background: rgba(8, 17, 31, .88);
    border: 1px solid rgba(125, 211, 252, .24);
    border-radius: 8px;
    display: grid;
    gap: 10px;
    padding: 12px;
}

.booking-owner-preview-list {
    display: grid;
    gap: 7px;
    max-height: 320px;
    overflow: auto;
}

.booking-owner-preview-row,
.booking-owner-preview-total,
.booking-card-action-row,
.booking-builder-toolbar,
.booking-builder-preset-row {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.booking-owner-preview-row,
.booking-owner-preview-total {
    background: rgba(14, 165, 233, .08);
    border: 1px solid rgba(125, 211, 252, .2);
    border-radius: 8px;
    justify-content: space-between;
    padding: 8px;
}

.booking-publish-repair-panel ul,
.booking-card-blocker-list {
    display: grid;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.booking-publish-repair-panel li {
    align-items: center;
    background: rgba(245, 158, 11, .08);
    border: 1px solid rgba(245, 158, 11, .22);
    border-radius: 8px;
    display: grid;
    gap: 8px;
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 8px;
}

.booking-publish-repair-panel li span,
.booking-card-blocker-list span {
    display: grid;
    gap: 2px;
}

.booking-card-blocker-list {
    background: rgba(245, 158, 11, .08);
    border: 1px dashed rgba(245, 158, 11, .25);
    border-radius: 8px;
    padding: 10px;
}

.booking-owner-card-preview {
    background: rgba(14, 165, 233, .08);
    border-color: rgba(125, 211, 252, .24);
}

.booking-owner-mini-tile {
    border: 1px solid rgba(125, 211, 252, .22);
    border-radius: 8px;
    display: grid;
    gap: 4px;
    padding: 10px;
}

.booking-card-action-row {
    justify-content: flex-end;
}

.booking-builder-toolbar,
.booking-builder-preset-row {
    background: rgba(14, 165, 233, .08);
    border: 1px solid rgba(125, 211, 252, .22);
    border-radius: 8px;
    justify-content: flex-start;
    padding: 10px;
}

.drag-handle {
    color: var(--text-muted, #9fb2ca);
    cursor: grab;
    font-weight: 900;
}

.is-setup-highlighted {
    box-shadow: 0 0 0 4px rgba(45, 212, 191, .34), 0 18px 40px rgba(0, 0, 0, .18);
    outline: 2px solid rgba(45, 212, 191, .85);
    outline-offset: 2px;
}

.booking-platform-foundation-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 14px 0;
}

.booking-platform-foundation-grid article,
.booking-preset-helper,
.booking-preset-grid article,
.booking-package-choice,
.booking-package-section {
    background: rgba(15, 23, 42, 0.62);
    border: 1px solid rgba(148, 163, 184, 0.24);
    border-radius: 8px;
    padding: 12px;
    min-width: 0;
}

.booking-preset-helper {
    display: grid;
    gap: 12px;
    margin: 4px 0;
}

.booking-preset-helper h3 {
    margin: 0 0 4px;
}

.booking-preset-helper p {
    margin: 0;
}

.booking-preset-grid {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.booking-preset-grid article {
    display: grid;
    gap: 5px;
}

.booking-preset-grid span {
    color: var(--text-muted, #9fb2ca);
    font-size: 0.84rem;
    line-height: 1.4;
}

.booking-advanced-rules {
    background: rgba(7, 18, 32, 0.48);
    border: 1px dashed rgba(148, 163, 184, 0.34);
    border-radius: 8px;
    padding: 10px 12px;
}

.booking-advanced-rules summary {
    cursor: pointer;
    font-weight: 800;
}

.booking-advanced-rules textarea {
    margin-top: 10px;
}

.booking-platform-foundation-grid h3,
.booking-package-section h3 {
    margin-top: 0;
}

.booking-platform-setup-form small,
.booking-package-builder small,
.public-booking-form small {
    overflow-wrap: anywhere;
}

.booking-package-builder {
    border: 1px solid rgba(125, 211, 252, 0.32);
    border-radius: 8px;
    padding: 14px;
}

.booking-package-choice-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 12px 0;
}

.booking-package-choice {
    display: grid;
    gap: 5px;
    cursor: pointer;
}

.booking-package-choice input {
    width: 18px;
    height: 18px;
}

.booking-package-choice span {
    font-weight: 700;
}

.booking-package-selected-sections {
    display: grid;
    gap: 10px;
}

.booking-package-summary,
.booking-calculation-preview {
    border: 1px solid rgba(125, 211, 252, 0.28);
    background: rgba(14, 165, 233, 0.08);
    border-radius: 8px;
    padding: 10px 12px;
    font-weight: 700;
}

.booking-calculator-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.booking-question {
    min-width: 0;
}

.booking-question input,
.booking-question select,
.booking-question textarea {
    width: 100%;
}

.booking-question-checkbox {
    align-items: center;
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 8px;
    padding: 10px;
}

.public-booking-form[data-public-booking-flow="package_builder"] {
    max-width: 1100px;
}

.booking-office-queue-filters {
    background: rgba(7, 18, 32, 0.5);
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 8px;
    margin: 10px 0 12px;
    padding: 12px;
}

.booking-request-detail-card .definition-grid,
.booking-line-breakdown,
.booking-package-office-line,
.booking-request-review-card .inline-card {
    background: rgba(7, 18, 32, 0.48);
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 8px;
    padding: 12px;
}

.booking-request-detail-card .definition-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.booking-request-detail-card dl {
    margin: 0;
}

.booking-request-detail-card dt {
    color: var(--text-muted, #9fb2ca);
    font-size: 0.72rem;
    font-weight: 800;
    margin-top: 8px;
    text-transform: uppercase;
}

.booking-request-detail-card dd {
    margin: 2px 0 0;
    overflow-wrap: anywhere;
}

.booking-package-office-line {
    display: grid;
    gap: 10px;
    margin-top: 10px;
}

.booking-json-block {
    background: rgba(2, 6, 23, 0.62);
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 8px;
    color: var(--text-main, #e5edf8);
    max-height: 360px;
    overflow: auto;
    padding: 12px;
    white-space: pre-wrap;
    word-break: break-word;
}

.booking-reports-panel {
    background: rgba(7, 18, 32, 0.48);
    border: 1px solid rgba(125, 211, 252, 0.24);
    border-radius: 8px;
    display: grid;
    gap: 12px;
    margin: 14px 0;
    min-width: 0;
    padding: 14px;
}

.booking-reports-panel h3,
.booking-report-table-card h4 {
    margin-top: 0;
}

.booking-reports-metrics {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.booking-report-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.booking-report-table-card {
    background: rgba(15, 23, 42, 0.56);
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 8px;
    min-width: 0;
    padding: 12px;
}

.booking-report-table {
    max-width: 100%;
    overflow-x: auto;
}

.booking-report-table table {
    min-width: 760px;
    table-layout: auto;
}

.booking-report-table th,
.booking-report-table td {
    font-size: 0.82rem;
    min-width: 7.75rem;
    overflow-wrap: anywhere;
    vertical-align: top;
    white-space: normal;
}

.compact-list {
    display: grid;
    gap: 6px;
    margin: 8px 0 0;
    padding-left: 18px;
}

@media (max-width: 1100px) {
    .public-growth-workspace-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .public-growth-entitlement-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .public-growth-metric-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .booking-report-grid {
        grid-template-columns: 1fr;
    }

    .booking-setup-path,
    .booking-setup-guide {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .booking-platform-foundation-grid,
    .booking-owner-builder-layout,
    .booking-builder-canvas,
    .booking-builder-edit-panels,
    .booking-feature-split-grid,
    .booking-builder-card-grid,
    .booking-pricing-rule-grid,
    .booking-import-card-grid,
    .booking-window-type-card-grid,
    .booking-preview-surface,
    .booking-preset-grid,
    .booking-package-choice-grid,
    .booking-calculator-grid,
    .booking-request-detail-card .definition-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .billing-owner-feature-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .public-growth-workspace-grid,
    .public-growth-entitlement-grid,
    .public-growth-metric-grid,
    .booking-platform-foundation-grid,
    .booking-builder-canvas,
    .booking-builder-edit-panels,
    .booking-feature-split-grid,
    .booking-builder-card-grid,
    .booking-pricing-rule-grid,
    .booking-preview-surface,
    .booking-publish-checklist,
    .booking-preset-grid,
    .booking-import-card-grid,
    .booking-window-type-card-grid,
    .booking-owner-window-price-panel .booking-window-type-card-grid,
    .booking-package-choice-grid,
    .booking-reports-metrics,
    .booking-calculator-grid,
    .booking-request-detail-card .definition-grid,
    .billing-owner-feature-list {
        grid-template-columns: 1fr;
    }

    .booking-feature-price-row {
        grid-template-columns: 1fr;
    }

    .booking-window-type-price-row {
        grid-template-columns: 1fr;
    }

    .booking-setup-path,
    .booking-setup-guide {
        grid-template-columns: 1fr;
    }

    .booking-report-table table {
        min-width: 680px;
    }

    .public-standard-booking-form,
    .booking-public-wizard,
    .booking-public-step,
    .booking-standard-wizard-grid,
    .booking-standard-public-table,
    .booking-standard-public-table table,
    .booking-standard-public-table tbody,
    .booking-standard-public-table tr,
    .booking-standard-public-table td,
    .booking-standard-public-table small {
        max-width: 100%;
        min-width: 0;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .booking-standard-public-table {
        overflow-x: visible;
    }

    .booking-standard-public-table table,
    .booking-standard-public-table tbody {
        display: block;
        width: 100%;
    }

    .booking-standard-public-table thead {
        display: none;
    }

    .booking-standard-menu-row {
        border: 1px solid rgba(148, 163, 184, .24);
        border-radius: 8px;
        display: grid;
        gap: 8px;
        grid-template-columns: 32px minmax(0, 1fr);
        margin-bottom: 10px;
        padding: 10px;
    }

    .booking-standard-menu-row td {
        display: block;
        padding: 0;
    }

    .booking-standard-menu-row td:nth-child(1) {
        grid-row: span 3;
    }

    .booking-standard-menu-row td:nth-child(3),
    .booking-standard-menu-row td:nth-child(4) {
        grid-column: 2;
    }

    .booking-public-check input[type="checkbox"] {
        min-height: 34px;
        min-width: 34px;
    }

    .booking-public-qty {
        width: min(100%, 180px);
    }

    .booking-owner-builder-side {
        position: static;
    }

    .booking-owner-walkthrough,
    .booking-owner-guided-package-card > summary,
    .booking-owner-window-price-panel .booking-feature-price-heading,
    .booking-builder-toolbar,
    .booking-builder-preset-row {
        align-items: stretch;
        display: grid;
    }
}

.guided-quote-public {
    --guided-accent: #2563eb;
    --guided-border: #d8e1ec;
    --guided-muted: #64748b;
    --guided-text: #0f172a;
    background: #f6f8fb;
    color: var(--guided-text);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    min-height: 100vh;
    padding: clamp(1rem, 3vw, 2rem);
}

.guided-quote-public .guided-public-card {
    background: #fff;
    border: 1px solid var(--guided-border);
    border-radius: 8px;
    box-shadow: 0 18px 48px rgba(15, 23, 42, .08);
    margin: 0 auto;
    max-width: 1120px;
    padding: clamp(1rem, 3vw, 2rem);
}

.guided-public-header,
.guided-public-step,
.guided-step-heading,
.guided-public-question-grid,
.guided-public-service-grid,
.guided-contact-grid {
    display: grid;
    gap: 1rem;
}

.guided-public-header {
    border-bottom: 1px solid var(--guided-border);
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
}

.guided-public-header h1,
.guided-step-heading h2 {
    letter-spacing: 0;
    margin: 0;
}

.guided-step-heading span {
    color: var(--guided-accent);
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
}

.guided-public-service-grid {
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    max-height: min(58vh, 680px);
    overflow: auto;
    padding-right: .25rem;
}

.guided-public-service-tile,
.guided-public-question-card,
.guided-final-summary,
.guided-step-price {
    border: 1px solid var(--guided-border);
    border-radius: 8px;
    background: #fff;
    padding: 1rem;
}

.guided-public-service-tile {
    cursor: pointer;
    display: grid;
    gap: .65rem;
    min-height: 132px;
}

.guided-public-service-tile:has(input:checked) {
    border-color: var(--guided-accent);
    box-shadow: inset 0 0 0 1px var(--guided-accent);
}

.guided-public-service-tile input {
    width: 20px;
    height: 20px;
}

.guided-public-service-tile span {
    display: grid;
    gap: .25rem;
}

.guided-public-service-tile small,
.guided-public-question-card small,
.guided-final-summary .muted,
.guided-step-heading p {
    color: var(--guided-muted);
}

.guided-public-question-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    max-height: none;
}

.guided-public-question-card {
    display: grid;
    gap: .5rem;
}

.guided-window-type-card input[type="number"] {
    font-size: 1.25rem;
    font-weight: 700;
}

.guided-repeatable-question-card {
    border-style: dashed;
}

.guided-question-input-row {
    align-items: center;
    display: grid;
    gap: .5rem;
    grid-template-columns: 1fr auto;
}

.guided-contact-grid,
.lead-form-public-address .lead-form-address-grid {
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.guided-step-actions {
    align-items: center;
    display: flex;
    justify-content: flex-end;
    gap: .75rem;
    margin-top: 1rem;
}

.guided-summary-line,
.guided-summary-total {
    align-items: center;
    border-bottom: 1px solid #edf2f7;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .55rem 0;
}

.guided-summary-total {
    border-bottom: 0;
    font-size: 1.15rem;
}

.guided-public-upload {
    margin: 1rem 0;
}

@media (max-width: 640px) {
    .guided-quote-public {
        padding: .75rem;
    }

    .guided-public-service-grid,
    .guided-public-question-grid,
    .guided-contact-grid,
    .lead-form-public-address .lead-form-address-grid {
        grid-template-columns: 1fr;
    }

    .guided-public-service-grid,
    .guided-public-question-grid {
        max-height: 68vh;
        overflow: auto;
        overscroll-behavior: contain;
    }

    .guided-window-type-card {
        padding: .85rem;
    }

    .guided-step-actions {
        align-items: stretch;
        display: grid;
    }
}

/* Standard/Advanced operational mobile full-width guard. */
@media screen and (max-width: 760px) {
    .app-shell[data-mobile-layout-mode="mobile"],
    .app-shell:has(.mobile-work-order-page),
    .app-shell:has(.mobile-document-page),
    .app-shell:has(.operational-module-shell),
    .app-shell:has(.operational-detail-shell[data-operational-ui="v1"]),
    .app-shell:has(.operational-list-shell),
    .app-shell:has(.scheduling-calendar-shell),
    .app-shell:has(.scheduling-calendar-map-shell),
    .app-shell:has(.workspace-layout-v4),
    .app-shell:has(.invoice-detail-shell[data-operational-ui="v1"]) {
        --crm-workspace-width: 100% ;
        box-sizing: border-box ;
        grid-template-columns: minmax(0, 1fr) ;
        margin-inline: 0 ;
        max-width: none ;
        min-width: 0 ;
        overflow-x: hidden ;
        width: 100% ;
    }

    .app-shell[data-mobile-layout-mode="mobile"] .main-content,
    .app-shell .main-content:has(.mobile-work-order-page),
    .app-shell .main-content:has(.mobile-document-page),
    .app-shell .main-content:has(.operational-module-shell),
    .app-shell .main-content:has(.operational-detail-shell[data-operational-ui="v1"]),
    .app-shell .main-content:has(.operational-list-shell),
    .app-shell .main-content:has(.scheduling-calendar-shell),
    .app-shell .main-content:has(.scheduling-calendar-map-shell),
    .app-shell .main-content:has(.workspace-layout-v4),
    .app-shell .main-content:has(.invoice-detail-shell[data-operational-ui="v1"]) {
        --crm-workspace-width: 100% ;
        box-sizing: border-box ;
        margin-inline: 0 ;
        max-width: none ;
        min-width: 0 ;
        padding-left: env(safe-area-inset-left, 0px) ;
        padding-right: env(safe-area-inset-right, 0px) ;
        width: 100% ;
    }

    .mobile-work-order-page,
    .mobile-document-page,
    .app-shell[data-mobile-layout-mode="mobile"] :where(.mobile-work-order-page, .mobile-document-page, .operational-module-shell, .operational-list-shell, .operational-detail-shell[data-operational-ui="v1"], .invoice-detail-shell[data-operational-ui="v1"], .scheduling-calendar-shell, .scheduling-calendar-map-shell, .workspace-layout-v4) {
        box-sizing: border-box ;
        margin-left: 0 ;
        margin-right: 0 ;
        max-width: none ;
        min-width: 0 ;
        padding-left: 0 ;
        padding-right: 0 ;
        width: 100% ;
    }

    .mobile-work-order-page :where(.layout-grid, .mobile-work-order-advanced-grid, .mobile-document-advanced-grid),
    .mobile-document-page :where(.layout-grid, .mobile-work-order-advanced-grid, .mobile-document-advanced-grid),
    .app-shell[data-mobile-layout-mode="mobile"] :where(.document-detail-layout, .calendar-module-board, .calendar-map-layout, .workspace-layout-v4, .work-order-line-card-grid, .document-line-snapshot-grid),
    .app-shell[data-mobile-layout-mode="mobile"] :where(.layout-grid, .record-main.layout-grid) {
        grid-template-columns: 1fr ;
        width: 100% ;
    }

    .mobile-work-order-page :where(.card, .layout-card, .layout-card-body, .mobile-work-order-card, .summary-card, .sub-card, .placeholder-card, .document-preview-card, .mobile-document-advanced-panel),
    .mobile-document-page :where(.card, .layout-card, .layout-card-body, .mobile-work-order-card, .summary-card, .sub-card, .placeholder-card, .document-preview-card, .mobile-document-advanced-panel),
    .app-shell[data-mobile-layout-mode="mobile"] :where(.card, .layout-card, .layout-card-body, .operational-module-shell, .document-main, .summary-panel, .right-summary-panel, .work-order-line-card, .document-line-snapshot-card, .calendar-module-panel, .calendar-map-list-panel, .calendar-map-canvas-panel, .workspace-panel, .mobile-work-order-card, .summary-card, .sub-card, .placeholder-card) {
        box-sizing: border-box ;
        grid-column: 1 / -1 ;
        max-width: none ;
        min-width: 0 ;
        overflow-wrap: break-word ;
        word-break: normal ;
        width: 100% ;
    }

    .mobile-work-order-page :where(.table-scroll, .responsive-table, .document-lines, .mobile-document-advanced-panel .table-scroll),
    .mobile-document-page :where(.table-scroll, .responsive-table, .document-lines, .mobile-document-advanced-panel .table-scroll),
    .app-shell[data-mobile-layout-mode="mobile"] :where(.table-scroll, .responsive-table, .document-lines) {
        max-width: 100% ;
        overflow-x: auto ;
        -webkit-overflow-scrolling: touch;
    }

    .mobile-work-order-page :where(.btn, button, select, input, textarea),
    .mobile-document-page :where(.btn, button, select, input, textarea) {
        max-width: 100% ;
    }

    .mobile-work-order-page .toolbar-menu-panel button[name="layout_action"]:is([value="move_left"], [value="move_right"], [value="half_width"], [value="quarter_width"], [value="fullscreen"]),
    .mobile-document-page .toolbar-menu-panel button[name="layout_action"]:is([value="move_left"], [value="move_right"], [value="half_width"], [value="quarter_width"], [value="fullscreen"]) {
        display: none ;
    }
}

/* Mobile operational full-viewport and horizontal service-text repair. */
@media screen and (max-width: 900px) {
    .app-shell[data-mobile-layout-mode="mobile"] .main-content,
    .app-shell .main-content:has(.mobile-work-order-page),
    .app-shell .main-content:has(.mobile-document-page),
    .app-shell .main-content:has(.estimate-detail-shell[data-operational-ui="v1"]),
    .app-shell .main-content:has(.work-order-detail-shell[data-operational-ui="v1"]),
    .app-shell .main-content:has(.invoice-detail-shell[data-operational-ui="v1"]),
    .app-shell .main-content.operational-detail-main-content {
        --crm-workspace-width: 100% ;
        box-sizing: border-box ;
        margin-left: 0 ;
        margin-right: 0 ;
        max-width: none ;
        min-width: 0 ;
        padding-left: max(.5rem, env(safe-area-inset-left)) ;
        padding-right: max(.5rem, env(safe-area-inset-right)) ;
        width: 100% ;
    }

    .app-shell[data-mobile-layout-mode="mobile"] .main-content > :not(script),
    .app-shell .main-content:has(.mobile-work-order-page) > :not(script),
    .app-shell .main-content:has(.mobile-document-page) > :not(script),
    .app-shell .main-content:has(.estimate-detail-shell[data-operational-ui="v1"]) > :not(script),
    .app-shell .main-content:has(.work-order-detail-shell[data-operational-ui="v1"]) > :not(script),
    .app-shell .main-content:has(.invoice-detail-shell[data-operational-ui="v1"]) > :not(script),
    .mobile-work-order-page,
    .mobile-document-page,
    .mobile-work-order-page :where(.mobile-work-order-card, .mobile-document-lines, .mobile-document-line, .document-line-change-report-card, .mobile-document-advanced-panel, .layout-grid, .layout-card, .layout-card-body, .card, .sub-card),
    .mobile-document-page :where(.mobile-work-order-card, .mobile-document-lines, .mobile-document-line, .document-line-change-report-card, .mobile-document-advanced-panel, .layout-grid, .layout-card, .layout-card-body, .card, .sub-card),
    .app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell[data-operational-ui="v1"] :where(.document-detail-layout, .document-main, .document-preview-card, .summary-panel, .right-summary-panel, .line-item-flow-card, .card, .sub-card) {
        box-sizing: border-box ;
        flex-basis: 100% ;
        margin-left: 0 ;
        margin-right: 0 ;
        max-width: none ;
        min-width: 0 ;
        width: 100% ;
    }

    .mobile-work-order-page :where(a, button, input, select, textarea, summary, label, [role="button"]),
    .mobile-document-page :where(a, button, input, select, textarea, summary, label, [role="button"]),
    .app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell[data-operational-ui="v1"] :where(a, button, input, select, textarea, summary, label, [role="button"]) {
        max-width: 100% ;
        pointer-events: auto ;
        touch-action: manipulation;
    }

    .mobile-work-order-page :where(.table-scroll, .responsive-table, .document-lines, .document-line-table, .mobile-document-advanced-panel .table-scroll),
    .mobile-document-page :where(.table-scroll, .responsive-table, .document-lines, .document-line-table, .mobile-document-advanced-panel .table-scroll),
    .app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell[data-operational-ui="v1"] :where(.table-scroll, .document-lines, .document-line-table, .document-line-table-wrap) {
        box-sizing: border-box ;
        max-width: 100% ;
        overflow-x: auto ;
        overflow-y: visible ;
        padding-right: 0 ;
        -webkit-overflow-scrolling: touch;
    }

    .mobile-document-page :where(.document-lines, .document-line-table),
    .mobile-work-order-page :where(.document-lines, .document-line-table),
    .app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell[data-operational-ui="v1"] :where(.document-lines, .document-line-table, .line-item-flow-card table) {
        max-width: none ;
        min-width: 680px ;
        table-layout: fixed ;
        width: max(680px, 100%) ;
    }

    .mobile-document-page :where(.document-lines th:nth-child(2), .document-lines td:nth-child(2), .document-line-table th:nth-child(2), .document-line-table td:nth-child(2)),
    .mobile-work-order-page :where(.document-lines th:nth-child(2), .document-lines td:nth-child(2), .document-line-table th:nth-child(2), .document-line-table td:nth-child(2)),
    .app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell[data-operational-ui="v1"] :where(.document-lines th:nth-child(2), .document-lines td:nth-child(2), .document-line-table th:nth-child(2), .document-line-table td:nth-child(2)) {
        min-width: 14rem ;
        overflow-wrap: break-word ;
        white-space: normal ;
        word-break: normal ;
    }

    .mobile-work-order-standard-line,
    .mobile-document-line,
    .mobile-work-order-line-card,
    .document-line-snapshot-card,
    .mobile-work-order-page :where(.document-line-service-name, .document-line-service-meta, .document-line-service-description),
    .mobile-document-page :where(.document-line-service-name, .document-line-service-meta, .document-line-service-description),
    .app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell[data-operational-ui="v1"] :where(.document-line-service-name, .document-line-service-meta, .document-line-service-description, .document-line-snapshot-main h3, .document-line-snapshot-main p) {
        overflow-wrap: break-word ;
        text-orientation: mixed ;
        white-space: normal ;
        word-break: normal ;
        writing-mode: horizontal-tb ;
    }

    .mobile-work-order-standard-line > strong,
    .mobile-document-line > strong,
    .mobile-work-order-line-card h3,
    .document-line-snapshot-main h3,
    .document-line-service-name {
        display: block ;
        line-height: 1.25 ;
        max-width: 100% ;
        min-width: 0 ;
    }

    .mobile-work-order-standard-line p,
    .mobile-document-line p,
    .mobile-work-order-line-card p,
    .document-line-service-description,
    .document-line-snapshot-main p {
        max-width: 100% ;
        min-width: 0 ;
        overflow: visible ;
    }
}

/* Phone document/work-order layer reset: remove side gutter and shadow waste. */
@media screen and (max-width: 900px), screen and (hover: none) and (pointer: coarse) {
    html:has(.mobile-work-order-page),
    body:has(.mobile-work-order-page),
    html:has(.mobile-document-page),
    body:has(.mobile-document-page),
    .app-shell:has(.mobile-work-order-page),
    .app-shell:has(.mobile-document-page),
    .app-shell .main-content:has(.mobile-work-order-page),
    .app-shell .main-content:has(.mobile-document-page) {
        background: #fff ;
        box-shadow: none ;
        box-sizing: border-box ;
        filter: none ;
        margin-left: 0 ;
        margin-right: 0 ;
        max-width: none ;
        min-width: 0 ;
        overflow-x: hidden ;
        padding-left: 0 ;
        padding-right: 0 ;
        width: 100% ;
    }

    .mobile-work-order-page,
    .mobile-document-page,
    .mobile-work-order-page :where(.layout-grid, .layout-card, .layout-card-body, .card, .sub-card, .summary-card, .placeholder-card, .mobile-work-order-card, .mobile-work-order-standard-line, .mobile-work-order-line-card, .mobile-document-lines, .mobile-document-line, .document-line-change-report-card, .mobile-document-advanced-panel),
    .mobile-document-page :where(.layout-grid, .layout-card, .layout-card-body, .card, .sub-card, .summary-card, .placeholder-card, .mobile-work-order-card, .mobile-work-order-standard-line, .mobile-work-order-line-card, .mobile-document-lines, .mobile-document-line, .document-line-change-report-card, .mobile-document-advanced-panel) {
        box-shadow: none ;
        box-sizing: border-box ;
        filter: none ;
        margin-left: 0 ;
        margin-right: 0 ;
        max-width: none ;
        min-width: 0 ;
        width: 100% ;
    }

    .mobile-work-order-standard-line,
    .mobile-work-order-line-card,
    .mobile-document-line,
    .mobile-document-page .document-preview-card,
    .mobile-work-order-page .document-preview-card {
        border-left: 0 ;
        border-right: 0 ;
        border-radius: 0 ;
    }

    .mobile-work-order-standard-lines,
    .mobile-document-lines {
        align-items: stretch ;
        box-sizing: border-box ;
        display: flex ;
        flex-direction: column ;
        gap: 12px ;
        padding: 16px ;
        width: 100% ;
    }

    .mobile-work-order-line-list {
        align-items: stretch ;
        box-sizing: border-box ;
        display: flex ;
        flex-direction: column ;
        gap: 12px ;
        padding: 0 ;
        width: 100% ;
    }

    .mobile-work-order-standard-line,
    .mobile-work-order-line-card,
    .mobile-document-line {
        box-sizing: border-box ;
        display: block ;
        justify-self: stretch ;
        margin-left: -16px ;
        margin-right: -16px ;
        max-width: none ;
        min-width: 0 ;
        width: auto ;
    }

    .document-line-edit-row {
        border-left: 0 ;
        border-right: 0 ;
        border-radius: 0 ;
        box-sizing: border-box ;
        margin-left: -16px ;
        margin-right: -16px ;
        max-width: none ;
        min-width: 0 ;
        width: auto ;
    }

    .mobile-work-order-line-timer {
        box-sizing: border-box ;
        display: block ;
        justify-self: stretch ;
        margin-left: 0 ;
        margin-right: 0 ;
        max-width: 100% ;
        min-width: 0 ;
        width: 100% ;
    }

    .mobile-work-order-page :where(.mobile-work-order-line-stats, .mobile-work-order-line-timer-metrics, .mobile-work-order-line-timer-buttons),
    .mobile-document-page :where(.mobile-work-order-line-stats, .mobile-work-order-line-timer-metrics, .mobile-work-order-line-timer-buttons),
    .mobile-work-order-page :where(.mobile-work-order-line-timer-buttons form, .mobile-work-order-line-timer-buttons button, .mobile-work-order-line-timer-buttons input, .mobile-work-order-line-timer-buttons select),
    .mobile-document-page :where(.mobile-work-order-line-timer-buttons form, .mobile-work-order-line-timer-buttons button, .mobile-work-order-line-timer-buttons input, .mobile-work-order-line-timer-buttons select) {
        box-sizing: border-box ;
        margin-left: 0 ;
        margin-right: 0 ;
        max-width: 100% ;
        min-width: 0 ;
        width: 100% ;
    }

    .mobile-work-order-page :where(.mobile-work-order-line-stats span, .mobile-work-order-line-timer-metrics span, .mobile-work-order-line-timer-buttons form),
    .mobile-document-page :where(.mobile-work-order-line-stats span, .mobile-work-order-line-timer-metrics span, .mobile-work-order-line-timer-buttons form) {
        background-color: #ffffff ;
        border: 1px solid #dcdcdc ;
        border-radius: 8px ;
    }
}

/* Public document mobile full-width hard override. */
@media screen and (max-width: 1180px), screen and (hover: none) and (pointer: coarse) {
    html:has(.customer-facing-document-page),
    body:has(.customer-facing-document-page),
    html:has(.crm-document.customer-safe-document),
    body:has(.crm-document.customer-safe-document) {
        box-sizing: border-box ;
        margin-left: 0 ;
        margin-right: 0 ;
        max-width: none ;
        min-width: 0 ;
        overflow-x: hidden ;
        width: 100% ;
    }

    .public-shell:has(.customer-facing-document-page),
    .public-shell:has(.crm-document.customer-safe-document),
    .public-shell .main-content:has(.customer-facing-document-page),
    .public-shell .main-content:has(.crm-document.customer-safe-document),
    .public-shell .main-content.portal-public-main,
    .portal-public-shell,
    .portal-public-shell:has(.customer-facing-document-page),
    .portal-public-shell:has(.crm-document.customer-safe-document),
    .customer-facing-document-page,
    .customer-facing-document-page--wide,
    .customer-document-preview,
    .customer-document-preview .document-preview-card,
    .customer-document-preview .crm-document,
    .crm-document.customer-safe-document {
        box-sizing: border-box ;
        justify-self: stretch ;
        margin-left: 0 ;
        margin-right: 0 ;
        max-width: none ;
        min-width: 0 ;
        width: 100% ;
    }

    .public-shell:has(.customer-facing-document-page),
    .public-shell .main-content:has(.customer-facing-document-page),
    .public-shell .main-content.portal-public-main,
    .portal-public-shell:has(.customer-facing-document-page),
    .customer-facing-document-page,
    .customer-facing-document-page--wide {
        display: grid ;
        grid-template-columns: minmax(0, 1fr) ;
        justify-items: stretch ;
    }

    .public-shell .main-content:has(.customer-facing-document-page),
    .public-shell .main-content.portal-public-main,
    .portal-public-shell {
        padding-left: max(.5rem, env(safe-area-inset-left)) ;
        padding-right: max(.5rem, env(safe-area-inset-right)) ;
    }

    .crm-document.customer-safe-document,
    .customer-document-preview .crm-document.customer-safe-document,
    .customer-document-preview .document-preview-card,
    .customer-facing-document-page .document-preview-card,
    .customer-facing-document-page .crm-document.customer-safe-document {
        background: #ffffff ;
        border: 0 ;
        border-radius: 0 ;
        box-shadow: none ;
        min-height: 0 ;
        padding-bottom: clamp(.75rem, 3vw, 1rem) ;
        padding-left: clamp(.75rem, 3vw, 1rem) ;
        padding-right: clamp(.75rem, 3vw, 1rem) ;
        padding-top: clamp(.75rem, 3vw, 1rem) ;
    }

    .customer-facing-document-page :where(.document-card, .document-grid, .document-summary > div, .document-totals, .document-approval-card, .portal-action-card, .document-line-card, .document-line-card-list, .document-preview-line-card, .document-preview-line-card-list) {
        box-sizing: border-box ;
        margin-left: 0 ;
        margin-right: 0 ;
        max-width: none ;
        min-width: 0 ;
        width: 100% ;
    }

    .customer-facing-document-page :where(.crm-document.customer-safe-document .document-card, .crm-document.customer-safe-document .document-summary > div, .crm-document.customer-safe-document .document-totals, .crm-document.customer-safe-document .document-approval-card, .crm-document.customer-safe-document .document-line-items-card, .crm-document.customer-safe-document .customer-document-support-grid > div, .document-preview-card .document-address-grid > div, .document-preview-card .document-total, .document-preview-card .document-message, .document-preview-card .invoice-document-extra) {
        background: transparent ;
        border: 0 ;
        border-radius: 0 ;
        box-shadow: none ;
        margin-left: 0 ;
        margin-right: 0 ;
        padding-left: 0 ;
        padding-right: 0 ;
    }

    .customer-facing-document-page :where(.crm-document.customer-safe-document .document-card, .crm-document.customer-safe-document .document-summary > div, .crm-document.customer-safe-document .document-totals, .crm-document.customer-safe-document .document-approval-card, .crm-document.customer-safe-document .document-line-items-card, .document-preview-card .document-address-grid > div, .document-preview-card .document-total, .document-preview-card .document-message) {
        border-top: 1px solid #e2e8f0 ;
        padding-bottom: .85rem ;
        padding-top: .85rem ;
    }

    .customer-safe-document .document-line-items-card > .document-line-table-wrap,
    .public-shell .customer-safe-document .document-line-items-card > .document-line-table-wrap,
    .portal-public-shell .customer-safe-document .document-line-items-card > .document-line-table-wrap {
        display: none ;
    }

    .customer-safe-document .document-line-card-list,
    .public-shell .customer-safe-document .document-line-card-list,
    .portal-public-shell .customer-safe-document .document-line-card-list {
        display: grid ;
        gap: .75rem ;
        width: 100% ;
    }

    .customer-facing-document-page .document-preview-card > .table-scroll,
    .public-shell .customer-facing-document-page .document-preview-card > .table-scroll,
    .portal-public-shell .customer-facing-document-page .document-preview-card > .table-scroll,
    .app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell[data-operational-ui="v1"] .document-preview-card > .table-scroll {
        display: none ;
    }

    .customer-facing-document-page .document-preview-line-card-list,
    .public-shell .customer-facing-document-page .document-preview-line-card-list,
    .portal-public-shell .customer-facing-document-page .document-preview-line-card-list,
    .app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell[data-operational-ui="v1"] .document-preview-line-card-list {
        display: grid ;
        gap: .75rem ;
        width: 100% ;
    }

    .customer-safe-document .document-line-card,
    .customer-safe-document .document-line-card > div:first-child,
    .customer-safe-document .document-line-card dl {
        box-sizing: border-box ;
        display: grid ;
        gap: .55rem ;
        grid-template-columns: minmax(0, 1fr) ;
        width: 100% ;
    }

    .customer-safe-document :where(.document-line-card strong, .document-line-card p, .document-line-card dd, .document-line-name, .document-line-description, .document-line-main-cell) {
        max-width: 100% ;
        min-width: 0 ;
        overflow-wrap: break-word ;
        text-orientation: mixed ;
        white-space: normal ;
        word-break: normal ;
        writing-mode: horizontal-tb ;
    }

    .customer-facing-document-page :where(.document-preview-line-card strong, .document-preview-line-card small, .document-preview-line-card p, .document-preview-line-card dd, .document-line-service-name, .document-line-service-meta, .document-line-service-description),
    .app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell[data-operational-ui="v1"] :where(.document-preview-line-card strong, .document-preview-line-card small, .document-preview-line-card p, .document-preview-line-card dd, .document-line-service-name, .document-line-service-meta, .document-line-service-description) {
        display: block ;
        max-width: 100% ;
        min-width: 0 ;
        overflow-wrap: break-word ;
        text-orientation: mixed ;
        white-space: normal ;
        word-break: normal ;
        writing-mode: horizontal-tb ;
    }

    .customer-facing-document-page .document-preview-line-card dl,
    .app-shell[data-mobile-layout-mode="mobile"] .operational-detail-shell[data-operational-ui="v1"] .document-preview-line-card dl {
        grid-template-columns: repeat(3, minmax(0, 1fr)) ;
        width: 100% ;
    }

    .customer-safe-document .document-line-table--customer {
        max-width: none ;
        min-width: 720px ;
        table-layout: fixed ;
        width: max(720px, 100%) ;
    }

    .customer-safe-document .document-line-col-main {
        min-width: 18rem ;
        width: auto ;
    }

    .customer-safe-document .document-line-col-qty {
        width: 4.5rem ;
    }

    .customer-safe-document .document-line-col-money {
        width: 6.75rem ;
    }

    .customer-safe-document .document-line-table--customer .document-number-cell,
    .customer-safe-document .document-line-table--customer .document-money-cell {
        overflow-wrap: normal ;
        white-space: nowrap ;
        word-break: normal ;
    }

    .public-shell .main-content.portal-public-main,
    .portal-public-shell,
    .customer-facing-document-page,
    .customer-facing-document-page--wide,
    .customer-document-preview,
    .customer-document-preview .document-preview-card,
    .customer-document-preview .crm-document,
    .crm-document.customer-safe-document {
        box-sizing: border-box ;
        justify-self: stretch ;
        margin-left: 0 ;
        margin-right: 0 ;
        max-width: none ;
        min-width: 0 ;
        width: 100% ;
    }

    .public-shell .main-content.portal-public-main,
    .portal-public-shell,
    .customer-facing-document-page,
    .customer-facing-document-page--wide {
        display: grid ;
        grid-template-columns: minmax(0, 1fr) ;
        justify-items: stretch ;
    }
}

/* Global mobile/touch full-screen override. Keep this as the last mobile width contract. */
@media screen and (max-width: 1180px), screen and (hover: none) and (pointer: coarse) {
    html,
    body {
        box-sizing: border-box ;
        margin-left: 0 ;
        margin-right: 0 ;
        max-width: none ;
        min-width: 0 ;
        overflow-x: hidden ;
        padding-left: 0 ;
        padding-right: 0 ;
        width: 100% ;
    }

    *,
    *::before,
    *::after {
        box-sizing: border-box;
    }

    .app-shell[data-mobile-layout-mode],
    .app-shell[data-mobile-layout-mode="auto"],
    .app-shell[data-mobile-layout-mode="mobile"],
    .app-shell[data-mobile-layout-mode="desktop"],
    .public-shell {
        --crm-workspace-width: 100% ;
        display: block ;
        grid-template-columns: minmax(0, 1fr) ;
        margin-left: 0 ;
        margin-right: 0 ;
        max-width: none ;
        min-height: 100dvh ;
        min-width: 0 ;
        overflow-x: hidden ;
        padding-left: 0 ;
        padding-right: 0 ;
        width: 100% ;
    }

    .app-shell[data-mobile-layout-mode] .app-sidebar,
    .app-shell[data-mobile-layout-mode] .global-topbar,
    .app-shell[data-mobile-layout-mode] .bottom-nav-shell,
    .app-shell[data-mobile-layout-mode] .nav-foundation-note,
    .app-shell[data-mobile-layout-mode] .page-header {
        display: none ;
    }

    .app-shell[data-mobile-layout-mode] .mobile-app-bar {
        display: grid ;
        left: 0 ;
        margin-left: 0 ;
        margin-right: 0 ;
        max-width: none ;
        right: 0 ;
        width: 100% ;
    }

    .app-shell[data-mobile-layout-mode] .main-content {
        --crm-workspace-width: 100% ;
        box-sizing: border-box ;
        margin-left: 0 ;
        margin-right: 0 ;
        max-width: none ;
        min-width: 0 ;
        padding-left: 0 ;
        padding-right: 0 ;
        width: 100% ;
    }

    .public-shell .main-content,
    .public-shell .main-content.portal-public-main,
    .public-shell .main-content.administration-main-content,
    main.public-shell,
    .public-shell.lead-form-public,
    .portal-public-shell {
        --crm-workspace-width: 100% ;
        box-sizing: border-box ;
        margin-left: 0 ;
        margin-right: 0 ;
        max-width: none ;
        min-width: 0 ;
        padding-left: max(.5rem, env(safe-area-inset-left)) ;
        padding-right: max(.5rem, env(safe-area-inset-right)) ;
        width: 100% ;
    }

    .app-shell[data-mobile-layout-mode] .main-content > :not(script),
    .public-shell .main-content > :not(script),
    main.public-shell > :not(script),
    .portal-public-shell > :not(script),
    .public-shell.lead-form-public > :not(script),
    .customer-facing-document-page,
    .customer-facing-document-page--wide,
    .customer-document-preview,
    .customer-document-preview .document-preview-card,
    .customer-document-preview .crm-document,
    .crm-document.customer-safe-document {
        box-sizing: border-box ;
        justify-self: stretch ;
        margin-left: 0 ;
        margin-right: 0 ;
        max-width: none ;
        min-width: 0 ;
        width: 100% ;
    }

    .app-shell[data-mobile-layout-mode] :where(
        .card,
        .layout-grid,
        .layout-card,
        .layout-card-body,
        .module-card,
        .mobile-work-order-page,
        .mobile-document-page,
        .mobile-work-order-hero,
        .mobile-work-order-card,
        .mobile-work-order-standard-lines,
        .mobile-document-lines,
        .mobile-work-order-line-timer,
        .mobile-work-order-line-stats,
        .mobile-work-order-line-timer-metrics,
        .mobile-work-order-line-timer-buttons,
        .mobile-document-advanced-panel,
        .operational-module-shell,
        .operational-list-shell,
        .operational-detail-shell,
        .invoice-detail-shell,
        .estimate-form-shell,
        .document-detail-layout,
        .document-main,
        .document-preview-card,
        .summary-panel,
        .right-summary-panel,
        .right-summary-panel .card,
        .line-item-flow-card,
        .record-layout-shell,
        .record-main,
        .record-side,
        .dashboard-desktop-content,
        .dashboard-card,
        .report-library-v3,
        .report-card-section,
        .report-detail-v3,
        .reports-v2-filter,
        .report-dashboard-grid,
        .scheduling-workspace,
        .scheduling-calendar-shell,
        .scheduling-calendar-map-shell,
        .workspace-layout-v4,
        .workspace-panel,
        .calendar-module-board,
        .calendar-module-panel,
        .calendar-map-layout,
        .calendar-map-list-panel,
        .calendar-map-canvas-panel,
        .company-profile-page,
        .company-onboarding-page,
        .help-desk-page,
        .lead-forms-shell,
        .employees-center-layout,
        .clock-io-page,
        .clock-review-panel,
        .payroll-dashboard-grid,
        .communication-preview-card,
        .employee-chat-page,
        .employee-related-section
    ),
    .public-shell :where(
        .card,
        .portal-card,
        .portal-hero,
        .portal-action-card,
        .customer-facing-document-page,
        .customer-document-preview,
        .document-preview-card,
        .crm-document,
        .document-card,
        .document-grid,
        .document-summary > div,
        .document-totals,
        .document-approval-card,
        .document-line-card,
        .guided-public-card,
        .booking-public-card,
        .public-growth-card,
        .standard-booking-menu,
        .booking-package-builder
    ) {
        box-sizing: border-box ;
        grid-column: 1 / -1 ;
        margin-left: 0 ;
        margin-right: 0 ;
        max-width: none ;
        min-width: 0 ;
        width: 100% ;
    }

    .app-shell[data-mobile-layout-mode] :where(
        .mobile-work-order-hero,
        .mobile-work-order-card,
        .mobile-work-order-standard-lines,
        .mobile-document-lines,
        .mobile-document-advanced-panel,
        .mobile-work-order-standard-line,
        .mobile-document-line,
        .mobile-work-order-line-card,
        .mobile-work-order-line-timer
    ) {
        border-left: 0 ;
        border-right: 0 ;
        border-radius: 0 ;
        padding: 16px ;
    }

    .app-shell[data-mobile-layout-mode] :where(
        .layout-grid,
        .document-detail-layout,
        .record-main.layout-grid,
        .report-dashboard-grid,
        .calendar-module-board,
        .calendar-map-layout,
        .workspace-layout-v4,
        .work-order-line-card-grid,
        .document-line-snapshot-grid
    ),
    .public-shell :where(
        .document-grid,
        .customer-facing-document-page,
        .public-booking-form,
        .public-directory-grid,
        .public-profile-layout,
        .form-grid-2,
        .form-grid-3,
        .form-grid-4,
        .booking-package-choice-grid,
        .booking-calculator-grid,
        .standard-booking-menu-grid
    ) {
        display: grid ;
        grid-template-columns: minmax(0, 1fr) ;
        justify-items: stretch ;
        width: 100% ;
    }

    .app-shell[data-mobile-layout-mode] :where(.table-scroll, .responsive-table),
    .public-shell :where(.table-scroll, .responsive-table, .document-line-table-wrap) {
        box-sizing: border-box ;
        max-width: 100% ;
        min-width: 0 ;
        overflow-x: auto ;
        overscroll-behavior-inline: contain;
        -webkit-overflow-scrolling: touch;
    }

    .app-shell[data-mobile-layout-mode] :where(a, button, input, select, textarea, summary, label, [role="button"]),
    .public-shell :where(a, button, input, select, textarea, summary, label, [role="button"]) {
        max-width: 100% ;
        min-width: 0 ;
        touch-action: manipulation;
    }
}

/* Document/detail mobile consistency override. Screen-only: print rules stay separate below. */
@media screen and (min-width: 1181px) {
    .operational-detail-shell[data-operational-ui="v1"] .document-preview-card {
        max-width: min(100%, 1120px);
    }

    .customer-document-preview .crm-document.customer-safe-document {
        max-width: min(100%, 1200px);
    }
}

@media screen and (max-width: 1180px), screen and (hover: none) and (pointer: coarse) {
    .app-shell[data-mobile-layout-mode] :where(.estimate-detail-shell, .work-order-detail-shell, .invoice-detail-shell, .operational-detail-shell),
    .public-shell :where(.customer-facing-document-page, .customer-facing-document-page--wide, .customer-document-preview),
    .portal-public-shell :where(.customer-facing-document-page, .customer-facing-document-page--wide, .customer-document-preview) {
        box-sizing: border-box ;
        max-width: none ;
        min-width: 0 ;
        width: 100% ;
    }

    .app-shell[data-mobile-layout-mode] :where(.estimate-detail-shell, .work-order-detail-shell, .invoice-detail-shell, .operational-detail-shell) .document-detail-layout,
    .public-shell :where(.customer-facing-document-page, .customer-facing-document-page--wide),
    .portal-public-shell :where(.customer-facing-document-page, .customer-facing-document-page--wide) {
        display: grid ;
        gap: 1rem ;
        grid-template-columns: minmax(0, 1fr) ;
        justify-items: stretch ;
    }

    .app-shell[data-mobile-layout-mode] :where(.estimate-detail-shell, .work-order-detail-shell, .invoice-detail-shell, .operational-detail-shell) :where(.document-main, .summary-panel, .right-summary-panel),
    .public-shell :where(.customer-document-preview, .portal-action-card),
    .portal-public-shell :where(.customer-document-preview, .portal-action-card) {
        box-sizing: border-box ;
        grid-column: 1 / -1 ;
        margin-left: 0 ;
        margin-right: 0 ;
        max-width: none ;
        min-width: 0 ;
        width: 100% ;
    }

    .app-shell[data-mobile-layout-mode] :where(.estimate-detail-shell, .work-order-detail-shell, .invoice-detail-shell, .operational-detail-shell) .document-preview-card,
    .public-shell :where(.customer-document-preview .crm-document.customer-safe-document, .customer-document-preview .document-preview-card),
    .portal-public-shell :where(.customer-document-preview .crm-document.customer-safe-document, .customer-document-preview .document-preview-card) {
        background: #ffffff ;
        border: 0 ;
        border-radius: 0 ;
        box-shadow: none ;
        margin: 0 ;
        max-width: none ;
        min-height: 0 ;
        min-width: 0 ;
        padding: 16px ;
        width: 100% ;
    }

    .app-shell[data-mobile-layout-mode] :where(.estimate-detail-shell, .work-order-detail-shell, .invoice-detail-shell, .operational-detail-shell) :where(.document-header, .company-document-header),
    .public-shell .customer-document-preview :where(.document-header, .document-brand),
    .portal-public-shell .customer-document-preview :where(.document-header, .document-brand) {
        align-items: flex-start ;
        display: grid ;
        gap: .85rem ;
        grid-template-columns: minmax(0, 1fr) ;
        margin: 0 0 1rem ;
        max-width: 100% ;
        min-width: 0 ;
        padding: 0 0 1rem ;
        width: 100% ;
    }

    .app-shell[data-mobile-layout-mode] :where(.estimate-detail-shell, .work-order-detail-shell, .invoice-detail-shell, .operational-detail-shell) :where(.document-header > div, .company-document-header > div, .document-header p, .document-header h1, .document-header h2),
    .public-shell .customer-document-preview :where(.document-brand > div, .document-meta, .document-header p, .document-header h1, .document-header h2),
    .portal-public-shell .customer-document-preview :where(.document-brand > div, .document-meta, .document-header p, .document-header h1, .document-header h2) {
        max-width: 100% ;
        min-width: 0 ;
        overflow-wrap: break-word ;
        text-align: left ;
        white-space: normal ;
        width: 100% ;
        word-break: normal ;
    }

    .app-shell[data-mobile-layout-mode] :where(.document-company-logo, .document-logo, .document-logo-placeholder),
    .public-shell :where(.document-logo, .document-logo-placeholder),
    .portal-public-shell :where(.document-logo, .document-logo-placeholder) {
        height: auto ;
        justify-self: start ;
        max-height: 86px ;
        max-width: min(42vw, 120px) ;
        width: auto ;
    }

    .app-shell[data-mobile-layout-mode] :where(.estimate-detail-shell, .work-order-detail-shell, .invoice-detail-shell, .operational-detail-shell) :where(.document-address-grid, .document-grid, .document-summary, .customer-document-support-grid),
    .public-shell .customer-document-preview :where(.document-address-grid, .document-grid, .document-summary, .customer-document-support-grid),
    .portal-public-shell .customer-document-preview :where(.document-address-grid, .document-grid, .document-summary, .customer-document-support-grid) {
        display: grid ;
        gap: .85rem ;
        grid-template-columns: minmax(0, 1fr) ;
        margin: 0 0 1rem ;
        width: 100% ;
    }

    .app-shell[data-mobile-layout-mode] :where(.estimate-detail-shell, .work-order-detail-shell, .invoice-detail-shell, .operational-detail-shell) :where(.document-address-grid > div, .document-card, .document-summary > div, .document-totals, .document-total, .document-message, .document-approval-card, .invoice-document-extra),
    .public-shell .customer-document-preview :where(.document-card, .document-summary > div, .document-totals, .document-approval-card, .document-footer),
    .portal-public-shell .customer-document-preview :where(.document-card, .document-summary > div, .document-totals, .document-approval-card, .document-footer) {
        background: #ffffff ;
        border: 1px solid #dbe4ee ;
        border-radius: 8px ;
        box-shadow: none ;
        box-sizing: border-box ;
        margin-left: 0 ;
        margin-right: 0 ;
        max-width: none ;
        min-width: 0 ;
        padding: .85rem ;
        width: 100% ;
    }

    .app-shell[data-mobile-layout-mode] :where(.estimate-detail-shell, .work-order-detail-shell, .invoice-detail-shell, .operational-detail-shell) .document-preview-card > .table-scroll,
    .public-shell .customer-document-preview .document-line-items-card > .document-line-table-wrap,
    .portal-public-shell .customer-document-preview .document-line-items-card > .document-line-table-wrap {
        display: none ;
    }

    .app-shell[data-mobile-layout-mode] :where(.estimate-detail-shell, .work-order-detail-shell, .invoice-detail-shell, .operational-detail-shell) .document-preview-line-card-list,
    .public-shell .customer-document-preview .document-line-card-list,
    .portal-public-shell .customer-document-preview .document-line-card-list {
        display: grid ;
        gap: .75rem ;
        width: 100% ;
    }

    .app-shell[data-mobile-layout-mode] :where(.estimate-detail-shell, .work-order-detail-shell, .invoice-detail-shell, .operational-detail-shell) .document-preview-line-card,
    .public-shell .customer-document-preview .document-line-card,
    .portal-public-shell .customer-document-preview .document-line-card {
        background: #ffffff ;
        border: 1px solid #dbe4ee ;
        border-radius: 8px ;
        box-shadow: none ;
        display: grid ;
        gap: .65rem ;
        max-width: 100% ;
        min-width: 0 ;
        padding: .85rem ;
        width: 100% ;
    }

    .app-shell[data-mobile-layout-mode] .document-preview-line-card dl,
    .public-shell .customer-document-preview .document-line-card dl,
    .portal-public-shell .customer-document-preview .document-line-card dl {
        display: grid ;
        gap: .5rem ;
        grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)) ;
        margin: 0 ;
        width: 100% ;
    }

    .app-shell[data-mobile-layout-mode] :where(.document-line-service-name, .document-line-service-meta, .document-line-service-description, .document-preview-line-card strong, .document-preview-line-card small, .document-preview-line-card p, .document-preview-line-card dd),
    .public-shell .customer-document-preview :where(.document-line-card strong, .document-line-card-meta, .document-line-card p, .document-line-card dd, .document-line-name, .document-line-description),
    .portal-public-shell .customer-document-preview :where(.document-line-card strong, .document-line-card-meta, .document-line-card p, .document-line-card dd, .document-line-name, .document-line-description) {
        display: block ;
        letter-spacing: 0 ;
        max-width: 100% ;
        min-width: 0 ;
        overflow-wrap: break-word ;
        text-orientation: mixed ;
        white-space: normal ;
        word-break: normal ;
        writing-mode: horizontal-tb ;
    }

    .app-shell[data-mobile-layout-mode] :where(.estimate-detail-shell, .work-order-detail-shell, .invoice-detail-shell, .operational-detail-shell) :where(.document-total, .document-totals),
    .public-shell .customer-document-preview :where(.document-total, .document-totals),
    .portal-public-shell .customer-document-preview :where(.document-total, .document-totals) {
        margin-left: 0 ;
        max-width: none ;
        width: 100% ;
    }

    .app-shell[data-mobile-layout-mode] :where(.estimate-detail-shell, .work-order-detail-shell, .invoice-detail-shell, .operational-detail-shell) :where(.document-screen-actions, .portal-actions, .document-approval-card form),
    .public-shell .customer-document-preview :where(.document-screen-actions, .portal-actions, .document-approval-card form),
    .portal-public-shell .customer-document-preview :where(.document-screen-actions, .portal-actions, .document-approval-card form) {
        align-items: stretch ;
        display: grid ;
        gap: .5rem ;
        grid-template-columns: minmax(0, 1fr) ;
        width: 100% ;
    }

    .app-shell[data-mobile-layout-mode] :where(.estimate-detail-shell, .work-order-detail-shell, .invoice-detail-shell, .operational-detail-shell) :where(.document-screen-actions > *, .portal-actions > *, .document-approval-card form > *),
    .public-shell .customer-document-preview :where(.document-screen-actions > *, .portal-actions > *, .document-approval-card form > *),
    .portal-public-shell .customer-document-preview :where(.document-screen-actions > *, .portal-actions > *, .document-approval-card form > *) {
        min-height: 44px;
        width: 100% ;
    }
}

/* Mobile operational detail shell flatten. Removes the outer detail-shell card chrome so inner
   cards sit edge-to-edge instead of nesting a card inside a card (the "layer inside a layer"
   inset seen on phones in the default auto layout mode). Attribute-presence only, no has-selectors. */
@media screen and (max-width: 1180px), screen and (hover: none) and (pointer: coarse) {
    .app-shell[data-mobile-layout-mode] :where(
        .operational-detail-shell,
        .estimate-detail-shell,
        .work-order-detail-shell,
        .invoice-detail-shell,
        .service-item-detail-shell
    ) {
        background: transparent ;
        border: 0 ;
        border-radius: 0 ;
        box-shadow: none ;
        margin-left: 0 ;
        margin-right: 0 ;
        padding-left: 0 ;
        padding-right: 0 ;
        padding-top: 0 ;
    }

    .app-shell[data-mobile-layout-mode] :where(
        .operational-detail-shell,
        .estimate-detail-shell,
        .work-order-detail-shell,
        .invoice-detail-shell
    ) :where(.document-detail-layout, .document-main) {
        gap: .75rem ;
        padding-left: 0 ;
        padding-right: 0 ;
    }

    .app-shell[data-mobile-layout-mode] .work-order-command-center,
    .app-shell[data-mobile-layout-mode] :where(.estimate-detail-shell, .work-order-detail-shell, .invoice-detail-shell, .operational-detail-shell) > .card {
        border-radius: 12px ;
        padding: 14px ;
    }

    .app-shell[data-mobile-layout-mode] .work-order-command-center .work-order-command-copy h2,
    .app-shell[data-mobile-layout-mode] :where(.estimate-detail-shell, .work-order-detail-shell, .invoice-detail-shell, .operational-detail-shell) .module-page-header h1 {
        font-size: 1.3rem ;
        line-height: 1.2 ;
    }

    .app-shell[data-mobile-layout-mode] .work-order-command-center .work-order-command-copy p {
        display: none ;
    }

    .app-shell[data-mobile-layout-mode] .work-order-command-center .work-order-command-grid {
        gap: .5rem ;
    }
}

/* Mobile internal document preview flatten. Collapses the nested document-preview-card and its
   section sub-cards (Customer / Job Location / totals / message / extras) into flat full-bleed
   sections so the estimate / work-order / invoice DETAIL document stops nesting card-inside-card
   on phones. Internal app-shell detail shells only -- customer-facing and portal document pages
   are intentionally untouched. Attribute-presence only, no has-selectors. */
@media screen and (max-width: 1180px), screen and (hover: none) and (pointer: coarse) {
    .app-shell[data-mobile-layout-mode] :where(.estimate-detail-shell, .work-order-detail-shell, .invoice-detail-shell, .operational-detail-shell) .document-preview-card {
        padding-left: 0 ;
        padding-right: 0 ;
    }

    .app-shell[data-mobile-layout-mode] :where(.estimate-detail-shell, .work-order-detail-shell, .invoice-detail-shell, .operational-detail-shell) :where(.document-header, .company-document-header) {
        background: transparent ;
        border: 0 ;
        border-radius: 0 ;
        padding-left: 0 ;
        padding-right: 0 ;
    }

    .app-shell[data-mobile-layout-mode] :where(.estimate-detail-shell, .work-order-detail-shell, .invoice-detail-shell, .operational-detail-shell) :where(.document-address-grid > div, .document-card, .document-summary > div, .document-totals, .document-total, .document-message, .document-approval-card, .invoice-document-extra) {
        background: transparent ;
        border-bottom: 0 ;
        border-left: 0 ;
        border-radius: 0 ;
        border-right: 0 ;
        border-top: 1px solid #e2e8f0 ;
        box-shadow: none ;
        margin-left: 0 ;
        margin-right: 0 ;
        padding-left: 0 ;
        padding-right: 0 ;
    }

    .app-shell[data-mobile-layout-mode] :where(.estimate-detail-shell, .work-order-detail-shell, .invoice-detail-shell, .operational-detail-shell) .document-address-grid {
        gap: 0 ;
    }
}

@media print {
    .document-preview-line-card-list,
    .document-line-card-list {
        display: none ;
    }

    .document-preview-card > .table-scroll,
    .document-line-items-card > .document-line-table-wrap {
        display: block ;
        max-height: none ;
        overflow: visible ;
    }

    .document-preview-card,
    .crm-document {
        box-shadow: none ;
        max-width: 100% ;
    }
}

/* Business Settings command center */
.business-settings-shell {
    scroll-margin-top: 1rem;
}

.business-settings-command-map {
    margin-top: 1rem;
}

.business-settings-command-grid {
    display: grid;
    gap: .75rem;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    margin-top: .85rem;
}

.business-settings-command-card {
    background: #f8fafc;
    border: 1px solid #dbe4ee;
    border-radius: 8px;
    display: grid;
    gap: .65rem;
    min-width: 0;
    padding: .85rem;
}

.business-settings-command-card > div:first-child {
    align-items: flex-start;
    display: flex;
    gap: .5rem;
    justify-content: space-between;
}

.business-settings-command-title {
    color: #1d4ed8;
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.2;
    text-decoration: none;
}

.business-settings-command-title:hover,
.business-settings-command-title:focus {
    color: #0f5132;
    text-decoration: underline;
}

.business-settings-command-card p {
    color: #475569;
    font-size: .88rem;
    margin: 0;
}

.business-settings-command-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
}

.business-settings-layout {
    align-items: start;
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(210px, 250px) minmax(0, 1fr);
    margin-top: 1rem;
}

.business-settings-side-panel {
    background: #f8fafc;
    border: 1px solid #dbe4ee;
    border-radius: 8px;
    overflow: hidden;
    position: sticky;
    top: 1rem;
}

.business-settings-side-panel-header {
    border-bottom: 1px solid #dbe4ee;
    display: grid;
    gap: .15rem;
    padding: .85rem .9rem;
}

.business-settings-side-panel-header strong {
    color: #0f172a;
    font-size: .98rem;
}

.business-settings-side-panel .settings-section-nav {
    display: grid;
    gap: .15rem;
    padding: .45rem;
}

.business-settings-side-panel .settings-section-nav a {
    border-left: 3px solid transparent;
    border-radius: 6px;
    color: #334155;
    display: grid;
    gap: .12rem;
    line-height: 1.25;
    padding: .62rem .7rem;
    text-decoration: none;
}

.business-settings-side-panel .settings-section-nav a:hover,
.business-settings-side-panel .settings-section-nav a:focus {
    background: #eef7f1;
    border-left-color: #22c55e;
    color: #0f5132;
    outline: none;
}

.business-settings-side-panel .settings-section-nav span {
    font-weight: 700;
}

.business-settings-side-panel .settings-section-nav small {
    color: #64748b;
    font-size: .78rem;
}

.business-settings-pages {
    display: grid;
    gap: 1rem;
    min-width: 0;
}

.business-settings-page {
    border-top: 1px solid #e2e8f0;
    display: grid;
    gap: .8rem;
    min-width: 0;
    padding-top: 1rem;
    scroll-margin-top: 1rem;
}

.business-settings-page:first-child {
    border-top: 0;
    padding-top: 0;
}

.business-settings-page-heading {
    align-items: flex-start;
    display: flex;
    gap: .75rem;
    justify-content: space-between;
}

.business-settings-page-heading h2 {
    font-size: 1.25rem;
    line-height: 1.2;
    margin: .1rem 0;
}

.business-settings-page-heading p {
    color: #64748b;
    margin: 0;
    max-width: 70ch;
}

.business-settings-pages > .business-settings-page > .card {
    margin: 0;
    min-width: 0;
}

.business-settings-shell .card-full {
    grid-column: auto;
}

.business-settings-shell .responsive-table {
    max-width: 100%;
    overflow-x: auto;
}

.business-settings-shell .inline-form,
.business-settings-shell .button-row {
    max-width: 100%;
}

.settings-split-grid {
    align-items: start;
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(0, 1fr) minmax(240px, 320px);
}

.settings-preview-panel {
    background: #f8fafc;
    border: 1px solid #dbe4ee;
    border-radius: 8px;
    display: grid;
    gap: .75rem;
    padding: 1rem;
}

.settings-logo-preview {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    max-height: 120px;
    max-width: 220px;
    object-fit: contain;
    padding: .65rem;
}

.settings-logo-empty {
    align-items: center;
    background: #fff;
    border: 1px dashed #cbd5e1;
    border-radius: 6px;
    color: #64748b;
    display: flex;
    min-height: 90px;
    padding: .8rem;
}

.settings-provider-checklist {
    display: grid;
    gap: .55rem;
    margin: .75rem 0 0 1.2rem;
}

.settings-provider-readiness-grid {
    display: grid;
    gap: .75rem;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.settings-provider-readiness-item {
    background: #f8fafc;
    border: 1px solid #dbe3ef;
    border-radius: 8px;
    display: grid;
    gap: .35rem;
    padding: .85rem;
}

.settings-provider-readiness-item small,
.sms-template-character-count span {
    color: #64748b;
}

.sms-template-character-count {
    align-items: center;
    background: #f8fafc;
    border: 1px solid #dbe3ef;
    border-radius: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: .45rem .8rem;
    padding: .6rem .75rem;
}

.settings-vault-file-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

.settings-vault-file-actions form,
.settings-vault-delete-form {
    margin: 0;
}

.settings-email-preview-modal {
    background: #f8fafc;
    border: 1px solid #dbe4ee;
    border-radius: 8px;
    margin-top: 1rem;
    padding: 1rem;
}

.settings-email-preview-paper {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    box-shadow: 0 12px 30px rgba(15, 23, 42, .08);
    display: grid;
    gap: .65rem;
    max-width: 680px;
    padding: 1.2rem;
}

.settings-email-preview-paper footer {
    border-top: 1px solid #e2e8f0;
    color: #64748b;
    margin-top: .4rem;
    padding-top: .75rem;
}

.message-template-cadence-editor {
    background: #f8fafc;
    border: 1px solid #dbe4ee;
    border-radius: 8px;
    display: grid;
    gap: .75rem;
    margin-top: 1rem;
    padding: 1rem;
}

.document-settings-runtime-grid {
    margin-top: 1rem;
}

.document-settings-runtime-grid .document-card ul {
    margin: .5rem 0 0 1.1rem;
}

@media (max-width: 980px) {
    .business-settings-command-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .business-settings-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .business-settings-side-panel {
        position: static;
    }

    .business-settings-side-panel .settings-section-nav {
        display: flex;
        gap: .4rem;
        overflow-x: auto;
        padding: .55rem;
    }

    .business-settings-side-panel .settings-section-nav a {
        border-bottom: 3px solid transparent;
        border-left: 0;
        min-width: 150px;
    }

    .business-settings-side-panel .settings-section-nav a:hover,
    .business-settings-side-panel .settings-section-nav a:focus {
        border-bottom-color: #22c55e;
        border-left-color: transparent;
    }

    .settings-split-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 640px) {
    .business-settings-command-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .business-settings-command-card > div:first-child,
    .business-settings-command-actions {
        align-items: stretch;
        display: grid;
        grid-template-columns: minmax(0, 1fr);
    }

    .business-settings-command-actions .btn {
        width: 100%;
    }

    .business-settings-page-heading {
        display: grid;
    }

    .business-settings-page-heading .btn {
        justify-self: start;
    }
}

/* Billing / Add-ons page selector */
.billing-settings-shell {
    scroll-margin-top: 1rem;
}

.billing-settings-layout {
    align-items: start;
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(210px, 250px) minmax(0, 1fr);
    margin-top: 1rem;
}

.billing-settings-side-panel {
    background: #f8fafc;
    border: 1px solid #dbe4ee;
    border-radius: 8px;
    overflow: hidden;
    position: sticky;
    top: 1rem;
}

.billing-settings-side-panel-header {
    border-bottom: 1px solid #dbe4ee;
    display: grid;
    gap: .15rem;
    padding: .85rem .9rem;
}

.billing-settings-side-panel-header strong {
    color: #0f172a;
    font-size: .98rem;
}

.billing-settings-section-nav {
    display: grid;
    gap: .15rem;
    padding: .45rem;
}

.billing-settings-section-nav a {
    border-left: 3px solid transparent;
    border-radius: 6px;
    color: #334155;
    display: grid;
    gap: .12rem;
    line-height: 1.25;
    padding: .62rem .7rem;
    text-decoration: none;
}

.billing-settings-section-nav a:hover,
.billing-settings-section-nav a:focus {
    background: #eef7f1;
    border-left-color: #22c55e;
    color: #0f5132;
    outline: none;
}

.billing-settings-section-nav span {
    font-weight: 700;
}

.billing-settings-section-nav small {
    color: #64748b;
    font-size: .78rem;
}

.billing-settings-side-actions {
    border-top: 1px solid #dbe4ee;
    display: grid;
    gap: .45rem;
    padding: .7rem;
}

.billing-settings-side-actions .btn {
    justify-content: center;
    width: 100%;
}

.billing-settings-pages,
.billing-settings-pages .billing-marketplace-grid,
.billing-settings-pages .billing-marketplace-slot {
    min-width: 0;
}

.billing-settings-pages .billing-marketplace-slot {
    scroll-margin-top: 1rem;
}

@media (max-width: 980px) {
    .billing-settings-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .billing-settings-side-panel {
        position: static;
    }

    .billing-settings-section-nav {
        display: flex;
        gap: .4rem;
        overflow-x: auto;
        padding: .55rem;
    }

    .billing-settings-section-nav a {
        border-bottom: 3px solid transparent;
        border-left: 0;
        min-width: 150px;
    }

    .billing-settings-section-nav a:hover,
    .billing-settings-section-nav a:focus {
        border-bottom-color: #22c55e;
        border-left-color: transparent;
    }

    .billing-settings-side-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .billing-settings-side-actions {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Company Profile / Settings page selector */
.company-settings-shell {
    scroll-margin-top: 1rem;
}

.company-settings-layout {
    align-items: start;
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(210px, 250px) minmax(0, 1fr);
    margin-top: 1rem;
}

.company-settings-side-panel {
    background: #f8fafc;
    border: 1px solid #dbe4ee;
    border-radius: 8px;
    overflow: hidden;
    position: sticky;
    top: 1rem;
}

.company-settings-side-panel-header {
    border-bottom: 1px solid #dbe4ee;
    display: grid;
    gap: .15rem;
    padding: .85rem .9rem;
}

.company-settings-side-panel-header strong {
    color: #0f172a;
    font-size: .98rem;
}

.company-settings-section-nav {
    display: grid;
    gap: .15rem;
    padding: .45rem;
}

.company-settings-section-nav a {
    border-left: 3px solid transparent;
    border-radius: 6px;
    color: #334155;
    display: grid;
    gap: .12rem;
    line-height: 1.25;
    padding: .62rem .7rem;
    text-decoration: none;
}

.company-settings-section-nav a:hover,
.company-settings-section-nav a:focus {
    background: #eef7f1;
    border-left-color: #22c55e;
    color: #0f5132;
    outline: none;
}

.company-settings-section-nav span {
    font-weight: 700;
}

.company-settings-section-nav small {
    color: #64748b;
    font-size: .78rem;
}

.company-settings-side-actions {
    border-top: 1px solid #dbe4ee;
    display: grid;
    gap: .45rem;
    padding: .7rem;
}

.company-settings-side-actions .btn {
    justify-content: center;
    width: 100%;
}

.company-operational-settings-links {
    background: #f8fafc;
    border: 1px solid #dbe4ee;
    border-radius: 8px;
    display: grid;
    gap: .85rem;
    margin-top: .35rem;
    padding: 1rem;
}

.company-operational-settings-links h3 {
    color: #0f172a;
    font-size: 1rem;
    margin: .1rem 0 .25rem;
}

.company-operational-settings-links p {
    color: #475569;
    margin: 0;
}

.company-operational-link-grid {
    display: grid;
    gap: .55rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.company-operational-link {
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    color: #1e3a8a;
    display: grid;
    gap: .15rem;
    padding: .7rem .75rem;
    text-decoration: none;
}

.company-operational-link:hover,
.company-operational-link:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, .12);
    outline: none;
}

.company-operational-link span {
    font-weight: 800;
}

.company-operational-link small {
    color: #64748b;
}

.company-template-category-filter-row {
    background: #f8fafc;
    border: 1px solid #dbe4ee;
    border-radius: 8px;
    display: grid;
    gap: .65rem;
    margin: .75rem 0;
    padding: .8rem;
}

.company-template-category-filter-row form {
    align-items: end;
    display: grid;
    gap: .5rem;
    grid-template-columns: minmax(180px, 1fr) auto;
}

.company-template-category-filter-row label {
    margin: 0;
}

.company-template-category-filter-row nav {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

.company-template-category-filter-row nav a {
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 999px;
    color: #1e3a8a;
    font-size: .78rem;
    font-weight: 800;
    padding: .28rem .55rem;
    text-decoration: none;
}

.company-template-category-filter-row nav a:hover,
.company-template-category-filter-row nav a:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, .12);
    outline: none;
}

.company-template-row-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
}

.company-template-row-actions .inline-action-form {
    margin: 0;
}

.company-settings-pages {
    display: grid;
    gap: 1rem;
    min-width: 0;
}

.company-settings-page {
    border-top: 1px solid #e2e8f0;
    display: grid;
    gap: .8rem;
    min-width: 0;
    padding-top: 1rem;
    scroll-margin-top: 1rem;
}

.company-settings-page:first-child {
    border-top: 0;
    padding-top: 0;
}

.company-settings-page-heading {
    align-items: flex-start;
    display: flex;
    gap: .75rem;
    justify-content: space-between;
}

.company-settings-page-heading h2 {
    font-size: 1.25rem;
    line-height: 1.2;
    margin: .1rem 0;
}

.company-settings-page-heading p {
    color: #64748b;
    margin: 0;
    max-width: 70ch;
}

.company-settings-page > .card,
.company-settings-page > form.card {
    margin: 0;
    min-width: 0;
}

.company-settings-shell .table-scroll,
.company-settings-shell .company-template-table-scroll {
    max-width: 100%;
    overflow-x: auto;
}

@media (max-width: 980px) {
    .company-settings-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .company-settings-side-panel {
        position: static;
    }

    .company-settings-section-nav {
        display: flex;
        gap: .4rem;
        overflow-x: auto;
        padding: .55rem;
    }

    .company-settings-section-nav a {
        border-bottom: 3px solid transparent;
        border-left: 0;
        min-width: 150px;
    }

    .company-settings-section-nav a:hover,
    .company-settings-section-nav a:focus {
        border-bottom-color: #22c55e;
        border-left-color: transparent;
    }

    .company-settings-side-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .company-operational-link-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .company-settings-page-heading {
        display: grid;
    }

    .company-settings-page-heading .btn {
        justify-self: start;
    }

    .company-settings-side-actions {
        grid-template-columns: minmax(0, 1fr);
    }

    .company-operational-link-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .company-template-category-filter-row form {
        grid-template-columns: minmax(0, 1fr);
    }

    .company-template-row-actions {
        align-items: stretch;
        display: grid;
        grid-template-columns: minmax(0, 1fr);
    }

    .company-template-row-actions .btn,
    .company-template-row-actions .inline-action-form,
    .company-template-row-actions .inline-action-form button {
        width: 100%;
    }
}

.message-template-channel-tabs {
    align-items: center;
    border-bottom: 1px solid #dbe3ef;
    display: flex;
    gap: 1rem;
    margin: 1rem 0 1.25rem;
    overflow-x: auto;
}

.message-template-channel-tabs a {
    color: #475569;
    font-weight: 700;
    padding: .7rem .2rem;
    text-decoration: none;
    white-space: nowrap;
}

.message-template-channel-tabs a.active {
    border-bottom: 3px solid #22c55e;
    color: #15803d;
}

.message-template-starter-help {
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    border-left: 4px solid #2563eb;
    border-radius: 8px;
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(0, 1fr) minmax(280px, .95fr);
    margin: 0 0 1rem;
    padding: 1rem;
}

.message-template-starter-help h2 {
    font-size: 1.05rem;
    margin: .1rem 0 .35rem;
}

.message-template-starter-help p {
    color: #475569;
    margin: 0;
}

.message-template-starter-help ul {
    display: grid;
    gap: .5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.message-template-starter-help li {
    background: #fff;
    border: 1px solid #dbe3ef;
    border-radius: 8px;
    display: grid;
    gap: .15rem;
    padding: .65rem .75rem;
}

.message-template-starter-help li span {
    color: #64748b;
    font-size: .82rem;
    line-height: 1.35;
}

.message-template-workspace-summary {
    align-items: start;
    background: #fff;
    border: 1px solid #cbd5e1;
    border-left: 4px solid #2563eb;
    border-radius: 8px;
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(0, 1.2fr) minmax(260px, 1fr);
    margin: 0 0 1rem;
    padding: 1rem;
}

.message-template-workspace-summary h2 {
    font-size: 1.1rem;
    margin: .1rem 0 .35rem;
}

.message-template-workspace-summary p {
    color: #475569;
    margin: 0;
}

.message-template-workspace-stats {
    display: grid;
    gap: .55rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.message-template-workspace-stats article {
    background: #f8fafc;
    border: 1px solid #dbe3ef;
    border-radius: 8px;
    display: grid;
    gap: .1rem;
    min-height: 70px;
    padding: .7rem;
}

.message-template-workspace-stats strong {
    color: #0f172a;
    font-size: 1.25rem;
}

.message-template-workspace-stats span {
    color: #64748b;
    font-size: .78rem;
    line-height: 1.25;
}

.message-template-workspace-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    grid-column: 1 / -1;
}

.message-template-filter-bar {
    align-items: end;
    background: #f8fafc;
    border: 1px solid #dbe3ef;
    border-radius: 8px;
    display: grid;
    gap: .75rem;
    grid-template-columns: minmax(220px, 2fr) minmax(170px, 1fr) minmax(140px, 1fr) auto;
    margin: 0 0 1rem;
    padding: .85rem;
}

.message-template-filter-bar label {
    margin: 0;
}

.message-template-layout,
.message-template-builder-layout {
    align-items: start;
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(220px, 260px) minmax(0, 1fr);
}

.message-template-side-panel {
    background: #f8fafc;
    border: 1px solid #dbe3ef;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .06);
    overflow: hidden;
    position: sticky;
    top: 1rem;
}

.message-template-side-panel-header {
    border-bottom: 1px solid #dbe3ef;
    display: grid;
    gap: .2rem;
    padding: .85rem;
}

.message-template-side-panel-header strong {
    color: #0f172a;
    line-height: 1.2;
}

.message-template-section-nav {
    display: grid;
}

.message-template-section-nav a {
    border-left: 3px solid transparent;
    color: #334155;
    display: grid;
    gap: .15rem;
    padding: .75rem .85rem;
    text-decoration: none;
}

.message-template-section-nav a:hover,
.message-template-section-nav a:focus {
    background: #ecfdf5;
    border-left-color: #22c55e;
    color: #14532d;
}

.message-template-section-nav small,
.message-template-readiness-list small {
    color: #64748b;
    font-size: .78rem;
}

.message-template-pages,
.message-template-builder-main {
    display: grid;
    gap: 1rem;
    min-width: 0;
}

.message-template-page {
    scroll-margin-top: 1rem;
}

.message-template-section-summary {
    align-items: start;
    background: #f8fafc;
    border: 1px solid #dbe3ef;
    border-radius: 8px;
    display: grid;
    gap: .75rem;
    grid-template-columns: minmax(0, 1fr) minmax(220px, auto);
    margin: 0 0 .85rem;
    padding: .85rem;
}

.message-template-section-summary h3 {
    margin: .1rem 0 .3rem;
}

.message-template-section-summary p {
    color: #475569;
    margin: 0;
}

.message-template-section-summary dl {
    display: grid;
    gap: .45rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0;
}

.message-template-section-summary dl div {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: .55rem;
}

.message-template-section-summary dt {
    color: #64748b;
    font-size: .72rem;
    font-weight: 800;
    text-transform: uppercase;
}

.message-template-section-summary dd {
    color: #0f172a;
    font-size: 1.05rem;
    font-weight: 800;
    margin: .1rem 0 0;
}

.message-template-card-grid {
    display: grid;
    gap: .85rem;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.message-template-card {
    margin: 0;
}

.template-card-status-stack {
    align-items: flex-end;
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    justify-content: flex-end;
}

.message-template-card p {
    min-height: 3.4rem;
}

.message-template-card-diagnostics,
.message-template-builder-diagnostics {
    display: grid;
    gap: .45rem;
    margin: .75rem 0;
}

.message-template-card-diagnostics div,
.message-template-builder-diagnostics div {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    display: grid;
    gap: .2rem;
    padding: .55rem .65rem;
}

.message-template-card-diagnostics dt,
.message-template-builder-diagnostics dt {
    color: #1d4ed8;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.message-template-card-diagnostics dd,
.message-template-builder-diagnostics dd {
    display: grid;
    gap: .15rem;
    margin: 0;
}

.message-template-card-diagnostics small,
.message-template-builder-diagnostics small {
    color: #64748b;
    font-size: .78rem;
    line-height: 1.35;
}

.template-preview-dialog {
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    box-shadow: 0 24px 70px rgba(15, 23, 42, .22);
    max-width: min(720px, 92vw);
    padding: 1rem;
    width: 720px;
}

.template-preview-dialog::backdrop {
    background: rgba(15, 23, 42, .46);
}

.message-template-builder-form {
    display: grid;
    gap: 1rem;
}

.message-template-builder-guidance {
    background: #f8fafc;
    border: 1px solid #dbe3ef;
    border-radius: 8px;
    color: #475569;
    display: grid;
    gap: .2rem;
    margin: 0 0 .8rem;
    padding: .75rem;
}

.message-template-builder-guidance strong {
    color: #0f172a;
}

.message-template-builder-guidance p {
    margin: 0;
}

.template-builder-canvas {
    align-items: start;
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(0, 1.35fr) minmax(260px, .65fr);
}

.template-builder-editor {
    display: grid;
    gap: .75rem;
    min-width: 0;
}

.message-template-builder-form textarea[data-template-body] {
    font-family: Consolas, Monaco, monospace;
    min-height: 320px;
    resize: vertical;
    white-space: pre-wrap;
}

.template-builder-live-preview {
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .05);
    display: grid;
    gap: .65rem;
    padding: .85rem;
    position: sticky;
    top: 1rem;
}

.template-builder-live-preview h3 {
    font-size: 1rem;
    margin: 0;
    overflow-wrap: anywhere;
}

.template-builder-live-preview-body {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    color: #0f172a;
    min-height: 180px;
    overflow-wrap: anywhere;
    padding: .85rem;
    white-space: pre-wrap;
}

.template-builder-live-preview small {
    color: #64748b;
    line-height: 1.35;
}

.message-template-default-row {
    margin-top: .75rem;
}

.template-builder-toolbar,
.template-placeholder-grid,
.template-preview-labels {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
}

.template-builder-toolbar {
    background: #f8fafc;
    border: 1px solid #dbe3ef;
    border-radius: 8px;
    padding: .55rem;
}

.template-placeholder-drawer {
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    display: grid;
    gap: .85rem;
    margin: .5rem 0;
    padding: .9rem;
}

.template-placeholder-group {
    border-top: 1px solid #e2e8f0;
    padding-top: .7rem;
}

.template-placeholder-group:first-of-type {
    border-top: 0;
    padding-top: 0;
}

.template-placeholder-group h4 {
    margin: 0 0 .45rem;
}

.template-preview-card {
    scroll-margin-top: 1rem;
}

.template-preview-surface {
    background: #fff;
    border: 1px solid #dbe3ef;
    border-radius: 8px;
    color: #0f172a;
    line-height: 1.55;
    min-height: 220px;
    padding: 1.25rem;
}

.message-template-readiness-list {
    display: grid;
    gap: .55rem;
    list-style: none;
    margin: 0;
    padding: .85rem;
}

.message-template-readiness-list li {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    display: grid;
    gap: .2rem;
    padding: .65rem;
}

@media (max-width: 980px) {
    .message-template-starter-help {
        grid-template-columns: minmax(0, 1fr);
    }

    .message-template-workspace-summary {
        grid-template-columns: minmax(0, 1fr);
    }

    .message-template-filter-bar {
        grid-template-columns: minmax(0, 1fr) minmax(150px, 1fr);
    }

    .message-template-layout,
    .message-template-builder-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .message-template-side-panel {
        position: static;
    }

    .message-template-section-summary,
    .template-builder-canvas {
        grid-template-columns: minmax(0, 1fr);
    }

    .template-builder-live-preview {
        position: static;
    }

    .message-template-section-nav {
        display: flex;
        gap: .4rem;
        overflow-x: auto;
        padding: .55rem;
    }

    .message-template-section-nav a {
        border-bottom: 3px solid transparent;
        border-left: 0;
        min-width: 150px;
    }

    .message-template-section-nav a:hover,
    .message-template-section-nav a:focus {
        border-bottom-color: #22c55e;
        border-left-color: transparent;
    }
}

@media (max-width: 640px) {
    .message-template-filter-bar {
        grid-template-columns: minmax(0, 1fr);
    }

    .message-template-card-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .message-template-workspace-stats,
    .message-template-section-summary dl {
        grid-template-columns: minmax(0, 1fr);
    }

    .message-template-builder-form textarea[data-template-body] {
        min-height: 240px;
    }

    .template-preview-surface {
        padding: .9rem;
    }

    .template-card-status-stack {
        align-items: flex-start;
        justify-content: flex-start;
    }
}
.settings-template-landing-grid,
.settings-completion-grid,
.settings-template-usage-grid,
.settings-schedule-preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
}

.settings-completion-item,
.settings-template-usage-item {
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  color: inherit;
  text-decoration: none;
  display: grid;
  gap: 8px;
  overflow-wrap: anywhere;
}

.settings-completion-item:hover,
.settings-template-usage-item:hover {
  border-color: rgba(37, 99, 235, 0.45);
  background: rgba(37, 99, 235, 0.04);
}

.settings-template-usage-map,
.settings-completion-checklist {
  overflow-wrap: anywhere;
}

.settings-vault-file-cell {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.settings-vault-thumbnail {
  width: 62px;
  min-height: 54px;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  place-items: center;
  color: inherit;
  text-decoration: none;
  background: var(--surface-subtle);
}

.settings-vault-thumbnail span {
  font-weight: 800;
  font-size: 0.9rem;
}

.settings-vault-thumbnail small {
  font-size: 0.68rem;
}

.settings-document-preview-panel,
.settings-preview-panel {
  overflow-wrap: anywhere;
}

.settings-document-preview-paper {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  padding: 18px;
  display: grid;
  gap: 12px;
}

.settings-document-preview-line-items {
  display: grid;
  grid-template-columns: 2fr 0.7fr 1fr;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: var(--surface-subtle);
}

.settings-document-preview-line-items div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.message-template-where-used,
.message-template-builder-where-used {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  display: grid;
  gap: 4px;
  background: rgba(15, 118, 110, 0.05);
  overflow-wrap: anywhere;
}

.message-template-section-nav a,
.settings-section-nav a {
  min-height: 44px;
  overflow-wrap: anywhere;
}

@media (max-width: 720px) {
  .settings-vault-file-cell,
  .settings-document-preview-line-items {
    grid-template-columns: 1fr;
  }

  .settings-vault-file-cell {
    display: grid;
  }
}

/* Estimate and Work Order Detail 85% Width Guard */
/* Document Preview Wide Service Column Guard */
@media (min-width: 900px) {
  .app-shell:not([data-mobile-layout-mode="mobile"]) .main-content.operational-detail-main-content {
    max-width: var(--crm-workspace-width) ;
    min-width: 0 ;
    width: 100%;
  }

  .document-preview-card > .table-scroll,
  .app-shell:not([data-mobile-layout-mode="mobile"]) .estimate-detail-shell[data-operational-ui="v1"] .document-preview-card:not([data-work-order-document-polish]) > .table-scroll,
  .app-shell:not([data-mobile-layout-mode="mobile"]) .work-order-detail-shell[data-operational-ui="v1"] .document-preview-card[data-work-order-document-polish] > .table-scroll,
  .app-shell:not([data-mobile-layout-mode="mobile"]) .invoice-detail-shell[data-operational-ui="v1"] .document-preview-card > .table-scroll {
    max-height: none ;
    overflow: visible ;
  }

  .app-shell:not([data-mobile-layout-mode="mobile"]) .estimate-detail-shell[data-operational-ui="v1"] .document-preview-card .document-lines,
  .app-shell:not([data-mobile-layout-mode="mobile"]) .work-order-detail-shell[data-operational-ui="v1"] .document-preview-card[data-work-order-document-polish] .document-lines,
  .app-shell:not([data-mobile-layout-mode="mobile"]) .invoice-detail-shell[data-operational-ui="v1"] .document-preview-card .document-lines {
    min-width: 0 ;
    table-layout: fixed ;
    width: 100% ;
  }

  .app-shell:not([data-mobile-layout-mode="mobile"]) .estimate-detail-shell[data-operational-ui="v1"] .document-preview-card .document-lines col.document-line-qty-col,
  .app-shell:not([data-mobile-layout-mode="mobile"]) .work-order-detail-shell[data-operational-ui="v1"] .document-preview-card[data-work-order-document-polish] .document-lines col.document-line-qty-col,
  .app-shell:not([data-mobile-layout-mode="mobile"]) .invoice-detail-shell[data-operational-ui="v1"] .document-preview-card .document-lines col.document-line-qty-col {
    width: 5rem ;
  }

  .app-shell:not([data-mobile-layout-mode="mobile"]) .estimate-detail-shell[data-operational-ui="v1"] .document-preview-card .document-lines col.document-line-money-col,
  .app-shell:not([data-mobile-layout-mode="mobile"]) .work-order-detail-shell[data-operational-ui="v1"] .document-preview-card[data-work-order-document-polish] .document-lines col.document-line-money-col,
  .app-shell:not([data-mobile-layout-mode="mobile"]) .invoice-detail-shell[data-operational-ui="v1"] .document-preview-card .document-lines col.document-line-money-col {
    width: 5rem ;
  }

  .app-shell:not([data-mobile-layout-mode="mobile"]) .estimate-detail-shell[data-operational-ui="v1"] .document-preview-card .document-lines th:nth-child(3),
  .app-shell:not([data-mobile-layout-mode="mobile"]) .estimate-detail-shell[data-operational-ui="v1"] .document-preview-card .document-lines td:nth-child(3),
  .app-shell:not([data-mobile-layout-mode="mobile"]) .work-order-detail-shell[data-operational-ui="v1"] .document-preview-card[data-work-order-document-polish] .document-lines th:nth-child(3),
  .app-shell:not([data-mobile-layout-mode="mobile"]) .work-order-detail-shell[data-operational-ui="v1"] .document-preview-card[data-work-order-document-polish] .document-lines td:nth-child(3),
  .app-shell:not([data-mobile-layout-mode="mobile"]) .invoice-detail-shell[data-operational-ui="v1"] .document-preview-card .document-lines th:nth-child(3),
  .app-shell:not([data-mobile-layout-mode="mobile"]) .invoice-detail-shell[data-operational-ui="v1"] .document-preview-card .document-lines td:nth-child(3) {
    overflow-wrap: normal ;
    text-align: right ;
    white-space: nowrap ;
    width: 5rem ;
    word-break: normal ;
  }

  .app-shell:not([data-mobile-layout-mode="mobile"]) .estimate-detail-shell[data-operational-ui="v1"] .document-preview-card .document-lines th:nth-child(4),
  .app-shell:not([data-mobile-layout-mode="mobile"]) .estimate-detail-shell[data-operational-ui="v1"] .document-preview-card .document-lines td:nth-child(4),
  .app-shell:not([data-mobile-layout-mode="mobile"]) .estimate-detail-shell[data-operational-ui="v1"] .document-preview-card .document-lines th:nth-child(5),
  .app-shell:not([data-mobile-layout-mode="mobile"]) .estimate-detail-shell[data-operational-ui="v1"] .document-preview-card .document-lines td:nth-child(5),
  .app-shell:not([data-mobile-layout-mode="mobile"]) .work-order-detail-shell[data-operational-ui="v1"] .document-preview-card[data-work-order-document-polish] .document-lines th:nth-child(4),
  .app-shell:not([data-mobile-layout-mode="mobile"]) .work-order-detail-shell[data-operational-ui="v1"] .document-preview-card[data-work-order-document-polish] .document-lines td:nth-child(4),
  .app-shell:not([data-mobile-layout-mode="mobile"]) .work-order-detail-shell[data-operational-ui="v1"] .document-preview-card[data-work-order-document-polish] .document-lines th:nth-child(5),
  .app-shell:not([data-mobile-layout-mode="mobile"]) .work-order-detail-shell[data-operational-ui="v1"] .document-preview-card[data-work-order-document-polish] .document-lines td:nth-child(5),
  .app-shell:not([data-mobile-layout-mode="mobile"]) .invoice-detail-shell[data-operational-ui="v1"] .document-preview-card .document-lines th:nth-child(4),
  .app-shell:not([data-mobile-layout-mode="mobile"]) .invoice-detail-shell[data-operational-ui="v1"] .document-preview-card .document-lines td:nth-child(4),
  .app-shell:not([data-mobile-layout-mode="mobile"]) .invoice-detail-shell[data-operational-ui="v1"] .document-preview-card .document-lines th:nth-child(5),
  .app-shell:not([data-mobile-layout-mode="mobile"]) .invoice-detail-shell[data-operational-ui="v1"] .document-preview-card .document-lines td:nth-child(5) {
    overflow-wrap: normal ;
    text-align: right ;
    white-space: nowrap ;
    width: 5rem ;
    word-break: normal ;
  }

  .app-shell:not([data-mobile-layout-mode="mobile"]) .estimate-detail-shell[data-operational-ui="v1"] .document-line-service-description,
  .app-shell:not([data-mobile-layout-mode="mobile"]) .work-order-detail-shell[data-operational-ui="v1"] .document-line-service-description,
  .app-shell:not([data-mobile-layout-mode="mobile"]) .invoice-detail-shell[data-operational-ui="v1"] .document-line-service-description {
    border-left: 3px solid #e0f2fe;
    display: block;
    font-size: 16px ;
    line-height: 1.45;
    max-height: none ;
    max-width: none;
    overflow: visible ;
    overflow-wrap: normal ;
    padding-left: .6rem;
    white-space: normal ;
    width: 100%;
    word-break: normal ;
  }

  .app-shell:not([data-mobile-layout-mode="mobile"]) .estimate-detail-shell[data-operational-ui="v1"] .document-lines td:first-child,
  .app-shell:not([data-mobile-layout-mode="mobile"]) .estimate-detail-shell[data-operational-ui="v1"] .document-lines td:nth-child(3),
  .app-shell:not([data-mobile-layout-mode="mobile"]) .estimate-detail-shell[data-operational-ui="v1"] .document-lines td:nth-child(4),
  .app-shell:not([data-mobile-layout-mode="mobile"]) .estimate-detail-shell[data-operational-ui="v1"] .document-lines td:nth-child(5),
  .app-shell:not([data-mobile-layout-mode="mobile"]) .work-order-detail-shell[data-operational-ui="v1"] .document-lines td:first-child,
  .app-shell:not([data-mobile-layout-mode="mobile"]) .work-order-detail-shell[data-operational-ui="v1"] .document-lines td:nth-child(3),
  .app-shell:not([data-mobile-layout-mode="mobile"]) .work-order-detail-shell[data-operational-ui="v1"] .document-lines td:nth-child(4),
  .app-shell:not([data-mobile-layout-mode="mobile"]) .work-order-detail-shell[data-operational-ui="v1"] .document-lines td:nth-child(5),
  .app-shell:not([data-mobile-layout-mode="mobile"]) .invoice-detail-shell[data-operational-ui="v1"] .document-lines td:first-child,
  .app-shell:not([data-mobile-layout-mode="mobile"]) .invoice-detail-shell[data-operational-ui="v1"] .document-lines td:nth-child(3),
  .app-shell:not([data-mobile-layout-mode="mobile"]) .invoice-detail-shell[data-operational-ui="v1"] .document-lines td:nth-child(4),
  .app-shell:not([data-mobile-layout-mode="mobile"]) .invoice-detail-shell[data-operational-ui="v1"] .document-lines td:nth-child(5) {
    font-size: calc(.9rem + 1px) ;
  }
}