/*
 * PM board: priority pill backgrounds must not rely on Tailwind utilities from JS-only strings
 * (build may omit them). Fixed contrast: white label + icon on saturated fills.
 */
.page-content .pm-priority-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    border-radius: 0.375rem;
    padding: 0.25rem 0.5rem;
    font-size: var(--text-2xs, 11px);
    font-weight: 500;
    line-height: 1;
    color: #fff;
    box-shadow: var(--shadow-sm, 0 0.0625rem 0.125rem rgba(76, 76, 92, 0.15));
}

.page-content .pm-priority-pill .iconify {
    color: #fff;
}

.page-content .pm-priority-pill--low {
    background-color: #475569;
}

/* Medium: silver / light gray (dark text); not orange. */
.page-content .pm-priority-pill--medium {
    background-color: #dce0e6;
    color: #3a4149;
    box-shadow: 0 0.0625rem 0.125rem rgba(76, 76, 92, 0.12);
}

.page-content .pm-priority-pill--medium .iconify {
    color: #4b5563;
}

html[data-theme="dark"] .page-content .pm-priority-pill--medium {
    background-color: #4a505c;
    color: #eef1f5;
    box-shadow: 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.25);
}

html[data-theme="dark"] .page-content .pm-priority-pill--medium .iconify {
    color: #e2e8f0;
}

.page-content .pm-priority-pill--high {
    background-color: #ea580c;
}

.page-content .pm-priority-pill--urgent {
    background-color: #dc2626;
}

.page-content .pm-priority-pill--default {
    background-color: #313a46;
}

/*
 * PM schedule + board % + Gantt bars: semantic colors from theme tokens (per skin + light/dark in theme CSS).
 * Primary = on-track in progress; secondary = neutral completion; success = on-time win; etc.
 */
.page-content {
    --pm-sched-ontrack: var(--color-primary);
    --pm-sched-ontrack-strong: var(--color-primary-hover);
    --pm-sched-done-won: var(--color-success);
    --pm-sched-done-won-strong: var(--color-success-hover);
    --pm-sched-neutral: var(--color-secondary);
    --pm-sched-neutral-strong: var(--color-secondary-hover);
    --pm-sched-muted: var(--color-default-700);
    --pm-sched-muted-strong: var(--color-default-800);
    --pm-sched-ahead: var(--color-info);
    --pm-sched-ahead-strong: var(--color-info-hover);
    --pm-sched-atrisk: var(--color-warning);
    --pm-sched-atrisk-strong: var(--color-warning-hover);
    --pm-sched-bad: var(--color-danger);
    --pm-sched-bad-strong: var(--color-danger-hover);
    --pm-sched-overage: var(--color-danger);
}

/*
 * Dark: --color-default-700/800 flip to light zinc tones — too light for “not started” pills on white text.
 * Use darker surfaces + light label tokens instead.
 */
html[data-theme="dark"] .page-content {
    --pm-sched-muted: var(--color-default-500);
    --pm-sched-muted-strong: var(--color-default-200);
}

