/* ==========================================================================
   Expenses Dashboard design system (UI-only) — tight mockup match
   Tokens: navy #0f172a / #101828, primary #3B82F6, Inter, soft pastels
   ========================================================================== */

.maintix-bento-shell.is-pem-module,
.maintix-bento-shell.is-pem-module .portal-main,
.maintix-bento-shell.is-maintenance-module,
.maintix-bento-shell.is-maintenance-module .portal-main,
.pc-expenses-dash,
.mx-expenses-dash,
.pc-expenses-pending-page,
.pc-expenses-wo-detail,
.pc-pem-detail,
.pc-expenses-detail,
.pc-expenses-create,
.pc-pem-create-form,
.pc-pending-people-modal {
    --ex-navy: #0f172a;
    --ex-navy-soft: #101828;
    --ex-blue: #3b82f6;
    --ex-blue-deep: #2563eb;
    --ex-bg: #f8fafc;
    --ex-card: #ffffff;
    --ex-border: #e2e8f0;
    --ex-muted: #64748b;
    --ex-text: #0f172a;
    --ex-radius: 12px;
    --ex-radius-lg: 16px;
    --ex-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px -12px rgba(15, 23, 42, 0.1);
    font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
    font-size: 13.5px;
    color: var(--ex-text);
    -webkit-font-smoothing: antialiased;
}

.pc-expenses-dash {
    display: grid;
    gap: 0.7rem;
    width: 100%;
    max-width: none;
    /* Clear separation from sticky page title/subtitle topbar (margin-bottom: 0 there). */
    padding-top: 0.35rem;
}

.pc-expenses-dash-intro {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.7rem;
    /* Modest gap so overview/date/refresh is not flush against the page subtitle. */
    margin-top: 0.45rem;
}

.pc-expenses-dash-greeting {
    margin: 0 0 0.35rem;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--ex-ink, #0f172a);
    letter-spacing: -0.01em;
    line-height: 1.3;
}

.pc-expenses-dash-intro-copy p {
    margin: 0;
    max-width: 42rem;
    color: var(--ex-muted);
    font-size: 0.8125rem;
    line-height: 1.45;
}

.pc-expenses-dash-intro-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    flex-shrink: 0;
}

.pc-expenses-date-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.42rem 0.7rem;
    border: 1px solid var(--ex-border);
    border-radius: 10px;
    background: var(--ex-card);
    color: var(--ex-muted);
    font-size: 0.75rem;
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

/* Mobile-only section subtitles (shown in pc-mobile.css ≤768) */
.pc-expenses-section-sub--mobile {
    display: none;
}

.pc-expenses-refresh {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.75rem !important;
    border-radius: 10px !important;
}

.pc-expenses-dash .pc-dashboard-role-tag {
    font-size: 0.7rem;
    padding: 0.2rem 0.55rem;
    background: #eff6ff;
    color: var(--ex-blue-deep);
}

/* KPI row */
.pc-expenses-kpi-row {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    gap: 0.65rem;
}

.pc-expenses-kpi {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    min-height: 112px;
    padding: 0.85rem 0.95rem;
    border: 1px solid var(--ex-border);
    border-radius: var(--ex-radius-lg);
    background: var(--ex-card);
    box-shadow: var(--ex-shadow);
    text-align: left;
}

button.pc-expenses-kpi {
    width: 100%;
    cursor: pointer;
    font: inherit;
    color: inherit;
    transition: transform 160ms ease, box-shadow 160ms ease;
}

button.pc-expenses-kpi:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px -14px rgba(37, 99, 235, 0.35);
}

.pc-expenses-kpi--hero {
    border: 0;
    background: linear-gradient(135deg, #2563eb 0%, #3b82f6 42%, #06b6d4 100%);
    color: #fff;
}

.pc-expenses-kpi-wave {
    position: absolute;
    left: 8%;
    right: -5%;
    bottom: -28%;
    height: 70%;
    opacity: 0.35;
    background:
        radial-gradient(ellipse at 20% 50%, rgba(255,255,255,0.35) 0%, transparent 55%),
        radial-gradient(ellipse at 70% 40%, rgba(255,255,255,0.18) 0%, transparent 50%);
    pointer-events: none;
}

.pc-expenses-kpi--hero .pc-expenses-kpi-label { color: rgba(255, 255, 255, 0.78); }
.pc-expenses-kpi--hero .pc-expenses-kpi-value { color: #fff; font-size: 2.15rem; }

.pc-expenses-kpi--pending.has-pending {
    border-color: #bfdbfe;
    background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
}

.pc-expenses-kpi-icon {
    display: grid;
    place-items: center;
    flex: 0 0 2.35rem;
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 999px;
    background: #dbeafe;
    color: var(--ex-blue);
    font-size: 0.95rem;
}

.pc-expenses-kpi-go {
    position: absolute;
    top: 0.9rem;
    right: 0.9rem;
    display: grid;
    place-items: center;
    width: 1.85rem;
    height: 1.85rem;
    border-radius: 999px;
    background: var(--ex-blue);
    color: #fff;
    font-size: 0.7rem;
}

.pc-expenses-kpi-copy {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 0.22rem;
    min-width: 0;
}

.pc-expenses-kpi-label {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ex-muted);
}

.pc-expenses-kpi-value {
    font-size: 1.9rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--ex-text);
}

.pc-expenses-kpi-hint {
    color: var(--ex-muted);
    font-size: 0.78rem;
    line-height: 1.35;
}

.pc-expenses-dash .pc-expenses-kpi-delta,
.pc-expenses-dash .pc-expenses-type-delta,
.pc-expenses-dash .pc-expenses-pipeline-delta,
.pc-expenses-dash .pc-expenses-ref-delta,
.pc-expenses-dash .pc-expenses-kpi-delta .stat-growth,
.pc-expenses-dash .pc-expenses-type-delta .stat-growth {
    display: inline-flex !important;
}

.pc-expenses-dash .stat-growth {
    margin-top: 0.15rem;
    font-size: 0.7rem !important;
}

/* Sections */
.pc-expenses-section {
    padding: 0.75rem 0.85rem 0.85rem;
    border: 1px solid var(--ex-border);
    border-radius: var(--ex-radius-lg);
    background: var(--ex-card);
    box-shadow: var(--ex-shadow);
}

.pc-expenses-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.55rem;
}

.pc-expenses-section-head h4 {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--ex-text);
    letter-spacing: -0.01em;
}

.pc-expenses-section-head span {
    color: #94a3b8;
    font-size: 0.75rem;
}

/* Request type cards */
.pc-expenses-type-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.55rem;
}

.pc-expenses-type-card {
    display: grid;
    gap: 0.22rem;
    justify-items: start;
    padding: 0.7rem 0.7rem 0.6rem;
    border: 1px solid #eef2f7;
    border-radius: var(--ex-radius);
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
    text-align: left;
    cursor: pointer;
    font: inherit;
    color: inherit;
    transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
}

.pc-expenses-type-card:hover {
    transform: translateY(-2px);
    border-color: #bfdbfe;
    box-shadow: 0 10px 20px -12px rgba(59, 130, 246, 0.35);
}

.pc-expenses-type-icon {
    display: grid;
    place-items: center;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 999px;
    font-size: 0.65rem;
    font-weight: 800;
    margin-bottom: 0.1rem;
}

.pc-expenses-type-card.tone-blue .pc-expenses-type-icon { background: #dbeafe; color: #1d4ed8; }
.pc-expenses-type-card.tone-emerald .pc-expenses-type-icon { background: #dcfce7; color: #15803d; }
.pc-expenses-type-card.tone-amber .pc-expenses-type-icon { background: #ffedd5; color: #c2410c; }
.pc-expenses-type-card.tone-red .pc-expenses-type-icon { background: #fee2e2; color: #b91c1c; }

.pc-expenses-type-title {
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ex-muted);
}

.pc-expenses-type-value {
    font-size: 1.45rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--ex-text);
}

.pc-expenses-type-link {
    margin-top: 0.1rem;
    color: var(--ex-blue);
    font-size: 0.72rem;
    font-weight: 600;
}

/* Pipeline */
.pc-expenses-pipeline-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.7rem;
}

.pc-expenses-pipeline-card {
    position: relative;
    display: grid;
    gap: 0.28rem;
    align-content: start;
    min-height: 158px;
    padding: 0.9rem 0.85rem 0.75rem;
    border: 1px solid #eef2f7;
    border-radius: var(--ex-radius);
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
    text-align: left;
    cursor: pointer;
    font: inherit;
    color: inherit;
    overflow: hidden;
    transition: transform 140ms ease, box-shadow 140ms ease;
}

.pc-expenses-pipeline-card:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px -12px rgba(15, 23, 42, 0.18);
}

.pc-expenses-pipeline-card:disabled,
.pc-expenses-pipeline-card.is-zero {
    opacity: 0.5;
    cursor: default;
}

.pc-expenses-pipeline-bar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: #94a3b8;
}