html[data-theme="dark"] .page-content .pm-schedule-pill--notstarted,
html[data-theme="dark"] .page-content .pm-schedule-pill--unscheduled {
    color: var(--color-default-950, #f8fafc);
}

html[data-theme="dark"] .page-content .pm-schedule-pill--notstarted .iconify,
html[data-theme="dark"] .page-content .pm-schedule-pill--unscheduled .iconify {
    color: var(--color-default-950, #f8fafc);
}

.page-content .pm-sched-leg .pm-sched-leg-swatch {
    display: inline-block;
    width: 0.875rem;
    height: 0.875rem;
    border-radius: 0.25rem;
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.12);
}

html[data-theme="dark"] .page-content .pm-sched-leg .pm-sched-leg-swatch {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

/* PM schedule: same pill chrome as priority; fill uses theme vars above */
.page-content .pm-schedule-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    border-radius: 0.375rem;
    padding: 0.25rem 0.5rem;
    font-size: var(--text-2xs, 11px);
    font-weight: 500;
    line-height: 1;
    color: #fff;
    box-shadow: var(--shadow-sm, 0 0.0625rem 0.125rem rgba(76, 76, 92, 0.15));
}

.page-content .pm-schedule-pill .iconify {
    color: #fff;
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    min-width: 1rem;
    min-height: 1rem;
}

.page-content .pm-schedule-pill .iconify svg,
.page-content .pm-schedule-pill svg {
    display: block;
    width: 1rem !important;
    height: 1rem !important;
    stroke: currentColor;
}

.page-content .pm-schedule-pill--completed {
    background-color: var(--pm-sched-neutral-strong);
}

.page-content .pm-schedule-pill--completed-early {
    background-color: var(--pm-sched-ahead-strong);
}

.page-content .pm-schedule-pill--completed-ontime {
    background-color: var(--pm-sched-done-won-strong);
}

.page-content .pm-schedule-pill--completed-late {
    background-color: var(--pm-sched-bad-strong);
}

.page-content .pm-schedule-pill--onschedule {
    background-color: var(--pm-sched-ontrack-strong);
}

.page-content .pm-schedule-pill--notstarted {
    background-color: var(--pm-sched-muted-strong);
}

.page-content .pm-schedule-pill--atrisk {
    background-color: var(--pm-sched-atrisk-strong);
}

.page-content .pm-schedule-pill--pastdue {
    background-color: var(--pm-sched-bad-strong);
}

.page-content .pm-schedule-pill--unscheduled {
    background-color: var(--pm-sched-muted-strong);
}

/* PM board % bar: same tokens as schedule pills (JS: scheduleBoardProgressFillClass). */
.page-content .pm-board-wi-progress-fill--completed {
    background-color: var(--pm-sched-neutral-strong);
}
.page-content .pm-board-wi-progress-fill--completed-early {
    background-color: var(--pm-sched-ahead-strong);
}
.page-content .pm-board-wi-progress-fill--completed-ontime {
    background-color: var(--pm-sched-done-won-strong);
}
.page-content .pm-board-wi-progress-fill--completed-late {
    background-color: var(--pm-sched-bad-strong);
}
.page-content .pm-board-wi-progress-fill--onschedule {
    background-color: var(--pm-sched-ontrack-strong);
}
.page-content .pm-board-wi-progress-fill--notstarted {
    background-color: var(--pm-sched-muted-strong);
}
.page-content .pm-board-wi-progress-fill--atrisk {
    background-color: var(--pm-sched-atrisk-strong);
}
.page-content .pm-board-wi-progress-fill--pastdue {
    background-color: var(--pm-sched-bad-strong);
}
.page-content .pm-board-wi-progress-fill--unscheduled {
    background-color: var(--pm-sched-muted-strong);
}

/* PM task board: card surface/border/shadow from theme tokens (markup is built in JS; do not rely on bg-card purge). */
.page-content .pm-task-card {
    background-color: var(--color-card);
    border: 1px solid var(--color-default-200);
    box-shadow: var(--shadow-sm);
}

.page-content .pm-task-card-more {
    border-top: 1px solid var(--color-default-200);
}

/* PM board drag strip: inline SVG (not Iconify) so the grip always paints at a known size */
.page-content .pm-board-drag-handle svg {
    display: block;
}

.page-content .pm-board-sort-chosen .pm-task-card {
    box-shadow: var(--shadow-md);
    outline: 1px solid var(--color-primary);
    outline-offset: 1px;
}

/* Single class name only — Sortable passes ghostClass to classList.add (no spaces allowed). */
.page-content .pm-board-sort-ghost {
    opacity: 0.6;
}

.page-content .pm-board-sort-ghost .pm-task-card {
    border-style: dashed;
}

.page-content .pm-board-empty-drop-hint {
    pointer-events: none;
}

/* CRM shell: soften card-header “dashed rule” from global theme for dense toolbars/forms */
.page-content .card > .card-header {
    border-bottom-style: solid;
    border-bottom-width: 1px;
}

/* Inventory warehousing pages: filters left, nav split + actions top-right */
.page-content .inv-warehousing-toolbar-actions {
    margin-inline-start: auto;
}

.page-content .card:has(.inv-warehousing-toolbar),
.page-content .card:has(.inv-warehousing-toolbar) > .card-header {
    overflow: visible;
}

/* Contact (and similar) profile card: label left, value right — not in app.min.css (arbitrary grid purged). */
.page-content .crm-profile-meta-dl {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    font-size: 0.875rem;
    margin: 0;
}

.page-content .crm-profile-meta-row {
    display: grid;
    grid-template-columns: minmax(6.75rem, 8.75rem) minmax(0, 1fr);
    align-items: start;
    gap: 0.125rem 0.75rem;
}

.page-content .crm-profile-meta-row dt {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: rgb(var(--color-default-500) / 1);
}

.page-content .crm-profile-meta-row dd {
    margin: 0;
    min-width: 0;
    color: rgb(var(--color-default-800) / 1);
}

/* Label icons: reserve box so Iconify SVGs do not collapse to 0×0 */
.page-content i.crm-field-icon {
    display: inline-block;
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
    vertical-align: middle;
}

.page-content .crm-field-icon.iconify {
    display: inline-block;
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
    vertical-align: middle;
}

/* Fullscreen modals: no cream tiles on field labels in the card body (space + product convention). */
.crm-modal-panel .card-body label .apphub-icon-tile {
    display: none !important;
}

.crm-modal-panel .card-body label.inline-flex.items-center.gap-2 {
    gap: 0;
}

/* One optional glyph in the modal title row (not a tile) — always sized and visible. */
.crm-modal-panel .card-header .crm-modal-title-icon.iconify,
.crm-modal-panel .card-header i.crm-modal-title-icon.iconify {
    display: inline-block;
    width: 1.375rem;
    height: 1.375rem;
    min-width: 1.375rem;
    min-height: 1.375rem;
    flex-shrink: 0;
    vertical-align: middle;
}

/* Admin / CRM modals: non-label Iconify (e.g. close, footer) keeps a non-zero box outside .page-content. */
.crm-fullscreen-overlay i.crm-field-icon,
.crm-modal-panel i.crm-field-icon,
.crm-fullscreen-overlay .crm-field-icon.iconify,
.crm-modal-panel .crm-field-icon.iconify {
    display: inline-block;
    width: 1.25rem;
    height: 1.25rem;
    min-width: 1.25rem;
    min-height: 1.25rem;
    flex-shrink: 0;
    vertical-align: middle;
}

.crm-fullscreen-overlay .apphub-icon-tile > i.iconify,
.crm-fullscreen-overlay .apphub-icon-tile > svg.iconify,
.crm-modal-panel .apphub-icon-tile > i.iconify,
.crm-modal-panel .apphub-icon-tile > svg.iconify {
    display: inline-block;
    width: 1.25rem;
    height: 1.25rem;
    min-width: 1.25rem;
    min-height: 1.25rem;
    flex-shrink: 0;
}

/* Primary actions: Tabler/Iconify inherits button color and keeps a visible size */
.btn.bg-primary > .iconify,
.btn.bg-primary > i.iconify {
    display: inline-block;
    width: 1.125rem;
    height: 1.125rem;
    min-width: 1.125rem;
    min-height: 1.125rem;
    flex-shrink: 0;
    vertical-align: middle;
    color: inherit;
    opacity: 1;
}

/* PM work-items table (pm-lookups rowLabel): explicit box so Iconify SVGs never paint at 0×0 */
.page-content .pm-lookup-row-icon.iconify,
/* Hierarchy modal tree is outside .page-content; keep Iconify SVGs from collapsing to 0×0 */
.pm-wi-tree-panel .pm-lookup-row-icon.iconify {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    min-width: 1rem;
    min-height: 1rem;
    flex-shrink: 0;
    vertical-align: -0.125em;
}

.page-content .pm-lookup-badge-icon.iconify {
    display: inline-block;
    width: 0.875rem;
    height: 0.875rem;
    min-width: 0.875rem;
    min-height: 0.875rem;
    flex-shrink: 0;
    vertical-align: -0.1em;
}

/* Sprints table: last column width (also referenced from JS row HTML). */
.page-content th.pm-sprints-workitems-col,
.page-content td.pm-sprints-workitems-col {
    min-width: 13rem;
    width: 13rem;
    max-width: 16rem;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    vertical-align: middle;
    text-align: center;
}

/* Work items table: details column */
.page-content th.pm-wi-details-col,
.page-content td.pm-wi-details-col {
    min-width: 5.5rem;
    width: 5.5rem;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    vertical-align: middle;
    text-align: center;
}

/* Work item detail summary: meta + description side-by-side (theme build omits Tailwind xl @ 1280px). */
.page-content .pm-wi-summary-desc-title,
.pm-wi-summary-desc-title {
    margin-bottom: 0.5rem;
}

.page-content .pm-wi-summary-desc,
.pm-wi-summary-desc {
    position: relative;
}

.page-content .pm-wi-summary-shell,
.pm-wi-summary-shell {
    display: grid;
    width: 100%;
    gap: 1.5rem;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
}

@media (min-width: 1280px) {
    .page-content .pm-wi-summary-shell,
    .pm-wi-summary-shell {
        grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
    }

    .page-content .pm-wi-summary-desc,
    .pm-wi-summary-desc {
        border-top: none !important;
        padding-top: 0 !important;
        border-left: 1px solid var(--color-default-200, #eef2f7);
        padding-left: 1.5rem;
    }

    /* Replaces Tailwind xl:sr-only (xl breakpoint not in app.min.css). */
    .page-content .pm-wi-summary-desc-title,
    .pm-wi-summary-desc-title {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px !important;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border-width: 0;
    }

    .page-content .pm-wi-summary-desc #pm-wi-description,
    .pm-wi-summary-desc #pm-wi-description {
        max-height: min(32rem, 70vh);
        overflow-y: auto;
        padding-right: 0.25rem;
    }
}

/*
 * Work item detail: use --text-xs for narrative + meta values (matches list/helper copy).
 * Global .pm-wi-kv-value uses --text-body; this ID scope must override that explicitly.
 */
.page-content #pm-wi-panel,
#pm-wi-panel {
    font-size: var(--text-xs, 0.8125rem);
    line-height: 1.5;
    font-weight: 400;
}

.page-content #pm-wi-panel #pm-wi-sub,
#pm-wi-panel #pm-wi-sub {
    font-size: var(--text-xs, 0.8125rem);
    line-height: 1.45;
}

.page-content #pm-wi-panel h4.card-title,
#pm-wi-panel h4.card-title {
    font-size: 1.125rem;
    line-height: 1.35;
    font-weight: 600;
}

.page-content #pm-wi-panel h5.card-title,
#pm-wi-panel h5.card-title {
    font-size: 0.9375rem;
    line-height: 1.35;
    font-weight: 600;
}

.page-content #pm-wi-panel .pm-wi-kv-label,
#pm-wi-panel .pm-wi-kv-label {
    font-size: var(--text-2xs, 11px);
    line-height: 1.45;
}

.page-content #pm-wi-panel .pm-wi-kv-value,
#pm-wi-panel .pm-wi-kv-value {
    font-size: var(--text-xs, 0.8125rem);
    line-height: 1.45;
}

.page-content #pm-wi-panel #pm-wi-description,
#pm-wi-panel #pm-wi-description,
.page-content #pm-wi-panel .pm-wi-description-body,
#pm-wi-panel .pm-wi-description-body {
    font-size: var(--text-xs, 0.8125rem);
    line-height: 1.55;
    font-weight: 400;
}

.page-content #pm-wi-panel .pm-wi-summary-desc-title,
#pm-wi-panel .pm-wi-summary-desc-title {
    font-size: var(--text-2xs, 11px);
}

.page-content #pm-wi-panel #pm-wi-audit,
#pm-wi-panel #pm-wi-audit {
    font-size: var(--text-xs, 0.8125rem);
    line-height: 1.45;
}

/* Work item detail: four assignment cards (Tailwind xl grid not in app.min.css). */
.page-content .pm-wi-assignment-grid,
.pm-wi-assignment-grid {
    display: grid;
    width: 100%;
    gap: var(--spacing-base, 20px);
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
}

@media (min-width: 768px) {
    .page-content .pm-wi-assignment-grid,
    .pm-wi-assignment-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1280px) {
    .page-content .pm-wi-assignment-grid,
    .pm-wi-assignment-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* Work item detail: work tree + dependencies (two columns from md up; not the xl four-column assignment grid). */
.page-content .pm-wi-tree-deps-row,
.pm-wi-tree-deps-row {
    display: grid;
    width: 100%;
    gap: var(--spacing-base, 20px);
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
}

@media (min-width: 768px) {
    .page-content .pm-wi-tree-deps-row,
    .pm-wi-tree-deps-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* PM work item tree (detail card + hierarchy modal): explicit surfaces for dark theme. */
.page-content .pm-wi-tree-panel,
.pm-wi-tree-panel {
    border-radius: 0.5rem;
    border: 1px solid rgba(148, 163, 184, 0.38);
    background-color: #ffffff;
    color: #1e293b;
}

html[data-theme="dark"] .page-content .pm-wi-tree-panel,
html[data-theme="dark"] .pm-wi-tree-panel {
    border-color: rgba(148, 163, 184, 0.22);
    background-color: rgba(15, 23, 42, 0.72);
    color: #e2e8f0;
}

.page-content .pm-wi-tree-panel .pm-wi-tree-line,
.pm-wi-tree-panel .pm-wi-tree-line {
    border-bottom: 1px solid rgba(148, 163, 184, 0.3);
}

html[data-theme="dark"] .page-content .pm-wi-tree-panel .pm-wi-tree-line,
html[data-theme="dark"] .pm-wi-tree-panel .pm-wi-tree-line {
    border-bottom-color: rgba(148, 163, 184, 0.14);
}

.page-content .pm-wi-tree-panel .pm-wi-tree-line:last-child,
.pm-wi-tree-panel .pm-wi-tree-line:last-child {
    border-bottom: none;
}

.page-content .pm-wi-tree-panel .pm-wi-tree-line--self,
.pm-wi-tree-panel .pm-wi-tree-line--self {
    background-color: rgba(37, 99, 235, 0.07);
}

html[data-theme="dark"] .page-content .pm-wi-tree-panel .pm-wi-tree-line--self,
html[data-theme="dark"] .pm-wi-tree-panel .pm-wi-tree-line--self {
    background-color: rgba(59, 130, 246, 0.16);
}

.page-content .pm-wi-tree-panel .pm-wi-tree-title,
.pm-wi-tree-panel .pm-wi-tree-title {
    color: #1e293b;
}

html[data-theme="dark"] .page-content .pm-wi-tree-panel .pm-wi-tree-title,
html[data-theme="dark"] .pm-wi-tree-panel .pm-wi-tree-title {
    color: #f1f5f9;
}

.page-content .pm-wi-tree-panel .pm-wi-tree-meta,
.pm-wi-tree-panel .pm-wi-tree-meta {
    font-size: 0.6875rem;
    line-height: 1.35;
    color: #64748b;
}

html[data-theme="dark"] .page-content .pm-wi-tree-panel .pm-wi-tree-meta,
html[data-theme="dark"] .pm-wi-tree-panel .pm-wi-tree-meta {
    color: #94a3b8;
}

.page-content .pm-wi-tree-panel .pm-wi-tree-badge,
.pm-wi-tree-panel .pm-wi-tree-badge {
    color: #2563eb;
}

html[data-theme="dark"] .page-content .pm-wi-tree-panel .pm-wi-tree-badge,
html[data-theme="dark"] .pm-wi-tree-panel .pm-wi-tree-badge {
    color: #93c5fd;
}

/* Child list inside hierarchy modal (ul.pm-wi-tree-panel): stack rows without double borders. */
.pm-wi-tree-panel.pm-wi-tree-panel--list > li {
    border-bottom: 1px solid rgba(148, 163, 184, 0.22);
    padding-bottom: 0.375rem;
}

html[data-theme="dark"] .pm-wi-tree-panel.pm-wi-tree-panel--list > li {
    border-bottom-color: rgba(148, 163, 184, 0.12);
}

.pm-wi-tree-panel.pm-wi-tree-panel--list > li:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

/* Hierarchy modal: read-only type/phase summary strip. */
.page-content .pm-wi-hier-ro-block,
.pm-wi-hier-ro-block {
    border: 1px solid rgba(148, 163, 184, 0.35);
    background-color: rgba(248, 250, 252, 0.85);
}

html[data-theme="dark"] .page-content .pm-wi-hier-ro-block,
html[data-theme="dark"] .pm-wi-hier-ro-block {
    border-color: rgba(148, 163, 184, 0.2);
    background-color: rgba(15, 23, 42, 0.55);
}

html[data-theme="dark"] .page-content .pm-wi-hier-ro-block #pm-wi-hier-ro-line1,
html[data-theme="dark"] .pm-wi-hier-ro-block #pm-wi-hier-ro-line1 {
    color: #f1f5f9;
}

html[data-theme="dark"] .page-content .pm-wi-hier-ro-block #pm-wi-hier-ro-line2,
html[data-theme="dark"] .pm-wi-hier-ro-block #pm-wi-hier-ro-line2 {
    color: #94a3b8;
}

/* Work item detail: type + icon left of title (uses pm-lookups rowLabel). */
.page-content #pm-wi-panel #pm-wi-header-type .inline-flex,
#pm-wi-panel #pm-wi-header-type .inline-flex {
    font-size: 0.9375rem;
    line-height: 1.4;
}

.page-content #pm-wi-panel #pm-wi-header-type .pm-lookup-row-icon,
#pm-wi-panel #pm-wi-header-type .pm-lookup-row-icon {
    font-size: 1.125rem;
}

html[data-theme="dark"] .page-content #pm-wi-panel #pm-wi-header-type .text-default-800,
html[data-theme="dark"] #pm-wi-panel #pm-wi-header-type .text-default-800 {
    color: #e2e8f0;
}

.page-content #pm-wi-panel #pm-wi-header-dates .text-default-800,
#pm-wi-panel #pm-wi-header-dates .text-default-800 {
    color: #0f172a;
}

html[data-theme="dark"] .page-content #pm-wi-panel #pm-wi-header-dates .text-default-800,
html[data-theme="dark"] #pm-wi-panel #pm-wi-header-dates .text-default-800 {
    color: #e2e8f0;
}

/* Work item tree rows: type icon column aligns with text */
.page-content #pm-wi-panel #pm-wi-tree-body .pm-wi-tree-line .pm-lookup-row-icon,
#pm-wi-panel #pm-wi-tree-body .pm-wi-tree-line .pm-lookup-row-icon {
    font-size: 1.05rem;
}

/* Work item detail: tree ladder (gutter + colored depth stripe on each row). */
.page-content #pm-wi-panel #pm-wi-tree-body .pm-wi-tree-gutter,
#pm-wi-panel #pm-wi-tree-body .pm-wi-tree-gutter {
    display: inline-flex;
    flex-direction: row;
    align-items: stretch;
    flex-shrink: 0;
    align-self: stretch;
    overflow: hidden;
    border-radius: 0.25rem;
    background-color: rgba(241, 245, 249, 0.65);
}

html[data-theme="dark"] .page-content #pm-wi-panel #pm-wi-tree-body .pm-wi-tree-gutter,
html[data-theme="dark"] #pm-wi-panel #pm-wi-tree-body .pm-wi-tree-gutter {
    background-color: rgba(15, 23, 42, 0.45);
}

.page-content #pm-wi-panel #pm-wi-tree-body .pm-wi-tree-gutter-unit,
#pm-wi-panel #pm-wi-tree-body .pm-wi-tree-gutter-unit {
    flex: 0 0 14px;
    width: 14px;
    align-self: stretch;
    border-left: 2px solid rgba(148, 163, 184, 0.55);
    box-sizing: border-box;
    min-height: 1.5rem;
}

html[data-theme="dark"] .page-content #pm-wi-panel #pm-wi-tree-body .pm-wi-tree-gutter-unit,
html[data-theme="dark"] #pm-wi-panel #pm-wi-tree-body .pm-wi-tree-gutter-unit {
    border-left-color: rgba(148, 163, 184, 0.38);
}

/* PM work items table (tree view): stepped indent + neutral thread bar (markup from Index.cshtml). */
.page-content #pm-workitems-tbody.pm-workitems-tbody--tree tr[data-pm-tree-depth]:not([data-pm-tree-depth="0"]),
#pm-workitems-tbody.pm-workitems-tbody--tree tr[data-pm-tree-depth]:not([data-pm-tree-depth="0"]) {
    background-color: transparent;
}

.page-content #pm-workitems-tbody.pm-workitems-tbody--tree tr[data-pm-tree-depth]:not([data-pm-tree-depth="0"]):hover,
#pm-workitems-tbody.pm-workitems-tbody--tree tr[data-pm-tree-depth]:not([data-pm-tree-depth="0"]):hover {
    background-color: rgba(148, 163, 184, 0.08);
}