.pc-expenses-pipeline-card.accent-blue .pc-expenses-pipeline-bar { background: #3b82f6; }
.pc-expenses-pipeline-card.accent-teal .pc-expenses-pipeline-bar { background: #14b8a6; }
.pc-expenses-pipeline-card.accent-amber .pc-expenses-pipeline-bar { background: #f59e0b; }
.pc-expenses-pipeline-card.accent-violet .pc-expenses-pipeline-bar { background: #8b5cf6; }
.pc-expenses-pipeline-card.accent-rose .pc-expenses-pipeline-bar { background: #f43f5e; }
.pc-expenses-pipeline-card.accent-emerald .pc-expenses-pipeline-bar { background: #10b981; }

.pc-expenses-pipeline-card.accent-blue .pc-expenses-pipeline-icon { background: #dbeafe; color: #1d4ed8; }
.pc-expenses-pipeline-card.accent-teal .pc-expenses-pipeline-icon { background: #ccfbf1; color: #0f766e; }
.pc-expenses-pipeline-card.accent-amber .pc-expenses-pipeline-icon { background: #ffedd5; color: #c2410c; }
.pc-expenses-pipeline-card.accent-violet .pc-expenses-pipeline-icon { background: #ede9fe; color: #6d28d9; }
.pc-expenses-pipeline-card.accent-rose .pc-expenses-pipeline-icon { background: #ffe4e6; color: #be123c; }
.pc-expenses-pipeline-card.accent-emerald .pc-expenses-pipeline-icon { background: #dcfce7; color: #15803d; }

.pc-expenses-pipeline-card.accent-blue .pc-expenses-pipeline-share { background: #dbeafe; color: #1d4ed8; }
.pc-expenses-pipeline-card.accent-teal .pc-expenses-pipeline-share { background: #ccfbf1; color: #0f766e; }
.pc-expenses-pipeline-card.accent-amber .pc-expenses-pipeline-share { background: #ffedd5; color: #c2410c; }
.pc-expenses-pipeline-card.accent-violet .pc-expenses-pipeline-share { background: #ede9fe; color: #6d28d9; }
.pc-expenses-pipeline-card.accent-rose .pc-expenses-pipeline-share { background: #ffe4e6; color: #be123c; }
.pc-expenses-pipeline-card.accent-emerald .pc-expenses-pipeline-share { background: #dcfce7; color: #15803d; }

.pc-expenses-pipeline-top {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.pc-expenses-pipeline-icon {
    display: grid;
    place-items: center;
    flex: 0 0 1.7rem;
    width: 1.7rem;
    height: 1.7rem;
    border-radius: 999px;
    font-size: 0.58rem;
    font-weight: 800;
}

.pc-expenses-pipeline-title {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ex-muted);
}

.pc-expenses-pipeline-share {
    flex-shrink: 0;
    padding: 0.12rem 0.4rem;
    border-radius: 999px;
    font-size: 0.625rem;
    font-weight: 700;
}

.pc-expenses-pipeline-value {
    font-size: 1.45rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--ex-text);
}

.pc-expenses-pipeline-hint {
    font-size: 0.7rem;
    color: var(--ex-muted);
    line-height: 1.3;
}

.pc-expenses-dash .pc-pipeline-breakdown {
    margin-top: 0.25rem;
}

.pc-expenses-dash .pc-pipeline-breakdown li {
    font-size: 0.625rem;
}

/* Reference */
.pc-expenses-ref-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.65rem;
}

.pc-expenses-ref-card {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.75rem 0.85rem;
    border: 1px solid #eef2f7;
    border-radius: var(--ex-radius);
    background: #fff;
    text-align: left;
    cursor: pointer;
    font: inherit;
    color: inherit;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
    transition: border-color 140ms ease, transform 140ms ease;
}

.pc-expenses-ref-card:hover {
    transform: translateY(-1px);
    border-color: #bfdbfe;
}

.pc-expenses-ref-icon {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    font-size: 0.65rem;
    font-weight: 800;
    flex-shrink: 0;
}

.pc-expenses-ref-card.tone-blue .pc-expenses-ref-icon { background: #dbeafe; color: #1d4ed8; }
.pc-expenses-ref-card.tone-emerald .pc-expenses-ref-icon { background: #dcfce7; color: #15803d; }
.pc-expenses-ref-card.tone-amber .pc-expenses-ref-icon { background: #ffedd5; color: #c2410c; }
.pc-expenses-ref-card.tone-red .pc-expenses-ref-icon { background: #fee2e2; color: #b91c1c; }

.pc-expenses-ref-copy { display: grid; gap: 0.1rem; min-width: 0; }
.pc-expenses-ref-title {
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #94a3b8;
}
.pc-expenses-ref-value {
    font-size: 1.2rem;
    font-weight: 800;
    line-height: 1;
    color: var(--ex-text);
}

/* Split */
.pc-expenses-split {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(240px, 0.85fr);
    gap: 0.65rem;
}

.pc-expenses-dash .pc-dashboard-action-list {
    /* ~10 action rows visible before scrolling */
    --pc-action-row: 4.55rem;
    --pc-action-gap: 0.65rem;
    max-height: calc(10 * var(--pc-action-row) + 9 * var(--pc-action-gap));
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 0.1rem;
}

.pc-expenses-dash .pc-dashboard-action-item,
.pc-expenses-dash .pc-dashboard-link {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.7rem;
    min-height: var(--pc-action-row, 4.55rem);
    padding: 0.75rem 0.85rem;
    border-radius: 10px;
    border-color: #eef2f7;
    background: #fff;
}

.pc-expenses-dash .pc-dashboard-action-main {
    flex: 1 1 auto;
    min-width: 0;
    text-align: left;
}

.pc-expenses-dash .pc-dashboard-action-meta {
    margin-left: auto;
    flex: 0 0 auto;
}

.pc-dashboard-action-doc {
    display: grid;
    place-items: center;
    flex: 0 0 2rem;
    width: 2rem;
    height: 2rem;
    border-radius: 8px;
    background: #eff6ff;
    color: var(--ex-blue);
    font-size: 0.8rem;
}

.pc-expenses-dash .pc-dashboard-action-module {
    font-size: 0.625rem;
    color: var(--ex-blue-deep);
}

.pc-expenses-dash .pc-dashboard-action-title,
.pc-expenses-dash .pc-dashboard-link-copy strong {
    font-size: 0.8125rem;
}

.pc-expenses-dash .pc-dashboard-action-subtitle,
.pc-expenses-dash .pc-dashboard-link-copy span {
    font-size: 0.72rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pc-expenses-dash .pc-dashboard-link-icon {
    width: 2rem;
    height: 2rem;
    border-radius: 8px;
    font-size: 0.65rem;
}

.pc-expenses-view-all {
    display: inline-flex;
    margin-top: 0.7rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--ex-blue);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
}

.pc-expenses-dash .pc-dashboard-link .pc-dashboard-action-arrow {
    margin-left: auto;
    color: #94a3b8;
    font-size: 1rem;
}

/* ===== Director pending people modal (large — beats default .pem-modal 640px) ===== */
.maintix-bento-shell .pem-modal.pc-pending-people-modal.dashboard-pending-drilldown,
.pc-pending-people-modal.dashboard-pending-drilldown {
    width: min(92vw, 1200px) !important;
    max-width: min(92vw, 1200px) !important;
    max-height: min(90vh, 52rem) !important;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 24px 60px -20px rgba(15, 23, 42, 0.45);
}

.pc-pending-people-modal .dashboard-pending-body {
    max-height: min(72vh, 42rem);
    padding-top: 0.35rem;
}

/* ===== Pending bulk Approve / Reject / Revert (WO Reject Expense Line gold standard) =====
   Desktop: size to CONTENT when short — never force a tall empty body.
   Modal max-height 90vh; header/footer pinned; body flex-grow:0 so it does not
   absorb free space (flex:1 + max-height was making 1-row modals huge + useless
   body scrollbar). Body shrinks+scrolls only when categories exceed the cap.
   Line tables scroll inside .pc-pending-bulk-lines-scroll. Mobile sheet ≤768px. */
.maintix-bento-shell .pem-modal.pc-pending-bulk-action-modal,
.pc-pending-bulk-action-modal,
.maintix-bento-shell .pem-modal.pc-pending-bulk-revert-modal,
.pc-pending-bulk-revert-modal {
    width: min(92vw, 1100px) !important;
    max-width: min(92vw, 1100px) !important;
    height: auto !important;
    max-height: 90vh !important;
    min-height: 0 !important;
    align-self: center !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    border-radius: 28px;
    box-shadow: 0 28px 70px rgba(15, 23, 42, 0.26);
}

.maintix-bento-shell .pem-modal.pc-pending-bulk-action-modal > .pem-modal-header,
.maintix-bento-shell .pem-modal.pc-pending-bulk-action-modal > .pem-modal-footer,
.pc-pending-bulk-action-modal > .pem-modal-header,
.pc-pending-bulk-action-modal > .pem-modal-footer,
.maintix-bento-shell .pem-modal.pc-pending-bulk-revert-modal > .pem-modal-header,
.maintix-bento-shell .pem-modal.pc-pending-bulk-revert-modal > .pem-modal-footer,
.pc-pending-bulk-revert-modal > .pem-modal-header,
.pc-pending-bulk-revert-modal > .pem-modal-footer {
    flex: 0 0 auto !important;
    flex-shrink: 0 !important;
}

/* Lock page scroll while any bulk-action overlay is open (CSS + JS class). */
body:has(.pc-pending-bulk-action-overlay),
.maintix-bento-shell:has(.pc-pending-bulk-action-overlay),
.maintix-bento-shell:has(.pc-pending-bulk-action-overlay) .portal-main,
body:has(.pc-pending-bulk-revert-overlay),
.maintix-bento-shell:has(.pc-pending-bulk-revert-overlay),
.maintix-bento-shell:has(.pc-pending-bulk-revert-overlay) .portal-main,
html.pc-modal-scroll-lock,
html.pc-modal-scroll-lock body,
html.pc-modal-scroll-lock .maintix-bento-shell,
html.pc-modal-scroll-lock .portal-main,
body.pc-modal-scroll-lock,
.maintix-bento-shell.pc-modal-scroll-lock,
.portal-main.pc-modal-scroll-lock {
    overflow: hidden !important;
    overscroll-behavior: none;
}

/* Match WO detail `.maintix-bento-shell .pem-modal-overlay` (Approve Expense Line gold standard):
   full-viewport dim + blur(5px) + rgba(22,22,24,0.58), above sticky expenses topbar / profile menu.
   Overlays are also portaled to #app by pcModalScrollLock so they are not trapped by
   .pc-grid-host { contain: layout style } (which made fixed cover only the table card).
   Do not set padding/align here — pc-mobile bottom-sheet rules own those ≤768px. */
.maintix-bento-shell .pem-modal-overlay.pc-pending-bulk-action-overlay,
.maintix-bento-shell .pem-modal-overlay.pc-pending-bulk-revert-overlay,
.pem-modal-overlay.pc-pending-bulk-action-overlay,
.pem-modal-overlay.pc-pending-bulk-revert-overlay,
.maintix-bento-shell .pem-modal-overlay.dashboard-pending-overlay,
.pem-modal-overlay.dashboard-pending-overlay,
#app > .pem-modal-overlay.pc-pending-bulk-action-overlay, body > .pem-modal-overlay.pc-pending-bulk-action-overlay,
#app > .pem-modal-overlay.pc-pending-bulk-revert-overlay, body > .pem-modal-overlay.pc-pending-bulk-revert-overlay,
#app > .pem-modal-overlay.dashboard-pending-overlay , body > .pem-modal-overlay.dashboard-pending-overlay {
    position: fixed !important;
    inset: 0 !important;
    z-index: 2000 !important; /* topbar sticky z-index:40 + isolation; profile menu inside it */
    background: rgba(22, 22, 24, 0.58) !important;
    backdrop-filter: blur(5px) !important;
    -webkit-backdrop-filter: blur(5px) !important;
    pointer-events: auto !important;
    overscroll-behavior: none;
    touch-action: none;
}

/* While any of these overlays are open, freeze chrome that sits beside/above portal content. */
body:has(.pc-pending-bulk-action-overlay) .maintix-topbar.portal-header,
body:has(.pc-pending-bulk-revert-overlay) .maintix-topbar.portal-header,
body:has(.dashboard-pending-overlay) .maintix-topbar.portal-header,
body:has(.pc-pending-bulk-action-overlay) .maintix-sidebar.portal-sidebar,
body:has(.pc-pending-bulk-revert-overlay) .maintix-sidebar.portal-sidebar,
body:has(.dashboard-pending-overlay) .maintix-sidebar.portal-sidebar {
    pointer-events: none !important;
}

/*
 * Portaled overlays leave .maintix-bento-shell, so they fall back to pem.css
 * (.pem-modal-header = solid portal-primary / white text) and lose
 * .maintix-bento-shell .btn-primary / .btn-outline. Restore the prior PEM
 * light header + theme CTA chrome. Blur / portal / content-sized body stay above.
 */
#app > .pem-modal-overlay.pc-pending-bulk-action-overlay .pem-modal, body > .pem-modal-overlay.pc-pending-bulk-action-overlay .pem-modal,
#app > .pem-modal-overlay.pc-pending-bulk-revert-overlay .pem-modal, body > .pem-modal-overlay.pc-pending-bulk-revert-overlay .pem-modal,
#app > .pem-modal-overlay.dashboard-pending-overlay .pem-modal , body > .pem-modal-overlay.dashboard-pending-overlay .pem-modal {
    background: #ffffff !important;
    border: 0 !important;
    border-radius: 28px !important;
    overflow: hidden !important;
    box-shadow: 0 28px 70px rgba(15, 23, 42, 0.26) !important;
}

#app > .pem-modal-overlay.pc-pending-bulk-action-overlay .pem-modal-header, body > .pem-modal-overlay.pc-pending-bulk-action-overlay .pem-modal-header,
#app > .pem-modal-overlay.pc-pending-bulk-revert-overlay .pem-modal-header, body > .pem-modal-overlay.pc-pending-bulk-revert-overlay .pem-modal-header,
#app > .pem-modal-overlay.dashboard-pending-overlay .pem-modal-header , body > .pem-modal-overlay.dashboard-pending-overlay .pem-modal-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 1rem !important;
    margin: 0 !important;
    padding: 1.25rem 1.45rem !important;
    border-bottom: 1px solid #eef2f7 !important;
    background: #ffffff !important;
    color: var(--maintix-dark, #0f172a) !important;
}

#app > .pem-modal-overlay.pc-pending-bulk-action-overlay .pem-modal-header::before, body > .pem-modal-overlay.pc-pending-bulk-action-overlay .pem-modal-header::before,
#app > .pem-modal-overlay.pc-pending-bulk-revert-overlay .pem-modal-header::before, body > .pem-modal-overlay.pc-pending-bulk-revert-overlay .pem-modal-header::before,
#app > .pem-modal-overlay.dashboard-pending-overlay .pem-modal-header::before , body > .pem-modal-overlay.dashboard-pending-overlay .pem-modal-header::before {
    content: "+";
    display: grid;
    place-items: center;
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    border-radius: 16px;
    border: 1px solid #dbeafe;
    background: rgba(83, 147, 203, 0.1);
    color: var(--maintix-blue, #5393cb);
    font-size: 1.2rem;
    font-weight: 700;
}

#app > .pem-modal-overlay.pc-pending-bulk-action-overlay .pem-modal-header h3, body > .pem-modal-overlay.pc-pending-bulk-action-overlay .pem-modal-header h3,
#app > .pem-modal-overlay.pc-pending-bulk-action-overlay .pem-modal-header h4, body > .pem-modal-overlay.pc-pending-bulk-action-overlay .pem-modal-header h4,
#app > .pem-modal-overlay.pc-pending-bulk-revert-overlay .pem-modal-header h3, body > .pem-modal-overlay.pc-pending-bulk-revert-overlay .pem-modal-header h3,
#app > .pem-modal-overlay.pc-pending-bulk-revert-overlay .pem-modal-header h4, body > .pem-modal-overlay.pc-pending-bulk-revert-overlay .pem-modal-header h4,
#app > .pem-modal-overlay.dashboard-pending-overlay .pem-modal-header h3, body > .pem-modal-overlay.dashboard-pending-overlay .pem-modal-header h3,
#app > .pem-modal-overlay.dashboard-pending-overlay .pem-modal-header h4 , body > .pem-modal-overlay.dashboard-pending-overlay .pem-modal-header h4 {
    flex: 1;
    align-self: center;
    margin: 0 !important;
    color: var(--maintix-dark, #0f172a) !important;
    font-size: 1.18rem !important;
    font-weight: 700 !important;
    line-height: 1.15;
}

#app > .pem-modal-overlay.pc-pending-bulk-action-overlay .pem-modal-header .btn-close, body > .pem-modal-overlay.pc-pending-bulk-action-overlay .pem-modal-header .btn-close,
#app > .pem-modal-overlay.pc-pending-bulk-action-overlay .pem-modal-header .pem-modal-close, body > .pem-modal-overlay.pc-pending-bulk-action-overlay .pem-modal-header .pem-modal-close,
#app > .pem-modal-overlay.pc-pending-bulk-revert-overlay .pem-modal-header .btn-close, body > .pem-modal-overlay.pc-pending-bulk-revert-overlay .pem-modal-header .btn-close,
#app > .pem-modal-overlay.pc-pending-bulk-revert-overlay .pem-modal-header .pem-modal-close, body > .pem-modal-overlay.pc-pending-bulk-revert-overlay .pem-modal-header .pem-modal-close,
#app > .pem-modal-overlay.dashboard-pending-overlay .pem-modal-header .btn-close, body > .pem-modal-overlay.dashboard-pending-overlay .pem-modal-header .btn-close,
#app > .pem-modal-overlay.dashboard-pending-overlay .pem-modal-header .pem-modal-close , body > .pem-modal-overlay.dashboard-pending-overlay .pem-modal-header .pem-modal-close {
    position: relative;
    flex: 0 0 34px;
    width: 34px !important;
    height: 34px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: transparent !important;
    color: #94a3b8 !important;
    font-size: 0 !important;
    opacity: 1 !important;
    box-shadow: none !important;
}

#app > .pem-modal-overlay.pc-pending-bulk-action-overlay .pem-modal-header .btn-close::before, body > .pem-modal-overlay.pc-pending-bulk-action-overlay .pem-modal-header .btn-close::before,
#app > .pem-modal-overlay.pc-pending-bulk-action-overlay .pem-modal-header .btn-close::after, body > .pem-modal-overlay.pc-pending-bulk-action-overlay .pem-modal-header .btn-close::after,
#app > .pem-modal-overlay.pc-pending-bulk-action-overlay .pem-modal-header .pem-modal-close::before, body > .pem-modal-overlay.pc-pending-bulk-action-overlay .pem-modal-header .pem-modal-close::before,
#app > .pem-modal-overlay.pc-pending-bulk-action-overlay .pem-modal-header .pem-modal-close::after, body > .pem-modal-overlay.pc-pending-bulk-action-overlay .pem-modal-header .pem-modal-close::after,
#app > .pem-modal-overlay.pc-pending-bulk-revert-overlay .pem-modal-header .btn-close::before, body > .pem-modal-overlay.pc-pending-bulk-revert-overlay .pem-modal-header .btn-close::before,
#app > .pem-modal-overlay.pc-pending-bulk-revert-overlay .pem-modal-header .btn-close::after, body > .pem-modal-overlay.pc-pending-bulk-revert-overlay .pem-modal-header .btn-close::after,
#app > .pem-modal-overlay.pc-pending-bulk-revert-overlay .pem-modal-header .pem-modal-close::before, body > .pem-modal-overlay.pc-pending-bulk-revert-overlay .pem-modal-header .pem-modal-close::before,
#app > .pem-modal-overlay.pc-pending-bulk-revert-overlay .pem-modal-header .pem-modal-close::after, body > .pem-modal-overlay.pc-pending-bulk-revert-overlay .pem-modal-header .pem-modal-close::after,
#app > .pem-modal-overlay.dashboard-pending-overlay .pem-modal-header .btn-close::before, body > .pem-modal-overlay.dashboard-pending-overlay .pem-modal-header .btn-close::before,
#app > .pem-modal-overlay.dashboard-pending-overlay .pem-modal-header .btn-close::after, body > .pem-modal-overlay.dashboard-pending-overlay .pem-modal-header .btn-close::after,
#app > .pem-modal-overlay.dashboard-pending-overlay .pem-modal-header .pem-modal-close::before, body > .pem-modal-overlay.dashboard-pending-overlay .pem-modal-header .pem-modal-close::before,
#app > .pem-modal-overlay.dashboard-pending-overlay .pem-modal-header .pem-modal-close::after , body > .pem-modal-overlay.dashboard-pending-overlay .pem-modal-header .pem-modal-close::after {
    content: "";
    position: absolute;
    top: 16px;
    left: 9px;
    width: 16px;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
}

#app > .pem-modal-overlay.pc-pending-bulk-action-overlay .pem-modal-header .btn-close::before, body > .pem-modal-overlay.pc-pending-bulk-action-overlay .pem-modal-header .btn-close::before,
#app > .pem-modal-overlay.pc-pending-bulk-action-overlay .pem-modal-header .pem-modal-close::before, body > .pem-modal-overlay.pc-pending-bulk-action-overlay .pem-modal-header .pem-modal-close::before,
#app > .pem-modal-overlay.pc-pending-bulk-revert-overlay .pem-modal-header .btn-close::before, body > .pem-modal-overlay.pc-pending-bulk-revert-overlay .pem-modal-header .btn-close::before,
#app > .pem-modal-overlay.pc-pending-bulk-revert-overlay .pem-modal-header .pem-modal-close::before, body > .pem-modal-overlay.pc-pending-bulk-revert-overlay .pem-modal-header .pem-modal-close::before,
#app > .pem-modal-overlay.dashboard-pending-overlay .pem-modal-header .btn-close::before, body > .pem-modal-overlay.dashboard-pending-overlay .pem-modal-header .btn-close::before,
#app > .pem-modal-overlay.dashboard-pending-overlay .pem-modal-header .pem-modal-close::before , body > .pem-modal-overlay.dashboard-pending-overlay .pem-modal-header .pem-modal-close::before {
    transform: rotate(45deg);
}

#app > .pem-modal-overlay.pc-pending-bulk-action-overlay .pem-modal-header .btn-close::after, body > .pem-modal-overlay.pc-pending-bulk-action-overlay .pem-modal-header .btn-close::after,
#app > .pem-modal-overlay.pc-pending-bulk-action-overlay .pem-modal-header .pem-modal-close::after, body > .pem-modal-overlay.pc-pending-bulk-action-overlay .pem-modal-header .pem-modal-close::after,
#app > .pem-modal-overlay.pc-pending-bulk-revert-overlay .pem-modal-header .btn-close::after, body > .pem-modal-overlay.pc-pending-bulk-revert-overlay .pem-modal-header .btn-close::after,
#app > .pem-modal-overlay.pc-pending-bulk-revert-overlay .pem-modal-header .pem-modal-close::after, body > .pem-modal-overlay.pc-pending-bulk-revert-overlay .pem-modal-header .pem-modal-close::after,
#app > .pem-modal-overlay.dashboard-pending-overlay .pem-modal-header .btn-close::after, body > .pem-modal-overlay.dashboard-pending-overlay .pem-modal-header .btn-close::after,
#app > .pem-modal-overlay.dashboard-pending-overlay .pem-modal-header .pem-modal-close::after , body > .pem-modal-overlay.dashboard-pending-overlay .pem-modal-header .pem-modal-close::after {
    transform: rotate(-45deg);
}

#app > .pem-modal-overlay.pc-pending-bulk-action-overlay .pem-modal-header .btn-close:hover, body > .pem-modal-overlay.pc-pending-bulk-action-overlay .pem-modal-header .btn-close:hover,
#app > .pem-modal-overlay.pc-pending-bulk-action-overlay .pem-modal-header .pem-modal-close:hover, body > .pem-modal-overlay.pc-pending-bulk-action-overlay .pem-modal-header .pem-modal-close:hover,
#app > .pem-modal-overlay.pc-pending-bulk-revert-overlay .pem-modal-header .btn-close:hover, body > .pem-modal-overlay.pc-pending-bulk-revert-overlay .pem-modal-header .btn-close:hover,
#app > .pem-modal-overlay.pc-pending-bulk-revert-overlay .pem-modal-header .pem-modal-close:hover, body > .pem-modal-overlay.pc-pending-bulk-revert-overlay .pem-modal-header .pem-modal-close:hover,
#app > .pem-modal-overlay.dashboard-pending-overlay .pem-modal-header .btn-close:hover, body > .pem-modal-overlay.dashboard-pending-overlay .pem-modal-header .btn-close:hover,
#app > .pem-modal-overlay.dashboard-pending-overlay .pem-modal-header .pem-modal-close:hover , body > .pem-modal-overlay.dashboard-pending-overlay .pem-modal-header .pem-modal-close:hover {
    background: #f8fafc !important;
    color: var(--maintix-dark, #0f172a) !important;
}

/*
 * Branding / workflow Approve-Reject sheets also portal under #app and otherwise
 * fall back to pem.css solid blue header + unthemed buttons (the "wrong UI").
 * Mobile sheet chrome stays in pc-mobile.css (@media max-width 768px).
 * Branding detail sheets use .pc-no-auto-portal (stay in-tree) — see pc-mobile.css.
 */
.pc-branding-detail:has(.pem-modal-overlay.pc-no-auto-portal),
.pc-branding-detail:has(.pem-modal-overlay.pc-no-auto-portal) .case-layout,
.pc-branding-detail:has(.pem-modal-overlay.pc-no-auto-portal) .case-main,
.pc-branding-detail:has(.pem-modal-overlay.pc-no-auto-portal) .pc-branding-workflow-host,
.pc-branding-detail:has(.pem-modal-overlay.pc-no-auto-portal) .issue-card {
    transform: none !important;
    filter: none !important;
    contain: none !important;
    perspective: none !important;
}

.pc-branding-detail .pem-modal-overlay.pc-no-auto-portal,
.pc-pem-detail .pem-modal-overlay.pc-no-auto-portal {
    position: fixed !important;
    inset: 0 !important;
    z-index: 2100 !important;
}
#app > .pem-modal-overlay.pc-m-approval-sheet .pem-modal,
body > .pem-modal-overlay.pc-m-approval-sheet .pem-modal,
#app > .pem-modal-overlay.pc-workflow-modal .pem-modal,
body > .pem-modal-overlay.pc-workflow-modal .pem-modal {
    background: #ffffff !important;
    border: 0 !important;
    border-radius: 28px !important;
    overflow: hidden !important;
    box-shadow: 0 28px 70px rgba(15, 23, 42, 0.26) !important;
}

#app > .pem-modal-overlay.pc-m-approval-sheet .pem-modal-header,
body > .pem-modal-overlay.pc-m-approval-sheet .pem-modal-header,
#app > .pem-modal-overlay.pc-workflow-modal .pem-modal-header,
body > .pem-modal-overlay.pc-workflow-modal .pem-modal-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 1rem !important;
    margin: 0 !important;
    padding: 1.25rem 1.45rem !important;
    border-bottom: 1px solid #eef2f7 !important;
    background: #ffffff !important;
    color: var(--maintix-dark, #0f172a) !important;
}

#app > .pem-modal-overlay.pc-m-approval-sheet .pem-modal-header h3,
body > .pem-modal-overlay.pc-m-approval-sheet .pem-modal-header h3,
#app > .pem-modal-overlay.pc-m-approval-sheet .pem-modal-header h4,
body > .pem-modal-overlay.pc-m-approval-sheet .pem-modal-header h4,
#app > .pem-modal-overlay.pc-workflow-modal .pem-modal-header h3,
body > .pem-modal-overlay.pc-workflow-modal .pem-modal-header h3,
#app > .pem-modal-overlay.pc-workflow-modal .pem-modal-header h4,
body > .pem-modal-overlay.pc-workflow-modal .pem-modal-header h4 {
    flex: 1;
    margin: 0 !important;
    color: var(--maintix-dark, #0f172a) !important;
    font-size: 1.18rem !important;
    font-weight: 700 !important;
}

#app > .pem-modal-overlay.pc-m-approval-sheet .btn-submit,
body > .pem-modal-overlay.pc-m-approval-sheet .btn-submit,
#app > .pem-modal-overlay.pc-m-approval-sheet .btn-primary,
body > .pem-modal-overlay.pc-m-approval-sheet .btn-primary,
#app > .pem-modal-overlay.pc-workflow-modal .btn-submit,
body > .pem-modal-overlay.pc-workflow-modal .btn-submit,
#app > .pem-modal-overlay.pc-workflow-modal .btn-primary,
body > .pem-modal-overlay.pc-workflow-modal .btn-primary {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 2.45rem;
    padding: 0.56rem 0.95rem !important;
    border: 1px solid var(--maintix-blue, #5393cb) !important;
    border-radius: 10px !important;
    background: var(--maintix-active, linear-gradient(135deg, #5393cb 0%, #2d9ad1 100%)) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
}

#app > .pem-modal-overlay.pc-m-approval-sheet .btn-outline,
body > .pem-modal-overlay.pc-m-approval-sheet .btn-outline,
#app > .pem-modal-overlay.pc-workflow-modal .btn-outline,
body > .pem-modal-overlay.pc-workflow-modal .btn-outline {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 2.45rem;
    padding: 0.56rem 0.95rem !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 10px !important;
    background: #ffffff !important;
    color: var(--maintix-dark, #0f172a) !important;
    font-weight: 600 !important;
}

#app > .pem-modal-overlay.pc-pending-bulk-action-overlay .pem-modal-footer, body > .pem-modal-overlay.pc-pending-bulk-action-overlay .pem-modal-footer,
#app > .pem-modal-overlay.pc-pending-bulk-revert-overlay .pem-modal-footer, body > .pem-modal-overlay.pc-pending-bulk-revert-overlay .pem-modal-footer,
#app > .pem-modal-overlay.dashboard-pending-overlay .pem-modal-footer , body > .pem-modal-overlay.dashboard-pending-overlay .pem-modal-footer {
    display: flex !important;
    justify-content: flex-end !important;
    gap: 0.75rem !important;
    margin: 0 !important;
    padding: 1rem 1.45rem !important;
    border-top: 1px solid #eef2f7 !important;
    background: #f8fafc !important;
}

/* Theme primary / cancel for body-portaled PEM modals (beat bare browser + pem.css). */
#app > .pem-modal-overlay.pc-pending-bulk-action-overlay .btn-submit, body > .pem-modal-overlay.pc-pending-bulk-action-overlay .btn-submit,
#app > .pem-modal-overlay.pc-pending-bulk-action-overlay .btn-primary, body > .pem-modal-overlay.pc-pending-bulk-action-overlay .btn-primary,
#app > .pem-modal-overlay.pc-pending-bulk-action-overlay .pem-btn-primary, body > .pem-modal-overlay.pc-pending-bulk-action-overlay .pem-btn-primary,
#app > .pem-modal-overlay.pc-pending-bulk-action-overlay .primary-button, body > .pem-modal-overlay.pc-pending-bulk-action-overlay .primary-button,
#app > .pem-modal-overlay.pc-pending-bulk-revert-overlay .btn-submit, body > .pem-modal-overlay.pc-pending-bulk-revert-overlay .btn-submit,
#app > .pem-modal-overlay.pc-pending-bulk-revert-overlay .btn-primary, body > .pem-modal-overlay.pc-pending-bulk-revert-overlay .btn-primary,
#app > .pem-modal-overlay.pc-pending-bulk-revert-overlay .pem-btn-primary, body > .pem-modal-overlay.pc-pending-bulk-revert-overlay .pem-btn-primary,
#app > .pem-modal-overlay.pc-pending-bulk-revert-overlay .primary-button, body > .pem-modal-overlay.pc-pending-bulk-revert-overlay .primary-button,
#app > .pem-modal-overlay.dashboard-pending-overlay .btn-submit, body > .pem-modal-overlay.dashboard-pending-overlay .btn-submit,
#app > .pem-modal-overlay.dashboard-pending-overlay .btn-primary, body > .pem-modal-overlay.dashboard-pending-overlay .btn-primary,
#app > .pem-modal-overlay.dashboard-pending-overlay .pem-btn-primary, body > .pem-modal-overlay.dashboard-pending-overlay .pem-btn-primary,
#app > .pem-modal-overlay.dashboard-pending-overlay .primary-button , body > .pem-modal-overlay.dashboard-pending-overlay .primary-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.42rem !important;
    min-width: 120px;
    min-height: 2.45rem;
    padding: 0.56rem 0.95rem !important;
    border: 1px solid var(--maintix-blue, #5393cb) !important;
    border-radius: 10px !important;
    background: var(--maintix-active, linear-gradient(135deg, #5393cb 0%, #2d9ad1 100%)) !important;
    color: #ffffff !important;
    font-size: 0.84rem !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    box-shadow: 0 10px 20px rgba(83, 147, 203, 0.18);
    text-decoration: none !important;
    cursor: pointer;
}

#app > .pem-modal-overlay.pc-pending-bulk-action-overlay .btn-submit:hover:not(:disabled), body > .pem-modal-overlay.pc-pending-bulk-action-overlay .btn-submit:hover:not(:disabled),
#app > .pem-modal-overlay.pc-pending-bulk-action-overlay .btn-primary:hover:not(:disabled), body > .pem-modal-overlay.pc-pending-bulk-action-overlay .btn-primary:hover:not(:disabled),
#app > .pem-modal-overlay.pc-pending-bulk-action-overlay .pem-btn-primary:hover:not(:disabled), body > .pem-modal-overlay.pc-pending-bulk-action-overlay .pem-btn-primary:hover:not(:disabled),
#app > .pem-modal-overlay.pc-pending-bulk-action-overlay .primary-button:hover:not(:disabled), body > .pem-modal-overlay.pc-pending-bulk-action-overlay .primary-button:hover:not(:disabled),
#app > .pem-modal-overlay.pc-pending-bulk-revert-overlay .btn-submit:hover:not(:disabled), body > .pem-modal-overlay.pc-pending-bulk-revert-overlay .btn-submit:hover:not(:disabled),
#app > .pem-modal-overlay.pc-pending-bulk-revert-overlay .btn-primary:hover:not(:disabled), body > .pem-modal-overlay.pc-pending-bulk-revert-overlay .btn-primary:hover:not(:disabled),
#app > .pem-modal-overlay.pc-pending-bulk-revert-overlay .pem-btn-primary:hover:not(:disabled), body > .pem-modal-overlay.pc-pending-bulk-revert-overlay .pem-btn-primary:hover:not(:disabled),
#app > .pem-modal-overlay.pc-pending-bulk-revert-overlay .primary-button:hover:not(:disabled), body > .pem-modal-overlay.pc-pending-bulk-revert-overlay .primary-button:hover:not(:disabled),
#app > .pem-modal-overlay.dashboard-pending-overlay .btn-submit:hover:not(:disabled), body > .pem-modal-overlay.dashboard-pending-overlay .btn-submit:hover:not(:disabled),
#app > .pem-modal-overlay.dashboard-pending-overlay .btn-primary:hover:not(:disabled), body > .pem-modal-overlay.dashboard-pending-overlay .btn-primary:hover:not(:disabled),
#app > .pem-modal-overlay.dashboard-pending-overlay .pem-btn-primary:hover:not(:disabled), body > .pem-modal-overlay.dashboard-pending-overlay .pem-btn-primary:hover:not(:disabled),
#app > .pem-modal-overlay.dashboard-pending-overlay .primary-button:hover:not(:disabled) , body > .pem-modal-overlay.dashboard-pending-overlay .primary-button:hover:not(:disabled) {
    filter: brightness(0.96);
    color: #ffffff !important;
}

#app > .pem-modal-overlay.pc-pending-bulk-action-overlay .btn-outline, body > .pem-modal-overlay.pc-pending-bulk-action-overlay .btn-outline,
#app > .pem-modal-overlay.pc-pending-bulk-action-overlay .btn-cancel, body > .pem-modal-overlay.pc-pending-bulk-action-overlay .btn-cancel,
#app > .pem-modal-overlay.pc-pending-bulk-action-overlay .btn-secondary, body > .pem-modal-overlay.pc-pending-bulk-action-overlay .btn-secondary,
#app > .pem-modal-overlay.pc-pending-bulk-action-overlay .pem-btn-secondary, body > .pem-modal-overlay.pc-pending-bulk-action-overlay .pem-btn-secondary,
#app > .pem-modal-overlay.pc-pending-bulk-action-overlay .secondary-button, body > .pem-modal-overlay.pc-pending-bulk-action-overlay .secondary-button,
#app > .pem-modal-overlay.pc-pending-bulk-revert-overlay .btn-outline, body > .pem-modal-overlay.pc-pending-bulk-revert-overlay .btn-outline,
#app > .pem-modal-overlay.pc-pending-bulk-revert-overlay .btn-cancel, body > .pem-modal-overlay.pc-pending-bulk-revert-overlay .btn-cancel,
#app > .pem-modal-overlay.pc-pending-bulk-revert-overlay .btn-secondary, body > .pem-modal-overlay.pc-pending-bulk-revert-overlay .btn-secondary,
#app > .pem-modal-overlay.pc-pending-bulk-revert-overlay .pem-btn-secondary, body > .pem-modal-overlay.pc-pending-bulk-revert-overlay .pem-btn-secondary,
#app > .pem-modal-overlay.pc-pending-bulk-revert-overlay .secondary-button, body > .pem-modal-overlay.pc-pending-bulk-revert-overlay .secondary-button,
#app > .pem-modal-overlay.dashboard-pending-overlay .btn-outline, body > .pem-modal-overlay.dashboard-pending-overlay .btn-outline,
#app > .pem-modal-overlay.dashboard-pending-overlay .btn-cancel, body > .pem-modal-overlay.dashboard-pending-overlay .btn-cancel,
#app > .pem-modal-overlay.dashboard-pending-overlay .btn-secondary, body > .pem-modal-overlay.dashboard-pending-overlay .btn-secondary,
#app > .pem-modal-overlay.dashboard-pending-overlay .pem-btn-secondary, body > .pem-modal-overlay.dashboard-pending-overlay .pem-btn-secondary,
#app > .pem-modal-overlay.dashboard-pending-overlay .secondary-button , body > .pem-modal-overlay.dashboard-pending-overlay .secondary-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.42rem !important;
    min-height: 2.45rem;
    padding: 0.56rem 0.95rem !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
    background: #ffffff !important;
    color: #475569 !important;
    font-size: 0.84rem !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    box-shadow: none !important;
    text-decoration: none !important;
    cursor: pointer;
}

#app > .pem-modal-overlay.pc-pending-bulk-action-overlay .btn-outline:hover:not(:disabled), body > .pem-modal-overlay.pc-pending-bulk-action-overlay .btn-outline:hover:not(:disabled),
#app > .pem-modal-overlay.pc-pending-bulk-action-overlay .btn-cancel:hover:not(:disabled), body > .pem-modal-overlay.pc-pending-bulk-action-overlay .btn-cancel:hover:not(:disabled),
#app > .pem-modal-overlay.pc-pending-bulk-action-overlay .btn-secondary:hover:not(:disabled), body > .pem-modal-overlay.pc-pending-bulk-action-overlay .btn-secondary:hover:not(:disabled),
#app > .pem-modal-overlay.pc-pending-bulk-action-overlay .pem-btn-secondary:hover:not(:disabled), body > .pem-modal-overlay.pc-pending-bulk-action-overlay .pem-btn-secondary:hover:not(:disabled),
#app > .pem-modal-overlay.pc-pending-bulk-action-overlay .secondary-button:hover:not(:disabled), body > .pem-modal-overlay.pc-pending-bulk-action-overlay .secondary-button:hover:not(:disabled),
#app > .pem-modal-overlay.pc-pending-bulk-revert-overlay .btn-outline:hover:not(:disabled), body > .pem-modal-overlay.pc-pending-bulk-revert-overlay .btn-outline:hover:not(:disabled),
#app > .pem-modal-overlay.pc-pending-bulk-revert-overlay .btn-cancel:hover:not(:disabled), body > .pem-modal-overlay.pc-pending-bulk-revert-overlay .btn-cancel:hover:not(:disabled),
#app > .pem-modal-overlay.pc-pending-bulk-revert-overlay .btn-secondary:hover:not(:disabled), body > .pem-modal-overlay.pc-pending-bulk-revert-overlay .btn-secondary:hover:not(:disabled),
#app > .pem-modal-overlay.pc-pending-bulk-revert-overlay .pem-btn-secondary:hover:not(:disabled), body > .pem-modal-overlay.pc-pending-bulk-revert-overlay .pem-btn-secondary:hover:not(:disabled),
#app > .pem-modal-overlay.pc-pending-bulk-revert-overlay .secondary-button:hover:not(:disabled), body > .pem-modal-overlay.pc-pending-bulk-revert-overlay .secondary-button:hover:not(:disabled),
#app > .pem-modal-overlay.dashboard-pending-overlay .btn-outline:hover:not(:disabled), body > .pem-modal-overlay.dashboard-pending-overlay .btn-outline:hover:not(:disabled),
#app > .pem-modal-overlay.dashboard-pending-overlay .btn-cancel:hover:not(:disabled), body > .pem-modal-overlay.dashboard-pending-overlay .btn-cancel:hover:not(:disabled),
#app > .pem-modal-overlay.dashboard-pending-overlay .btn-secondary:hover:not(:disabled), body > .pem-modal-overlay.dashboard-pending-overlay .btn-secondary:hover:not(:disabled),
#app > .pem-modal-overlay.dashboard-pending-overlay .pem-btn-secondary:hover:not(:disabled), body > .pem-modal-overlay.dashboard-pending-overlay .pem-btn-secondary:hover:not(:disabled),
#app > .pem-modal-overlay.dashboard-pending-overlay .secondary-button:hover:not(:disabled) , body > .pem-modal-overlay.dashboard-pending-overlay .secondary-button:hover:not(:disabled) {
    background: rgba(83, 147, 203, 0.1) !important;
    border-color: rgba(83, 147, 203, 0.4) !important;
    color: #2f6f9b !important;
}

/* Director people footer: outline "View all" must not pick up solid primary paint. */
#app > .pem-modal-overlay.dashboard-pending-overlay .pc-pending-people-view-all.btn-outline, body > .pem-modal-overlay.dashboard-pending-overlay .pc-pending-people-view-all.btn-outline,
#app > .pem-modal-overlay.dashboard-pending-overlay .pc-pending-people-footer-actions .btn-outline , body > .pem-modal-overlay.dashboard-pending-overlay .pc-pending-people-footer-actions .btn-outline {
    color: var(--ex-blue, #3b82f6) !important;
    border-color: #bfdbfe !important;
    background: #ffffff !important;
    min-width: 0;
}

.pc-pending-bulk-action-overlay .pc-pending-bulk-action-modal,
.pc-pending-bulk-revert-overlay .pc-pending-bulk-revert-modal,
.dashboard-pending-overlay .pem-modal {
    touch-action: auto;
    pointer-events: auto !important;
    box-shadow: 0 28px 70px rgba(15, 23, 42, 0.26) !important;
}

.maintix-bento-shell .pem-modal.pc-pending-bulk-action-modal > .pem-modal-body.pc-pending-bulk-action-body,
.pc-pending-bulk-action-modal > .pem-modal-body.pc-pending-bulk-action-body,
.maintix-bento-shell .pem-modal.pc-pending-bulk-revert-modal > .pem-modal-body.pc-pending-bulk-revert-body,
.pc-pending-bulk-revert-modal > .pem-modal-body.pc-pending-bulk-revert-body {
    /* Beat .maintix-bento-shell .pem-modal-body { display:grid; max-height: calc(100vh - 220px) }
       and .pem-modal-body { flex: 1 }. flex-grow MUST stay 0 on desktop or short
       modals inflate to max-height with empty space + a useless body scrollbar. */
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    align-content: flex-start !important;
    flex: 0 1 auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    gap: 0.9rem !important;
    padding: 1.25rem 1.45rem !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
    grid-template-columns: unset !important;
    grid-template-rows: unset !important;
    grid-auto-rows: unset !important;
}

/* Bento zeros .mb-3 inside modal bodies — restore spacing for category stacks. */
.maintix-bento-shell .pc-pending-bulk-action-modal .pem-modal-body .mb-3,
.pc-pending-bulk-action-modal .pem-modal-body .mb-3,
.maintix-bento-shell .pc-pending-bulk-revert-modal .pem-modal-body .mb-3,
.pc-pending-bulk-revert-modal .pem-modal-body .mb-3 {
    margin-bottom: 0.75rem !important;
}

.pc-pending-bulk-action-modal .pc-pending-bulk-action-cat,
.pc-pending-bulk-revert-modal .pc-pending-bulk-revert-cat {
    width: 100%;
    box-sizing: border-box;
    flex: 0 0 auto;
    max-height: none;
    overflow: visible;
    padding: 0.85rem 1rem;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    background: #f8fafc;
}

/*
 * Long line lists scroll INSIDE the table region (not the whole modal body),
 * matching WO Reject Expense Line: short lists stay compact; long lists scroll here.
 */
.pc-pending-bulk-action-modal .pc-pending-bulk-action-cat .table-responsive,
.pc-pending-bulk-revert-modal .pc-pending-bulk-revert-cat .table-responsive,
.pc-pending-bulk-action-modal .pem-modal-body .table-responsive,
.pc-pending-bulk-revert-modal .pem-modal-body .table-responsive,
.pc-pending-bulk-action-modal .pc-pending-bulk-lines-scroll,
.pc-pending-bulk-revert-modal .pc-pending-bulk-lines-scroll {
    max-height: min(240px, 32vh);
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #fff;
}

.pc-pending-bulk-action-modal .pc-pending-bulk-lines-scroll > .master-table,
.pc-pending-bulk-revert-modal .pc-pending-bulk-lines-scroll > .master-table,
.pc-pending-bulk-action-modal .table-responsive > .master-table,
.pc-pending-bulk-revert-modal .table-responsive > .master-table {
    margin-bottom: 0;
    box-shadow: none !important;
}

.pc-pending-bulk-action-modal .pc-pending-bulk-action-cat-head,
.pc-pending-bulk-revert-modal .pc-pending-bulk-revert-cat-head {
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
    margin-bottom: 0.55rem;
    font-size: 0.92rem;
}

.pc-pending-bulk-action-modal .pc-pending-bulk-action-cat .form-label,
.pc-pending-bulk-revert-modal .pc-pending-bulk-revert-cat .form-label {
    margin-top: 0.65rem;
    margin-bottom: 0.35rem;
}

.pc-pending-bulk-action-modal .pc-pending-bulk-action-cat .pc-remarks-textarea,
.pc-pending-bulk-revert-modal .pc-pending-bulk-revert-cat .pc-remarks-textarea {
    margin-top: 0;
}

/* Summary table wrappers: keep label outside scrollport; tighten gap before remarks. */
.pc-pending-bulk-action-modal .pc-pending-bulk-action-cat > .mb-3:has(.pc-pending-bulk-lines-scroll),
.pc-pending-bulk-revert-modal .pc-pending-bulk-revert-cat > .mb-3:has(.pc-pending-bulk-lines-scroll),
.pc-pending-bulk-action-modal .pem-modal-body > .mb-3:has(.pc-pending-bulk-lines-scroll),
.pc-pending-bulk-revert-modal .pem-modal-body > .mb-3:has(.pc-pending-bulk-lines-scroll) {
    margin-bottom: 0.35rem !important;
}

/* Pending desktop: never let wide grid paint a portal-main H-scrollbar. */
.maintix-bento-shell.is-pem-module .portal-main:has(.pc-expenses-pending-page.pc-pending-list-page) {
    overflow-x: hidden;
}

.pc-pending-people-refreshing {
    margin-left: 0.45rem;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--ex-muted, #64748b);
}

.pc-pending-people-header {
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
    padding-bottom: 0.35rem;
}

.pc-pending-people-header-top {
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
    flex: 1;
    min-width: 0;
    width: 100%;
}

/* Mobile-only header chrome (hourglass + TOTAL PENDING strip) — shown ≤768 in pc-mobile.css */
.pc-pending-people-header-icon,
.pc-pending-people-header-stats {
    display: none;
}

.pc-pending-people-header-copy { flex: 1; min-width: 0; }
.pc-pending-people-header-copy h4 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--ex-navy);
}
.pc-pending-people-modal .dashboard-pending-subtitle {
    margin-top: 0.2rem;
    font-size: 0.78rem;
    color: var(--ex-muted);
}

.pc-pending-metric-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.65rem;
    margin-bottom: 0.75rem;
}

.pc-pending-breakdown--cards.is-wide .pc-pending-metric-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.pc-pending-metric-card {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    padding: 0.85rem 0.9rem;
    border-radius: 14px;
    border: 1px solid transparent;
}

.pc-pending-metric-card.tone-blue { background: #eff6ff; border-color: #bfdbfe; }
.pc-pending-metric-card.tone-green { background: #f0fdf4; border-color: #bbf7d0; }
.pc-pending-metric-card.tone-purple { background: #f5f3ff; border-color: #ddd6fe; }
.pc-pending-metric-card.tone-amber { background: #fffbeb; border-color: #fde68a; }
.pc-pending-metric-card.tone-rose { background: #fff1f2; border-color: #fecdd3; }

.pc-pending-metric-icon {
    display: grid;
    place-items: center;
    width: 2.05rem;
    height: 2.05rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.85);
    color: var(--ex-blue);
    flex-shrink: 0;
    font-size: 0.85rem;
}

.pc-pending-metric-card.tone-green .pc-pending-metric-icon { color: #16a34a; }
.pc-pending-metric-card.tone-purple .pc-pending-metric-icon { color: #7c3aed; }
.pc-pending-metric-card.tone-amber .pc-pending-metric-icon { color: #d97706; }
.pc-pending-metric-card.tone-rose .pc-pending-metric-icon { color: #e11d48; }

.pc-pending-metric-copy { display: grid; gap: 0.15rem; min-width: 0; }
.pc-pending-metric-label { font-size: 0.7rem; font-weight: 600; color: var(--ex-muted); }
.pc-pending-metric-value-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.45rem;
    min-width: 0;
}
.pc-pending-metric-value {
    font-size: 1.4rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--ex-navy);
}

/* Mobile-only % badge / progress / overflow cards — shown ≤768 in pc-mobile.css */
.pc-pending-metric-pct,
.pc-pending-metric-bar,
.pc-pending-metric-card.is-mobile-extra {
    display: none;
}

.pc-pending-metric-foot {
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
    font-size: 0.68rem;
    font-weight: 600;
}
.pc-pending-metric-foot.tone-blue { color: var(--ex-blue); }
.pc-pending-metric-foot.tone-green { color: #16a34a; }
.pc-pending-metric-foot.tone-purple { color: #7c3aed; }
.pc-pending-metric-foot.tone-amber { color: #d97706; }
.pc-pending-metric-foot.tone-rose { color: #e11d48; }

.pc-pending-breakdown--cards {
    margin: 0 0 0.85rem;
    padding: 0;
    border: 0;
    background: transparent;
}

.pc-pending-line-banner {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin-top: 0.65rem;
    padding: 0.8rem 0.95rem;
    border-radius: 12px;
    background: #fffbeb;
    border: 1px solid #fcd34d;
}

.pc-pending-line-banner-icon {
    display: grid;
    place-items: center;
    width: 1.65rem;
    height: 1.65rem;
    border-radius: 999px;
    background: #f59e0b;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 800;
    flex-shrink: 0;
}

.pc-pending-line-banner-copy {
    display: grid;
    gap: 0.05rem;
    flex: 1;
    min-width: 0;
    color: #9a3412;
}
.pc-pending-line-banner-copy strong { font-size: 0.8125rem; }
.pc-pending-line-banner-copy span { font-size: 0.72rem; }

.pc-pending-line-banner-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.25rem;
    padding: 0.22rem 0.55rem;
    border-radius: 999px;
    background: #fde68a;
    color: #92400e;
    font-size: 0.8125rem;
    font-weight: 800;
}

.pc-pending-metric-pct.tone-blue { color: #1d4ed8; background: #dbeafe; }
.pc-pending-metric-pct.tone-green { color: #15803d; background: #dcfce7; }
.pc-pending-metric-pct.tone-purple { color: #6d28d9; background: #ede9fe; }
.pc-pending-metric-pct.tone-amber { color: #b45309; background: #fef3c7; }
.pc-pending-metric-pct.tone-rose { color: #be123c; background: #ffe4e6; }

.pc-pending-metric-bar-fill.tone-blue { background: #3b82f6; }
.pc-pending-metric-bar-fill.tone-green { background: #22c55e; }
.pc-pending-metric-bar-fill.tone-purple { background: #8b5cf6; }
.pc-pending-metric-bar-fill.tone-amber { background: #f59e0b; }
.pc-pending-metric-bar-fill.tone-rose { background: #f43f5e; }

.pc-pending-people-list { margin-top: 0.25rem; }

.pc-pending-people-list-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
    margin-bottom: 0.55rem;
}

.pc-pending-people-list-title {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--ex-navy);
}
.pc-pending-people-list-title i { color: var(--ex-blue); }

.pc-pending-people-search { width: min(100%, 15rem); }

.pc-pending-people-table th {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #94a3b8;
    border-bottom-color: #eef2f7 !important;
}

.pc-pending-people-table td {
    padding-top: 0.7rem !important;
    padding-bottom: 0.7rem !important;
    border-bottom-color: #f1f5f9 !important;
    font-size: 0.8125rem;
}

.pc-pending-people-identity {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.pc-pending-people-avatar {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    font-size: 0.65rem;
    font-weight: 800;
    color: #fff;
    flex-shrink: 0;
}

.pc-pending-people-avatar.tone-blue { background: #3b82f6; }
.pc-pending-people-avatar.tone-green { background: #10b981; }
.pc-pending-people-avatar.tone-purple { background: #8b5cf6; }
.pc-pending-people-avatar.tone-amber { background: #f59e0b; }
.pc-pending-people-avatar.tone-rose { background: #f43f5e; }

.pc-pending-people-name-block {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem;
}
.pc-pending-people-name-block strong {
    color: var(--ex-navy);
    font-size: 0.8125rem;
}

.pc-pending-people-count {
    font-weight: 800;
    color: var(--ex-navy);
}

.pc-pending-people-status {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    font-size: 0.65rem;
    font-weight: 700;
}
.pc-pending-people-status.is-pending {
    background: #fef3c7;
    color: #92400e;
}

.pc-pending-people-col-action { width: 1.75rem; text-align: right; }
.pc-pending-people-chevron { color: #94a3b8; font-size: 1.05rem; font-weight: 700; }

.pc-pending-people-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.85rem;
    flex-wrap: wrap;
}

.pc-pending-people-footer-note {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    max-width: 22rem;
    color: var(--ex-muted);
    font-size: 0.72rem;
    line-height: 1.4;
}
.pc-pending-people-footer-note i {
    color: var(--ex-blue);
    margin-top: 0.12rem;
}

.pc-pending-people-footer-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-left: auto;
}

.pc-pending-people-view-all {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--ex-blue) !important;
    border-color: #bfdbfe !important;
}

.pc-pending-people-footer-actions .btn-primary {
    background: var(--ex-blue) !important;
    border-color: var(--ex-blue) !important;
}

/* ===== View-all-at-step ===== */
.pc-expenses-pending-page {
    display: grid;
    gap: 0.65rem;
    width: 100%;
    max-width: 100%;
    min-width: 0; /* grid item default min-width:auto expands page for wide tables */
    padding: 0.75rem !important;
    border-radius: var(--ex-radius-lg) !important;
    box-shadow: var(--ex-shadow);
    box-sizing: border-box;
}

.pc-expenses-pending-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    border-radius: var(--ex-radius-lg);
    border: 1px solid #bfdbfe;
    background:
        linear-gradient(135deg, #eff6ff 0%, #dbeafe 48%, #e0f2fe 100%);
}

.pc-expenses-pending-hero-copy h3 {
    margin: 0 0 0.3rem;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--ex-navy);
}

.pc-expenses-pending-hero-copy p {
    margin: 0;
    color: var(--ex-muted);
    font-size: 0.8125rem;
}

/* Mobile-only hero stats strip (shown ≤768 via pc-mobile.css) */
.pc-pending-list-hero-stats {
    display: none;
}

.pc-expenses-pending-hero-art {
    position: relative;
    display: grid;
    place-items: center;
    width: 4rem;
    height: 4rem;
    flex-shrink: 0;
    color: var(--ex-blue);
    font-size: 1.65rem;
}

.pc-expenses-pending-hero-orb {
    position: absolute;
    inset: 0;
    border-radius: 14px;
    background: rgba(59, 130, 246, 0.14);
}

.pc-expenses-pending-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    /* Desktop: breathe under the blue hero banner (this row lives in .pc-pending-desktop-only) */
    margin-top: 0.65rem;
}

/* Desktop toolbar: Export / Refresh / Back — keep gap even if registry-scoped
   .pc-header-actions rules do not match this page (not a maintix-registry-card). */
.pc-expenses-pending-page .pc-expenses-pending-actions .pc-header-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-left: auto;
}

.pc-expenses-pending-page .pc-expenses-pending-actions .pc-header-actions > .btn-outline,
.pc-expenses-pending-page .pc-expenses-pending-actions .pc-header-actions > .btn-submit {
    flex: 0 0 auto;
}

.pc-expenses-pending-updated {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--ex-muted);
    font-size: 0.75rem;
}

.pc-expenses-pending-filters {
    border-radius: 12px !important;
    border-color: var(--ex-border) !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
}

.pc-expenses-pending-filters .btn-primary {
    background: var(--ex-blue) !important;
    border-color: var(--ex-blue) !important;
}

.pc-expenses-pending-page .pc-pending-breakdown--cards {
    margin-bottom: 0.15rem;
}

.pc-expenses-pending-table-card {
    border: 1px solid var(--ex-border);
    border-radius: var(--ex-radius);
    background: #fff;
    /* Keep overflow visible so nested position:fixed Approve/Reject/Revert overlays
       are not clipped. Width containment (min-width:0) forces the grid wrap to be the
       H-scroll host — not portal-main / the page. */
    overflow: visible;
    min-width: 0;
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
}

.pc-expenses-pending-table-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
    padding: 0.8rem 0.95rem;
    border-bottom: 1px solid #eef2f7;
}

.pc-expenses-pending-table-head h4 {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--ex-navy);
}

.pc-expenses-pending-page .pc-grid-host { padding: 0.25rem; }

.pc-expenses-pending-page .pc-pending-list-grid,
.pc-expenses-pending-page .pc-pending-list-grid .rz-cell-data,
.pc-expenses-pending-page .pc-pending-list-grid .rz-column-title {
    font-size: 0.75rem;
}

/* Pending expandable rows — readable vertical gap; tight horizontal cell padding */
.pc-expenses-pending-page .pc-pending-list-grid {
    --rz-grid-cell-padding: 0.38rem 0.3rem;
    --rz-grid-header-cell-padding: 0.35rem 0.2rem;
    --rz-grid-cell-line-height: 1.35;
}

.pc-expenses-pending-page .pc-pending-list-grid .rz-grid-table {
    table-layout: auto !important;
    width: max-content !important;
    min-width: 100% !important;
}

.pc-expenses-pending-page .pc-pending-list-grid .rz-grid-table th,
.pc-expenses-pending-page .pc-pending-list-grid .rz-grid-table td {
    padding-top: 0.38rem !important;
    padding-bottom: 0.38rem !important;
    padding-left: 0.3rem !important;
    padding-right: 0.3rem !important;
    line-height: 1.35;
    vertical-align: middle;
}

.pc-expenses-pending-page .pc-pending-list-grid .rz-cell-data,
.pc-expenses-pending-page .pc-pending-list-grid .rz-column-title {
    line-height: 1.35;
}

.pc-expenses-pending-page .pc-pending-list-grid .pc-status-badge,
.pc-expenses-pending-page .pc-pending-list-grid .badge {
    font-size: 0.68rem;
    padding: 0.14rem 0.42rem;
}

.pc-expenses-pending-page .pc-pending-detail-cell {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: default;
}

/* Higher specificity than shared .is-pem-module .pc-module .pc-wo-child-table (0.625rem).
   Compact baseline (~0.7rem) + minor bump only — was briefly 1rem / too tall. */
.is-pem-module .pc-module .pc-expenses-pending-page .pc-wo-child-table,
.is-pem-module .pc-module .pc-expenses-pending-page .pc-wo-child-table th,
.is-pem-module .pc-module .pc-expenses-pending-page .pc-wo-child-table td {
    font-size: 0.75rem;
}

.pc-expenses-pending-page .pc-wo-child-table th,
.pc-expenses-pending-page .pc-wo-child-table td {
    padding-top: 0.28rem;
    padding-bottom: 0.28rem;
}

/* HEAD: bold primary on top (td weight); smaller muted remark underneath */
.pc-expenses-pending-page .pc-wo-child-table tbody td {
    font-weight: 600;
}

.pc-expenses-pending-page .pc-wo-child-table small,
.pc-expenses-pending-page .pc-wo-child-table .text-muted {
    font-size: 0.7rem;
    font-weight: 400;
}

.pc-expenses-pending-page .pc-wo-child-table .pc-attachment-name {
    max-width: 7.5rem;
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
    font-size: 0.7rem;
    font-weight: 400;
}

.pc-expenses-pending-page .pc-wo-child-table .pc-attachment-actions {
    gap: 0.2rem;
}

.pc-expenses-pending-page .pc-pending-list-grid .rz-data-grid-data {
    /* Grow with row count — no empty reserved space for page size */
    min-height: 0 !important;
    height: auto !important;
    flex: 0 1 auto !important;
}

/*
 * Pending list: content-sized height, but NEVER clip pager or Actions.
 * Host contains; rz-data-grid-data is the only scrollport (x + y); pager stays pinned.
 */
.pc-expenses-pending-page.pc-pending-list-page .pc-grid-host {
    min-height: 0 !important;
    height: auto !important;
}

.maintix-bento-shell .pc-expenses-pending-page.pc-pending-list-page .pc-pending-list-grid-wrap,
.maintix-bento-shell .pc-pending-list-page .pc-pending-list-grid-wrap,
.pc-expenses-pending-page.pc-pending-list-page .pc-pending-list-grid-wrap {
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: min(58rem, calc(100dvh - 12rem)) !important;
    flex: 0 1 auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    overflow: hidden !important; /* contain — do not scroll the pager away */
}

.maintix-bento-shell .pc-expenses-pending-page.pc-pending-list-page .pc-pending-list-grid-wrap > .rz-data-grid,
.maintix-bento-shell .pc-pending-list-page .pc-pending-list-grid-wrap > .rz-data-grid,
.pc-expenses-pending-page.pc-pending-list-page .pc-pending-list-grid-wrap > .rz-data-grid {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    overflow: hidden !important;
}

.maintix-bento-shell .pc-expenses-pending-page.pc-pending-list-page .pc-pending-list-grid .rz-data-grid-data,
.maintix-bento-shell .pc-pending-list-page .pc-pending-list-grid .rz-data-grid-data,
.pc-expenses-pending-page.pc-pending-list-page .pc-pending-list-grid > .rz-data-grid-data,
.pc-expenses-pending-page .pc-pending-list-grid.pc-pem-list-grid > .rz-data-grid-data {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    min-width: 0 !important; /* critical: without this, max-content table blows out portal-main */
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: calc(min(58rem, calc(100dvh - 12rem)) - 3.5rem) !important;
    overflow: auto !important; /* sole H+V scrollport — Actions reachable; no page H-scroll */
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    scroll-padding-inline-end: 0.75rem;
}

.maintix-bento-shell .pc-expenses-pending-page.pc-pending-list-page .pc-pending-list-grid.rz-data-grid > .rz-pager,
.maintix-bento-shell .pc-pending-list-page .pc-pending-list-grid.rz-data-grid > .rz-pager {
    flex: 0 0 auto !important;
    flex-shrink: 0 !important;
    display: flex !important;
    visibility: visible !important;
    position: relative;
    z-index: 2;
    background: #fff;
}

/* Room for 100 / 500 / All in the page-size dropdown */
.pc-expenses-pending-page .pc-pending-list-grid.rz-data-grid > .rz-pager > .rz-dropdown,
.pc-pending-list-page .pc-pending-list-grid.rz-data-grid > .rz-pager > .rz-dropdown {
    min-width: 4.25rem;
}

/* Radzen PageSizeOptions is int-only — int.MaxValue is "All" */
.pc-page-size-all .rz-pager > .rz-dropdown .rz-dropdown-label {
    font-size: 0 !important;
    line-height: 1.25;
}
.pc-page-size-all .rz-pager > .rz-dropdown .rz-dropdown-label::before {
    content: "All";
    font-size: 0.8125rem;
}

.rz-dropdown-panel .rz-dropdown-item[aria-label="2147483647"] > span,
.rz-popup .rz-dropdown-item[aria-label="2147483647"] > span {
    font-size: 0 !important;
    line-height: 1.25;
}
.rz-dropdown-panel .rz-dropdown-item[aria-label="2147483647"] > span::before,
.rz-popup .rz-dropdown-item[aria-label="2147483647"] > span::before {
    content: "All";
    font-size: 0.8125rem;
}

.pc-expenses-pending-page .pc-pending-expand-toolbar {
    margin: 0 0 0.35rem;
    gap: 0.35rem;
}

.pc-expenses-pending-page .pc-pending-toolbar-sep {
    display: inline-block;
    width: 1px;
    height: 1.1rem;
    margin: 0 0.15rem;
    background: #cbd5e1;
}

.pc-expenses-pending-page .pc-pending-bulk-revert-cat {
    padding: 0.65rem 0.75rem;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #f8fafc;
}

.pc-expenses-pending-page .pc-pending-bulk-revert-cat-head {
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
    margin-bottom: 0.35rem;
    font-size: 0.92rem;
}

.pc-expenses-pending-page .pc-icon-btn {
    width: 1.65rem;
    height: 1.65rem;
    border-radius: 999px;
    background: #eff6ff;
    color: var(--ex-blue);
    border: 0;
}

/* Pending expandable grid — parent select + expand */
.pc-expenses-pending-page .pc-wo-list-selection-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem;
    width: 100%;
    margin: 0 0 0.4rem;
    padding: 0.4rem 0.65rem;
    border: 1px solid #dbe4ee;
    border-radius: 10px;
    background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.05);
}

.pc-expenses-pending-page .pc-wo-list-selection-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.82rem;
    color: #334155;
}

.pc-expenses-pending-page .pc-wo-list-selection-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
}

.pc-expenses-pending-page .pc-line-select-col,
.pc-expenses-pending-page td.pc-line-select-col,
.pc-expenses-pending-page th.pc-line-select-col,
.pc-expenses-pending-page .pc-pending-list-grid .pc-line-select-col {
    width: 2.5rem;
    min-width: 2.5rem;
    text-align: center;
    vertical-align: middle;
}

.pc-expenses-pending-page .pc-line-select-col input[type="checkbox"],
.pc-expenses-pending-page .pc-wo-child-table .pc-line-select-col input[type="checkbox"] {
    width: 1rem;
    height: 1rem;
    margin: 0;
    cursor: pointer;
    accent-color: #2563eb;
}

/* Built-in Radzen expand chevron column (ShowExpandColumn=true) */
.pc-expenses-pending-page .pc-pending-list-grid .rz-col-icon,
.pc-expenses-pending-page .pc-pending-list-grid th.rz-col-icon,
.pc-expenses-pending-page .pc-pending-list-grid td.rz-col-icon {
    width: 2.75rem !important;
    min-width: 2.75rem !important;
    max-width: 2.75rem !important;
    text-align: center;
    vertical-align: middle;
    padding-left: 0.15rem !important;
    padding-right: 0.15rem !important;
}

.pc-expenses-pending-page .pc-pending-list-grid .rz-col-icon .rz-button {
    width: 1.75rem;
    height: 1.75rem;
    min-width: 1.75rem;
    padding: 0;
    border: 1px solid #dbe4ee;
    border-radius: 6px;
    background: #f8fafc;
    color: #334155;
}

.pc-expenses-pending-page .pc-pending-list-grid .rz-col-icon .rz-button:hover:not(:disabled) {
    background: #e2e8f0;
    color: #0f172a;
    border-color: #cbd5e1;
}

.pc-expenses-pending-page .pc-wo-child-panel {
    margin: 0.2rem 0.55rem 0.45rem 1.35rem;
    padding: 0.55rem 0.7rem;
    border: 1px solid #e2e8f0;
    border-left: 3px solid #0f766e;
    border-radius: 8px;
    background: #f8fafc;
}

.pc-expenses-pending-page .pc-wo-child-panel-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.45rem;
    margin-bottom: 0.4rem;
}

.pc-expenses-pending-page .pc-wo-child-table thead th,
.pc-expenses-pending-page .pc-wo-child-table tbody td {
    padding: 0.28rem 0.45rem;
    line-height: 1.25;
    vertical-align: middle;
}

.pc-expenses-pending-page .pc-wo-child-eyebrow {
    display: block;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #64748b;
}

@media (max-width: 1200px) {
    .pc-expenses-type-grid,
    .pc-expenses-ref-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .pc-expenses-pipeline-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 960px) {
    .pc-expenses-kpi-row,
    .pc-expenses-split { grid-template-columns: 1fr; }

    .pc-expenses-type-grid,
    .pc-expenses-pipeline-grid,
    .pc-expenses-ref-grid,
    .pc-pending-metric-grid,
    .pc-pending-breakdown--cards.is-wide .pc-pending-metric-grid,
    .pc-pending-people-modal .pc-pending-metric-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pc-expenses-dash-intro,
    .pc-pending-people-list-head,
    .pc-pending-people-footer,
    .pc-expenses-pending-actions,
    .pc-expenses-pending-hero {
        flex-direction: column;
        align-items: stretch;
    }

    .pc-pending-people-search { width: 100%; }
    .pc-pending-people-footer-actions { margin-left: 0; width: 100%; }
    .pc-pending-people-footer-actions .btn-outline,
    .pc-pending-people-footer-actions .btn-primary { flex: 1 1 auto; }
}

@media (max-width: 640px) {
    .pc-expenses-type-grid,
    .pc-expenses-pipeline-grid,
    .pc-expenses-ref-grid { grid-template-columns: 1fr; }

    /* Pending summary stays 2×2 so titles/numbers remain readable on ~375px */
    .pc-pending-metric-grid,
    .pc-pending-breakdown--cards.is-wide .pc-pending-metric-grid,
    .pc-pending-people-modal .pc-pending-metric-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pc-expenses-kpi--hero .pc-expenses-kpi-value,
    .pc-expenses-kpi-value { font-size: 1.7rem; }

    .pc-pending-people-table .pc-pending-people-col-action,
    .pc-pending-people-table th:nth-child(3),
    .pc-pending-people-table td:nth-child(3) { display: none; }

    .pc-expenses-dash,
    .pc-expenses-pending-page {
        gap: 0.6rem;
    }

    .pc-expenses-section,
    .pc-expenses-pending-page {
        padding: 0.7rem 0.75rem !important;
    }

    .pc-expenses-pending-hero {
        padding: 0.75rem 0.85rem;
    }
}

.pc-expenses-export-btn i {
    color: #16a34a;
}

.pc-expenses-pending-filters .form-label {
    font-size: 0.6875rem !important;
    color: #64748b;
    margin-bottom: 0.25rem;
}

.pc-expenses-pending-filters .portal-input,
.pc-expenses-pending-filters select.portal-input {
    font-size: 0.8125rem;
    border-radius: 10px;
    min-height: 2.35rem;
}

@media (max-width: 960px) {
    .pc-pending-metric-grid,
    .pc-pending-breakdown--cards.is-wide .pc-pending-metric-grid,
    .pc-pending-people-modal .pc-pending-metric-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .pc-pending-metric-grid,
    .pc-pending-breakdown--cards.is-wide .pc-pending-metric-grid,
    .pc-pending-people-modal .pc-pending-metric-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pc-pending-metric-card {
        padding: 0.7rem 0.7rem;
        gap: 0.5rem;
    }

    .pc-pending-metric-label {
        font-size: 0.65rem;
        line-height: 1.25;
        white-space: normal;
        overflow: visible;
        text-overflow: unset;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    .pc-pending-metric-value {
        font-size: 1.2rem;
    }

    .pc-pending-metric-foot {
        font-size: 0.62rem;
    }

    .pc-pending-metric-icon {
        width: 1.75rem;
        height: 1.75rem;
        font-size: 0.75rem;
    }
}

/* ==========================================================================
   Maintenance Dashboard — reuses Expenses KPI language (.mx-expenses-dash)
   ========================================================================== */

.mx-expenses-dash {
    display: grid;
    gap: 0.7rem;
    width: 100%;
    max-width: none;
}

.mx-expenses-dash .pc-expenses-kpi-row.is-single-hero {
    grid-template-columns: 1fr;
}

.mx-expenses-dash .pc-expenses-kpi--hero {
    min-height: 104px;
}

.mx-expenses-queue-grid.pc-expenses-type-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.mx-expenses-dash .pc-expenses-type-card.tone-amber .pc-expenses-type-icon {
    background: #ffedd5;
    color: #c2410c;
}

.mx-expenses-dash .pc-expenses-type-delta,
.mx-expenses-dash .pc-expenses-kpi-delta,
.mx-expenses-dash .pc-expenses-type-delta .stat-growth,
.mx-expenses-dash .pc-expenses-kpi-delta .stat-growth {
    display: inline-flex !important;
}

.mx-expenses-dash .stat-growth {
    margin-top: 0.15rem;
    font-size: 0.7rem !important;
}

@media (max-width: 1200px) {
    .mx-expenses-queue-grid.pc-expenses-type-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 960px) {
    .mx-expenses-queue-grid.pc-expenses-type-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .mx-expenses-queue-grid.pc-expenses-type-grid {
        grid-template-columns: 1fr;
    }

    .mx-expenses-dash .pc-expenses-kpi--hero .pc-expenses-kpi-value {
        font-size: 1.7rem;
    }
}

/* =============================================================================
   PEM unified list style — matches approved Pending Requests table
   Apply via .pc-pem-list-grid on RadzenDataGrid (+ wrap .pc-pem-list-grid-wrap)
   ============================================================================= */

.is-pem-module .pc-module .pc-pem-list-grid,
.is-pem-module .pc-module .pc-pem-list-grid .rz-cell-data,
.is-pem-module .pc-module .pc-pem-list-grid .rz-column-title,
.is-pem-module .pc-module .registry-data-grid.pc-pem-list-grid,
.is-pem-module .pc-module .registry-data-grid.pc-pem-list-grid .rz-cell-data,
.is-pem-module .pc-module .registry-data-grid.pc-pem-list-grid .rz-column-title {
    font-size: 0.75rem;
}

.is-pem-module .pc-module .pc-pem-list-grid {
    --rz-grid-cell-padding: 0.35rem 0.3rem;
    --rz-grid-header-cell-padding: 0.32rem 0.2rem;
    --rz-grid-cell-line-height: 1.35;
}

/*
 * Flat PEM lists (.pc-pem-list-grid) — default:
 * - Content-sized table (max-content) so multi-amount registries
 *   (Location Advance, Staff Advance, deposits, etc.) do not squash Status/Action.
 * - min-width 100% fills the card when columns are short.
 * - Horizontal scroll lives on .rz-data-grid-data (pager stays pinned).
 *
 * Opening Request only: table-layout fixed + .pc-list-flex-col share leftover
 * width evenly (no empty void after Action, no Req ID↔Types canyon).
 * WO/SR hierarchy + Expense Pending keep the same content-sized rules
 * (explicit overrides below for specificity / shell variants).
 */
.is-pem-module .pc-module .pc-pem-list-grid .rz-grid-table,
.maintix-bento-shell.is-pem-module .pc-module .pc-pem-list-grid .rz-grid-table {
    table-layout: auto !important;
    width: max-content !important;
    min-width: 100% !important;
}

/* Opening Request — short flat list: fill card, flex-cols share leftover */
.is-pem-module .pc-module .pc-opening-registry .pc-pem-list-grid .rz-grid-table,
.maintix-bento-shell.is-pem-module .pc-module .pc-opening-registry .pc-pem-list-grid .rz-grid-table {
    table-layout: fixed !important;
    width: 100% !important;
    min-width: 100% !important;
}

/* Wide expandable grids — content width, fill card when narrower than host */
.is-pem-module .pc-module .pc-wo-hierarchy-grid.pc-pem-list-grid .rz-grid-table,
.maintix-bento-shell.is-pem-module .pc-module .pc-wo-hierarchy-grid.pc-pem-list-grid .rz-grid-table,
.pc-services-request-registry.pc-module .pc-wo-hierarchy-grid.pc-pem-list-grid .rz-grid-table {
    table-layout: auto !important;
    width: max-content !important;
    min-width: 100% !important;
}

/* Expense Dashboard Pending — keep content-sized override (higher specificity) */
.is-pem-module .pc-module .pc-expenses-pending-page .pc-pending-list-grid .rz-grid-table,
.maintix-bento-shell.is-pem-module .pc-module .pc-expenses-pending-page .pc-pending-list-grid .rz-grid-table,
.pc-expenses-pending-page .pc-pending-list-grid .rz-grid-table {
    table-layout: auto !important;
    width: max-content !important;
    min-width: 100% !important;
}

.is-pem-module .pc-module .pc-pem-list-grid .rz-grid-table th,
.is-pem-module .pc-module .pc-pem-list-grid .rz-grid-table td {
    padding-top: 0.35rem !important;
    padding-bottom: 0.35rem !important;
    padding-left: 0.28rem !important;
    padding-right: 0.28rem !important;
    line-height: 1.35;
    vertical-align: middle;
    white-space: nowrap;
}

/*
 * Expanded expense lines: undo parent .rz-grid-table td { white-space:nowrap }
 * so long Head remarks wrap instead of forcing horizontal scroll.
 * Must follow the nowrap rule above (equal/higher specificity).
 */
.is-pem-module .pc-module .pc-pem-list-grid .rz-grid-table td:has(.pc-wo-child-panel),
.is-pem-module .pc-module .pc-pem-list-grid .rz-grid-table .pc-wo-child-panel,
.is-pem-module .pc-module .pc-pem-list-grid .rz-grid-table .pc-wo-child-table,
.is-pem-module .pc-module .pc-pem-list-grid .rz-grid-table .pc-wo-child-table th,
.is-pem-module .pc-module .pc-pem-list-grid .rz-grid-table .pc-wo-child-table td {
    white-space: normal;
}

.is-pem-module .pc-module .pc-pem-list-grid .pc-wo-child-panel {
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.is-pem-module .pc-module .pc-pem-list-grid .pc-wo-child-table {
    width: 100%;
    max-width: 100%;
}

.pc-wo-child-table .pc-line-head-remarks,
.pc-wo-child-table small.pc-line-head-remarks,
.pc-expenses-pending-page .pc-wo-child-table .pc-line-head-remarks,
:is(.pc-expenses-wo-detail, .pc-pem-detail, .pc-expenses-detail) .pc-line-head-remarks {
    display: block;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Attachment names stay ellipsized after child-table white-space:normal */
.is-pem-module .pc-module .pc-pem-list-grid .rz-grid-table .pc-wo-child-table .pc-attachment-name {
    white-space: nowrap;
}

/*
 * Flexible content columns share leftover width evenly under Opening's
 * table-layout:fixed. Mark 2–3 text columns (Types + Location + Region) — never only one.
 */
.is-pem-module .pc-module .pc-pem-list-grid .pc-list-flex-col,
.is-pem-module .pc-module .pc-pem-list-grid th.pc-list-flex-col,
.is-pem-module .pc-module .pc-pem-list-grid td.pc-list-flex-col {
    width: auto !important;
    min-width: 5.5rem;
    max-width: none;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Detail/content columns: ellipsis; on flat fixed tables do not sole-absorb leftover */
.is-pem-module .pc-module .pc-pem-list-grid .pc-list-detail-col,
.is-pem-module .pc-module .pc-pem-list-grid th.pc-list-detail-col,
.is-pem-module .pc-module .pc-pem-list-grid td.pc-list-detail-col,
.is-pem-module .pc-module .pc-pem-list-grid .pc-pending-detail-col,
.is-pem-module .pc-module .pc-pem-list-grid th.pc-pending-detail-col,
.is-pem-module .pc-module .pc-pem-list-grid td.pc-pending-detail-col {
    max-width: 300px;
    min-width: 8rem;
}

/* Hierarchy grids: detail stays content-capped (scroll host, not stretch) */
.is-pem-module .pc-module .pc-wo-hierarchy-grid.pc-pem-list-grid .pc-list-detail-col,
.is-pem-module .pc-module .pc-wo-hierarchy-grid.pc-pem-list-grid th.pc-list-detail-col,
.is-pem-module .pc-module .pc-wo-hierarchy-grid.pc-pem-list-grid td.pc-list-detail-col {
    width: auto;
}

/*
 * Action column: keep tight (width 1%) but never cap below multi-icon content.
 * max-width:6rem + Width 88px clipped View+Approve/Pay on Location Advance etc.
 */
.is-pem-module .pc-module .pc-pem-list-grid .registry-action-cell,
.is-pem-module .pc-module .pc-pem-list-grid th.registry-action-cell,
.is-pem-module .pc-module .pc-pem-list-grid td.registry-action-cell {
    width: 1% !important;
    min-width: 7.5rem;
    max-width: none;
    white-space: nowrap;
    padding-left: 0.3rem !important;
    padding-right: 0.65rem !important;
    overflow: visible !important;
}

.is-pem-module .pc-module .pc-pem-list-grid td.registry-action-cell .rz-cell-data,
.is-pem-module .pc-module .pc-pem-list-grid th.registry-action-cell .rz-column-title,
.is-pem-module .pc-module .pc-pem-list-grid th.registry-action-cell .rz-column-title-content {
    overflow: visible !important;
    max-width: none !important;
}

.is-pem-module .pc-module .pc-pem-list-grid .registry-actions {
    gap: 0.28rem;
    flex-wrap: nowrap;
}

.is-pem-module .pc-module .pc-pem-list-grid .pc-status-badge,
.is-pem-module .pc-module .pc-pem-list-grid .badge {
    font-size: 0.68rem;
    padding: 0.14rem 0.42rem;
}

.is-pem-module .pc-module .pc-pem-list-grid .pc-list-detail-cell,
.is-pem-module .pc-module .pc-pem-list-grid .pc-pending-detail-cell {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: default;
}

.is-pem-module .pc-module .pc-pem-list-grid .pc-icon-btn {
    width: 1.65rem;
    height: 1.65rem;
    border-radius: 999px;
    background: #eff6ff;
    color: var(--ex-blue, #2563eb);
    border: 0;
}

/* Checkboxes — same size as Pending Requests.
   Also cover Services Request (lives under Maintenance shell: is-maintenance-module,
   so .is-pem-module alone never matches that page). */
.is-pem-module .pc-module .pc-pem-list-grid .pc-line-select-col,
.is-pem-module .pc-module .pc-pem-list-grid .pc-req-select-col,
.is-pem-module .pc-module .pc-pem-list-grid td.pc-line-select-col,
.is-pem-module .pc-module .pc-pem-list-grid th.pc-line-select-col,
.is-pem-module .pc-module .pc-pem-list-grid .pc-sr-child-select,
.pc-services-request-registry.pc-module .pc-pem-list-grid .pc-line-select-col,
.pc-services-request-registry.pc-module .pc-pem-list-grid td.pc-line-select-col,
.pc-services-request-registry.pc-module .pc-pem-list-grid th.pc-line-select-col,
.pc-services-request-registry.pc-module .pc-sr-child-select {
    width: 2.5rem;
    min-width: 2.5rem;
    text-align: center;
    vertical-align: middle;
}

.is-pem-module .pc-module .pc-pem-list-grid input[type="checkbox"],
.is-pem-module .pc-module .pc-wo-child-table input[type="checkbox"],
.is-pem-module .pc-module .pc-sr-child-table input[type="checkbox"],
.pc-services-request-registry.pc-module .pc-pem-list-grid input[type="checkbox"],
.pc-services-request-registry.pc-module .pc-wo-child-table input[type="checkbox"],
.pc-services-request-registry.pc-module .pc-sr-child-table input[type="checkbox"] {
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 1rem !important;
    height: 1rem !important;
    min-width: 1rem !important;
    min-height: 1rem !important;
    margin: 0 !important;
    padding: 0 !important;
    cursor: pointer;
    border: 1.5px solid #cbd5e1 !important;
    border-radius: 3px !important;
    background-color: #ffffff !important;
    box-shadow: none !important;
    accent-color: #2563eb;
}

.is-pem-module .pc-module .pc-pem-list-grid input[type="checkbox"]:checked,
.is-pem-module .pc-module .pc-wo-child-table input[type="checkbox"]:checked,
.is-pem-module .pc-module .pc-sr-child-table input[type="checkbox"]:checked,
.pc-services-request-registry.pc-module .pc-pem-list-grid input[type="checkbox"]:checked,
.pc-services-request-registry.pc-module .pc-wo-child-table input[type="checkbox"]:checked,
.pc-services-request-registry.pc-module .pc-sr-child-table input[type="checkbox"]:checked {
    background-color: #2563eb !important;
    border-color: #2563eb !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.5l3 3 6-6'/%3E%3C/svg%3E") !important;
    background-size: 0.7rem 0.7rem !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

/* Expand chevron column (only when ShowExpandColumn / Template present) */
.is-pem-module .pc-module .pc-pem-list-grid .rz-col-icon,
.is-pem-module .pc-module .pc-pem-list-grid th.rz-col-icon,
.is-pem-module .pc-module .pc-pem-list-grid td.rz-col-icon,
.is-pem-module .pc-module .pc-pem-list-grid .pc-wo-expand-col {
    width: 2.75rem !important;
    min-width: 2.75rem !important;
    max-width: 2.75rem !important;
    text-align: center;
    vertical-align: middle;
    padding-left: 0.15rem !important;
    padding-right: 0.15rem !important;
}

.is-pem-module .pc-module .pc-pem-list-grid .rz-col-icon .rz-button {
    width: 1.75rem;
    height: 1.75rem;
    min-width: 1.75rem;
    padding: 0;
    border: 1px solid #dbe4ee;
    border-radius: 999px;
    background: #f8fafc;
    color: #334155;
}

.is-pem-module .pc-module .pc-pem-list-grid .rz-col-icon .rz-button:hover:not(:disabled) {
    background: #e2e8f0;
    color: #0f172a;
}

/* Child / expense lines — slightly smaller than parent */
.is-pem-module .pc-module .pc-wo-child-table,
.is-pem-module .pc-module .pc-wo-child-table th,
.is-pem-module .pc-module .pc-wo-child-table td,
.is-pem-module .pc-module .pc-sr-child-table,
.is-pem-module .pc-module .pc-sr-child-table th,
.is-pem-module .pc-module .pc-sr-child-table td,
.is-pem-module .pc-module .pc-branding-child-grid,
.is-pem-module .pc-module .pc-branding-child-grid .rz-cell-data,
.is-pem-module .pc-module .pc-branding-child-grid .rz-column-title {
    font-size: 0.625rem;
}

.is-pem-module .pc-module .pc-wo-child-table th,
.is-pem-module .pc-module .pc-wo-child-table td,
.is-pem-module .pc-module .pc-sr-child-table th,
.is-pem-module .pc-module .pc-sr-child-table td {
    padding-top: 0.28rem;
    padding-bottom: 0.28rem;
}

.is-pem-module .pc-module .pc-wo-child-panel,
.is-pem-module .pc-module .pc-branding-child-panel,
.is-pem-module .pc-module .pc-services-request-registry .pc-wo-child-panel {
    margin: 0.15rem 0.35rem 0.45rem;
    padding: 0.55rem 0.65rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #f8fafc;
}

.is-pem-module .pc-module .pc-wo-child-eyebrow,
.is-pem-module .pc-module .pc-branding-child-title,
.is-pem-module .pc-module .pc-services-request-registry .pc-wo-child-eyebrow {
    display: inline-block;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #64748b;
    margin-right: 0.35rem;
}

/*
 * Unified PEM lists (Pending, Branding, registries with .pc-pem-list-grid):
 * - Host/wrap: flex column + overflow:hidden (contain; pager not in scrollport)
 * - Grid body (.rz-data-grid-data): sole scrollport for x+y so Actions is reachable
 * - Pager: pinned below body, always visible
 * - Height follows rows until cap; no empty reserved white space
 */
.is-pem-module .pc-module .pc-pem-list-grid-wrap,
.is-pem-module .pc-module .registry-grid-host:has(.pc-pem-list-grid),
.maintix-bento-shell.is-pem-module .pc-module .pc-pem-list-grid-wrap,
.maintix-bento-shell.is-pem-module .pc-module .registry-grid-host:has(.pc-pem-list-grid),
.maintix-bento-shell.is-pem-module .pc-module .table-wrap:has(> .pc-pem-list-grid) {
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: min(58rem, calc(100dvh - 12rem)) !important;
    min-width: 0 !important;
    width: 100% !important;
    overflow: hidden !important;
}

.is-pem-module .pc-module .pc-pem-list-grid.rz-data-grid,
.maintix-bento-shell.is-pem-module .pc-module .pc-pem-list-grid.rz-data-grid,
.maintix-bento-shell.is-pem-module .pc-module .registry-grid-host:has(.pc-pem-list-grid) > .rz-data-grid,
.maintix-bento-shell.is-pem-module .pc-module .pc-pem-list-grid-wrap > .rz-data-grid {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: 100% !important;
    min-width: 0 !important;
    width: 100% !important;
    overflow: hidden !important;
}

.is-pem-module .pc-module .pc-pem-list-grid > .rz-data-grid-data,
.maintix-bento-shell.is-pem-module .pc-module .pc-pem-list-grid.rz-data-grid > .rz-data-grid-data,
.maintix-bento-shell.is-pem-module .pc-work-order-registry.pc-module .pc-pem-list-grid.rz-data-grid > .rz-data-grid-data,
.maintix-bento-shell .pc-services-request-registry.pc-module .pc-pem-list-grid.rz-data-grid > .rz-data-grid-data {
    flex: 1 1 auto !important;
    min-height: 0 !important; /* never floor body — clips pager when host is short */
    min-width: 0 !important; /* contain max-content table; H-scroll stays in grid body */
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: calc(min(58rem, calc(100dvh - 12rem)) - 3.5rem) !important;
    overflow: auto !important; /* sole scrollport for Actions / Requested By */
    scroll-padding-inline-end: 0.75rem; /* keep last Action icons clear of scrollport edge */
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

.is-pem-module .pc-module .pc-pem-list-grid.rz-data-grid > .rz-pager,
.maintix-bento-shell.is-pem-module .pc-module .pc-pem-list-grid.rz-data-grid > .rz-pager,
.maintix-bento-shell.is-pem-module .pc-work-order-registry.pc-module .pc-pem-list-grid.rz-data-grid > .rz-pager,
.maintix-bento-shell .pc-services-request-registry.pc-module .pc-pem-list-grid.rz-data-grid > .rz-pager {
    flex: 0 0 auto !important;
    flex-shrink: 0 !important;
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative;
    z-index: 3;
    background: #ffffff;
    border-top: 1px solid #e2e8f0;
}

.maintix-bento-shell.is-pem-module .pc-work-order-registry.pc-module .registry-grid-host:has(.pc-pem-list-grid),
.maintix-bento-shell .pc-services-request-registry.pc-module .registry-grid-host:has(.pc-pem-list-grid) {
    min-height: 0 !important;
}

/* List busy overlay host */
.is-pem-module .pc-module .pc-pem-list-busy-host {
    position: relative;
    min-height: 8rem;
}

.is-pem-module .pc-module .pc-pem-list-busy-host > .pc-grid-busy-overlay,
.is-pem-module .pc-module .registry-grid-host.registry-grid-refreshing::after {
    pointer-events: none;
}

/* ==========================================================================
   Apps Hub — Maintenance / PEM module chooser
   Matches Expenses Dashboard / PEM list tokens (--ex-*).
   ========================================================================== */

.hub-wrapper.maintix-apps-hub,
.maintix-apps-hub {
    --ex-navy: #0f172a;
    --ex-navy-soft: #101828;
    --ex-blue: #3b82f6;
    --ex-blue-deep: #2563eb;
    --ex-cyan: #06b6d4;
    --ex-bg: #f8fafc;
    --ex-card: #ffffff;
    --ex-border: #e2e8f0;
    --ex-muted: #64748b;
    --ex-text: #0f172a;
    --ex-radius: 12px;
    --ex-radius-lg: 16px;
    --ex-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px -12px rgba(15, 23, 42, 0.1);
    --hub-orange: #ed8030;
    --hub-blue: var(--ex-blue);
    --hub-cyan: var(--ex-cyan);
    --hub-green: #059669;
    --hub-dark: var(--ex-navy);
    position: relative;
    isolation: isolate;
    min-height: 100vh;
    display: grid;
    grid-template-rows: auto 1fr auto;
    align-items: center;
    justify-items: center;
    gap: clamp(1.25rem, 3vw, 2.25rem);
    padding: clamp(1.25rem, 3.5vw, 3rem);
    overflow: hidden;
    background:
        radial-gradient(ellipse 70% 45% at 12% -10%, rgba(59, 130, 246, 0.16), transparent 55%),
        radial-gradient(ellipse 55% 40% at 92% 8%, rgba(6, 182, 212, 0.12), transparent 50%),
        radial-gradient(ellipse 50% 35% at 50% 100%, rgba(237, 128, 48, 0.08), transparent 55%),
        linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%);
    color: var(--ex-text);
    font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
    -webkit-font-smoothing: antialiased;
}

.maintix-apps-hub .hub-atmosphere {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.maintix-apps-hub .hub-atmosphere-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(48px);
    opacity: 0.55;
}

.maintix-apps-hub .hub-atmosphere-orb--blue {
    top: -8%;
    left: -4%;
    width: min(420px, 55vw);
    height: min(420px, 55vw);
    background: rgba(37, 99, 235, 0.22);
}

.maintix-apps-hub .hub-atmosphere-orb--cyan {
    right: -6%;
    bottom: 8%;
    width: min(360px, 48vw);
    height: min(360px, 48vw);
    background: rgba(6, 182, 212, 0.16);
}

.maintix-apps-hub .hub-atmosphere-grid {
    position: absolute;
    inset: 0;
    opacity: 0.35;
    background-image:
        linear-gradient(rgba(148, 163, 184, 0.12) 1px, transparent 1px),
        linear-gradient(90deg, rgba(148, 163, 184, 0.12) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 20%, transparent 75%);
}

.maintix-apps-hub .hub-header,
.maintix-apps-hub .hub-grid,
.maintix-apps-hub .hub-footer {
    position: relative;
    z-index: 1;
}

.maintix-apps-hub .hub-header {
    display: grid;
    justify-items: center;
    gap: 1.1rem;
    text-align: center;
    max-width: 40rem;
}

.maintix-apps-hub .portal-brand-logo {
    display: grid;
    place-items: center;
    width: min(300px, 78vw);
    padding: 1.05rem 1.35rem;
    border: 1px solid rgba(226, 232, 240, 0.95);
    border-radius: 20px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.92));
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.04),
        0 18px 40px -18px rgba(37, 99, 235, 0.28);
}

.maintix-apps-hub .portal-brand-logo img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
}

.maintix-apps-hub .hub-header-copy {
    display: grid;
    gap: 0.4rem;
    justify-items: center;
}

.maintix-apps-hub .hub-eyebrow {
    margin: 0;
    color: var(--ex-blue-deep);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.maintix-apps-hub .hub-title {
    margin: 0;
    color: var(--ex-navy);
    font-size: clamp(1.55rem, 3.6vw, 2.15rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.15;
}

.maintix-apps-hub .hub-subtitle {
    margin: 0;
    max-width: 32rem;
    color: var(--ex-muted);
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1.5;
}

.maintix-apps-hub .hub-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(260px, 1fr));
    gap: 0.85rem;
    width: min(780px, 100%);
}

.maintix-apps-hub .hub-card {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 1rem;
    min-height: 168px;
    padding: 1.2rem 1.15rem;
    border: 1px solid var(--ex-border);
    border-radius: var(--ex-radius-lg);
    background: var(--ex-card);
    color: inherit;
    text-align: left;
    cursor: pointer;
    box-shadow: var(--ex-shadow);
    font: inherit;
    transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.maintix-apps-hub .hub-card-glow {
    position: absolute;
    inset: auto -20% -45% auto;
    width: 70%;
    height: 80%;
    border-radius: 50%;
    pointer-events: none;
    opacity: 0.55;
    filter: blur(28px);
    background: rgba(59, 130, 246, 0.14);
}

.maintix-apps-hub .hub-card.maintenance-card .hub-card-glow {
    background: rgba(237, 128, 48, 0.18);
}

.maintix-apps-hub .hub-card.pem-card .hub-card-glow {
    background: rgba(37, 99, 235, 0.16);
}

.maintix-apps-hub .hub-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    border-radius: var(--ex-radius-lg) var(--ex-radius-lg) 0 0;
    background: linear-gradient(90deg, var(--ex-blue-deep), var(--ex-blue) 45%, var(--ex-cyan));
}

.maintix-apps-hub .hub-card.maintenance-card::before {
    background: linear-gradient(90deg, var(--hub-orange), #f59e0b 55%, var(--ex-blue));
}

.maintix-apps-hub .hub-card:hover,
.maintix-apps-hub .hub-card:focus-visible {
    transform: translateY(-3px);
    border-color: #bfdbfe;
    box-shadow: 0 14px 32px -14px rgba(37, 99, 235, 0.35);
    outline: none;
}

.maintix-apps-hub .hub-card.maintenance-card:hover,
.maintix-apps-hub .hub-card.maintenance-card:focus-visible {
    border-color: rgba(237, 128, 48, 0.45);
    box-shadow: 0 14px 32px -14px rgba(237, 128, 48, 0.32);
}

.maintix-apps-hub .card-icon {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 3.35rem;
    height: 3.35rem;
    border: 0;
    border-radius: 999px;
    font-size: 1.2rem;
}

.maintix-apps-hub .maintenance-icon {
    background: #ffedd5;
    color: #c2410c;
}

.maintix-apps-hub .pem-icon {
    background: #dbeafe;
    color: #1d4ed8;
}

.maintix-apps-hub .hub-card-copy {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 0.28rem;
    min-width: 0;
}

.maintix-apps-hub .hub-card-copy strong {
    color: var(--ex-navy);
    font-size: 1.2rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.1;
}

.maintix-apps-hub .hub-card-kicker {
    color: var(--ex-blue-deep);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.maintix-apps-hub .hub-card.maintenance-card .hub-card-kicker {
    color: #c2410c;
}

.maintix-apps-hub .hub-card-desc {
    color: var(--ex-muted);
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.45;
}

.maintix-apps-hub .hub-card-arrow {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 2.15rem;
    height: 2.15rem;
    border-radius: 999px;
    background: var(--ex-blue);
    color: #fff;
    font-size: 0.75rem;
    transition: transform 180ms ease, background 180ms ease;
}

.maintix-apps-hub .hub-card.maintenance-card .hub-card-arrow {
    background: var(--hub-orange);
}

.maintix-apps-hub .hub-card:hover .hub-card-arrow,
.maintix-apps-hub .hub-card:focus-visible .hub-card-arrow {
    transform: translateX(3px);
}

.maintix-apps-hub .hub-footer {
    display: flex;
    justify-content: center;
}

.maintix-apps-hub .btn-logout {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-height: 40px;
    padding: 0.5rem 0.95rem;
    border: 1px solid var(--ex-border);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.88);
    color: var(--ex-muted);
    cursor: pointer;
    font-family: inherit;
    font-size: 0.8125rem;
    font-weight: 700;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}

.maintix-apps-hub .btn-logout:hover {
    background: #ffffff;
    border-color: #bfdbfe;
    color: var(--ex-blue-deep);
}

.maintix-apps-hub .fade-in {
    animation: maintixHubFadeIn 0.45s ease-in;
}

.maintix-apps-hub .fade-in-up {
    animation: maintixHubFadeInUp 0.55s ease-out;
}

@keyframes maintixHubFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes maintixHubFadeInUp {
    from {
        opacity: 0;
        transform: translateY(14px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 680px) {
    .maintix-apps-hub .hub-grid {
        grid-template-columns: 1fr;
    }

    .maintix-apps-hub .hub-card {
        grid-template-columns: auto 1fr;
        min-height: 0;
        padding: 1.05rem;
    }

    .maintix-apps-hub .hub-card-arrow {
        grid-column: 1 / -1;
        width: 100%;
        height: 2.35rem;
        border-radius: 10px;
    }

    .maintix-apps-hub .hub-subtitle {
        font-size: 0.84rem;
    }
}

/* ==========================================================================
   PEM detail shell — Expenses Dashboard theme (navy/blue, Inter, soft cards)
   Shared: .pc-expenses-wo-detail | .pc-pem-detail | .pc-expenses-detail
   Covers WO, Opening, Purchase, Advance*, Branding, AT, Services, Location.
   ========================================================================== */

:is(.pc-expenses-wo-detail, .pc-pem-detail, .pc-expenses-detail) {
    gap: 0.75rem;
    font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
    color: var(--ex-text);
    -webkit-font-smoothing: antialiased;
}

:is(.pc-expenses-wo-detail, .pc-pem-detail, .pc-expenses-detail).detail-stack {
    background: transparent;
}

:is(.pc-expenses-wo-detail, .pc-pem-detail, .pc-expenses-detail) .pc-wo-case-header.complaint-case-header,
:is(.pc-expenses-wo-detail, .pc-pem-detail, .pc-expenses-detail) .case-header.complaint-case-header {
    border: 1px solid var(--ex-border);
    border-radius: var(--ex-radius-lg);
    background: var(--ex-card);
    box-shadow: var(--ex-shadow);
}

:is(.pc-expenses-wo-detail, .pc-pem-detail, .pc-expenses-detail) .complaint-case-header::before {
    background: linear-gradient(180deg, var(--ex-blue-deep), var(--ex-blue) 55%, #06b6d4);
}

:is(.pc-expenses-wo-detail, .pc-pem-detail, .pc-expenses-detail) .workflow-stage-eyebrow,
:is(.pc-expenses-wo-detail, .pc-pem-detail, .pc-expenses-detail) .fault-card-eyebrow,
:is(.pc-expenses-wo-detail, .pc-pem-detail, .pc-expenses-detail) .pc-section-title,
:is(.pc-expenses-wo-detail, .pc-pem-detail, .pc-expenses-detail) .pc-wo-lines-title,
:is(.pc-expenses-wo-detail, .pc-pem-detail, .pc-expenses-detail) .pc-wo-history-panel .pc-section-title {
    color: var(--ex-blue-deep);
}

:is(.pc-expenses-wo-detail, .pc-pem-detail, .pc-expenses-detail) .case-header-info h2 {
    color: var(--ex-navy);
    letter-spacing: -0.02em;
}

:is(.pc-expenses-wo-detail, .pc-pem-detail, .pc-expenses-detail) .case-header-info p {
    color: var(--ex-muted);
}

:is(.pc-expenses-wo-detail, .pc-pem-detail, .pc-expenses-detail) .pc-wo-stepper-card.portal-card,
:is(.pc-expenses-wo-detail, .pc-pem-detail, .pc-expenses-detail) .workflow-stepper-card.portal-card,
:is(.pc-expenses-wo-detail, .pc-pem-detail, .pc-expenses-detail) .complaint-fault-card.issue-card,
:is(.pc-expenses-wo-detail, .pc-pem-detail, .pc-expenses-detail) .sidebar-card,
:is(.pc-expenses-wo-detail, .pc-pem-detail, .pc-expenses-detail) .pc-wo-history-panel {
    border: 1px solid var(--ex-border) !important;
    border-radius: var(--ex-radius-lg) !important;
    background: var(--ex-card) !important;
    box-shadow: var(--ex-shadow) !important;
}

:is(.pc-expenses-wo-detail, .pc-pem-detail, .pc-expenses-detail) .complaint-fault-card.issue-card {
    border-left: 4px solid var(--ex-blue) !important;
}

:is(.pc-expenses-wo-detail, .pc-pem-detail, .pc-expenses-detail) .complaint-fault-card.issue-card:hover {
    transform: none;
    border-color: var(--ex-border) !important;
    border-left-color: var(--ex-blue-deep) !important;
    box-shadow: var(--ex-shadow) !important;
}

:is(.pc-expenses-wo-detail, .pc-pem-detail, .pc-expenses-detail) .issue-card-info h4 {
    color: var(--ex-navy);
}

:is(.pc-expenses-wo-detail, .pc-pem-detail, .pc-expenses-detail) .issue-card-info p {
    color: var(--ex-muted);
}

:is(.pc-expenses-wo-detail, .pc-pem-detail, .pc-expenses-detail) .status-badge {
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.22rem 0.65rem;
}

:is(.pc-expenses-wo-detail, .pc-pem-detail, .pc-expenses-detail) .status-badge.pending {
    background: #eff6ff !important;
    color: #1d4ed8 !important;
    border: 1px solid rgba(37, 99, 235, 0.28) !important;
}

:is(.pc-expenses-wo-detail, .pc-pem-detail, .pc-expenses-detail) .status-badge.approved,
:is(.pc-expenses-wo-detail, .pc-pem-detail, .pc-expenses-detail) .status-badge.completed {
    background: #ecfdf5 !important;
    color: #047857 !important;
    border: 1px solid rgba(16, 185, 129, 0.28) !important;
}

:is(.pc-expenses-wo-detail, .pc-pem-detail, .pc-expenses-detail) .status-badge.rejected {
    background: #fef2f2 !important;
    color: #b91c1c !important;
    border: 1px solid rgba(239, 68, 68, 0.28) !important;
}

:is(.pc-expenses-wo-detail, .pc-pem-detail, .pc-expenses-detail) .pc-summary-label {
    color: var(--ex-muted);
}

:is(.pc-expenses-wo-detail, .pc-pem-detail, .pc-expenses-detail) .pc-summary-value {
    color: var(--ex-navy);
}

:is(.pc-expenses-wo-detail, .pc-pem-detail, .pc-expenses-detail) .pc-wo-bulk-line-actions .btn-outline {
    border-radius: 10px;
    font-weight: 600;
    background: #fff;
}

:is(.pc-expenses-wo-detail, .pc-pem-detail, .pc-expenses-detail) .pc-wo-bulk-line-actions .btn-outline.text-success {
    color: #15803d;
    border-color: #bbf7d0;
}

:is(.pc-expenses-wo-detail, .pc-pem-detail, .pc-expenses-detail) .pc-wo-bulk-line-actions .btn-outline.text-success:hover:not(:disabled) {
    background: #f0fdf4;
    border-color: #86efac;
}

:is(.pc-expenses-wo-detail, .pc-pem-detail, .pc-expenses-detail) .pc-wo-bulk-line-actions .btn-outline.text-danger {
    color: #b91c1c;
    border-color: #fecaca;
}

:is(.pc-expenses-wo-detail, .pc-pem-detail, .pc-expenses-detail) .pc-wo-bulk-line-actions .btn-outline.text-danger:hover:not(:disabled) {
    background: #fef2f2;
    border-color: #fca5a5;
}

:is(.pc-expenses-wo-detail, .pc-pem-detail, .pc-expenses-detail) .pc-wo-bulk-line-actions .btn-outline.text-warning {
    color: #a16207;
    border-color: #fde68a;
}

:is(.pc-expenses-wo-detail, .pc-pem-detail, .pc-expenses-detail) .pc-wo-bulk-line-actions .btn-outline.text-warning:hover:not(:disabled) {
    background: #fffbeb;
    border-color: #fcd34d;
}

:is(.pc-expenses-wo-detail, .pc-pem-detail, .pc-expenses-detail) .pc-bulk-actions-divider {
    background: var(--ex-border);
}

:is(.pc-expenses-wo-detail, .pc-pem-detail, .pc-expenses-detail) .master-table thead th {
    color: var(--ex-muted);
    font-weight: 700;
    letter-spacing: 0.04em;
    border-bottom-color: var(--ex-border);
}

:is(.pc-expenses-wo-detail, .pc-pem-detail, .pc-expenses-detail) .master-table tbody td {
    color: var(--ex-text);
    border-bottom-color: #f1f5f9;
}

/* Circular line-action icons — match Pending Requests */
:is(.pc-expenses-wo-detail, .pc-pem-detail, .pc-expenses-detail) .pc-icon-btn,
:is(.pc-expenses-wo-detail, .pc-pem-detail, .pc-expenses-detail) .pc-line-status-icons .pc-icon-btn {
    width: 1.65rem;
    height: 1.65rem;
    min-width: 1.65rem;
    border-radius: 999px;
    background: #eff6ff;
    color: var(--ex-blue);
    border: 0;
    font-size: 0.7rem;
}

:is(.pc-expenses-wo-detail, .pc-pem-detail, .pc-expenses-detail) .pc-icon-btn i,
:is(.pc-expenses-wo-detail, .pc-pem-detail, .pc-expenses-detail) .pc-line-status-icons .pc-icon-btn i {
    font-size: 0.7rem;
}

:is(.pc-expenses-wo-detail, .pc-pem-detail, .pc-expenses-detail) .pc-icon-btn:hover:not(:disabled) {
    background: #dbeafe;
    border-color: transparent;
}

:is(.pc-expenses-wo-detail, .pc-pem-detail, .pc-expenses-detail) .pc-icon-btn.text-success {
    color: #16a34a;
    background: #ecfdf5;
}

:is(.pc-expenses-wo-detail, .pc-pem-detail, .pc-expenses-detail) .pc-icon-btn.text-success:hover:not(:disabled) {
    background: #d1fae5;
}

:is(.pc-expenses-wo-detail, .pc-pem-detail, .pc-expenses-detail) .pc-icon-btn.text-danger {
    color: #dc2626;
    background: #fef2f2;
}

:is(.pc-expenses-wo-detail, .pc-pem-detail, .pc-expenses-detail) .pc-icon-btn.text-danger:hover:not(:disabled) {
    background: #fee2e2;
}

:is(.pc-expenses-wo-detail, .pc-pem-detail, .pc-expenses-detail) .pc-icon-btn.text-warning {
    color: #ca8a04;
    background: #fffbeb;
}

:is(.pc-expenses-wo-detail, .pc-pem-detail, .pc-expenses-detail) .pc-icon-btn.text-warning:hover:not(:disabled) {
    background: #fef3c7;
}

:is(.pc-expenses-wo-detail, .pc-pem-detail, .pc-expenses-detail) .btn-approval-action {
    background: var(--ex-blue-deep);
    border-color: var(--ex-blue-deep);
    box-shadow: 0 12px 22px rgba(37, 99, 235, 0.18);
}

:is(.pc-expenses-wo-detail, .pc-pem-detail, .pc-expenses-detail) .btn-approval-action:hover:not(:disabled) {
    box-shadow: 0 16px 28px rgba(37, 99, 235, 0.22);
}

:is(.pc-expenses-wo-detail, .pc-pem-detail, .pc-expenses-detail) .case-header-actions .btn-outline {
    border-radius: 10px;
    border-color: var(--ex-border);
    color: var(--ex-muted);
    font-weight: 600;
}

:is(.pc-expenses-wo-detail, .pc-pem-detail, .pc-expenses-detail) .case-header-actions .btn-outline:hover:not(:disabled) {
    border-color: #bfdbfe;
    color: var(--ex-blue-deep);
    background: #eff6ff;
}

:is(.pc-expenses-wo-detail, .pc-pem-detail, .pc-expenses-detail) .portal-alert.info {
    border-color: #bfdbfe;
    background: #eff6ff;
    color: #1e3a8a;
}

/* Detail grid + summary — shared across Opening / Purchase / Advance / etc. */
:is(.pc-expenses-wo-detail, .pc-pem-detail, .pc-expenses-detail) .pc-detail-col {
    border-color: var(--ex-border);
    border-radius: 10px;
    background: #f8fafc;
}

:is(.pc-expenses-wo-detail, .pc-pem-detail, .pc-expenses-detail) .pc-detail-label {
    color: var(--ex-muted);
}

:is(.pc-expenses-wo-detail, .pc-pem-detail, .pc-expenses-detail) .pc-detail-value {
    color: var(--ex-navy);
}

:is(.pc-expenses-wo-detail, .pc-pem-detail, .pc-expenses-detail) .pc-summary-card {
    border-bottom-color: var(--ex-border);
}

:is(.pc-expenses-wo-detail, .pc-pem-detail, .pc-expenses-detail) .status-badge.paid,
:is(.pc-expenses-wo-detail, .pc-pem-detail, .pc-expenses-detail) .status-badge.bg-success {
    background: #ecfdf5 !important;
    color: #047857 !important;
    border: 1px solid rgba(16, 185, 129, 0.28) !important;
}

:is(.pc-expenses-wo-detail, .pc-pem-detail, .pc-expenses-detail) .status-badge.bg-warning,
:is(.pc-expenses-wo-detail, .pc-pem-detail, .pc-expenses-detail) .status-badge.returned {
    background: #eff6ff !important;
    color: #1d4ed8 !important;
    border: 1px solid rgba(37, 99, 235, 0.28) !important;
}

:is(.pc-expenses-wo-detail, .pc-pem-detail, .pc-expenses-detail) .workflow-strip.maintix-workflow-stepper .workflow-step.is-current .workflow-badge,
:is(.pc-expenses-wo-detail, .pc-pem-detail, .pc-expenses-detail) .workflow-strip .workflow-step.is-current .workflow-badge {
    background: var(--ex-blue-deep);
    border-color: var(--ex-blue-deep);
    color: #fff;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.18);
}

:is(.pc-expenses-wo-detail, .pc-pem-detail, .pc-expenses-detail) .workflow-strip.maintix-workflow-stepper .workflow-step.is-complete .workflow-badge,
:is(.pc-expenses-wo-detail, .pc-pem-detail, .pc-expenses-detail) .workflow-strip .workflow-step.is-complete .workflow-badge {
    background: #ecfdf5;
    border-color: #86efac;
    color: #047857;
}

:is(.pc-expenses-wo-detail, .pc-pem-detail, .pc-expenses-detail) .workflow-strip.maintix-workflow-stepper .workflow-step.is-rejected .workflow-badge,
:is(.pc-expenses-wo-detail, .pc-pem-detail, .pc-expenses-detail) .workflow-strip .workflow-step.is-rejected .workflow-badge {
    background: #fef2f2;
    border-color: #fca5a5;
    color: #b91c1c;
    box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.12);
}

:is(.pc-expenses-wo-detail, .pc-pem-detail, .pc-expenses-detail) .pc-form-actions .btn-outline,
:is(.pc-expenses-wo-detail, .pc-pem-detail, .pc-expenses-detail) .pc-opening-detail-actions .btn-outline,
:is(.pc-expenses-wo-detail, .pc-pem-detail, .pc-expenses-detail) .pc-detail-detail-actions .btn-outline {
    border-radius: 10px;
    border-color: var(--ex-border);
    color: var(--ex-muted);
    font-weight: 600;
}

:is(.pc-expenses-wo-detail, .pc-pem-detail, .pc-expenses-detail) .pc-form-actions .btn-outline:hover:not(:disabled),
:is(.pc-expenses-wo-detail, .pc-pem-detail, .pc-expenses-detail) .pc-opening-detail-actions .btn-outline:hover:not(:disabled),
:is(.pc-expenses-wo-detail, .pc-pem-detail, .pc-expenses-detail) .pc-detail-detail-actions .btn-outline:hover:not(:disabled) {
    border-color: #bfdbfe;
    color: var(--ex-blue-deep);
    background: #eff6ff;
}

/* Monthly Expense Report — head-detail modal (dblclick line breakdown)
   Large size beats .maintix-bento-shell .pem-modal.wide (860px). Mobile: 100% width. */
.maintix-bento-shell .pem-modal.wide.pc-expense-head-detail-modal,
.pem-modal.wide.pc-expense-head-detail-modal,
.pc-expense-head-detail-modal {
    width: min(90vw, 1200px) !important;
    max-width: min(90vw, 1200px) !important;
    max-height: min(80vh, calc(100dvh - 2rem)) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

.maintix-bento-shell .pc-expense-head-detail-modal > .pem-modal-body,
.pc-expense-head-detail-modal > .pem-modal-body {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: min(calc(80vh - 8.5rem), calc(100dvh - 10rem)) !important;
    overflow-y: auto !important;
}

@media (max-width: 768px) {
    .maintix-bento-shell .pem-modal.wide.pc-expense-head-detail-modal,
    .pem-modal.wide.pc-expense-head-detail-modal,
    .pc-expense-head-detail-modal {
        width: 100% !important;
        max-width: 100% !important;
        max-height: 92vh !important;
    }

    .maintix-bento-shell .pc-expense-head-detail-modal > .pem-modal-body,
    .pc-expense-head-detail-modal > .pem-modal-body {
        max-height: min(calc(92vh - 8.5rem), calc(100dvh - 9rem)) !important;
    }
}

/* Monthly Expense Report — per-head limit colors (Locations & Limits)
   Duplicated here with high specificity + cache bump so colors stay visible
   even if pc-mobile.css is stale in browser cache. */
.pc-module .pc-monthly-report-table td.pc-monthly-head-cell.pc-monthly-cell-within,
.is-pem-module .pc-module .pc-monthly-report-table td.pc-monthly-cell-within {
    background: #bbf7d0 !important;
    background-color: #bbf7d0 !important;
    color: #14532d !important;
    font-weight: 700;
    box-shadow: inset 3px 0 0 #16a34a;
}

.pc-module .pc-monthly-report-table td.pc-monthly-head-cell.pc-monthly-cell-over,
.is-pem-module .pc-module .pc-monthly-report-table td.pc-monthly-cell-over {
    background: #fecdd3 !important;
    background-color: #fecdd3 !important;
    color: #9f1239 !important;
    font-weight: 700;
    box-shadow: inset 3px 0 0 #e11d48;
}

/* ==========================================================================
   PEM create / new / resend forms — Expenses Dashboard theme
   Use .pc-pem-create-form (alias .pc-expenses-create) on create shells.
   ========================================================================== */

.pc-pem-create-form,
.pc-expenses-create {
    --ex-navy: #0f172a;
    --ex-navy-soft: #101828;
    --ex-blue: #3b82f6;
    --ex-blue-deep: #2563eb;
    --ex-bg: #f8fafc;
    --ex-card: #ffffff;
    --ex-border: #e2e8f0;
    --ex-muted: #64748b;
    --ex-text: #0f172a;
    --ex-radius: 12px;
    --ex-radius-lg: 16px;
    --ex-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px -12px rgba(15, 23, 42, 0.1);
    gap: 0.85rem;
    padding: 1.15rem 1.2rem 1.35rem !important;
    border: 1px solid var(--ex-border) !important;
    border-radius: var(--ex-radius-lg) !important;
    background:
        radial-gradient(ellipse 70% 40% at 0% 0%, rgba(59, 130, 246, 0.07), transparent 55%),
        radial-gradient(ellipse 50% 35% at 100% 0%, rgba(6, 182, 212, 0.05), transparent 50%),
        var(--ex-card) !important;
    box-shadow: var(--ex-shadow) !important;
    font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
    color: var(--ex-text);
    -webkit-font-smoothing: antialiased;
}

.pc-pem-create-form > .master-header,
.pc-expenses-create > .master-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem 1rem;
    margin-bottom: 0.35rem;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid var(--ex-border);
}

.pc-pem-create-form > .master-header h3,
.pc-expenses-create > .master-header h3 {
    margin: 0;
    color: var(--ex-navy);
    font-size: 1.2rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.25;
}

.pc-pem-create-form > .master-header p,
.pc-expenses-create > .master-header p,
.pc-pem-create-form > .master-header .text-muted,
.pc-expenses-create > .master-header .text-muted {
    margin: 0.35rem 0 0;
    color: var(--ex-muted) !important;
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.45;
}

.pc-pem-create-form > .master-header > .btn-outline,
.pc-expenses-create > .master-header > .btn-outline {
    min-height: 2.35rem;
    padding: 0.45rem 0.9rem;
    border: 1px solid var(--ex-border);
    border-radius: 10px;
    background: #fff;
    color: var(--ex-muted);
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    transition: border-color 160ms ease, color 160ms ease, background 160ms ease;
}

.pc-pem-create-form > .master-header > .btn-outline:hover:not(:disabled),
.pc-expenses-create > .master-header > .btn-outline:hover:not(:disabled) {
    border-color: #bfdbfe;
    color: var(--ex-blue-deep);
    background: #eff6ff;
}

.pc-pem-create-form .pc-form-card,
.pc-expenses-create .pc-form-card,
.pc-form-card.pc-pem-create-body {
    margin-bottom: 0 !important;
    padding: 1.1rem 1.15rem 1.2rem !important;
    border: 1px solid var(--ex-border) !important;
    border-radius: var(--ex-radius-lg) !important;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
    box-shadow: none !important;
}

.pc-pem-create-form .pc-form-card h4,
.pc-pem-create-form .pc-form-card h5,
.pc-expenses-create .pc-form-card h4,
.pc-expenses-create .pc-form-card h5,
.pc-form-card.pc-pem-create-body h4,
.pc-form-card.pc-pem-create-body h5,
.pc-pem-create-form .fault-stack-toolbar h3,
.pc-expenses-create .fault-stack-toolbar h3 {
    margin: 0 0 0.65rem;
    color: var(--ex-blue-deep);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.pc-pem-create-form .form-label,
.pc-expenses-create .form-label,
.pc-form-card.pc-pem-create-body .form-label,
.pc-pem-create-form .maintix-form-grid label,
.pc-expenses-create .maintix-form-grid label,
.pc-pem-create-form .form-grid label,
.pc-expenses-create .form-grid label {
    margin-bottom: 0.35rem;
    color: var(--ex-navy);
    font-size: 0.78rem;
    font-weight: 650;
    letter-spacing: 0.01em;
}

.pc-pem-create-form .form-label.small,
.pc-expenses-create .form-label.small,
.pc-form-card.pc-pem-create-body .form-label.small {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--ex-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.pc-pem-create-form .portal-input,
.pc-pem-create-form .portal-select,
.pc-pem-create-form .portal-textarea,
.pc-pem-create-form select.portal-input,
.pc-pem-create-form textarea.portal-input,
.pc-pem-create-form .form-control,
.pc-expenses-create .portal-input,
.pc-expenses-create .portal-select,
.pc-expenses-create .portal-textarea,
.pc-expenses-create select.portal-input,
.pc-expenses-create textarea.portal-input,
.pc-expenses-create .form-control,
.pc-form-card.pc-pem-create-body .portal-input,
.pc-form-card.pc-pem-create-body .portal-select,
.pc-form-card.pc-pem-create-body .portal-textarea,
.pc-form-card.pc-pem-create-body select.portal-input,
.pc-form-card.pc-pem-create-body textarea.portal-input,
.pc-form-card.pc-pem-create-body .form-control {
    min-height: 2.45rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--ex-border) !important;
    border-radius: 10px !important;
    background: #fff !important;
    color: var(--ex-text);
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 500;
    box-shadow: 0 1px 1px rgba(15, 23, 42, 0.03);
    transition: border-color 160ms ease, box-shadow 160ms ease;
}

.pc-pem-create-form textarea.portal-input,
.pc-pem-create-form .portal-textarea,
.pc-expenses-create textarea.portal-input,
.pc-expenses-create .portal-textarea,
.pc-form-card.pc-pem-create-body textarea.portal-input,
.pc-form-card.pc-pem-create-body .portal-textarea {
    min-height: 4.5rem;
    resize: vertical;
}

.pc-pem-create-form .portal-input:focus,
.pc-pem-create-form .portal-select:focus,
.pc-pem-create-form .portal-textarea:focus,
.pc-pem-create-form select.portal-input:focus,
.pc-pem-create-form textarea.portal-input:focus,
.pc-pem-create-form .form-control:focus,
.pc-expenses-create .portal-input:focus,
.pc-expenses-create .portal-select:focus,
.pc-expenses-create .portal-textarea:focus,
.pc-expenses-create select.portal-input:focus,
.pc-expenses-create textarea.portal-input:focus,
.pc-expenses-create .form-control:focus,
.pc-form-card.pc-pem-create-body .portal-input:focus,
.pc-form-card.pc-pem-create-body .portal-select:focus,
.pc-form-card.pc-pem-create-body .portal-textarea:focus,
.pc-form-card.pc-pem-create-body select.portal-input:focus,
.pc-form-card.pc-pem-create-body textarea.portal-input:focus,
.pc-form-card.pc-pem-create-body .form-control:focus {
    outline: none;
    border-color: #93c5fd !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.18);
}

.pc-pem-create-form .portal-input:disabled,
.pc-pem-create-form .portal-input.bg-light,
.pc-expenses-create .portal-input:disabled,
.pc-expenses-create .portal-input.bg-light,
.pc-form-card.pc-pem-create-body .portal-input:disabled,
.pc-form-card.pc-pem-create-body .portal-input.bg-light {
    background: #f1f5f9 !important;
    color: var(--ex-muted);
}

.pc-pem-create-form .pc-expense-lines-block,
.pc-expenses-create .pc-expense-lines-block,
.pc-form-card.pc-pem-create-body .pc-expense-lines-block,
.pc-pem-create-form .fault-stack.maintix-fault-stack,
.pc-expenses-create .fault-stack.maintix-fault-stack {
    display: grid;
    gap: 0.75rem;
    padding: 0.95rem;
    margin-bottom: 0.85rem;
    border: 1px solid var(--ex-border);
    border-radius: var(--ex-radius);
    background: rgba(248, 250, 252, 0.92);
}

.pc-pem-create-form .pc-expense-line,
.pc-expenses-create .pc-expense-line,
.pc-form-card.pc-pem-create-body .pc-expense-line {
    padding: 0.85rem 0.9rem !important;
    margin: 0 !important;
    border: 1px solid var(--ex-border) !important;
    border-radius: var(--ex-radius) !important;
    background: var(--ex-card) !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
}

.pc-pem-create-form .pc-expense-add-row,
.pc-expenses-create .pc-expense-add-row,
.pc-form-card.pc-pem-create-body .pc-expense-add-row,
.pc-pem-create-form .secondary-button,
.pc-expenses-create .secondary-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: 2.35rem;
    padding: 0.45rem 0.9rem;
    border: 1px dashed #93c5fd !important;
    border-radius: 10px;
    background: #eff6ff !important;
    color: var(--ex-blue-deep) !important;
    font-weight: 650;
}

.pc-pem-create-form .pc-expense-add-row:hover:not(:disabled),
.pc-expenses-create .pc-expense-add-row:hover:not(:disabled),
.pc-form-card.pc-pem-create-body .pc-expense-add-row:hover:not(:disabled),
.pc-pem-create-form .secondary-button:hover:not(:disabled),
.pc-expenses-create .secondary-button:hover:not(:disabled) {
    border-style: solid !important;
    background: #dbeafe !important;
}

.pc-pem-create-form .pc-expense-lines-total,
.pc-expenses-create .pc-expense-lines-total,
.pc-form-card.pc-pem-create-body .pc-expense-lines-total {
    margin: 0.15rem 0 0.85rem;
    color: var(--ex-navy);
    font-size: 0.95rem;
    font-weight: 750;
    letter-spacing: -0.01em;
}

.pc-pem-create-form .pc-form-actions,
.pc-expenses-create .pc-form-actions,
.pc-form-card.pc-pem-create-body .pc-form-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem;
    margin-top: 0.85rem;
    padding-top: 0.95rem;
    border-top: 1px solid var(--ex-border);
}

.pc-pem-create-form .pc-form-actions .btn-submit,
.pc-pem-create-form .pc-form-actions .btn-primary,
.pc-expenses-create .pc-form-actions .btn-submit,
.pc-expenses-create .pc-form-actions .btn-primary,
.pc-form-card.pc-pem-create-body .pc-form-actions .btn-submit,
.pc-form-card.pc-pem-create-body .pc-form-actions .btn-primary {
    min-height: 2.5rem;
    padding: 0.55rem 1.15rem;
    border: 0;
    border-radius: 10px;
    background: linear-gradient(180deg, var(--ex-blue) 0%, var(--ex-blue-deep) 100%) !important;
    color: #fff !important;
    font-weight: 700;
    box-shadow: 0 1px 2px rgba(37, 99, 235, 0.25), 0 8px 18px -10px rgba(37, 99, 235, 0.55);
}

.pc-pem-create-form .pc-form-actions .btn-submit:hover:not(:disabled),
.pc-pem-create-form .pc-form-actions .btn-primary:hover:not(:disabled),
.pc-expenses-create .pc-form-actions .btn-submit:hover:not(:disabled),
.pc-expenses-create .pc-form-actions .btn-primary:hover:not(:disabled),
.pc-form-card.pc-pem-create-body .pc-form-actions .btn-submit:hover:not(:disabled),
.pc-form-card.pc-pem-create-body .pc-form-actions .btn-primary:hover:not(:disabled) {
    filter: brightness(1.03);
}

.pc-pem-create-form .pc-form-actions .btn-outline,
.pc-expenses-create .pc-form-actions .btn-outline,
.pc-form-card.pc-pem-create-body .pc-form-actions .btn-outline {
    min-height: 2.5rem;
    padding: 0.55rem 1.05rem;
    border: 1px solid var(--ex-border);
    border-radius: 10px;
    background: #fff;
    color: var(--ex-muted);
    font-weight: 650;
}

.pc-pem-create-form .pc-form-actions .btn-outline:hover:not(:disabled),
.pc-expenses-create .pc-form-actions .btn-outline:hover:not(:disabled),
.pc-form-card.pc-pem-create-body .pc-form-actions .btn-outline:hover:not(:disabled) {
    border-color: #bfdbfe;
    color: var(--ex-blue-deep);
    background: #eff6ff;
}

.pc-pem-create-form .pc-icon-btn.text-danger,
.pc-expenses-create .pc-icon-btn.text-danger,
.pc-form-card.pc-pem-create-body .pc-icon-btn.text-danger {
    width: 2.15rem;
    height: 2.15rem;
    border-radius: 999px;
    border: 1px solid rgba(239, 68, 68, 0.22);
    background: #fef2f2;
    color: #b91c1c;
}

.pc-pem-create-form .portal-alert,
.pc-expenses-create .portal-alert {
    border-radius: 10px;
    border-width: 1px;
    font-size: 0.84rem;
}

.pc-pem-create-form .portal-alert.info,
.pc-expenses-create .portal-alert.info {
    background: #eff6ff;
    border-color: rgba(59, 130, 246, 0.28);
    color: #1e40af;
}

.pc-pem-create-form .portal-alert.error,
.pc-expenses-create .portal-alert.error {
    background: #fef2f2;
    border-color: rgba(239, 68, 68, 0.28);
    color: #991b1b;
}

@media (max-width: 768px) {
    .pc-pem-create-form,
    .pc-expenses-create {
        padding: 0.95rem 0.9rem 1.1rem !important;
        max-width: 100%;
        overflow-x: clip;
        box-sizing: border-box;
    }

    .pc-pem-create-form .pc-form-card,
    .pc-expenses-create .pc-form-card,
    .pc-form-card.pc-pem-create-body {
        padding: 0.9rem !important;
        max-width: 100%;
    }

    .pc-pem-create-form .pc-form-actions,
    .pc-expenses-create .pc-form-actions,
    .pc-form-card.pc-pem-create-body .pc-form-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .pc-pem-create-form .pc-form-actions .btn-submit,
    .pc-pem-create-form .pc-form-actions .btn-primary,
    .pc-pem-create-form .pc-form-actions .btn-outline,
    .pc-expenses-create .pc-form-actions .btn-submit,
    .pc-expenses-create .pc-form-actions .btn-primary,
    .pc-expenses-create .pc-form-actions .btn-outline,
    .pc-form-card.pc-pem-create-body .pc-form-actions .btn-submit,
    .pc-form-card.pc-pem-create-body .pc-form-actions .btn-primary,
    .pc-form-card.pc-pem-create-body .pc-form-actions .btn-outline {
        width: 100%;
        min-height: 44px;
    }

    .pc-pem-create-form .portal-input,
    .pc-pem-create-form select.portal-input,
    .pc-expenses-create .portal-input,
    .pc-expenses-create select.portal-input {
        min-height: 44px;
        font-size: 16px;
        max-width: 100%;
    }

    /* WO detail — expenses theme mobile polish */
    :is(.pc-expenses-wo-detail, .pc-pem-detail, .pc-expenses-detail) .case-header.complaint-case-header,
    :is(.pc-expenses-wo-detail, .pc-pem-detail, .pc-expenses-detail) .pc-wo-case-header.complaint-case-header {
        padding: 0.7rem 0.8rem;
        gap: 0.5rem;
    }

    :is(.pc-expenses-wo-detail, .pc-pem-detail, .pc-expenses-detail) .case-header-info h2 {
        font-size: 1.05rem;
        line-height: 1.25;
    }

    :is(.pc-expenses-wo-detail, .pc-pem-detail, .pc-expenses-detail) .pc-wo-lines > .d-flex.flex-wrap {
        flex-direction: column;
        align-items: stretch !important;
    }

    :is(.pc-expenses-wo-detail, .pc-pem-detail, .pc-expenses-detail) .pc-wo-bulk-line-actions {
        width: 100%;
    }

    :is(.pc-expenses-wo-detail, .pc-pem-detail, .pc-expenses-detail) .pc-wo-bulk-line-actions .btn-outline {
        min-height: 44px;
    }

    :is(.pc-expenses-wo-detail, .pc-pem-detail, .pc-expenses-detail) .table-responsive,
    :is(.pc-expenses-wo-detail, .pc-pem-detail, .pc-expenses-detail) .table-wrap {
        margin: 0;
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
    }

    :is(.pc-expenses-wo-detail, .pc-pem-detail, .pc-expenses-detail) .sidebar-card,
    :is(.pc-expenses-wo-detail, .pc-pem-detail, .pc-expenses-detail) .pc-wo-history-panel {
        max-width: 100%;
    }

    /* Pending people / drilldown modals — bottom sheets */
    .pc-pending-people-modal.dashboard-pending-drilldown {
        width: 100% !important;
        max-width: 100% !important;
        max-height: 94dvh !important;
        border-radius: 1.15rem 1.15rem 0 0 !important;
        margin: 0 !important;
    }

    .pc-pending-people-header {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
    }

    .pc-pending-people-header .btn-outline,
    .pc-pending-people-header .btn-submit {
        min-height: 44px;
        width: 100%;
        justify-content: center;
    }

    .pc-expenses-pending-page .pc-grid-busy-overlay,
    .pc-expenses-dash .pc-grid-busy-overlay,
    .pc-expenses-pending-page .pc-centered-loader,
    .pc-expenses-dash .pc-centered-loader {
        border-radius: 12px;
        min-height: 8rem;
        visibility: visible !important;
        opacity: 1;
    }

    .pc-expenses-pending-table-card {
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
    }

    .pc-expenses-dash,
    .pc-expenses-pending-page {
        max-width: 100%;
        min-width: 0;
        overflow-x: clip;
    }

    /* Registry chrome under expenses theme */
    .maintix-bento-shell.is-pem-module .maintix-registry-card.pc-module .search-container,
    .maintix-bento-shell.is-pem-module .maintix-registry-card.pc-module .pc-header-actions {
        width: 100%;
    }

    .maintix-bento-shell.is-pem-module .maintix-registry-card.pc-module .search-container .btn-submit.btn-primary,
    .maintix-bento-shell.is-pem-module .maintix-registry-card.pc-module .filter-bar .btn-submit.btn-primary,
    .maintix-bento-shell.is-pem-module .maintix-registry-card.pc-module .pc-pem-list-clear {
        flex: 1 1 auto;
        min-height: 44px;
        width: 100%;
    }
}

@media (max-width: 480px) {
    :is(.pc-expenses-wo-detail, .pc-pem-detail, .pc-expenses-detail) .pc-wo-bulk-line-actions .btn-outline {
        flex: 1 1 100%;
        width: 100%;
    }

    .pc-expenses-pending-hero {
        padding: 0.65rem 0.7rem;
    }

    .pc-expenses-pending-hero-copy h3 {
        font-size: 1.05rem;
    }

    .pc-expenses-dash .pc-expenses-kpi-row {
        grid-template-columns: 1fr;
    }

    /* type / pipeline / ref stay as mobile horizontal rows (pc-mobile.css) */
}

/* ==========================================================================
   PEM registry / list chrome — Expenses Dashboard theme
   Covers + Create, Export Excel, refresh, filters, badge, Clear All.
   Approval cycle pills stay on rules below; grids keep .pc-pem-list-grid.
   ========================================================================== */

.maintix-bento-shell.is-pem-module .maintix-registry-card.pc-module,
.maintix-bento-shell.is-pem-module .portal-card.maintix-registry-card.pc-module {
    --ex-navy: #0f172a;
    --ex-navy-soft: #101828;
    --ex-blue: #3b82f6;
    --ex-blue-deep: #2563eb;
    --ex-bg: #f8fafc;
    --ex-card: #ffffff;
    --ex-border: #e2e8f0;
    --ex-muted: #64748b;
    --ex-text: #0f172a;
    --ex-accent: #ed8030;
    --ex-accent-deep: #c2591d;
    --ex-radius: 12px;
    --ex-radius-lg: 16px;
    --ex-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px -12px rgba(15, 23, 42, 0.1);
    font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
    color: var(--ex-text);
    -webkit-font-smoothing: antialiased;
}

.maintix-bento-shell.is-pem-module .maintix-registry-card.pc-module > .portal-card-header,
.maintix-bento-shell.is-pem-module .maintix-registry-card.pc-module > .master-header {
    gap: 0.85rem;
    margin-bottom: 0.35rem;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid var(--ex-border);
}

.maintix-bento-shell.is-pem-module .maintix-registry-card.pc-module .registry-title-row h2,
.maintix-bento-shell.is-pem-module .maintix-registry-card.pc-module .portal-card-header h2,
.maintix-bento-shell.is-pem-module .maintix-registry-card.pc-module .master-header h2,
.maintix-bento-shell.is-pem-module .maintix-registry-card.pc-module .master-header h3 {
    margin: 0;
    color: var(--ex-navy);
    font-size: 1.2rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.25;
}

.maintix-bento-shell.is-pem-module .maintix-registry-card.pc-module .badge.bg-primary,
.maintix-bento-shell.is-pem-module .maintix-registry-card.pc-module .registry-title-row .badge.bg-primary {
    background: linear-gradient(180deg, var(--ex-blue) 0%, var(--ex-blue-deep) 100%) !important;
    color: #fff !important;
    font-weight: 700;
    font-size: 0.72rem;
    letter-spacing: 0.01em;
    padding: 0.28em 0.55em;
    border: 0;
    box-shadow: 0 1px 2px rgba(37, 99, 235, 0.28);
}

.maintix-bento-shell.is-pem-module .maintix-registry-card.pc-module .registry-loading-indicator {
    color: var(--ex-blue-deep);
}

.maintix-bento-shell.is-pem-module .maintix-registry-card.pc-module .search-container,
.maintix-bento-shell.is-pem-module .maintix-registry-card.pc-module .pc-header-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* Primary CTAs: + Create, Apply, Add Head / Location, etc. */
.maintix-bento-shell.is-pem-module .maintix-registry-card.pc-module .btn-submit:not(.btn-outline):not(.btn-secondary),
.maintix-bento-shell.is-pem-module .maintix-registry-card.pc-module .btn-primary:not(.btn-outline),
.maintix-bento-shell.is-pem-module .maintix-registry-card.pc-module .search-container .btn-submit.btn-primary,
.maintix-bento-shell.is-pem-module .maintix-registry-card.pc-module .filter-bar .btn-submit.btn-primary,
.maintix-bento-shell.is-pem-module .pc-module .pc-header-actions .btn-submit.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: 2.45rem;
    padding: 0.5rem 1.05rem;
    border: 0 !important;
    border-radius: 10px !important;
    background: linear-gradient(180deg, var(--ex-blue, #3b82f6) 0%, var(--ex-blue-deep, #2563eb) 100%) !important;
    color: #fff !important;
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    box-shadow: 0 1px 2px rgba(37, 99, 235, 0.25), 0 8px 18px -10px rgba(37, 99, 235, 0.55);
    transition: filter 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.maintix-bento-shell.is-pem-module .maintix-registry-card.pc-module .btn-submit:not(.btn-outline):not(.btn-secondary):hover:not(:disabled),
.maintix-bento-shell.is-pem-module .maintix-registry-card.pc-module .btn-primary:not(.btn-outline):hover:not(:disabled),
.maintix-bento-shell.is-pem-module .maintix-registry-card.pc-module .search-container .btn-submit.btn-primary:hover:not(:disabled),
.maintix-bento-shell.is-pem-module .maintix-registry-card.pc-module .filter-bar .btn-submit.btn-primary:hover:not(:disabled),
.maintix-bento-shell.is-pem-module .pc-module .pc-header-actions .btn-submit.btn-primary:hover:not(:disabled) {
    filter: brightness(1.03);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(37, 99, 235, 0.28), 0 12px 22px -10px rgba(37, 99, 235, 0.55);
}

.maintix-bento-shell.is-pem-module .maintix-registry-card.pc-module .btn-submit:not(.btn-outline):disabled,
.maintix-bento-shell.is-pem-module .maintix-registry-card.pc-module .btn-primary:not(.btn-outline):disabled {
    opacity: 0.65;
    transform: none;
    filter: none;
}

/* Export Excel / Refresh / secondary header outlines */
.maintix-bento-shell.is-pem-module .maintix-registry-card.pc-module .search-container .btn-outline,
.maintix-bento-shell.is-pem-module .maintix-registry-card.pc-module .portal-card-header > .btn-outline,
.maintix-bento-shell.is-pem-module .maintix-registry-card.pc-module .pc-header-actions .btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: 2.45rem;
    padding: 0.45rem 0.85rem;
    border: 1px solid var(--ex-border) !important;
    border-radius: 10px !important;
    background: var(--ex-card, #fff) !important;
    color: var(--ex-muted) !important;
    font-weight: 600;
    font-size: 0.8125rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    transition: border-color 160ms ease, color 160ms ease, background 160ms ease;
}

.maintix-bento-shell.is-pem-module .maintix-registry-card.pc-module .search-container .btn-outline:hover:not(:disabled),
.maintix-bento-shell.is-pem-module .maintix-registry-card.pc-module .portal-card-header > .btn-outline:hover:not(:disabled),
.maintix-bento-shell.is-pem-module .maintix-registry-card.pc-module .pc-header-actions .btn-outline:hover:not(:disabled) {
    border-color: #bfdbfe !important;
    color: var(--ex-blue-deep) !important;
    background: #eff6ff !important;
}

.maintix-bento-shell.is-pem-module .maintix-registry-card.pc-module .search-container .btn-outline .fa-file-excel {
    color: #16a34a;
}

.maintix-bento-shell.is-pem-module .maintix-registry-card.pc-module .search-container .btn-outline[title="Refresh"],
.maintix-bento-shell.is-pem-module .maintix-registry-card.pc-module .search-container .btn-outline.small:has(.fa-rotate-right) {
    min-width: 2.45rem;
    padding-left: 0.65rem;
    padding-right: 0.65rem;
}

/* Filter bar */
.maintix-bento-shell.is-pem-module .maintix-registry-card.pc-module .filter-bar,
.maintix-bento-shell.is-pem-module .maintix-registry-card.pc-module .pc-inline-filters {
    padding: 0.85rem 1rem !important;
    margin-bottom: 0.85rem !important;
    border: 1px solid var(--ex-border) !important;
    border-radius: var(--ex-radius) !important;
    background: linear-gradient(180deg, #ffffff 0%, var(--ex-bg) 100%) !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
}

.maintix-bento-shell.is-pem-module .maintix-registry-card.pc-module .filter-bar .form-label,
.maintix-bento-shell.is-pem-module .maintix-registry-card.pc-module .pc-inline-filters .form-label {
    margin-bottom: 0.3rem;
    color: var(--ex-navy);
    font-size: 0.75rem;
    font-weight: 650;
    letter-spacing: 0.01em;
}

.maintix-bento-shell.is-pem-module .maintix-registry-card.pc-module .filter-bar .portal-input,
.maintix-bento-shell.is-pem-module .maintix-registry-card.pc-module .filter-bar select.portal-input,
.maintix-bento-shell.is-pem-module .maintix-registry-card.pc-module .filter-bar .search-input,
.maintix-bento-shell.is-pem-module .maintix-registry-card.pc-module .pc-inline-filters .portal-input,
.maintix-bento-shell.is-pem-module .maintix-registry-card.pc-module .pc-inline-filters select {
    min-height: 2.45rem;
    padding: 0.45rem 0.7rem;
    border: 1px solid var(--ex-border) !important;
    border-radius: 10px !important;
    background: #fff !important;
    color: var(--ex-text);
    font-size: 0.84rem;
    font-weight: 500;
    box-shadow: 0 1px 1px rgba(15, 23, 42, 0.03);
    transition: border-color 160ms ease, box-shadow 160ms ease;
}

.maintix-bento-shell.is-pem-module .maintix-registry-card.pc-module .filter-bar .portal-input:focus,
.maintix-bento-shell.is-pem-module .maintix-registry-card.pc-module .filter-bar select.portal-input:focus,
.maintix-bento-shell.is-pem-module .maintix-registry-card.pc-module .pc-inline-filters .portal-input:focus,
.maintix-bento-shell.is-pem-module .maintix-registry-card.pc-module .pc-inline-filters select:focus {
    outline: none;
    border-color: #93c5fd !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.18);
}

/* Clear All — orange accent (aligned with shell danger-outline accent) */
.maintix-bento-shell.is-pem-module .maintix-registry-card.pc-module .pc-pem-list-clear,
.maintix-bento-shell.is-pem-module .maintix-registry-card.pc-module .filter-bar .btn-outline.text-danger,
.maintix-bento-shell.is-pem-module .maintix-registry-card.pc-module .pc-inline-filters .btn-outline.text-danger {
    min-height: 2.45rem;
    padding: 0.45rem 0.9rem;
    border: 1px solid rgba(237, 128, 48, 0.35) !important;
    border-radius: 10px !important;
    background: #fff !important;
    color: var(--ex-accent-deep, #c2591d) !important;
    font-weight: 650;
    box-shadow: none;
}

.maintix-bento-shell.is-pem-module .maintix-registry-card.pc-module .pc-pem-list-clear:hover:not(:disabled),
.maintix-bento-shell.is-pem-module .maintix-registry-card.pc-module .filter-bar .btn-outline.text-danger:hover:not(:disabled),
.maintix-bento-shell.is-pem-module .maintix-registry-card.pc-module .pc-inline-filters .btn-outline.text-danger:hover:not(:disabled) {
    background: rgba(237, 128, 48, 0.1) !important;
    border-color: rgba(237, 128, 48, 0.5) !important;
    color: var(--ex-accent-deep, #c2591d) !important;
}

/* Master list panels that use same primary CTA pattern (heads, locations, etc.) */
.maintix-bento-shell.is-pem-module .pc-module.master-panel:not(.pc-pem-create-form):not(.pc-expenses-create) .master-header .btn-submit:not(.btn-outline),
.maintix-bento-shell.is-pem-module .pc-module.master-panel:not(.pc-pem-create-form):not(.pc-expenses-create) .master-header .btn-primary:not(.btn-outline) {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 2.45rem;
    padding: 0.5rem 1.05rem;
    border: 0 !important;
    border-radius: 10px !important;
    background: linear-gradient(180deg, var(--ex-blue, #3b82f6) 0%, var(--ex-blue-deep, #2563eb) 100%) !important;
    color: #fff !important;
    font-weight: 700;
    box-shadow: 0 1px 2px rgba(37, 99, 235, 0.25), 0 8px 18px -10px rgba(37, 99, 235, 0.55);
}

@media (max-width: 768px) {
    .maintix-bento-shell.is-pem-module .maintix-registry-card.pc-module .search-container,
    .maintix-bento-shell.is-pem-module .maintix-registry-card.pc-module .pc-header-actions {
        width: 100%;
        flex-wrap: wrap;
        gap: 0.45rem;
    }

    .maintix-bento-shell.is-pem-module .maintix-registry-card.pc-module .search-container .btn-submit.btn-primary,
    .maintix-bento-shell.is-pem-module .maintix-registry-card.pc-module .filter-bar .btn-submit.btn-primary,
    .maintix-bento-shell.is-pem-module .maintix-registry-card.pc-module .search-container .btn-outline,
    .maintix-bento-shell.is-pem-module .maintix-registry-card.pc-module .pc-pem-list-clear {
        flex: 1 1 auto;
        min-height: 44px;
    }
}

/* ==========================================================================
   PEM approval cycle — step pills + arrows (registry / form headers)
   ========================================================================== */

.pc-module .pc-approval-cycle,
.is-pem-module .pc-approval-cycle,
.maintix-bento-shell.is-pem-module .pc-approval-cycle {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.5rem;
    margin: 0.4rem 0 0;
    max-width: 56rem;
}

.pc-module .pc-approval-cycle-prefix,
.is-pem-module .pc-approval-cycle-prefix {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--ex-muted, #64748b);
    line-height: 1.2;
}

.pc-module .pc-approval-cycle-prefix::after,
.is-pem-module .pc-approval-cycle-prefix::after {
    content: "";
    width: 0.28rem;
    height: 0.28rem;
    border-radius: 50%;
    background: var(--ex-border, #cbd5e1);
    flex-shrink: 0;
}

.pc-module .pc-approval-cycle-steps,
.is-pem-module .pc-approval-cycle-steps {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.28rem;
}

.pc-module .pc-approval-cycle-step,
.is-pem-module .pc-approval-cycle-step {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    padding: 0.28rem 0.62rem;
    border: 1px solid var(--ex-border, #e2e8f0);
    border-radius: 999px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    color: var(--ex-navy, #0f172a);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1.25;
    box-shadow: 0 1px 1px rgba(15, 23, 42, 0.04);
    white-space: nowrap;
}

.pc-module .pc-approval-cycle-arrow,
.is-pem-module .pc-approval-cycle-arrow {
    color: var(--ex-blue, #3b82f6);
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1;
    opacity: 0.9;
    user-select: none;
    display: inline-flex;
    align-items: center;
}

.pc-module .pc-approval-cycle-arrow i,
.is-pem-module .pc-approval-cycle-arrow i {
    font-size: 0.65rem;
    line-height: 1;
}

.pc-module .pc-approval-cycle-note,
.is-pem-module .pc-approval-cycle-note {
    flex: 1 1 100%;
    margin: 0.1rem 0 0;
    color: var(--ex-muted, #64748b);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.4;
}

@media (max-width: 640px) {
    .pc-module .pc-approval-cycle-step,
    .is-pem-module .pc-approval-cycle-step {
        white-space: normal;
        text-align: center;
    }
}

/* Diesel Consumption — previous vs current month ZAR totals */
.pc-diesel-month-compare {
    border: 1px solid var(--ex-border, #e2e8f0);
    border-radius: 12px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    padding: 0.85rem 1rem;
}

.pc-diesel-month-compare-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--ex-navy, #0f172a);
}

.pc-diesel-month-compare-sub {
    margin-top: 0.2rem;
    font-size: 0.78rem;
    color: var(--ex-muted, #64748b);
    line-height: 1.35;
}

.pc-diesel-month-metric-card {
    border: 1px solid var(--ex-border, #e2e8f0);
    border-radius: 10px;
    background: #fff;
    padding: 0.75rem 0.85rem;
    height: 100%;
}

.pc-diesel-month-metric-label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ex-muted, #64748b);
    margin-bottom: 0.45rem;
}

.pc-diesel-month-metric-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    font-size: 0.86rem;
    line-height: 1.35;
    padding: 0.15rem 0;
}

.pc-diesel-month-metric-row strong {
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.pc-diesel-delta-up {
    color: #b45309;
}

.pc-diesel-delta-down {
    color: #15803d;
}

.pc-diesel-delta-flat {
    color: var(--ex-muted, #64748b);
}

@media (max-width: 767.98px) {
    .pc-diesel-month-compare {
        padding: 0.75rem;
    }
}