html[data-theme="dark"] .page-content #pm-workitems-tbody.pm-workitems-tbody--tree tr[data-pm-tree-depth]:not([data-pm-tree-depth="0"]):hover,
html[data-theme="dark"] #pm-workitems-tbody.pm-workitems-tbody--tree tr[data-pm-tree-depth]:not([data-pm-tree-depth="0"]):hover {
    background-color: rgba(148, 163, 184, 0.06);
}

.page-content #pm-workitems-tbody .pm-wi-tree-depth-spacer,
#pm-workitems-tbody .pm-wi-tree-depth-spacer {
    align-self: stretch;
    align-items: center;
    box-sizing: border-box;
}

.page-content #pm-workitems-tbody .pm-wi-tree-depth-thread,
#pm-workitems-tbody .pm-wi-tree-depth-thread {
    display: block;
    width: 3px;
    min-height: 1.125rem;
    border-radius: 9999px;
    background-color: rgba(100, 116, 139, 0.45);
}

html[data-theme="dark"] .page-content #pm-workitems-tbody .pm-wi-tree-depth-thread,
html[data-theme="dark"] #pm-workitems-tbody .pm-wi-tree-depth-thread {
    background-color: rgba(148, 163, 184, 0.35);
}

/* Work item detail page: multi-column meta (class-only + .page-content so grid always applies). */
.page-content .pm-wi-meta-grid,
.pm-wi-meta-grid {
    display: grid;
    width: 100%;
    grid-template-columns: minmax(0, 1fr);
    column-gap: 1.75rem;
    row-gap: 0.625rem;
}

@media (min-width: 640px) {
    .page-content .pm-wi-meta-grid,
    .pm-wi-meta-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .page-content .pm-wi-meta-grid,
    .pm-wi-meta-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.page-content .pm-wi-kv,
.pm-wi-kv {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 0.5rem;
    row-gap: 0.125rem;
    min-width: 0;
    max-width: 100%;
}

.page-content .pm-wi-kv-label,
.pm-wi-kv-label {
    flex: 0 0 auto;
    font-size: var(--text-2xs, 11px);
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #94a3b8;
}

html[data-theme="dark"] .page-content .pm-wi-kv-label,
html[data-theme="dark"] .pm-wi-kv-label {
    color: #94a3b8;
}

.page-content .pm-wi-kv-value,
.pm-wi-kv-value {
    flex: 1 1 8rem;
    min-width: 0;
    font-size: var(--text-body, 0.875rem);
    line-height: 1.45;
    color: #1e293b;
}

html[data-theme="dark"] .page-content .pm-wi-kv-value,
html[data-theme="dark"] .pm-wi-kv-value {
    color: #e2e8f0;
}

.page-content .pm-wi-kv-full,
.pm-wi-kv-full {
    grid-column: 1 / -1;
    margin-top: 0.25rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(148, 163, 184, 0.35);
}

html[data-theme="dark"] .page-content .pm-wi-kv-full,
html[data-theme="dark"] .pm-wi-kv-full {
    border-top-color: rgba(148, 163, 184, 0.2);
}

/* PM table action buttons: inline SVG glyphs (no Iconify in JS-built rows).
 * Theme link styles must not change these (remove uses href="#").
 */
.page-content a.pm-table-action-btn {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    min-width: 2.25rem;
    min-height: 2.25rem;
    text-decoration: none;
    color: #374151;
}

.page-content a.pm-table-action-btn:hover,
.page-content a.pm-table-action-btn:focus,
.page-content a.pm-table-action-btn:focus-visible {
    text-decoration: none;
    color: #374151;
}

html[data-theme="dark"] .page-content a.pm-table-action-btn {
    color: #e2e8f0;
}

html[data-theme="dark"] .page-content a.pm-table-action-btn:hover,
html[data-theme="dark"] .page-content a.pm-table-action-btn:focus,
html[data-theme="dark"] .page-content a.pm-table-action-btn:focus-visible {
    color: #e2e8f0;
}

/* Match <a.pm-table-action-btn>: native buttons need reset (bg, padding, font). */
.page-content button.pm-table-action-btn {
    margin: 0;
    padding: 0;
    font: inherit;
    line-height: 1;
    cursor: pointer;
    text-align: center;
    background-color: transparent;
    appearance: none;
    -webkit-appearance: none;
    box-shadow: none;
    color: #374151;
}

html[data-theme="dark"] .page-content button.pm-table-action-btn {
    color: #e2e8f0;
}

.page-content a.pm-table-action-btn .pm-table-action-svg,
.page-content button.pm-table-action-btn .pm-table-action-svg {
    width: 1.125rem;
    height: 1.125rem;
    flex-shrink: 0;
    display: block;
    pointer-events: none;
}

/*
 * PM lookup row/badge icons: explicit colors (Tailwind utilities in pm-lookups.js are not in the CSS build).
 * Tabler outline glyphs use stroke=currentColor on the injected SVG.
 */
.page-content .pm-lookup-row-icon.iconify svg,
.page-content .pm-lookup-badge-icon.iconify svg,
.pm-wi-tree-panel .pm-lookup-row-icon.iconify svg {
    stroke: currentColor;
}

.page-content .pm-wi-tone-default.iconify {
    color: #64748b;
}

html[data-theme="dark"] .page-content .pm-wi-tone-default.iconify {
    color: #94a3b8;
}

/* —— work item status —— */
.page-content .pm-wis-backlog.iconify {
    color: #64748b;
}
.page-content .pm-wis-todo.iconify {
    color: #2563eb;
}
.page-content .pm-wis-in_progress.iconify {
    color: #059669;
}
.page-content .pm-wis-review.iconify {
    color: #7c3aed;
}
.page-content .pm-wis-blocked.iconify {
    color: #d97706;
}
.page-content .pm-wis-done.iconify {
    color: #16a34a;
}

html[data-theme="dark"] .page-content .pm-wis-backlog.iconify {
    color: #94a3b8;
}
html[data-theme="dark"] .page-content .pm-wis-todo.iconify {
    color: #93c5fd;
}
html[data-theme="dark"] .page-content .pm-wis-in_progress.iconify {
    color: #6ee7b7;
}
html[data-theme="dark"] .page-content .pm-wis-review.iconify {
    color: #c4b5fd;
}
html[data-theme="dark"] .page-content .pm-wis-blocked.iconify {
    color: #fcd34d;
}
html[data-theme="dark"] .page-content .pm-wis-done.iconify {
    color: #86efac;
}

/* —— phase —— */
.page-content .pm-wiph-discovery.iconify {
    color: #0284c7;
}
.page-content .pm-wiph-designing.iconify {
    color: #c026d3;
}
.page-content .pm-wiph-developing.iconify {
    color: #4f46e5;
}
.page-content .pm-wiph-deployment.iconify {
    color: #ea580c;
}
.page-content .pm-wiph-delivery.iconify {
    color: #0d9488;
}

html[data-theme="dark"] .page-content .pm-wiph-discovery.iconify {
    color: #38bdf8;
}
html[data-theme="dark"] .page-content .pm-wiph-designing.iconify {
    color: #e879f9;
}
html[data-theme="dark"] .page-content .pm-wiph-developing.iconify {
    color: #a5b4fc;
}
html[data-theme="dark"] .page-content .pm-wiph-deployment.iconify {
    color: #fdba74;
}
html[data-theme="dark"] .page-content .pm-wiph-delivery.iconify {
    color: #5eead4;
}

/* —— type —— */
.page-content .pm-wity-epic.iconify {
    color: #7c3aed;
}
.page-content .pm-wity-feature.iconify {
    color: #2563eb;
}
.page-content .pm-wity-task.iconify {
    color: #475569;
}
.page-content .pm-wity-issue.iconify {
    color: #dc2626;
}
.page-content .pm-wity-testing.iconify {
    color: #0891b2;
}

html[data-theme="dark"] .page-content .pm-wity-epic.iconify {
    color: #c4b5fd;
}
html[data-theme="dark"] .page-content .pm-wity-feature.iconify {
    color: #93c5fd;
}
html[data-theme="dark"] .page-content .pm-wity-task.iconify {
    color: #cbd5e1;
}
html[data-theme="dark"] .page-content .pm-wity-issue.iconify {
    color: #fca5a5;
}
html[data-theme="dark"] .page-content .pm-wity-testing.iconify {
    color: #67e8f9;
}

/* —— priority —— */
.page-content .pm-wipr-low.iconify {
    color: #64748b;
}
.page-content .pm-wipr-medium.iconify {
    color: #52525b;
}
.page-content .pm-wipr-high.iconify {
    color: #ea580c;
}
.page-content .pm-wipr-urgent.iconify {
    color: #dc2626;
}
.page-content .pm-wipr-default.iconify {
    color: #64748b;
}

html[data-theme="dark"] .page-content .pm-wipr-low.iconify {
    color: #94a3b8;
}
html[data-theme="dark"] .page-content .pm-wipr-medium.iconify {
    color: #d4d4d8;
}
html[data-theme="dark"] .page-content .pm-wipr-high.iconify {
    color: #fdba74;
}
html[data-theme="dark"] .page-content .pm-wipr-urgent.iconify {
    color: #fca5a5;
}
html[data-theme="dark"] .page-content .pm-wipr-default.iconify {
    color: #94a3b8;
}

/* —— project status (projects table) —— */
.page-content .pm-wips-planned.iconify {
    color: #2563eb;
}
.page-content .pm-wips-active.iconify {
    color: #059669;
}
.page-content .pm-wips-on_hold.iconify {
    color: #d97706;
}
.page-content .pm-wips-completed.iconify {
    color: #64748b;
}
.page-content .pm-wips-cancelled.iconify {
    color: #dc2626;
}

html[data-theme="dark"] .page-content .pm-wips-planned.iconify {
    color: #93c5fd;
}
html[data-theme="dark"] .page-content .pm-wips-active.iconify {
    color: #6ee7b7;
}
html[data-theme="dark"] .page-content .pm-wips-on_hold.iconify {
    color: #fcd34d;
}
html[data-theme="dark"] .page-content .pm-wips-completed.iconify {
    color: #94a3b8;
}
html[data-theme="dark"] .page-content .pm-wips-cancelled.iconify {
    color: #fca5a5;
}

/*
 * CRM search pickers (crm-pickers.js): baseline anchor + list stacking inside .page-content.
 * When open, lists use position:fixed and a high inline z-index (see crm-pickers.js / _crm-overlays.css).
 * Tailwind z-[…] on dropdown divs was unreliable — defaults live here without !important.
 */
.page-content .crm-typeahead-anchor {
    position: relative;
    z-index: 80;
}

.page-content .crm-typeahead-dropdown {
    /* No !important — crm-pickers.js sets inline z-index when open (must win over this). */
    z-index: 90;
}

/* PO detail: work item tree picker (icons + hierarchy; same depth guide as PM work items table). */
.page-content #inv-po-detail-work-item-panel .pm-wi-tree-depth-spacer,
#inv-po-detail-work-item-panel .pm-wi-tree-depth-spacer {
    align-self: stretch;
    align-items: center;
    box-sizing: border-box;
}

.page-content #inv-po-detail-work-item-panel .pm-wi-tree-depth-thread,
#inv-po-detail-work-item-panel .pm-wi-tree-depth-thread {
    display: block;
    width: 3px;
    min-height: 1.125rem;
    border-radius: 9999px;
    /* Keep indent width; hide the vertical guide (matches panel bg). */
    background-color: transparent;
}

.page-content #inv-po-detail-work-item-panel .pm-lookup-row-icon.iconify,
#inv-po-detail-work-item-panel .pm-lookup-row-icon.iconify {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    min-width: 1rem;
    min-height: 1rem;
    flex-shrink: 0;
    vertical-align: -0.125em;
}

.page-content .inv-po-wi-picker-opt[aria-selected="true"],
.inv-po-wi-picker-opt[aria-selected="true"] {
    background-color: rgba(35, 109, 201, 0.08);
}

html[data-theme="dark"] .page-content .inv-po-wi-picker-opt[aria-selected="true"],
html[data-theme="dark"] .inv-po-wi-picker-opt[aria-selected="true"] {
    background-color: rgba(147, 197, 253, 0.12);
}

/* SO detail: work item tree picker (same as PO detail). */
.page-content #inv-so-detail-work-item-panel .pm-wi-tree-depth-spacer,
#inv-so-detail-work-item-panel .pm-wi-tree-depth-spacer {
    align-self: stretch;
    align-items: center;
    box-sizing: border-box;
}

.page-content #inv-so-detail-work-item-panel .pm-wi-tree-depth-thread,
#inv-so-detail-work-item-panel .pm-wi-tree-depth-thread {
    display: block;
    width: 3px;
    min-height: 1.125rem;
    border-radius: 9999px;
    background-color: transparent;
}

.page-content #inv-so-detail-work-item-panel .pm-lookup-row-icon.iconify,
#inv-so-detail-work-item-panel .pm-lookup-row-icon.iconify {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    min-width: 1rem;
    min-height: 1rem;
    flex-shrink: 0;
    vertical-align: -0.125em;
}

.page-content .inv-so-wi-picker-opt[aria-selected="true"],
.inv-so-wi-picker-opt[aria-selected="true"] {
    background-color: rgba(35, 109, 201, 0.08);
}

html[data-theme="dark"] .page-content .inv-so-wi-picker-opt[aria-selected="true"],
html[data-theme="dark"] .inv-so-wi-picker-opt[aria-selected="true"] {
    background-color: rgba(147, 197, 253, 0.12);
}

/*
 * Org overview / name-link visuals live in custom/_crm-org-look.css (imported last in app.css).
 * Duplicated here with !important so a stale app.min.css build still picks up the softer rule.
 */
html .page-content .crm-org-overview-card > .card-header {
    border-bottom: 1px solid rgba(148, 163, 184, 0.22) !important;
}

html[data-theme="dark"] .page-content .crm-org-overview-card > .card-header {
    border-bottom: 1px solid rgba(148, 163, 184, 0.14) !important;
}

html .page-content a.crm-org-name-link {
    text-decoration: none !important;
    text-underline-offset: 0.18em;
}

html .page-content a.crm-org-name-link:hover,
html .page-content a.crm-org-name-link:focus-visible {
    text-decoration: underline !important;
    text-decoration-thickness: 1px !important;
    text-decoration-color: rgba(35, 109, 201, 0.32) !important;
}

html[data-theme="dark"] .page-content a.crm-org-name-link:hover,
html[data-theme="dark"] .page-content a.crm-org-name-link:focus-visible {
    text-decoration-color: rgba(147, 197, 253, 0.45) !important;
}

/*
 * Standalone auth / setup pages (_BaseLayout, no .page-content): theme from org landing settings (data-public-site on <html>).
 */
body.apphub-auth-page {
    background-color: var(--color-body-bg);
    color: var(--color-body-color);
}

.apphub-auth-page__card {
    background-color: var(--color-card);
    box-shadow: 0 25px 50px -12px color-mix(in srgb, var(--color-default-950, #0f172a) 14%, transparent);
}

html[data-theme="dark"] .apphub-auth-page__card {
    box-shadow: 0 24px 48px -14px rgba(0, 0, 0, 0.55);
    border-color: color-mix(in srgb, var(--color-default-500) 28%, transparent) !important;
}

.apphub-auth-page__head {
    background-color: color-mix(in srgb, var(--color-primary) 7%, var(--color-card));
}

html[data-theme="dark"] .apphub-auth-page__head {
    background-color: color-mix(in srgb, var(--color-primary) 12%, var(--color-card));
}

.apphub-auth-page__callout {
    background-color: color-mix(in srgb, var(--color-default-100) 50%, var(--color-card));
    border-color: color-mix(in srgb, var(--color-default-300) 45%, transparent);
    color: var(--color-default-800);
}

html[data-theme="dark"] .apphub-auth-page__callout {
    background-color: color-mix(in srgb, var(--color-default-800) 32%, var(--color-card));
    border-color: color-mix(in srgb, var(--color-default-600) 38%, transparent);
    color: var(--color-default-200);
}

html[data-theme="dark"] .apphub-auth-page__callout strong,
html[data-theme="dark"] .apphub-auth-page__callout .font-semibold {
    color: var(--color-default-50);
}

.apphub-auth-page__inline-tip {
    background-color: color-mix(in srgb, var(--color-default-100) 45%, var(--color-card));
    border-color: color-mix(in srgb, var(--color-default-300) 40%, transparent);
}

html[data-theme="dark"] .apphub-auth-page__inline-tip {
    background-color: color-mix(in srgb, var(--color-default-800) 28%, var(--color-card));
    border-color: color-mix(in srgb, var(--color-default-600) 35%, transparent);
}

.apphub-auth-page__ghost-btn:hover {
    background-color: color-mix(in srgb, var(--color-default-100) 70%, var(--color-card));
}

html[data-theme="dark"] .apphub-auth-page__ghost-btn:hover {
    background-color: color-mix(in srgb, var(--color-default-700) 25%, var(--color-card));
}

/* File attachments widget (CRM / PM detail cards) */
.page-content .apphub-file-attachments .iconify,
.page-content .apphub-file-attachments i.iconify {
    display: inline-block;
    width: 1.125rem;
    height: 1.125rem;
    min-width: 1.125rem;
    min-height: 1.125rem;
    flex-shrink: 0;
    vertical-align: middle;
}

.page-content .apphub-file-attachments .btn-icon > .iconify,
.page-content .apphub-file-attachments .btn-icon > i.iconify {
    width: 1rem;
    height: 1rem;
    min-width: 1rem;
    min-height: 1rem;
}

.page-content .apphub-file-attachments .card-header .crm-modal-title-icon.iconify {
    width: 1.375rem;
    height: 1.375rem;
    min-width: 1.375rem;
    min-height: 1.375rem;
}

/* Inventory doc status (receipt, PO, SO) — theme semantic fills */
.page-content .inv-wms-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 0.375rem;
    padding: 0.2em 0.55em;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    box-shadow: none;
}

.page-content .inv-wms-status--draft {
    background-color: var(--color-info);
    color: #fff;
}

.page-content .inv-wms-status--verified {
    background-color: var(--color-primary);
    color: #fff;
}

.page-content .inv-wms-status--posted {
    background-color: var(--color-success);
    color: #fff;
}

.page-content .inv-wms-status--pending {
    background-color: var(--color-warning);
    color: var(--color-default-900);
}

.page-content .inv-wms-status--approved,
.page-content .inv-wms-status--sent,
.page-content .inv-wms-status--shipped {
    background-color: var(--color-primary);
    color: #fff;
}

.page-content .inv-wms-status--partial {
    background-color: var(--color-warning);
    color: var(--color-default-900);
}

html[data-theme="dark"] .page-content .inv-wms-status--partial,
.dark .page-content .inv-wms-status--partial {
    background-color: var(--color-warning);
    color: #1a1a1a;
}

.page-content .inv-wms-status--packed {
    background-color: var(--color-info);
    color: #fff;
}

.page-content .inv-wms-status--paid {
    background-color: var(--color-success);
    color: #fff;
}

.page-content .inv-wms-status--received,
.page-content .inv-wms-status--confirmed,
.page-content .inv-wms-status--invoiced {
    background-color: var(--color-success);
    color: #fff;
}

.page-content .inv-wms-status--cancelled {
    background-color: var(--color-danger);
    color: #fff;
}

.page-content .inv-wms-status--closed,
.page-content .inv-wms-status--other {
    background-color: var(--color-default-300);
    color: var(--color-default-700);
}

.page-content tr.inv-rec-line.inv-rec-line--discrepancy td,
.page-content tr.inv-rec-line-product.inv-rec-line--discrepancy td,
#inv-rec-modal tr.inv-rec-line.inv-rec-line--discrepancy td,
#inv-rec-modal tr.inv-rec-line-product.inv-rec-line--discrepancy td {
    background-color: color-mix(in srgb, var(--color-warning) 12%, transparent);
}

.page-content tr.inv-rec-line.inv-rec-line--discrepancy .inv-rec-line-ps,
.page-content tr.inv-rec-line.inv-rec-line--discrepancy .inv-rec-line-rec,
#inv-rec-modal tr.inv-rec-line.inv-rec-line--discrepancy .inv-rec-line-ps,
#inv-rec-modal tr.inv-rec-line.inv-rec-line--discrepancy .inv-rec-line-rec,
#inv-rec-modal tr.inv-rec-line-expand.inv-rec-line--discrepancy .inv-rec-line-ps,
#inv-rec-modal tr.inv-rec-line-expand.inv-rec-line--discrepancy .inv-rec-line-rec {
    border-color: var(--color-warning);
}

/* Receipt modal — line grid (modal is in @section overlays, outside .page-content) */
#inv-rec-modal table.inv-rec-lines-table {
    width: 100%;
    table-layout: fixed;
}

#inv-rec-modal table.inv-rec-lines-table tr.inv-rec-line {
    border-bottom-width: 0;
}

#inv-rec-modal table.inv-rec-lines-table tr.inv-rec-line-meta-row {
    border-bottom-width: 0;
}

#inv-rec-modal table.inv-rec-lines-table tr.inv-rec-line-meta-row .inv-rec-line-meta-cell {
    padding-inline-start: 2.35rem;
}

#inv-rec-modal table.inv-rec-lines-table th.inv-rec-col-product,
#inv-rec-modal table.inv-rec-lines-table td.inv-rec-col-product {
    width: 28%;
    min-width: 18rem;
}

#inv-rec-modal table.inv-rec-lines-table tr.inv-rec-line-expand {
    border-bottom: 1px solid var(--color-default-200);
}

#inv-rec-modal .inv-rec-line-expand-panel {
    padding-top: 0.1rem;
    padding-bottom: 0.1rem;
}

#inv-rec-modal .inv-rec-line-expand-inline,
#inv-rec-modal .inv-rec-line-tracking-row {
    min-height: 2.25rem;
}

#inv-rec-modal .inv-rec-line-tracking-row .inv-rec-line-tracking-inline {
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.75rem;
}

#inv-rec-modal .inv-rec-lot-alloc-table th,
#inv-rec-modal .inv-rec-lot-alloc-table td {
    vertical-align: middle;
}

#inv-rec-modal .inv-rec-lot-alloc-table .form-input-sm {
    padding-top: 0.2rem;
    padding-bottom: 0.2rem;
}

#inv-rec-modal .inv-rec-serial-slots .form-input-sm {
    padding-top: 0.2rem;
    padding-bottom: 0.2rem;
}

#inv-rec-modal .inv-rec-serial-slot-read {
    display: inline-flex;
    align-items: center;
    min-height: 1.75rem;
    padding: 0.1rem 0.35rem;
    border: 1px solid var(--color-default-200, #e2e8f0);
    border-radius: 0.25rem;
    background: var(--color-light, #f8fafc);
    font-size: 0.6875rem;
}

#inv-rec-modal table.inv-rec-lines-table tr.inv-rec-line-expand td {
    vertical-align: middle;
}

#inv-rec-modal .inv-rec-inline-pair .form-input,
#inv-rec-modal .inv-rec-inline-pair .form-select {
    margin-bottom: 0;
}

#inv-rec-modal table.inv-rec-lines-table col.inv-rec-col-actions {
    width: 2.75rem;
}

#inv-rec-modal table.inv-rec-lines-table th.inv-rec-line-actions-col,
#inv-rec-modal table.inv-rec-lines-table td.inv-rec-line-actions-cell {
    width: 2.75rem;
    min-width: 2.75rem;
    max-width: 2.75rem;
    padding-inline: 0.25rem;
    vertical-align: middle;
}

#inv-rec-modal table.inv-rec-lines-table td.inv-rec-line-actions-cell .btn.btn-icon {
    width: 2rem;
    height: 2rem;
    min-width: 2rem;
    min-height: 2rem;
    padding: 0;
}

/* Shipment modal — line grid (same pattern as receipts; modal is in @section overlays) */
#inv-shp-detail-panel table.inv-shp-lines-table,
#inv-shp-modal table.inv-shp-lines-table {
    width: 100%;
    table-layout: fixed;
}

#inv-shp-detail-panel table.inv-shp-lines-table col.inv-shp-col-loc-area,
#inv-shp-modal table.inv-shp-lines-table col.inv-shp-col-loc-area {
    width: 22%;
}

#inv-shp-detail-panel table.inv-shp-lines-table col.inv-shp-col-bin,
#inv-shp-modal table.inv-shp-lines-table col.inv-shp-col-bin {
    width: 28%;
}

#inv-shp-detail-panel table.inv-shp-lines-table col.inv-shp-col-qty,
#inv-shp-modal table.inv-shp-lines-table col.inv-shp-col-qty {
    width: 14%;
}

#inv-shp-detail-panel table.inv-shp-lines-table col.inv-shp-col-actions,
#inv-shp-modal table.inv-shp-lines-table col.inv-shp-col-actions {
    width: 2.75rem;
}

#inv-shp-detail-panel table.inv-shp-lines-table th.inv-shp-line-actions-col,
#inv-shp-detail-panel table.inv-shp-lines-table td.inv-shp-line-actions-cell,
#inv-shp-modal table.inv-shp-lines-table th.inv-shp-line-actions-col,
#inv-shp-modal table.inv-shp-lines-table td.inv-shp-line-actions-cell {
    width: 2.75rem;
    min-width: 2.75rem;
    max-width: 2.75rem;
    padding-inline: 0.25rem;
    vertical-align: middle;
}

#inv-shp-detail-panel table.inv-shp-lines-table td.inv-shp-line-actions-cell .btn.btn-icon,
#inv-shp-modal table.inv-shp-lines-table td.inv-shp-line-actions-cell .btn.btn-icon {
    width: 2rem;
    height: 2rem;
    min-width: 2rem;
    min-height: 2rem;
    padding: 0;
}

/* Receipts list — Post + icon actions (standard size-8 icon tiles) */
.page-content .inv-rec-actions-col {
    width: 10.5rem;
    min-width: 10.5rem;
    max-width: 10.5rem;
}

.page-content .inv-rec-actions .btn.btn-icon {
    width: 2rem;
    height: 2rem;
    min-width: 2rem;
    min-height: 2rem;
    padding: 0;
}

.page-content .inv-rec-actions .btn.btn-icon .iconify {
    width: 1rem;
    height: 1rem;
}

.page-content .inv-rec-actions .btn.btn-sm:not(.btn-icon) {
    padding-left: 0.65rem;
    padding-right: 0.65rem;
}

/* Inventory list tables — invoices / shipments action column */
.page-content .inv-inv-actions-col {
    width: 1%;
    min-width: 8.5rem;
    white-space: nowrap;
}

.page-content .inv-shp-actions-col {
    width: 1%;
    min-width: 16.5rem;
    white-space: nowrap;
}

.page-content .inv-inv-actions,
.page-content .inv-shp-actions {
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.25rem;
}

.page-content .inv-shp-actions .btn.btn-sm:not(.btn-icon),
.page-content .inv-shp-actions-col .btn.btn-xs {
    white-space: nowrap;
    flex-shrink: 0;
}

/* Inventory list grids — click column headers to sort */
.page-content .inv-list-th-sort {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

.page-content .inv-list-th-sort:hover {
    color: var(--color-primary);
}

.page-content .inv-list-th-sort .inv-list-sort-ind {
    margin-inline-start: 0.2rem;
    font-size: 0.65rem;
    opacity: 0.45;
    vertical-align: middle;
}

.page-content .inv-list-th-sort.is-sorted .inv-list-sort-ind {
    opacity: 1;
    color: var(--color-primary);
}

/* Inventory list grids — sticky header sticks below topbar on page scroll (Paces FixedHeader pattern) */
.page-content .inv-list-sticky-head.table-wrapper {
    overflow: visible;
}

.page-content .inv-list-sticky-head .table thead th {
    position: sticky;
    top: var(--topbar-height, 4.375rem);
    z-index: 5;
    background-color: color-mix(in srgb, var(--color-light) 92%, var(--color-card));
    box-shadow: 0 1px 0 color-mix(in srgb, var(--color-default-200) 80%, transparent);
}

html[data-theme="dark"] .page-content .inv-list-sticky-head .table thead th {
    background-color: color-mix(in srgb, var(--color-card) 94%, var(--color-light));
}

.page-content .inv-po-lines-table tr.inv-po-line,
.page-content .inv-po-lines-table tr.inv-po-line-locked,
.page-content .inv-vb-lines-table tr.inv-vb-line,
.page-content .inv-vb-lines-table tr.inv-vb-line-locked,
.page-content .inv-so-lines-table tr.inv-so-line,
.page-content .inv-qt-lines-table tr.inv-qt-line {
    border-bottom-width: 0;
}

.page-content .inv-po-lines-table tr.inv-po-line-desc-row,
.page-content .inv-vb-lines-table tr.inv-vb-line-desc-row,
.page-content .inv-so-lines-table tr.inv-so-line-desc-row,
.page-content .inv-qt-lines-table tr.inv-qt-line-desc-row {
    border-bottom: 1px solid var(--color-default-200, rgb(226 232 240));
}

.page-content .inv-po-lines-table tr.inv-po-line-desc-row .inv-po-line-desc,
.page-content .inv-vb-lines-table tr.inv-vb-line-desc-row .inv-vb-line-desc,
.page-content .inv-so-lines-table tr.inv-so-line-desc-row .inv-so-line-desc,
.page-content .inv-qt-lines-table tr.inv-qt-line-desc-row .inv-qt-line-desc {
    margin: 0;
    word-break: break-word;
}

/* PO detail — order tab toolbar + notes/totals footer */
.page-content .inv-po-order-toolbar-btn {
    min-width: 5.75rem;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}

.page-content #inv-po-detail-panel .card,
.page-content #inv-po-detail-panel .card-body,
.page-content #inv-po-detail-pane-order {
    min-width: 0;
}

.page-content .inv-po-detail-status-toolbar {
    min-width: 0;
    margin-left: auto;
}

.page-content .inv-po-status-split-menu {
    box-shadow: 0 4px 14px rgb(15 23 42 / 0.12);
}

.page-content .inv-po-detail-footer {
    box-sizing: border-box;
}

/* Match line-items table chrome: bordered card + thead-style column header */
.page-content .inv-po-detail-footer-panel {
    min-height: 12rem;
    border-radius: 0.375rem;
    border: 1px solid var(--color-default-200);
    background-color: var(--color-card);
    padding: 0;
    overflow: hidden;
}

.page-content .inv-po-detail-footer-panel-head {
    display: block;
    padding: 0.5rem 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    border-bottom: 1px solid var(--color-default-200);
}

.page-content .inv-po-detail-footer-panel-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-height: 0;
    padding: 1rem;
    gap: 0.75rem;
}

.page-content .inv-po-detail-footer-dates .inv-po-detail-footer-panel-body {
    gap: 1rem;
}

.page-content .inv-po-footer-field {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, auto);
    align-items: center;
    column-gap: 0.75rem;
    row-gap: 0.25rem;
}

.page-content .inv-po-footer-field-label {
    min-width: 0;
}

.page-content .inv-po-footer-field-value {
    justify-self: end;
    text-align: end;
}

html[data-theme="dark"] .page-content .inv-po-detail-footer {
    border-top-color: var(--color-default-200);
}

html[data-theme="dark"] .page-content .inv-po-detail-footer-panel {
    border-color: var(--color-default-200);
    background-color: var(--color-card);
}

html[data-theme="dark"] .page-content .inv-po-detail-footer-panel-head {
    background-color: color-mix(in srgb, var(--color-default-100) 42%, var(--color-card)) !important;
    border-bottom-color: var(--color-default-200);
    color: var(--color-default-400);
}

html[data-theme="dark"] .page-content .inv-po-total-row {
    border-color: var(--color-default-200) !important;
}

html[data-theme="dark"] .page-content .inv-po-lines-table thead tr {
    background-color: color-mix(in srgb, var(--color-default-100) 42%, var(--color-card)) !important;
}

.page-content .inv-po-lines-table tr.inv-po-line-desc-row {
    background-color: color-mix(in srgb, var(--color-light) 22%, var(--color-card));
}

html[data-theme="dark"] .page-content .inv-po-lines-table tr.inv-po-line-desc-row {
    background-color: color-mix(in srgb, var(--color-default-50) 55%, var(--color-card));
}

.page-content .inv-po-lines-table .inv-po-line-num {
    color: var(--color-default-500);
}

html[data-theme="dark"] .page-content .inv-po-lines-table .inv-po-line-num {
    color: var(--color-default-400);
}

.page-content .inv-vb-lines-table .inv-vb-line-num {
    color: var(--color-default-500);
}

html[data-theme="dark"] .page-content .inv-vb-lines-table .inv-vb-line-num {
    color: var(--color-default-400);
}

.page-content .inv-vb-lines-table .inv-vb-line-product,
.page-content .inv-vb-lines-table .inv-vb-line-vendor-item {
    margin: 0;
}

.page-content .inv-vb-match-table thead th.inv-vb-match-group {
    padding-bottom: 0.15rem;
}

.page-content .inv-po-detail-footer-notes .inv-po-detail-footer-panel-body #inv-po-detail-notes {
    min-height: 10rem;
}

.page-content .inv-po-detail-footer-panel-body.inv-po-detail-footer-totals {
    gap: 0.5rem;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.page-content .inv-po-total-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(4.5rem, auto);
    align-items: center;
    column-gap: 0.5rem;
    row-gap: 0.25rem;
}

.page-content .inv-po-total-row label,
.page-content .inv-po-total-row > span:first-child {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.page-content .inv-po-total-row input.form-input-sm {
    width: 100%;
    max-width: 6.5rem;
    min-width: 0;
    justify-self: end;
}

.page-content .inv-po-total-row > span:last-child {
    justify-self: end;
    text-align: right;
    white-space: nowrap;
}

/* SO detail — order tab toolbar + notes/totals footer (mirrors PO detail). */
.page-content .inv-so-order-toolbar-btn {
    min-width: 5.75rem;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}

.page-content #inv-so-detail-panel .card,
.page-content #inv-so-detail-panel .card-body,
.page-content #inv-so-detail-pane-order {
    min-width: 0;
}

.page-content .inv-so-detail-status-toolbar {
    min-width: 0;
    margin-left: auto;
}

.page-content .inv-so-detail-footer {
    box-sizing: border-box;
}

.page-content .inv-so-detail-footer-panel {
    min-height: 12rem;
    border-radius: 0.375rem;
    border: 1px solid var(--color-default-200);
    background-color: var(--color-card);
    padding: 0;
    overflow: hidden;
}

.page-content .inv-so-detail-footer-panel-head {
    display: block;
    padding: 0.5rem 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    border-bottom: 1px solid var(--color-default-200);
}

.page-content .inv-so-detail-footer-panel-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-height: 0;
    padding: 1rem;
    gap: 0.75rem;
}

.page-content .inv-so-detail-footer-dates .inv-so-detail-footer-panel-body {
    gap: 1rem;
}

.page-content .inv-so-footer-field {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, auto);
    align-items: center;
    column-gap: 0.75rem;
    row-gap: 0.25rem;
}

.page-content .inv-so-footer-field-label {
    min-width: 0;
}

.page-content .inv-so-footer-field-value {
    justify-self: end;
    text-align: end;
}

html[data-theme="dark"] .page-content .inv-so-detail-footer {
    border-top-color: var(--color-default-200);
}

html[data-theme="dark"] .page-content .inv-so-detail-footer-panel {
    border-color: var(--color-default-200);
    background-color: var(--color-card);
}

html[data-theme="dark"] .page-content .inv-so-detail-footer-panel-head {
    background-color: color-mix(in srgb, var(--color-default-100) 42%, var(--color-card)) !important;
    border-bottom-color: var(--color-default-200);
    color: var(--color-default-400);
}

html[data-theme="dark"] .page-content .inv-so-total-row {
    border-color: var(--color-default-200) !important;
}

html[data-theme="dark"] .page-content .inv-so-lines-table thead tr {
    background-color: color-mix(in srgb, var(--color-default-100) 42%, var(--color-card)) !important;
}

.page-content .inv-so-lines-table tr.inv-so-line-desc-row {
    background-color: color-mix(in srgb, var(--color-light) 22%, var(--color-card));
}

html[data-theme="dark"] .page-content .inv-so-lines-table tr.inv-so-line-desc-row {
    background-color: color-mix(in srgb, var(--color-default-50) 55%, var(--color-card));
}

.page-content .inv-so-lines-table .inv-so-line-num {
    color: var(--color-default-500);
}

html[data-theme="dark"] .page-content .inv-so-lines-table .inv-so-line-num {
    color: var(--color-default-400);
}

/* SO detail — Shipping tab line fulfillment: product + UoM + disc on one line */
.page-content .inv-so-shipping-lines-table .inv-so-ship-line-product {
    display: inline;
    line-height: 1.4;
    word-break: break-word;
}

.page-content .inv-so-shipping-lines-table .inv-so-ship-line-product > span {
    display: inline;
    white-space: normal;
}

.page-content .inv-so-shipping-lines-table td:nth-child(2) {
    white-space: normal;
}

/* PO detail — Receiving tab line grid: product + UoM + description on one line */
.page-content .inv-po-receiving-lines-table .inv-po-receiving-line-product {
    display: inline;
    line-height: 1.4;
    word-break: break-word;
}

.page-content .inv-po-receiving-lines-table .inv-po-receiving-line-product > span {
    display: inline;
    white-space: normal;
}

.page-content .inv-po-receiving-lines-table td:nth-child(2) {
    white-space: normal;
}

.page-content .inv-so-detail-footer-notes .inv-so-detail-footer-panel-body #inv-so-detail-notes {
    min-height: 10rem;
}

.page-content .inv-so-detail-footer-panel-body.inv-so-detail-footer-totals {
    gap: 0.5rem;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.page-content .inv-so-total-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(4.5rem, auto);
    align-items: center;
    column-gap: 0.5rem;
    row-gap: 0.25rem;
}

.page-content .inv-so-total-row label,
.page-content .inv-so-total-row > span:first-child {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.page-content .inv-so-total-row input.form-input-sm {
    width: 100%;
    max-width: 6.5rem;
    min-width: 0;
    justify-self: end;
}

.page-content .inv-so-total-row > span:last-child {
    justify-self: end;
    text-align: right;
    white-space: nowrap;
}

/* Vendor PO confirm — Razor card uses card surface (not gray wash) */
.po-confirm-vendor-card {
    background-color: var(--color-card);
}

html[data-theme="dark"] .po-confirm-vendor-card {
    border-color: var(--color-default-200);
    background-color: var(--color-card);
    color: var(--color-body-color);
}

html[data-theme="dark"] .po-confirm-vendor-card > div:first-child {
    border-bottom-color: var(--color-default-200);
    background: color-mix(in srgb, var(--color-default-100) 35%, var(--color-card));
}

html[data-theme="dark"] .po-confirm-vendor-card dl {
    background-color: var(--color-card);
}

html[data-theme="dark"] .po-confirm-vendor-card .divide-default-200 > :not([hidden]) ~ :not([hidden]) {
    border-color: var(--color-default-200);
}

html[data-theme="dark"] .order-confirm-document .po-vendor-context-card {
    border-color: var(--color-default-300) !important;
    background: var(--color-card) !important;
}

html[data-theme="dark"] .order-confirm-document .po-vendor-context-meta {
    background: var(--color-card) !important;
}

html[data-theme="dark"] .order-confirm-document .apphub-email-line-table thead tr {
    background: color-mix(in srgb, var(--color-default-100) 45%, var(--color-card)) !important;
}

html[data-theme="dark"] .order-confirm-document .apphub-email-line-table th {
    color: var(--color-default-400) !important;
    border-bottom-color: color-mix(in srgb, var(--color-default-500) 35%, transparent) !important;
}

html[data-theme="dark"] .order-confirm-document .apphub-email-line-table td {
    border-bottom-color: color-mix(in srgb, var(--color-default-600) 28%, transparent) !important;
    color: var(--color-default-200);
}

html[data-theme="dark"] .order-confirm-document .apphub-email-line-table tbody td:first-child {
    color: var(--color-default-400) !important;
}

html[data-theme="dark"] .order-confirm-document .apphub-email-line-table tbody td:nth-child(2),
html[data-theme="dark"] .order-confirm-document .apphub-email-line-table tbody td:last-child {
    color: var(--color-default-50, #f8fafc) !important;
}

/* Tenant product add/edit: wide 3-column form (overrides default 42rem modal cap). */
#inv-prod-modal #inv-prod-modal-panel.crm-modal-panel {
    width: min(100vw - 2rem, 75rem);
    max-width: 75rem;
    flex: 0 0 auto;
}

#inv-prod-modal .inv-prod-modal-tracking label.inline-flex.items-center.gap-2 {
    gap: 0.5rem;
    position: relative;
    z-index: 1;
}

#inv-prod-modal .inv-prod-modal-tracking input.form-checkbox:not(.pointer-events-none) {
    cursor: pointer;
}

/* Product detail: overview 4-col row (desc, category, barcodes). */
.inv-prod-detail-overview-bc-slot {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 14rem;
    min-height: 3.5rem;
    padding: 0.375rem 0.5rem;
    border: 1px solid var(--color-default-200);
    border-radius: 0.375rem;
    background: #fff;
    overflow: hidden;
    line-height: 0;
}

.inv-prod-detail-overview-bc-slot.hidden {
    display: none !important;
}

.inv-prod-detail-overview-bc-img {
    display: block;
    width: 100%;
    max-width: 100%;
    max-height: 3.25rem;
    height: auto;
    object-fit: contain;
}

html[data-theme="dark"] .inv-prod-detail-overview-bc-slot {
    background: var(--color-card);
    border-color: var(--color-default-300);
}