From 1d5b28e95b4ecdf7caa57200c4234ddf82015d40 Mon Sep 17 00:00:00 2001 From: Paulo Porto Date: Tue, 27 Oct 2026 03:22:10 -0300 Subject: [PATCH] Updated the calendar to improve opportunity display and navigation --- dist/chromium/background.js | 32 +- dist/chromium/content.js | 648 ++++++++++-------- dist/firefox/background.js | 32 +- dist/firefox/content.js | 648 ++++++++++-------- scripts/sources.cjs | 4 - src/auth/content-session.js | 1 + src/auth/sales-common-state.js | 7 - src/auth/sales-common.js | 33 - src/auth/token-relay.js | 21 +- src/background/application.js | 1 + src/content/application.js | 49 +- src/content/modal.js | 3 +- src/content/styles/redwood.css | 45 -- src/content/styles/tables.css | 16 + src/features/ai-summary/content.js | 103 --- src/features/ai-summary/state.js | 5 - src/features/debug/content-log.js | 6 + src/features/debug/content-view.js | 26 +- src/features/debug/state.js | 87 ++- .../opportunities/activity-progress.js | 11 +- src/features/opportunities/calendar.css | 25 + src/features/opportunities/calendar.js | 178 +++-- src/features/opportunities/columns.js | 2 +- src/features/opportunities/controller.js | 1 + src/features/opportunities/filter-state.js | 1 + src/features/opportunities/filters.js | 4 +- src/features/opportunities/query-state.js | 3 +- src/features/opportunities/refresh-all.js | 3 +- .../opportunities/sr-session-preparation.js | 16 +- src/features/opportunities/styles.css | 6 + src/features/opportunities/table.js | 8 +- src/features/org-chart/view.js | 2 +- src/features/products/details.js | 32 +- src/features/products/ramp-projection-view.js | 33 +- src/features/products/ramp-projection.css | 6 + src/services/fusion/opportunities.js | 3 + src/services/fusion/sr-details.js | 8 +- src/services/spa/current-user.js | 23 +- tests/aiSummary.test.cjs | 219 ------ tests/architecture.test.cjs | 8 +- tests/badgeIcons.test.cjs | 4 +- tests/crmSrDetails.test.cjs | 6 +- tests/currentUser.test.cjs | 27 +- tests/debugStorage.test.cjs | 121 ++++ tests/debugTabs.test.cjs | 8 +- tests/installBase.test.cjs | 28 +- tests/opportunityCalendar.test.cjs | 69 +- tests/opportunityTable.test.cjs | 49 +- tests/ramp-projection.test.cjs | 5 +- tests/srSessionPreparation.test.cjs | 45 +- tests/support/characterization.cjs | 2 +- 51 files changed, 1486 insertions(+), 1237 deletions(-) delete mode 100644 src/auth/sales-common-state.js delete mode 100644 src/auth/sales-common.js delete mode 100644 src/features/ai-summary/content.js delete mode 100644 src/features/ai-summary/state.js delete mode 100644 tests/aiSummary.test.cjs create mode 100644 tests/debugStorage.test.cjs diff --git a/dist/chromium/background.js b/dist/chromium/background.js index f09134a..a137362 100644 --- a/dist/chromium/background.js +++ b/dist/chromium/background.js @@ -1553,7 +1553,7 @@ function createFusionSrDetails({ fetchJson, tabsCreate, tabsRemove, supportsFire let session = sessions.get(key); if (!session) { const details = { - url: "https://comcipapic-oalprod.integration.ocp.oraclecloud.com/ic/builder/rt/SeaaS_initiation/live/webApps/external/", + url: "https://comcipapic-oalprod.integration.ocp.oraclecloud.com/ic/builder/rt/oalset_semc/live/webApps/Dashboard/?page=shell&shell=main&main=manageresourcerequests", active: false }; if (Number.isInteger(sender?.tab?.windowId)) details.windowId = sender.tab.windowId; @@ -1570,8 +1570,8 @@ function createFusionSrDetails({ fetchJson, tabsCreate, tabsRemove, supportsFire let tab; try { tab = await session.tab; - const deadline = Date.now() + 60000; - for (let attempt = 0; attempt < 240 && Date.now() < deadline; attempt += 1) { + const deadline = Date.now() + 70000; + for (let attempt = 0; attempt < 280 && Date.now() < deadline; attempt += 1) { const pendingCookies = initialize && attempt === 0 ? sessionCookies(sender) : waitForSessionCookies(session, sender); const cookies = await (initialize ? Promise.race([session.cookieReady, pendingCookies]) : pendingCookies); @@ -1590,7 +1590,7 @@ function createFusionSrDetails({ fetchJson, tabsCreate, tabsRemove, supportsFire if (error.httpStatus !== 401) throw error; } } - throw new Error("Service Request session could not be established after 60 seconds. Sign in to Oracle and retry."); + throw new Error("Service Request session could not be established after 70 seconds. Sign in to Oracle and retry."); } catch (error) { error.debugRequests = logs; throw error; @@ -1879,12 +1879,29 @@ function createFusionSrCreate({ fetchJson, tokenHeaders, previewTokenHeaders, in } // Source: src/services/spa/current-user.js -function createSpaCurrentUser({ fetchJson, fetchInTab, openSessionTab, waitForSession, closeSessionTab, sessionUrl }) { +function createSpaCurrentUser({ fetchJson, fetchInTab, openSessionTab, waitForSession, closeSessionTab, sessionUrl, sessionStorage }) { const pending = new Map(); + const identities = new Map(); function requestCurrentUser(sender) { - const key = JSON.stringify([sender?.tab?.windowId ?? null, sender?.tab?.cookieStoreId ?? "", Boolean(sender?.tab?.incognito)]); + // Windows share cookies; Firefox containers and private sessions do not. + const key = JSON.stringify([sender?.tab?.cookieStoreId ?? "", Boolean(sender?.tab?.incognito)]); + if (identities.has(key)) return Promise.resolve({ ok: true, user: identities.get(key), debugRequests: [] }); if (!pending.has(key)) { - pending.set(key, loadCurrentUser(sender).finally(() => pending.delete(key))); + pending.set(key, (async () => { + const storageKey = `opportunities-extension-current-user:${key}`; + try { + const stored = (await sessionStorage?.get(storageKey))?.[storageKey]; + if (stored && typeof stored.id === "string" && stored.id.trim() && typeof stored.name === "string" && stored.name.trim() + && Array.isArray(stored.roles) && stored.roles.every(role => typeof role === "string" && role.trim())) { + identities.set(key, stored); + return { ok: true, user: stored, debugRequests: [] }; + } + } catch { /* Memory cache still works if session storage is unavailable. */ } + const result = await loadCurrentUser(sender); + identities.set(key, result.user); + try { await sessionStorage?.set({ [storageKey]: result.user }); } catch { /* Keep the successful in-memory identity. */ } + return result; + })().finally(() => pending.delete(key))); } return pending.get(key); } @@ -3370,6 +3387,7 @@ function createBackgroundApplication(overrides = {}) { getHttp: () => httpBackgroundJson }); const spaCurrentUser = createSpaCurrentUser({ + sessionStorage: (environment.browser || environment.chrome)?.storage?.session, fetchJson: (...args) => httpBackgroundJson.fetchJson(...args), fetchInTab: (tab, logs) => spaPageClient.requestIdentity(tab, logs), openSessionTab: sender => authConsumerSession.openConsumerTokenSessionTab(sender), diff --git a/dist/chromium/content.js b/dist/chromium/content.js index 5d9238a..fb27c07 100644 --- a/dist/chromium/content.js +++ b/dist/chromium/content.js @@ -1,6 +1,6 @@ (function () { "use strict"; -const redwoodStyles = "\n .opportunities-extension-scroll-lock {\n overflow: hidden !important;\n }\n\n .opportunities-extension-modal,\n .opportunities-extension-modal * {\n box-sizing: border-box;\n font-family: \"Oracle Sans\", Arial, Helvetica, sans-serif;\n }\n\n .opportunities-extension-modal {\n position: fixed;\n inset: 0;\n z-index: 2147483647;\n background: #f5f4f2;\n color: #000000;\n }\n\n .opportunities-extension-modal[hidden] {\n display: none !important;\n }\n\n .opportunities-extension-shell {\n height: 100vh;\n min-height: 0;\n display: grid;\n grid-template-rows: auto minmax(0, 1fr);\n background: #f5f4f2;\n }\n\n .opportunities-extension-header {\n position: relative;\n display: flex;\n align-items: flex-start;\n justify-content: space-between;\n gap: 24px;\n padding: 28px 40px 22px;\n border-bottom: 1px solid #dedbd7;\n background:\n linear-gradient(90deg, #8f624a 0 11%, #c74634 11% 23%, #6f5a7f 23% 36%, #00758f 36% 51%, #d4b06a 51% 63%, transparent 63% 100%) top left / 100% 6px no-repeat,\n #ffffff;\n }\n\n .opportunities-extension-header::before {\n position: absolute;\n left: 40px;\n bottom: -1px;\n width: 64px;\n height: 3px;\n background: #00758f;\n content: \"\";\n }\n\n .opportunities-extension-header h1 {\n margin: 0;\n color: #000000;\n font-size: 24px;\n font-weight: 700;\n line-height: 1.2;\n letter-spacing: 0;\n }\n\n .opportunities-extension-header p {\n margin: 0;\n color: #5f5a55;\n font-size: 14px;\n line-height: 1.4;\n }\n\n .opportunities-extension-subtitle-row {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: 8px;\n margin-top: 6px;\n }\n\n .opportunities-extension-auth-badge {\n display: inline-flex;\n align-items: center;\n min-height: 22px;\n padding: 2px 8px;\n border-radius: 999px;\n color: #ffffff;\n font-size: 12px;\n font-weight: 700;\n line-height: 1.2;\n }\n\n .opportunities-extension-auth-badge-authenticated {\n background: #3f6f17;\n }\n\n .opportunities-extension-auth-badge-unauthenticated {\n background: #c5331f;\n }\n\n .opportunities-extension-auth-badge-pending {\n background: #6f5a7f;\n }\n\n .opportunities-extension-products-progress {\n display: inline-flex;\n align-items: center;\n min-height: 22px;\n padding: 2px 8px;\n border-radius: 999px;\n background: #e8f4f6;\n color: #006d7a;\n font-size: 12px;\n font-weight: 700;\n line-height: 1.2;\n }\n\n .opportunities-extension-products-progress[hidden] {\n display: none !important;\n }\n\n .opportunities-extension-products-cache-timestamp {\n display: inline-flex;\n align-items: center;\n min-height: 22px;\n padding: 2px 8px;\n border-radius: 999px;\n background: #f0eeeb;\n color: #5f5a55;\n font-size: 11px;\n font-weight: 600;\n line-height: 1.2;\n }\n\n .opportunities-extension-products-cache-timestamp[hidden] {\n display: none !important;\n }\n\n .opportunities-extension-products-progress[data-state=\"running\"]::before {\n width: 12px;\n height: 12px;\n margin-right: 6px;\n border: 2px solid currentColor;\n border-right-color: transparent;\n border-radius: 50%;\n content: \"\";\n animation: opportunities-extension-spin .8s linear infinite;\n }\n\n .opportunities-extension-products-progress[data-state=\"complete\"] {\n background: #e2f2e5;\n color: #356d19;\n }\n\n .opportunities-extension-products-progress[data-state=\"complete-with-errors\"],\n .opportunities-extension-products-progress[data-state=\"error\"] {\n background: #f9e3e1;\n color: #a52b1c;\n }\n\n @keyframes opportunities-extension-spin {\n to { transform: rotate(360deg); }\n }\n\n .opportunities-extension-icon-button {\n width: 36px;\n height: 36px;\n flex: 0 0 36px;\n border: 1px solid transparent;\n border-radius: 4px;\n background: transparent;\n color: #312d2a;\n font-size: 18px;\n font-weight: 600;\n line-height: 1;\n cursor: pointer;\n }\n\n .opportunities-extension-header-actions {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n }\n\n .opportunities-extension-icon-button svg {\n width: 18px;\n height: 18px;\n vertical-align: middle;\n }\n\n .opportunities-extension-icon-button .opportunities-extension-settings-icon {\n width: 20px;\n height: 20px;\n }\n\n .opportunities-extension-icon-button:hover,\n .opportunities-extension-icon-button:focus {\n border-color: #b8b2ad;\n background: #f5f4f2;\n outline: none;\n }\n\n .opportunities-extension-body {\n display: grid;\n min-height: 0;\n grid-template-rows: auto auto minmax(0, 1fr);\n gap: 16px;\n padding: 22px 40px 36px;\n background: #f5f4f2;\n overflow: hidden;\n }\n\n .opportunities-extension-form {\n display: flex;\n align-items: end;\n flex-wrap: wrap;\n gap: 24px;\n min-height: 82px;\n max-width: none;\n margin: 0;\n padding: 14px 16px;\n border: 1px solid #dedbd7;\n border-radius: 4px;\n background: #ffffff;\n }\n\n .opportunities-extension-field {\n display: grid;\n max-width: max-content;\n min-width: 270px;\n width: max-content;\n gap: 6px;\n color: #312d2a;\n font-size: 13px;\n font-weight: 600;\n line-height: 1.3;\n }\n\n .opportunities-extension-stage-dashboard {\n display: grid;\n grid-template-columns: repeat(6, minmax(0, 1fr));\n gap: 12px;\n }\n\n .opportunities-extension-stage-dashboard-card {\n display: grid;\n gap: 6px;\n min-width: 0;\n padding: 12px 16px;\n border: 1px solid #dedbd7;\n border-top: 3px solid #5f5a55;\n border-radius: 4px;\n background: #ffffff;\n }\n\n .opportunities-extension-stage-dashboard-card span {\n color: #5f5a55;\n font-size: 11px;\n font-weight: 700;\n line-height: 1.2;\n }\n\n .opportunities-extension-stage-dashboard-value {\n overflow: hidden;\n color: #312d2a;\n font-size: 22px;\n font-weight: 700;\n line-height: 1.2;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n .opportunities-extension-stage-dashboard-card[data-stage=\"SQL\"] {\n border-top-color: #008aa6;\n }\n\n .opportunities-extension-total-dashboard-card {\n border-top-color: #312d2a;\n }\n\n .opportunities-extension-stage-dashboard-card[data-stage=\"PIPELINE\"] {\n border-top-color: #6f6863;\n }\n\n .opportunities-extension-stage-dashboard-card[data-stage=\"UPSIDE\"] {\n border-top-color: #c87b00;\n }\n\n .opportunities-extension-stage-dashboard-card[data-stage=\"FORECAST\"] {\n border-top-color: #755b8b;\n }\n\n .opportunities-extension-stage-dashboard-card[data-stage=\"WON\"] {\n border-top-color: #4b7f22;\n }\n\n .opportunities-extension-stage-filter {\n display: grid;\n grid-template-rows: auto 44px;\n gap: 6px;\n min-width: 0;\n }\n\n .opportunities-extension-stage-filter-label {\n color: #312d2a;\n font-size: 13px;\n font-weight: 600;\n line-height: 1.3;\n }\n\n .opportunities-extension-stage-filter-controls {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: 8px;\n }\n\n .opportunities-extension-stage-filter-button {\n min-height: 36px;\n padding: 6px 12px;\n border: 1px solid currentColor;\n border-radius: 18px;\n background: #ffffff;\n color: #5f5a55;\n font-size: 12px;\n font-weight: 700;\n letter-spacing: 0;\n line-height: 1.2;\n cursor: pointer;\n }\n\n .opportunities-extension-stage-filter-button[data-stage=\"SQL\"] {\n color: #006b84;\n }\n\n .opportunities-extension-stage-filter-button[data-stage=\"PIPELINE\"] {\n color: #5f5a55;\n }\n\n .opportunities-extension-stage-filter-button[data-stage=\"UPSIDE\"] {\n color: #945400;\n }\n\n .opportunities-extension-stage-filter-button[data-stage=\"FORECAST\"] {\n color: #624e74;\n }\n\n .opportunities-extension-stage-filter-button[data-stage=\"WON\"] {\n color: #3f6f17;\n }\n\n .opportunities-extension-stage-filter-button[aria-pressed=\"true\"][data-stage=\"SQL\"] {\n border-color: #006b84;\n background: #006b84;\n color: #ffffff;\n }\n\n .opportunities-extension-stage-filter-button[aria-pressed=\"true\"][data-stage=\"PIPELINE\"] {\n border-color: #5f5a55;\n background: #5f5a55;\n color: #ffffff;\n }\n\n .opportunities-extension-stage-filter-button[aria-pressed=\"true\"][data-stage=\"UPSIDE\"] {\n border-color: #945400;\n background: #945400;\n color: #ffffff;\n }\n\n .opportunities-extension-stage-filter-button[aria-pressed=\"true\"][data-stage=\"FORECAST\"] {\n border-color: #624e74;\n background: #624e74;\n color: #ffffff;\n }\n\n .opportunities-extension-stage-filter-button[aria-pressed=\"true\"][data-stage=\"WON\"] {\n border-color: #3f6f17;\n background: #3f6f17;\n color: #ffffff;\n }\n\n .opportunities-extension-stage-filter-button:focus-visible {\n outline: 2px solid #00758f;\n outline-offset: 2px;\n }\n\n .opportunities-extension-status-filter {\n display: grid;\n grid-template-rows: auto 44px;\n gap: 6px;\n min-width: 0;\n }\n\n .opportunities-extension-status-filter-label {\n color: #312d2a;\n font-size: 13px;\n font-weight: 600;\n line-height: 1.3;\n }\n\n .opportunities-extension-status-filter-controls {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: 8px;\n }\n\n .opportunities-extension-status-filter-button {\n min-height: 36px;\n padding: 6px 12px;\n border: 1px solid currentColor;\n border-radius: 18px;\n background: #ffffff;\n font-size: 12px;\n font-weight: 700;\n letter-spacing: 0;\n line-height: 1.2;\n cursor: pointer;\n }\n\n .opportunities-extension-status-filter-button[data-status=\"OPEN\"] {\n color: #197a3d;\n }\n\n .opportunities-extension-status-filter-button[data-status=\"CLOSED\"] {\n color: #4b5563;\n }\n\n .opportunities-extension-status-filter-button[data-status=\"LOST\"] {\n color: #b13b34;\n }\n\n .opportunities-extension-status-filter-button[data-status=\"WON\"] {\n color: #1f5f99;\n }\n\n .opportunities-extension-status-filter-button[aria-pressed=\"true\"][data-status=\"OPEN\"] {\n border-color: #197a3d;\n background: #197a3d;\n color: #ffffff;\n }\n\n .opportunities-extension-status-filter-button[aria-pressed=\"true\"][data-status=\"CLOSED\"] {\n border-color: #4b5563;\n background: #4b5563;\n color: #ffffff;\n }\n\n .opportunities-extension-status-filter-button[aria-pressed=\"true\"][data-status=\"LOST\"] {\n border-color: #b13b34;\n background: #b13b34;\n color: #ffffff;\n }\n\n .opportunities-extension-status-filter-button[aria-pressed=\"true\"][data-status=\"WON\"] {\n border-color: #1f5f99;\n background: #1f5f99;\n color: #ffffff;\n }\n\n .opportunities-extension-status-filter-button:focus-visible {\n outline: 2px solid #00758f;\n outline-offset: 2px;\n }\n\n .opportunities-extension-customer-filter {\n position: relative;\n display: grid;\n grid-template-rows: auto 44px;\n gap: 6px;\n min-width: 220px;\n }\n\n .opportunities-extension-customer-filter-label {\n color: #312d2a;\n font-size: 13px;\n font-weight: 600;\n line-height: 1.3;\n }\n\n .opportunities-extension-customer-filter-trigger {\n position: relative;\n min-width: 220px;\n min-height: 44px;\n padding: 10px 38px 10px 12px;\n border: 1px solid #b8b2ad;\n border-radius: 3px;\n background: #ffffff;\n color: #312d2a;\n font-size: 14px;\n line-height: 1.3;\n text-align: left;\n cursor: pointer;\n }\n\n .opportunities-extension-customer-filter-trigger::after {\n position: absolute;\n top: 50%;\n right: 16px;\n width: 0;\n height: 0;\n border-top: 6px solid #312d2a;\n border-right: 5px solid transparent;\n border-left: 5px solid transparent;\n content: \"\";\n pointer-events: none;\n transform: translateY(-50%);\n }\n\n .opportunities-extension-customer-filter-trigger:disabled {\n cursor: not-allowed;\n background: #f5f4f2;\n color: #7d7772;\n }\n\n .opportunities-extension-customer-filter-trigger:focus-visible {\n border-color: #312d2a;\n box-shadow: 0 0 0 1px #312d2a;\n outline: none;\n }\n\n .opportunities-extension-customer-filter-panel {\n position: absolute;\n top: calc(100% + 8px);\n left: 0;\n z-index: 4;\n display: grid;\n width: min(360px, calc(100vw - 80px));\n gap: 10px;\n padding: 12px;\n border: 1px solid #8f8a85;\n border-radius: 4px;\n background: #ffffff;\n box-shadow: 0 4px 12px rgba(0, 0, 0, .18);\n }\n\n .opportunities-extension-customer-filter-panel[hidden] {\n display: none !important;\n }\n\n .opportunities-extension-customer-filter-search {\n width: 100%;\n min-height: 40px;\n padding: 8px 10px;\n border: 1px solid #b8b2ad;\n border-radius: 3px;\n background: #ffffff;\n color: #312d2a;\n font-size: 14px;\n }\n\n .opportunities-extension-customer-filter-search:focus {\n border-color: #312d2a;\n box-shadow: 0 0 0 1px #312d2a;\n outline: none;\n }\n\n .opportunities-extension-customer-filter-select-all,\n .opportunities-extension-customer-filter-option {\n display: flex;\n align-items: center;\n gap: 8px;\n color: #312d2a;\n font-size: 13px;\n line-height: 1.35;\n }\n\n .opportunities-extension-customer-filter-select-all {\n min-height: 32px;\n padding-bottom: 8px;\n border-bottom: 1px solid #dedbd7;\n font-weight: 700;\n }\n\n .opportunities-extension-customer-filter-panel input[type=\"checkbox\"] {\n width: 16px;\n height: 16px;\n flex: 0 0 16px;\n accent-color: #00758f;\n }\n\n .opportunities-extension-customer-filter-list {\n display: block;\n max-height: 250px;\n overflow: auto;\n }\n\n .opportunities-extension-customer-filter-option {\n display: grid;\n grid-template-columns: 16px minmax(0, 1fr);\n align-items: start;\n min-height: 0;\n height: auto !important;\n padding: 8px 4px;\n cursor: pointer;\n }\n\n .opportunities-extension-customer-filter-option input[type=\"checkbox\"] {\n margin-top: 1px;\n }\n\n .opportunities-extension-customer-filter-option span {\n display: block;\n min-width: 0;\n line-height: 18px;\n overflow-wrap: anywhere;\n white-space: normal;\n }\n\n .opportunities-extension-customer-filter-option:hover {\n background: #f5f4f2;\n }\n\n .opportunities-extension-customer-filter-empty {\n margin: 4px 0;\n color: #5f5a55;\n font-size: 13px;\n }\n\n .opportunities-extension-table-search-field {\n display: grid;\n grid-template-rows: auto 44px;\n gap: 6px;\n width: 260px;\n color: #312d2a;\n font-size: 13px;\n font-weight: 600;\n line-height: 1.3;\n }\n\n .opportunities-extension-table-search-field input {\n width: 100%;\n min-height: 44px;\n padding: 10px 12px;\n border: 1px solid #b8b2ad;\n border-radius: 3px;\n background: #ffffff;\n color: #312d2a;\n font-size: 14px;\n line-height: 1.3;\n }\n\n .opportunities-extension-table-search-field input:focus {\n border-color: #312d2a;\n box-shadow: 0 0 0 1px #312d2a;\n outline: none;\n }\n\n .opportunities-extension-select-wrap {\n position: relative;\n display: block;\n width: 270px;\n max-width: 100%;\n }\n\n .opportunities-extension-select-wrap::after {\n position: absolute;\n top: 50%;\n right: 16px;\n width: 0;\n height: 0;\n border-left: 5px solid transparent;\n border-right: 5px solid transparent;\n border-top: 6px solid #000000;\n content: \"\";\n pointer-events: none;\n transform: translateY(-50%);\n }\n\n .opportunities-extension-field select {\n width: 100%;\n min-width: 0;\n max-width: 100%;\n min-height: 44px;\n box-sizing: border-box;\n appearance: none;\n border: 1px solid #b8b2ad;\n border-radius: 3px;\n background: #ffffff;\n color: #000000;\n font-size: 14px;\n line-height: 1.3;\n padding: 11px 44px 11px 12px;\n }\n\n .opportunities-extension-field select:focus {\n border-color: #312d2a;\n box-shadow: 0 0 0 1px #312d2a;\n outline: none;\n }\n\n .opportunities-extension-table-surface {\n min-height: 0;\n height: 100%;\n border: 1px solid #dedbd7;\n border-radius: 4px;\n background: #ffffff;\n overflow-x: auto;\n overflow-y: auto;\n }\n\n .opportunities-extension-table {\n width: 100%;\n min-width: 0;\n border-collapse: collapse;\n table-layout: fixed;\n color: #312d2a;\n font-size: 13px;\n line-height: 1.35;\n }\n\n .opportunities-extension-table thead {\n background: #faf9f8;\n }\n\n .opportunities-extension-table th {\n position: sticky;\n top: 0;\n z-index: 1;\n height: 44px;\n border-bottom: 1px solid #b8b2ad;\n background: #faf9f8;\n color: #312d2a;\n font-size: 12px;\n font-weight: 700;\n text-align: left;\n white-space: nowrap;\n }\n\n .opportunities-extension-table td {\n min-height: 48px;\n padding: 12px 16px;\n border-bottom: 1px solid #ebe8e5;\n vertical-align: middle;\n overflow-wrap: anywhere;\n }\n\n .opportunities-extension-table th:nth-child(1) {\n width: 16%;\n }\n\n .opportunities-extension-table th:nth-child(2) {\n width: 8%;\n }\n\n .opportunities-extension-table th:nth-child(3) {\n width: 18%;\n }\n\n .opportunities-extension-table th:nth-child(4) {\n width: 11%;\n }\n\n .opportunities-extension-table th:nth-child(5) {\n width: 8%;\n }\n\n .opportunities-extension-table th:nth-child(6) {\n width: 8%;\n }\n\n .opportunities-extension-table th:nth-child(7) {\n width: 7%;\n }\n\n .opportunities-extension-table th:nth-child(8) {\n width: 6%;\n }\n\n .opportunities-extension-table th:nth-child(9) {\n width: 7%;\n }\n\n .opportunities-extension-table th:nth-child(10) {\n width: 7%;\n }\n\n .opportunities-extension-table th:nth-child(11) {\n width: 4%;\n }\n\n .opportunities-extension-table td:nth-child(2),\n .opportunities-extension-table td:nth-child(5),\n .opportunities-extension-table td:nth-child(6),\n .opportunities-extension-table td:nth-child(8) {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n .opportunities-extension-table td:nth-child(9) {\n padding-right: 6px;\n padding-left: 6px;\n white-space: nowrap;\n overflow: visible;\n }\n\n .opportunities-extension-table td:nth-child(7) {\n padding-right: 6px;\n padding-left: 6px;\n white-space: nowrap;\n overflow: visible;\n }\n\n .opportunities-extension-table td:nth-child(10) {\n padding-right: 6px;\n padding-left: 6px;\n font-size: 12px;\n white-space: nowrap;\n }\n\n .opportunities-extension-table td:nth-child(11) {\n padding-right: 6px;\n padding-left: 6px;\n text-align: center;\n white-space: nowrap;\n }\n\n .opportunities-extension-table tbody tr:hover {\n background: #f7f6f4;\n }\n\n .opportunities-extension-table tbody tr:last-child td {\n border-bottom: 0;\n }\n\n .opportunities-extension-table a {\n color: #006b84;\n text-decoration: underline;\n text-decoration-thickness: 1px;\n text-underline-offset: 2px;\n }\n\n .opportunities-extension-table a:hover {\n color: #004f63;\n }\n\n .opportunities-extension-opty-number-content {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n max-width: 100%;\n }\n\n .opportunities-extension-name-content {\n display: flex;\n align-items: center;\n gap: 8px;\n min-width: 0;\n }\n\n .opportunities-extension-name-content > a {\n min-width: 0;\n }\n\n .opportunities-extension-actions-content {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 4px;\n white-space: nowrap;\n }\n\n .opportunities-extension-products-count {\n display: inline-grid;\n width: auto;\n min-width: 20px;\n height: 20px;\n place-items: center;\n flex: 0 0 auto;\n box-sizing: border-box;\n padding: 0 3px;\n border: 1px solid #7ca7b2;\n border-radius: 999px;\n background: #e8f4f6;\n color: #006d7a;\n font-size: 10px;\n font-weight: 700;\n line-height: 1;\n text-align: center;\n vertical-align: middle;\n cursor: pointer;\n }\n\n .opportunities-extension-products-count:hover,\n .opportunities-extension-products-count:focus-visible,\n .opportunities-extension-products-count[aria-expanded=\"true\"] {\n border-color: #00758f;\n background: #00758f;\n color: #ffffff;\n outline: none;\n }\n\n .opportunities-extension-products-count-error {\n border-color: #d8887e;\n background: #f9e3e1;\n color: #a52b1c;\n }\n\n .opportunities-extension-products-detail-row:hover {\n background: transparent !important;\n }\n\n .opportunities-extension-products-detail-cell {\n padding: 0 !important;\n }\n\n .opportunities-extension-products-detail {\n padding: 14px 20px 18px;\n border-bottom: 1px solid #c9c5c1;\n background: #f0eeeb;\n }\n\n .opportunities-extension-products-detail-heading {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 12px;\n margin-bottom: 10px;\n color: #312d2a;\n }\n\n .opportunities-extension-ai-summary {\n box-sizing: border-box;\n width: 100%;\n min-width: 0;\n margin: 0 0 12px;\n padding: 12px 16px;\n border: 1px solid #dedbd7;\n border-radius: 6px;\n background: #ffffff;\n color: #312d2a;\n font-size: 13px;\n line-height: 1.5;\n text-align: left;\n white-space: normal;\n overflow-wrap: anywhere;\n }\n\n .opportunities-extension-ai-summary strong {\n display: block;\n font-size: 13px;\n font-weight: 600;\n }\n\n .opportunities-extension-ai-summary p {\n margin: 4px 0 0;\n font: inherit;\n white-space: pre-wrap;\n }\n\n .opportunities-extension-ai-summary-error {\n color: #b42318;\n border-color: #d9928b;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-ai-summary {\n background: #292827;\n color: #f6f4f2;\n border-color: #5f5a55;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-ai-summary-error {\n color: #ffb4ab;\n border-color: #a45c55;\n }\n\n .opportunities-extension-products-detail-heading strong {\n font-size: 13px;\n }\n\n .opportunities-extension-products-detail-heading span {\n color: #5f5a55;\n font-size: 11px;\n font-weight: 600;\n text-transform: uppercase;\n }\n\n .opportunities-extension-products-table {\n width: 100%;\n table-layout: fixed;\n border-collapse: collapse;\n border: 1px solid #dedbd7;\n background: #ffffff;\n font-size: 12px;\n }\n\n .opportunities-extension-products-table th,\n .opportunities-extension-products-table td {\n position: static;\n height: auto;\n padding: 8px 10px;\n border-bottom: 1px solid #ebe8e5;\n background: transparent;\n overflow-wrap: anywhere;\n vertical-align: middle;\n white-space: normal;\n }\n\n .opportunities-extension-products-table th {\n background: #faf9f8;\n font-size: 11px;\n }\n\n .opportunities-extension-products-table th:nth-child(1) { width: 16%; }\n .opportunities-extension-products-table th:nth-child(2) { width: 16%; }\n .opportunities-extension-products-table th:nth-child(3) { width: 8%; }\n .opportunities-extension-products-table th:nth-child(4) { width: 10%; }\n .opportunities-extension-products-table th:nth-child(5) { width: 8%; }\n .opportunities-extension-products-table th:nth-child(6) { width: 8%; }\n .opportunities-extension-products-table th:nth-child(7) { width: 7%; }\n .opportunities-extension-products-table th:nth-child(8) { width: 10%; }\n .opportunities-extension-products-table th:nth-child(9) { width: 12%; }\n .opportunities-extension-products-table th:nth-child(10) { width: 5%; }\n\n .opportunities-extension-products-empty {\n margin: 0;\n padding: 10px 0;\n color: #5f5a55;\n font-size: 13px;\n }\n\n .opportunities-extension-copy-button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex: 0 0 auto;\n width: 24px;\n height: 24px;\n padding: 3px;\n border: 0;\n border-radius: 3px;\n background: transparent;\n color: #00758f;\n cursor: pointer;\n }\n\n .opportunities-extension-copy-button svg {\n width: 16px;\n height: 16px;\n fill: currentColor;\n }\n\n .opportunities-extension-copy-button:hover,\n .opportunities-extension-copy-button:focus-visible {\n background: #e8f4f6;\n color: #004f63;\n outline: none;\n }\n\n .opportunities-extension-action-button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 32px;\n height: 32px;\n padding: 5px;\n border: 1px solid transparent;\n border-radius: 4px;\n background: transparent;\n color: #00758f;\n cursor: pointer;\n }\n\n .opportunities-extension-action-button svg {\n width: 21px;\n height: 21px;\n }\n\n .opportunities-extension-action-button:hover,\n .opportunities-extension-action-button:focus-visible {\n border-color: #7ca7b2;\n background: #e8f4f6;\n color: #004f63;\n outline: none;\n }\n\n .opportunities-extension-action-button:disabled {\n cursor: wait;\n opacity: .72;\n }\n\n .opportunities-extension-action-button-loading svg {\n animation: opportunities-extension-pulse 1s ease-in-out infinite;\n }\n\n @keyframes opportunities-extension-pulse {\n 50% { opacity: .35; }\n }\n\n .opportunities-extension-copy-toast {\n position: fixed;\n right: 28px;\n bottom: 28px;\n z-index: 3;\n max-width: min(360px, calc(100vw - 56px));\n padding: 12px 16px;\n border-radius: 4px;\n background: #2f6f18;\n box-shadow: 0 4px 12px rgba(0, 0, 0, .18);\n color: #ffffff;\n font-size: 13px;\n font-weight: 700;\n }\n\n .opportunities-extension-copy-toast-error {\n background: #a52b1c;\n }\n\n .opportunities-extension-copy-toast[hidden] {\n display: none !important;\n }\n\n .opportunities-extension-stage-badge {\n display: inline-flex;\n align-items: center;\n min-height: 24px;\n padding: 3px 8px;\n border-radius: 12px;\n background: #ebe8e5;\n color: #312d2a;\n font-size: 11px;\n font-weight: 700;\n line-height: 1.2;\n white-space: nowrap;\n }\n\n .opportunities-extension-stage-badge[data-stage=\"SQL\"] {\n background: #d9f0f5;\n color: #006b84;\n }\n\n .opportunities-extension-stage-badge[data-stage=\"PIPELINE\"] {\n background: #ebe8e5;\n color: #5f5a55;\n }\n\n .opportunities-extension-stage-badge[data-stage=\"UPSIDE\"] {\n background: #fff0d8;\n color: #945400;\n }\n\n .opportunities-extension-stage-badge[data-stage=\"FORECAST\"] {\n background: #eee8f5;\n color: #624e74;\n }\n\n .opportunities-extension-stage-badge[data-stage=\"WON\"] {\n background: #e5f1d9;\n color: #3f6f17;\n }\n\n .opportunities-extension-status-badge {\n display: inline-flex;\n align-items: center;\n min-height: 24px;\n padding: 3px 8px;\n border-radius: 12px;\n background: #ebe8e5;\n color: #312d2a;\n font-size: 11px;\n font-weight: 700;\n line-height: 1.2;\n white-space: nowrap;\n }\n\n .opportunities-extension-status-badge[data-status=\"OPEN\"] {\n background: #e2f2e5;\n color: #197a3d;\n }\n\n .opportunities-extension-status-badge[data-status=\"CLOSED\"] {\n background: #e5e7eb;\n color: #4b5563;\n }\n\n .opportunities-extension-status-badge[data-status=\"LOST\"] {\n background: #f9e3e1;\n color: #b13b34;\n }\n\n .opportunities-extension-status-badge[data-status=\"WON\"] {\n background: #e3edf8;\n color: #1f5f99;\n }\n\n .opportunities-extension-sort-button {\n position: relative;\n display: inline-flex;\n align-items: center;\n width: 100%;\n min-height: 44px;\n padding: 8px 42px 8px 16px;\n border: 0;\n background: transparent;\n color: inherit;\n font: inherit;\n font-weight: inherit;\n letter-spacing: 0;\n line-height: 1.2;\n text-align: left;\n white-space: normal;\n cursor: pointer;\n }\n\n .opportunities-extension-table-header-label {\n display: inline-flex;\n align-items: center;\n min-height: 44px;\n padding: 8px 6px;\n }\n\n .opportunities-extension-sort-button::after {\n position: absolute;\n right: 15px;\n color: #5f5a55;\n content: \"↕\";\n font-size: 16px;\n font-weight: 400;\n }\n\n .opportunities-extension-sort-button[data-sort-direction=\"ascending\"]::after {\n color: #00758f;\n content: \"↑\";\n }\n\n .opportunities-extension-sort-button[data-sort-direction=\"descending\"]::after {\n color: #00758f;\n content: \"↓\";\n }\n\n .opportunities-extension-sort-button:hover {\n background: #f0eeeb;\n }\n\n .opportunities-extension-sort-button:focus-visible {\n outline: 2px solid #00758f;\n outline-offset: -2px;\n }\n\n .opportunities-extension-table-status {\n height: 152px;\n color: #5f5a55;\n font-size: 14px;\n text-align: center;\n }\n\n .opportunities-extension-visually-hidden {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border: 0;\n }\n\n .opportunities-extension-preferences-modal {\n position: absolute;\n inset: 0;\n z-index: 3;\n display: grid;\n place-items: center;\n padding: 24px;\n background: rgba(0, 0, 0, .42);\n }\n\n .opportunities-extension-preferences-modal[hidden] {\n display: none !important;\n }\n\n .opportunities-extension-account-plans-modal {\n position: absolute;\n inset: 0;\n z-index: 4;\n display: grid;\n place-items: center;\n padding: 12px;\n background: rgba(0, 0, 0, .42);\n }\n\n .opportunities-extension-account-plans-modal[hidden] {\n display: none !important;\n }\n\n .opportunities-extension-account-plans-dialog {\n display: grid;\n width: min(1180px, 100%);\n height: min(760px, calc(100vh - 24px));\n min-width: 0;\n grid-template-rows: auto minmax(0, 1fr);\n grid-template-columns: minmax(0, 1fr);\n overflow: hidden;\n border: 1px solid #8f8a85;\n border-radius: 4px;\n background: #ffffff;\n box-shadow: 0 8px 24px rgba(0, 0, 0, .24);\n color: #312d2a;\n }\n\n .opportunities-extension-account-plans-header {\n display: flex;\n align-items: flex-start;\n justify-content: space-between;\n gap: 16px;\n padding: 14px 20px;\n border-bottom: 1px solid #dedbd7;\n }\n\n .opportunities-extension-account-plans-header h2 {\n margin: 0;\n font-size: 20px;\n line-height: 1.2;\n }\n\n .opportunities-extension-account-plans-header p {\n margin: 5px 0 0;\n color: #5f5a55;\n font-size: 13px;\n line-height: 1.35;\n }\n\n .opportunities-extension-account-plans-content {\n display: grid;\n min-width: 0;\n grid-template-rows: auto minmax(0, 1fr);\n grid-template-columns: minmax(0, 1fr);\n min-height: 0;\n overflow: hidden;\n }\n\n .opportunities-extension-account-plans-content > .opportunities-extension-account-plans-skeleton {\n grid-row: 1 / -1;\n }\n\n .opportunities-extension-account-plans-tabs-navigation {\n position: relative;\n min-width: 0;\n border-bottom: 1px solid #dedbd7;\n }\n\n .opportunities-extension-account-plans-tabs-navigation .opportunities-extension-account-plans-tab-navigation-button[hidden] {\n display: none;\n }\n\n .opportunities-extension-account-plans-tabs {\n display: flex;\n min-width: 0;\n gap: 4px;\n overflow-x: auto;\n padding: 8px 20px 0;\n scrollbar-width: none;\n }\n\n .opportunities-extension-account-plans-tabs::-webkit-scrollbar {\n display: none;\n }\n\n .opportunities-extension-account-plans-tab-navigation-button {\n display: grid;\n position: absolute;\n z-index: 1;\n top: 50%;\n width: 32px;\n height: 32px;\n place-items: center;\n padding: 0;\n border: 1px solid #8f8a85;\n border-radius: 4px;\n background: #ffffff;\n color: #312d2a;\n box-shadow: 0 2px 6px rgba(0, 0, 0, .16);\n transform: translateY(-50%);\n cursor: pointer;\n }\n\n .opportunities-extension-account-plans-tab-navigation-button:first-child {\n left: 8px;\n }\n\n .opportunities-extension-account-plans-tab-navigation-button:last-child {\n right: 8px;\n }\n\n .opportunities-extension-account-plans-tab-navigation-button:hover:not(:disabled) {\n border-color: #00758f;\n background: #f0eeeb;\n color: #005e73;\n }\n\n .opportunities-extension-account-plans-tab-navigation-button:disabled {\n border-color: #dedbd7;\n color: #b8b2ad;\n cursor: default;\n }\n\n .opportunities-extension-account-plans-tab-navigation-button:focus-visible {\n outline: 2px solid #00758f;\n outline-offset: 2px;\n }\n\n .opportunities-extension-account-plans-tab-navigation-button svg {\n width: 18px;\n height: 18px;\n }\n\n .opportunities-extension-account-plans-panels {\n min-width: 0;\n min-height: 0;\n overflow: hidden;\n }\n\n .opportunities-extension-account-plan-tab {\n min-height: 38px;\n flex: 0 0 auto;\n padding: 7px 12px;\n border: 0;\n border-bottom: 3px solid transparent;\n background: transparent;\n color: #5f5a55;\n font-size: 13px;\n font-weight: 600;\n cursor: pointer;\n }\n\n .opportunities-extension-account-plan-tab:hover {\n background: #f0eeeb;\n color: #312d2a;\n }\n\n .opportunities-extension-account-plan-tab[aria-selected=\"true\"] {\n border-bottom-color: #00758f;\n color: #006d7a;\n }\n\n .opportunities-extension-account-plan-tab:focus-visible {\n outline: 2px solid #00758f;\n outline-offset: -2px;\n }\n\n .opportunities-extension-account-plan-panel {\n display: grid;\n height: 100%;\n min-height: 0;\n grid-template-rows: auto minmax(0, 1fr);\n box-sizing: border-box;\n padding: 16px 20px;\n }\n\n .opportunities-extension-account-plan-panel[hidden] {\n display: none !important;\n }\n\n .opportunities-extension-account-plan-details {\n display: grid;\n grid-template-columns: repeat(3, minmax(0, 1fr));\n gap: 0 24px;\n margin: 0;\n }\n\n .opportunities-extension-account-plan-details > div {\n display: grid;\n grid-template-columns: minmax(104px, 38%) minmax(0, 1fr);\n gap: 10px;\n min-height: 42px;\n align-items: center;\n padding: 7px 0;\n border-bottom: 1px solid #ebe8e5;\n }\n\n .opportunities-extension-account-plan-details dt {\n color: #5f5a55;\n font-size: 12px;\n font-weight: 700;\n }\n\n .opportunities-extension-account-plan-details dd {\n min-width: 0;\n margin: 0;\n color: #312d2a;\n font-size: 13px;\n overflow-wrap: anywhere;\n }\n\n .opportunities-extension-consumption-trend {\n display: grid;\n min-height: 0;\n grid-template-rows: auto minmax(0, 1fr);\n margin-top: 14px;\n padding-top: 12px;\n border-top: 1px solid #dedbd7;\n }\n\n .opportunities-extension-consumption-trend-header {\n display: flex;\n align-items: center;\n justify-content: flex-end;\n gap: 24px;\n }\n\n .opportunities-extension-consumption-periods {\n display: flex;\n align-items: center;\n gap: 4px;\n }\n\n .opportunities-extension-consumption-periods button {\n min-height: 38px;\n padding: 7px 14px;\n border: 1px solid transparent;\n border-radius: 4px;\n background: transparent;\n color: #312d2a;\n font-size: 13px;\n font-weight: 600;\n line-height: 1.2;\n cursor: pointer;\n }\n\n .opportunities-extension-consumption-periods button:hover {\n background: #f0eeeb;\n }\n\n .opportunities-extension-consumption-periods button[aria-pressed=\"true\"] {\n border-color: #00758f;\n background: #e7f6f8;\n color: #005e73;\n }\n\n .opportunities-extension-consumption-periods button:focus-visible,\n .opportunities-extension-consumption-navigation-button:focus-visible {\n outline: 2px solid #00758f;\n outline-offset: 2px;\n }\n\n .opportunities-extension-consumption-chart {\n display: grid;\n min-height: 0;\n grid-template-rows: auto minmax(0, 1fr);\n margin-top: 4px;\n }\n\n .opportunities-extension-consumption-navigation {\n display: grid;\n grid-template-columns: 36px minmax(130px, auto) 36px;\n align-items: center;\n justify-content: center;\n gap: 8px;\n min-height: 40px;\n margin-bottom: 2px;\n }\n\n .opportunities-extension-consumption-navigation strong {\n color: #312d2a;\n font-size: 13px;\n text-align: center;\n }\n\n .opportunities-extension-consumption-navigation-button {\n display: grid;\n width: 36px;\n height: 36px;\n place-items: center;\n padding: 0;\n border: 1px solid #8f8a85;\n border-radius: 4px;\n background: #ffffff;\n color: #312d2a;\n cursor: pointer;\n }\n\n .opportunities-extension-consumption-navigation-button:hover:not(:disabled) {\n border-color: #00758f;\n background: #f0eeeb;\n color: #005e73;\n }\n\n .opportunities-extension-consumption-navigation-button:disabled {\n border-color: #dedbd7;\n color: #b8b2ad;\n cursor: default;\n }\n\n .opportunities-extension-consumption-navigation-button svg {\n width: 18px;\n height: 18px;\n }\n\n .opportunities-extension-consumption-figure {\n position: relative;\n min-width: 0;\n min-height: 0;\n margin: 0;\n scrollbar-width: none;\n }\n\n .opportunities-extension-consumption-figure::-webkit-scrollbar {\n display: none;\n }\n\n .opportunities-extension-consumption-visual {\n display: grid;\n height: 100%;\n min-height: 0;\n grid-template-columns: minmax(0, 1fr) 176px;\n align-items: center;\n gap: 16px;\n }\n\n .opportunities-extension-consumption-svg {\n display: block;\n width: 100%;\n height: 300px;\n min-height: 0;\n overflow: visible;\n }\n\n .opportunities-extension-consumption-svg .consumption-grid-line {\n stroke: #dedbd7;\n stroke-width: 1;\n shape-rendering: crispEdges;\n }\n\n .opportunities-extension-consumption-svg .consumption-axis-label,\n .opportunities-extension-consumption-svg .consumption-x-label {\n fill: #5f5a55;\n font-family: Arial, sans-serif;\n font-size: 12px;\n }\n\n .opportunities-extension-consumption-svg .consumption-value-label {\n fill: #312d2a;\n font-family: Arial, sans-serif;\n font-size: 12px;\n font-weight: 700;\n }\n\n .opportunities-extension-consumption-svg .consumption-bar-funded {\n fill: #b77888;\n }\n\n .opportunities-extension-consumption-svg .consumption-bar-overage {\n fill: #de7907;\n }\n\n .opportunities-extension-consumption-svg .consumption-average-line {\n stroke: #de7907;\n stroke-width: 1.5;\n stroke-dasharray: 6 6;\n }\n\n .opportunities-extension-consumption-svg .consumption-bar-group {\n cursor: default;\n outline: none;\n }\n\n .opportunities-extension-consumption-svg .consumption-bar-group rect {\n transition: filter .16s ease, opacity .16s ease, stroke .16s ease;\n }\n\n .opportunities-extension-consumption-svg .consumption-bar-group:hover rect,\n .opportunities-extension-consumption-svg .consumption-bar-group:focus rect {\n filter: brightness(1.06);\n stroke: #312d2a;\n stroke-width: 1.5;\n }\n\n .opportunities-extension-consumption-svg .consumption-animated-label {\n opacity: 0;\n animation: opportunities-extension-consumption-label-in .24s ease-out forwards;\n }\n\n .opportunities-extension-consumption-svg .consumption-animated-average {\n opacity: 0;\n animation: opportunities-extension-consumption-average-in .35s .32s ease-out forwards;\n }\n\n @keyframes opportunities-extension-consumption-label-in {\n from { opacity: 0; transform: translateY(4px); }\n to { opacity: 1; transform: translateY(0); }\n }\n\n @keyframes opportunities-extension-consumption-average-in {\n from { opacity: 0; }\n to { opacity: 1; }\n }\n\n .opportunities-extension-consumption-legend {\n display: grid;\n align-content: center;\n gap: 4px;\n }\n\n .opportunities-extension-consumption-legend button {\n display: grid;\n min-width: 0;\n grid-template-columns: 16px minmax(0, 1fr);\n align-items: center;\n gap: 8px;\n padding: 6px 4px;\n border: 0;\n border-radius: 4px;\n background: transparent;\n color: #312d2a;\n font-size: 12px;\n line-height: 1.25;\n text-align: left;\n cursor: pointer;\n }\n\n .opportunities-extension-consumption-legend button:hover {\n background: #f0eeeb;\n }\n\n .opportunities-extension-consumption-legend button:focus-visible {\n outline: 2px solid #00758f;\n outline-offset: 1px;\n }\n\n .opportunities-extension-consumption-legend button[aria-pressed=\"false\"] {\n color: #77726d;\n opacity: .55;\n }\n\n .opportunities-extension-consumption-legend-swatch {\n display: block;\n width: 12px;\n height: 12px;\n justify-self: center;\n }\n\n .opportunities-extension-consumption-legend-funded {\n background: #b77888;\n }\n\n .opportunities-extension-consumption-legend-overage {\n background: #de7907;\n }\n\n .opportunities-extension-consumption-legend-average {\n height: 0;\n border-top: 2px dashed #de7907;\n }\n\n .opportunities-extension-consumption-tooltip {\n position: absolute;\n z-index: 2;\n display: grid;\n min-width: 190px;\n max-width: 260px;\n gap: 4px;\n padding: 10px 12px;\n border: 1px solid #8f8a85;\n border-radius: 4px;\n background: #ffffff;\n box-shadow: 0 4px 12px rgba(0, 0, 0, .2);\n color: #312d2a;\n font-size: 12px;\n line-height: 1.3;\n pointer-events: none;\n }\n\n .opportunities-extension-consumption-tooltip[hidden] {\n display: none !important;\n }\n\n .opportunities-extension-consumption-tooltip strong {\n margin-bottom: 2px;\n font-size: 13px;\n }\n\n .opportunities-extension-consumption-chart-skeleton {\n height: 100%;\n min-height: 0;\n padding: 34px 62px 24px;\n box-sizing: border-box;\n }\n\n .opportunities-extension-consumption-chart-skeleton-plot {\n display: flex;\n height: 100%;\n min-height: 220px;\n align-items: flex-end;\n justify-content: space-around;\n gap: 12px;\n padding: 0 14px;\n border-bottom: 1px solid #dedbd7;\n border-left: 1px solid #dedbd7;\n }\n\n .opportunities-extension-consumption-chart-skeleton-plot span {\n width: min(38px, 6%);\n border-radius: 2px 2px 0 0;\n background: #dedbd7;\n animation: opportunities-extension-skeleton-pulse 1.15s ease-in-out infinite alternate;\n }\n\n .opportunities-extension-consumption-chart-empty,\n .opportunities-extension-consumption-chart-error {\n display: grid;\n min-height: 220px;\n place-items: center;\n margin: 0;\n color: #5f5a55;\n font-size: 14px;\n text-align: center;\n }\n\n .opportunities-extension-consumption-chart-error {\n color: #9f2d20;\n }\n\n .opportunities-extension-account-plan-status-indicator {\n display: inline-block;\n width: 10px;\n height: 10px;\n border-radius: 50%;\n background: #9b9691;\n box-shadow: 0 0 0 3px #efedeb;\n vertical-align: middle;\n }\n\n .opportunities-extension-account-plan-status-indicator[data-active=\"true\"] {\n background: #3f6f17;\n box-shadow: 0 0 0 3px #e2f2e5;\n }\n\n .opportunities-extension-account-plan-tab .opportunities-extension-account-plan-status-indicator {\n margin-right: 8px;\n }\n\n .opportunities-extension-account-plans-skeleton-tabs {\n display: flex;\n min-height: 46px;\n align-items: center;\n padding: 0 20px;\n border-bottom: 1px solid #dedbd7;\n }\n\n .opportunities-extension-account-plans-skeleton {\n display: grid;\n height: 100%;\n min-height: 0;\n grid-template-rows: auto minmax(0, 1fr);\n overflow: hidden;\n }\n\n .opportunities-extension-account-plans-skeleton-panel {\n padding: 16px 20px;\n }\n\n .opportunities-extension-account-plans-skeleton-tab {\n display: inline-flex;\n align-items: center;\n gap: 9px;\n min-height: 38px;\n padding: 0 12px;\n border-bottom: 3px solid #00758f;\n }\n\n .opportunities-extension-account-plans-skeleton-status {\n display: block;\n width: 10px;\n height: 10px;\n flex: 0 0 auto;\n border-radius: 50%;\n background: #dedbd7;\n box-shadow: 0 0 0 3px #efedeb;\n animation: opportunities-extension-skeleton-pulse 1.15s ease-in-out infinite alternate;\n }\n\n .opportunities-extension-account-plans-skeleton-details {\n display: grid;\n grid-template-columns: repeat(3, minmax(0, 1fr));\n gap: 0 24px;\n padding: 0;\n }\n\n .opportunities-extension-account-plans-skeleton-details > div {\n display: grid;\n grid-template-columns: minmax(104px, 38%) minmax(0, 1fr);\n align-items: center;\n gap: 10px;\n min-height: 42px;\n padding: 7px 0;\n border-bottom: 1px solid #ebe8e5;\n }\n\n .opportunities-extension-account-plans-skeleton-bar {\n display: block;\n height: 12px;\n border-radius: 3px;\n background: #dedbd7;\n animation: opportunities-extension-skeleton-pulse 1.15s ease-in-out infinite alternate;\n }\n\n .opportunities-extension-account-plans-skeleton-tabs .opportunities-extension-account-plans-skeleton-bar {\n height: 14px;\n }\n\n .opportunities-extension-account-plans-skeleton-label {\n width: 74%;\n height: 10px;\n }\n\n .opportunities-extension-account-plans-skeleton-trend {\n display: grid;\n min-height: 0;\n grid-template-rows: auto auto minmax(0, 1fr);\n margin: 14px 0 0;\n padding-top: 12px;\n border-top: 1px solid #dedbd7;\n }\n\n .opportunities-extension-account-plans-skeleton-trend-header {\n display: flex;\n justify-content: flex-end;\n min-height: 38px;\n }\n\n .opportunities-extension-account-plans-skeleton-periods {\n display: flex;\n align-items: center;\n gap: 16px;\n }\n\n .opportunities-extension-account-plans-skeleton-periods .opportunities-extension-account-plans-skeleton-bar {\n height: 12px;\n }\n\n .opportunities-extension-account-plans-skeleton-period-active {\n height: 38px !important;\n border: 1px solid #8cc8d3;\n background: #e7f6f8;\n }\n\n .opportunities-extension-account-plans-skeleton-navigation {\n display: grid;\n grid-template-columns: 32px 124px 32px;\n align-items: center;\n justify-content: center;\n gap: 8px;\n min-height: 54px;\n }\n\n .opportunities-extension-account-plans-skeleton-navigation .opportunities-extension-account-plans-skeleton-bar {\n justify-self: center;\n }\n\n .opportunities-extension-account-plans-skeleton-chart {\n display: grid;\n min-height: 0;\n grid-template-columns: minmax(0, 1fr) 150px;\n align-items: center;\n gap: 28px;\n padding: 12px 14px 0 62px;\n }\n\n .opportunities-extension-account-plans-skeleton-plot {\n display: flex;\n position: relative;\n height: 300px;\n min-height: 0;\n box-sizing: border-box;\n align-items: flex-end;\n justify-content: space-around;\n gap: 12px;\n padding: 0 14px 64px;\n background: repeating-linear-gradient(to bottom, transparent 0, transparent 58px, #ebe8e5 58px, #ebe8e5 59px) left top / 100% 236px no-repeat;\n }\n\n .opportunities-extension-account-plans-skeleton-plot::before,\n .opportunities-extension-account-plans-skeleton-plot::after {\n position: absolute;\n display: block;\n content: \"\";\n background: #dedbd7;\n }\n\n .opportunities-extension-account-plans-skeleton-plot::before {\n top: 0;\n bottom: 64px;\n left: 0;\n width: 1px;\n }\n\n .opportunities-extension-account-plans-skeleton-plot::after {\n right: 0;\n bottom: 64px;\n left: 0;\n height: 1px;\n }\n\n .opportunities-extension-account-plans-skeleton-plot .opportunities-extension-account-plans-skeleton-bar {\n width: min(38px, 7%);\n flex: 0 1 38px;\n border-radius: 2px 2px 0 0;\n }\n\n .opportunities-extension-account-plans-skeleton-legend {\n display: grid;\n align-content: center;\n gap: 18px;\n min-height: 0;\n }\n\n .opportunities-extension-account-plans-skeleton-legend .opportunities-extension-account-plans-skeleton-bar {\n height: 11px;\n }\n\n @keyframes opportunities-extension-skeleton-pulse {\n from { opacity: .48; }\n to { opacity: 1; }\n }\n\n @media (prefers-reduced-motion: reduce) {\n .opportunities-extension-account-plans-skeleton-bar,\n .opportunities-extension-consumption-chart-skeleton-plot span,\n .opportunities-extension-consumption-svg .consumption-animated-label,\n .opportunities-extension-consumption-svg .consumption-animated-average {\n animation: none;\n opacity: 1;\n }\n }\n\n .opportunities-extension-account-plans-empty,\n .opportunities-extension-account-plans-error {\n margin: 0;\n padding: 28px 20px;\n color: #5f5a55;\n font-size: 14px;\n }\n\n .opportunities-extension-account-plans-error {\n color: #9f2d20;\n }\n\n .opportunities-extension-preferences-dialog {\n display: grid;\n width: min(680px, 100%);\n max-height: min(720px, calc(100vh - 48px));\n grid-template-rows: auto minmax(0, 1fr) auto;\n overflow: hidden;\n border: 1px solid #8f8a85;\n border-radius: 4px;\n background: #ffffff;\n box-shadow: 0 8px 24px rgba(0, 0, 0, .24);\n color: #312d2a;\n }\n\n .opportunities-extension-preferences-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 16px;\n padding: 18px 20px;\n border-bottom: 1px solid #dedbd7;\n }\n\n .opportunities-extension-preferences-header h2 {\n margin: 0;\n font-size: 20px;\n font-weight: 700;\n line-height: 1.2;\n }\n\n .opportunities-extension-preferences-content {\n min-height: 0;\n overflow: auto;\n padding: 20px;\n }\n\n .opportunities-extension-preferences-fieldset {\n min-width: 0;\n margin: 0;\n padding: 0;\n border: 0;\n }\n\n .opportunities-extension-preferences-fieldset legend {\n margin-bottom: 12px;\n padding: 0;\n color: #312d2a;\n font-size: 15px;\n font-weight: 700;\n line-height: 1.3;\n }\n\n .opportunities-extension-preferences-options {\n display: grid;\n grid-template-columns: repeat(2, minmax(0, 1fr));\n gap: 4px 20px;\n }\n\n .opportunities-extension-preferences-option {\n display: flex;\n align-items: flex-start;\n gap: 10px;\n min-width: 0;\n padding: 9px 8px;\n border-radius: 4px;\n color: #312d2a;\n font-size: 14px;\n line-height: 1.35;\n cursor: pointer;\n }\n\n .opportunities-extension-preferences-option:hover {\n background: #f0eeeb;\n }\n\n .opportunities-extension-preferences-option input {\n width: 18px;\n height: 18px;\n flex: 0 0 18px;\n margin: 0;\n accent-color: #00758f;\n cursor: pointer;\n }\n\n .opportunities-extension-preferences-cache-field {\n display: grid;\n width: min(280px, 100%);\n gap: 6px;\n margin-top: 24px;\n color: #312d2a;\n font-size: 14px;\n font-weight: 700;\n }\n\n .opportunities-extension-preferences-cache-field select {\n width: 100%;\n height: 40px;\n padding: 0 36px 0 12px;\n border: 1px solid #8f8a85;\n border-radius: 4px;\n background: #ffffff;\n color: #312d2a;\n font-size: 14px;\n font-weight: 400;\n }\n\n .opportunities-extension-preferences-cache-field select:focus {\n border-color: #00758f;\n outline: 2px solid #bde7ee;\n outline-offset: 0;\n }\n\n .opportunities-extension-preferences-footer {\n display: flex;\n justify-content: flex-end;\n padding: 14px 20px;\n border-top: 1px solid #dedbd7;\n }\n\n .opportunities-extension-button {\n min-width: 88px;\n min-height: 36px;\n padding: 7px 16px;\n border: 1px solid transparent;\n border-radius: 4px;\n font-size: 14px;\n font-weight: 600;\n line-height: 1.2;\n cursor: pointer;\n }\n\n .opportunities-extension-button-primary {\n border-color: #00758f;\n background: #00758f;\n color: #ffffff;\n }\n\n .opportunities-extension-button-primary:hover,\n .opportunities-extension-button-primary:focus-visible {\n border-color: #005e73;\n background: #005e73;\n outline: none;\n }\n\n .opportunities-extension-debug-panel {\n position: fixed;\n right: 24px;\n bottom: 24px;\n z-index: 1;\n width: min(640px, calc(100vw - 48px));\n max-height: min(560px, calc(100vh - 120px));\n overflow: auto;\n border: 1px solid #8f8a85;\n border-radius: 4px;\n background: #ffffff;\n box-shadow: 0 2px 8px rgba(0, 0, 0, .16);\n padding: 16px;\n color: #000000;\n }\n\n .opportunities-extension-debug-panel[hidden] {\n display: none !important;\n }\n\n .opportunities-extension-debug-panel h2 {\n margin: 0;\n font-size: 18px;\n font-weight: 700;\n line-height: 1.25;\n }\n\n .opportunities-extension-debug-panel p {\n margin: 4px 0 0;\n color: #5f5a55;\n font-size: 13px;\n }\n\n .opportunities-extension-debug-panel-header {\n display: flex;\n align-items: flex-start;\n justify-content: space-between;\n gap: 12px;\n margin-bottom: 12px;\n }\n\n .opportunities-extension-debug-visibility-button {\n width: 34px;\n height: 34px;\n flex: 0 0 34px;\n color: #312d2a;\n }\n\n .opportunities-extension-debug-visibility-button svg {\n width: 20px;\n height: 20px;\n }\n\n .opportunities-extension-debug-list {\n display: grid;\n gap: 10px;\n }\n\n .opportunities-extension-debug-item {\n border: 1px solid #dedbd7;\n border-left-width: 4px;\n border-radius: 4px;\n background: #faf9f8;\n }\n\n .opportunities-extension-debug-item[open] {\n background: #ffffff;\n }\n\n .opportunities-extension-debug-item-success {\n border-left-color: #3f6f17;\n }\n\n .opportunities-extension-debug-item-success .opportunities-extension-debug-status {\n background: #e2f2e5;\n color: #356d19;\n }\n\n .opportunities-extension-debug-item-failed {\n border-left-color: #c5331f;\n }\n\n .opportunities-extension-debug-item-failed .opportunities-extension-debug-status {\n background: #f9e3e1;\n color: #a52b1c;\n }\n\n .opportunities-extension-debug-item-pending {\n border-left-color: #6f5a7f;\n }\n\n .opportunities-extension-debug-item-pending .opportunities-extension-debug-status {\n background: #eee8f2;\n color: #6f5a7f;\n }\n\n .opportunities-extension-debug-heading {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 12px;\n min-height: 42px;\n padding: 9px 12px 9px 10px;\n cursor: pointer;\n list-style: none;\n }\n\n .opportunities-extension-debug-heading::-webkit-details-marker {\n display: none;\n }\n\n .opportunities-extension-debug-heading::before {\n content: \"⌄\";\n width: 14px;\n color: #5f5a55;\n font-size: 16px;\n line-height: 1;\n transform: rotate(-90deg);\n transition: transform .15s ease;\n }\n\n .opportunities-extension-debug-item[open] .opportunities-extension-debug-heading::before {\n transform: rotate(0deg);\n }\n\n .opportunities-extension-debug-summary-meta {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n margin-left: auto;\n }\n\n .opportunities-extension-debug-http-status,\n .opportunities-extension-debug-status {\n display: inline-flex;\n align-items: center;\n min-height: 22px;\n padding: 0 8px;\n border-radius: 999px;\n font-size: 11px;\n font-weight: 700;\n line-height: 1;\n text-transform: uppercase;\n }\n\n .opportunities-extension-debug-http-status {\n background: #e8f4f6;\n color: #006d7a;\n }\n\n .opportunities-extension-debug-status {\n background: #ebe8e5;\n color: #5f5a55;\n }\n\n .opportunities-extension-debug-heading strong {\n font-size: 13px;\n }\n\n .opportunities-extension-debug-item pre {\n margin: 0;\n padding: 8px 12px 12px;\n color: #312d2a;\n font-family: Consolas, \"Courier New\", monospace;\n font-size: 12px;\n line-height: 1.45;\n white-space: pre-wrap;\n word-break: break-word;\n }\n\n .opportunities-extension-debug-empty {\n padding: 14px;\n border: 1px dashed #b8b2ad;\n border-radius: 4px;\n color: #5f5a55;\n font-size: 13px;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] {\n background: #1f1f1f;\n color: #f6f4f2;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-shell,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-body {\n background: #1f1f1f;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-header {\n border-bottom-color: #4e4a46;\n background:\n linear-gradient(90deg, #a8795d 0 11%, #dd5a47 11% 23%, #876e9b 23% 36%, #00a6be 36% 51%, #dfbd76 51% 63%, transparent 63% 100%) top left / 100% 6px no-repeat,\n #292827;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-header h1,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-stage-dashboard-value,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-table,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-field,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-stage-filter-label,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-status-filter-label,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-customer-filter-label,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-table-search-field {\n color: #f6f4f2;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-header p,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plans-header p,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-stage-dashboard-card span,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-customer-filter-empty,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-products-detail-heading span,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-products-empty,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plans-empty,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plan-details dt,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-debug-panel p,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-debug-empty {\n color: #c9c5c1;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plans-error {\n color: #ffb4a8;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-chart-error {\n color: #ffb4a8;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plans-skeleton-bar {\n background: #5b5753;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plans-skeleton-status {\n background: #5b5753;\n box-shadow: 0 0 0 3px #3b3937;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plans-skeleton-period-active {\n border-color: #3f7580;\n background: #23474e;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-chart-skeleton-plot span {\n background: #5b5753;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plan-status-indicator {\n background: #8f8a85;\n box-shadow: 0 0 0 3px #3b3937;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plan-status-indicator[data-active=\"true\"] {\n background: #7fb05b;\n box-shadow: 0 0 0 3px #314527;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-form,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-stage-dashboard-card,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-table-surface,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-customer-filter-panel,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-preferences-dialog,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plans-dialog,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-products-table,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-debug-panel,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-debug-item[open] {\n border-color: #4e4a46;\n background: #292827;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-customer-filter-trigger,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-customer-filter-search,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-table-search-field input,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-field select,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-preferences-cache-field select,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-stage-filter-button,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-status-filter-button {\n border-color: #6a6560;\n background: #333130;\n color: #f6f4f2;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-customer-filter-trigger::after {\n border-top-color: #f6f4f2;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-select-wrap::after {\n border-top-color: #f6f4f2;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-customer-filter-trigger:disabled {\n background: #292827;\n color: #918b86;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-customer-filter-search::placeholder,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-table-search-field input::placeholder {\n color: #b5b0ab;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-customer-filter-select-all,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-customer-filter-option,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-preferences-header h2,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plans-header h2,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-preferences-fieldset legend,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-preferences-option,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-preferences-cache-field,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-products-detail-heading,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plan-details dd,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-debug-heading,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-debug-item pre,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-debug-panel h2 {\n color: #f6f4f2;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-navigation strong {\n color: #f6f4f2;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-chart-empty {\n color: #c9c5c1;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-customer-filter-select-all,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-table th {\n border-bottom-color: #4e4a46;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-preferences-header,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-preferences-footer,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plans-header,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plans-tabs-navigation,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plans-tabs,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plan-details > div,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plans-skeleton-tabs,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plans-skeleton-details > div {\n border-color: #4e4a46;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-trend,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-chart-skeleton-plot,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plans-skeleton-trend,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plans-skeleton-plot {\n border-color: #4e4a46;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plans-skeleton-plot {\n background: repeating-linear-gradient(to bottom, transparent 0, transparent 58px, #4e4a46 58px, #4e4a46 59px) left top / 100% 236px no-repeat;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plans-skeleton-plot::before,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plans-skeleton-plot::after {\n background: #4e4a46;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plan-tab {\n color: #c9c5c1;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plan-tab:hover {\n background: #3b3937;\n color: #f6f4f2;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plan-tab[aria-selected=\"true\"] {\n border-bottom-color: #43c4d5;\n color: #91e4ed;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-periods button {\n color: #f6f4f2;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-periods button:hover {\n background: #3b3937;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-periods button[aria-pressed=\"true\"] {\n border-color: #43c4d5;\n background: #173e43;\n color: #91e4ed;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-navigation-button,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plans-tab-navigation-button {\n border-color: #6a6560;\n background: #333130;\n color: #f6f4f2;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-navigation-button:hover:not(:disabled),\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plans-tab-navigation-button:hover:not(:disabled) {\n border-color: #43c4d5;\n background: #3b3937;\n color: #91e4ed;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-navigation-button:disabled,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plans-tab-navigation-button:disabled {\n border-color: #4e4a46;\n color: #746f6a;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-svg .consumption-grid-line {\n stroke: #4e4a46;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-svg .consumption-axis-label,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-svg .consumption-x-label {\n fill: #c9c5c1;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-svg .consumption-value-label {\n fill: #f6f4f2;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-svg .consumption-bar-funded {\n fill: #ca8798;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-svg .consumption-bar-overage {\n fill: #f09a32;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-svg .consumption-average-line {\n stroke: #f09a32;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-svg .consumption-bar-group:hover rect,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-svg .consumption-bar-group:focus rect {\n stroke: #f6f4f2;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-legend button {\n color: #f6f4f2;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-legend button:hover {\n background: #3b3937;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-legend button[aria-pressed=\"false\"] {\n color: #a8a39e;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-legend-funded {\n background: #ca8798;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-legend-overage {\n background: #f09a32;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-legend-average {\n border-top-color: #f09a32;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-tooltip {\n border-color: #6a6560;\n background: #333130;\n color: #f6f4f2;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-preferences-option:hover {\n background: #3b3937;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-preferences-option input {\n accent-color: #43c4d5;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-button-primary {\n border-color: #00a6be;\n background: #008aa6;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-button-primary:hover,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-button-primary:focus-visible {\n border-color: #43c4d5;\n background: #006d7a;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-customer-filter-option:hover,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-table tbody tr:hover,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-sort-button:hover,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-icon-button:hover,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-icon-button:focus {\n background: #3b3937;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-table thead,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-table th,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-products-table th {\n background: #333130;\n color: #f6f4f2;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-table td {\n border-bottom-color: #3f3c39;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-products-detail {\n border-bottom-color: #4e4a46;\n background: #252423;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-products-table th,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-products-table td {\n border-bottom-color: #3f3c39;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-products-count {\n border-color: #2f9bae;\n background: #1d4e55;\n color: #91e4ed;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-products-count:hover,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-products-count:focus-visible,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-products-count[aria-expanded=\"true\"] {\n border-color: #43c4d5;\n background: #008aa6;\n color: #ffffff;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-products-progress[data-state=\"running\"] {\n background: #1d4e55;\n color: #91e4ed;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-products-progress[data-state=\"complete\"] {\n background: #244f2e;\n color: #a8dfb7;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-products-progress[data-state=\"complete-with-errors\"],\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-products-progress[data-state=\"error\"],\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-products-count-error {\n border-color: #b13b34;\n background: #5f2926;\n color: #ffb4ad;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-products-cache-timestamp {\n background: #3b3937;\n color: #c9c5c1;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-table a,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-copy-button,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-action-button {\n color: #43c4d5;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-table a:hover,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-copy-button:hover,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-copy-button:focus-visible,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-action-button:hover,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-action-button:focus-visible {\n background: #1d4e55;\n color: #91e4ed;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-stage-filter-button[data-stage=\"SQL\"] {\n color: #43c4d5;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-stage-filter-button[data-stage=\"PIPELINE\"] {\n color: #d1cbc6;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-stage-filter-button[data-stage=\"UPSIDE\"] {\n color: #ffbf62;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-stage-filter-button[data-stage=\"FORECAST\"] {\n color: #d2b7e9;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-stage-filter-button[data-stage=\"WON\"] {\n color: #9bd46a;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-stage-dashboard-card[data-stage=\"SQL\"] {\n border-top-color: #43c4d5;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-total-dashboard-card {\n border-top-color: #f6f4f2;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-stage-dashboard-card[data-stage=\"PIPELINE\"] {\n border-top-color: #c0b9b3;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-stage-dashboard-card[data-stage=\"UPSIDE\"] {\n border-top-color: #ffb84d;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-stage-dashboard-card[data-stage=\"FORECAST\"] {\n border-top-color: #cba7e7;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-stage-dashboard-card[data-stage=\"WON\"] {\n border-top-color: #92cf5b;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-stage-filter-button[aria-pressed=\"true\"][data-stage=\"SQL\"] {\n border-color: #008aa6;\n background: #008aa6;\n color: #ffffff;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-stage-filter-button[aria-pressed=\"true\"][data-stage=\"PIPELINE\"] {\n border-color: #6f6863;\n background: #6f6863;\n color: #ffffff;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-stage-filter-button[aria-pressed=\"true\"][data-stage=\"UPSIDE\"] {\n border-color: #b96e00;\n background: #b96e00;\n color: #ffffff;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-stage-filter-button[aria-pressed=\"true\"][data-stage=\"FORECAST\"] {\n border-color: #755b8b;\n background: #755b8b;\n color: #ffffff;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-stage-filter-button[aria-pressed=\"true\"][data-stage=\"WON\"] {\n border-color: #4b7f22;\n background: #4b7f22;\n color: #ffffff;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-status-filter-button[data-status=\"OPEN\"] {\n color: #69c985;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-status-filter-button[data-status=\"CLOSED\"] {\n color: #c3cad3;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-status-filter-button[data-status=\"LOST\"] {\n color: #ff9d94;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-status-filter-button[data-status=\"WON\"] {\n color: #83bfff;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-status-filter-button[aria-pressed=\"true\"][data-status=\"OPEN\"] {\n border-color: #197a3d;\n background: #197a3d;\n color: #ffffff;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-status-filter-button[aria-pressed=\"true\"][data-status=\"CLOSED\"] {\n border-color: #4b5563;\n background: #4b5563;\n color: #ffffff;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-status-filter-button[aria-pressed=\"true\"][data-status=\"LOST\"] {\n border-color: #b13b34;\n background: #b13b34;\n color: #ffffff;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-status-filter-button[aria-pressed=\"true\"][data-status=\"WON\"] {\n border-color: #1f5f99;\n background: #1f5f99;\n color: #ffffff;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-debug-item {\n border-color: #4e4a46;\n background: #252423;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-icon-button {\n color: #f6f4f2;\n }\n\n @media (min-width: 1201px) and (max-width: 1450px) {\n .opportunities-extension-table th:nth-child(1) {\n width: 16%;\n }\n\n .opportunities-extension-table th:nth-child(3) {\n width: 18%;\n }\n\n .opportunities-extension-table th:nth-child(4) {\n width: 12%;\n }\n\n .opportunities-extension-table th:nth-child(6) {\n width: 7%;\n }\n\n .opportunities-extension-table th:nth-child(7) {\n width: 8%;\n }\n\n .opportunities-extension-table th:nth-child(10) {\n width: 10%;\n }\n }\n\n @media (max-width: 1200px) {\n .opportunities-extension-table {\n min-width: 1180px;\n }\n\n .opportunities-extension-table th:nth-child(1) {\n width: 15%;\n }\n\n .opportunities-extension-table th:nth-child(3) {\n width: 17%;\n }\n\n .opportunities-extension-table th:nth-child(4) {\n width: 13%;\n }\n\n .opportunities-extension-table th:nth-child(6) {\n width: 6%;\n }\n\n .opportunities-extension-table th:nth-child(7) {\n width: 9%;\n }\n\n .opportunities-extension-table th:nth-child(10) {\n width: 11%;\n }\n }\n\n @media (max-width: 700px) {\n .opportunities-extension-header {\n padding: 24px 20px 18px;\n }\n\n .opportunities-extension-header::before {\n left: 20px;\n }\n\n .opportunities-extension-header h1 {\n font-size: 22px;\n }\n\n .opportunities-extension-header p {\n font-size: 14px;\n }\n\n .opportunities-extension-body {\n padding: 16px 20px 24px;\n }\n\n .opportunities-extension-form {\n align-items: stretch;\n flex-wrap: wrap;\n gap: 14px;\n min-height: auto;\n padding: 12px;\n }\n\n .opportunities-extension-field {\n max-width: none;\n width: 100%;\n }\n\n .opportunities-extension-customer-filter {\n width: 100%;\n }\n\n .opportunities-extension-customer-filter-trigger {\n width: 100%;\n }\n\n .opportunities-extension-customer-filter-panel {\n width: min(360px, calc(100vw - 64px));\n }\n\n .opportunities-extension-table-search-field {\n width: 100%;\n }\n\n .opportunities-extension-stage-dashboard {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n\n .opportunities-extension-stage-dashboard-value {\n font-size: 18px;\n }\n\n .opportunities-extension-preferences-modal {\n padding: 12px;\n }\n\n .opportunities-extension-account-plans-modal {\n padding: 12px;\n }\n\n .opportunities-extension-preferences-dialog {\n max-height: calc(100vh - 24px);\n }\n\n .opportunities-extension-account-plans-dialog {\n height: calc(100vh - 24px);\n }\n\n .opportunities-extension-account-plan-panel {\n padding: 12px 14px;\n }\n\n .opportunities-extension-account-plan-details {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n gap: 0 14px;\n }\n\n .opportunities-extension-account-plan-details > div {\n grid-template-columns: 1fr;\n align-content: center;\n gap: 3px;\n min-height: 54px;\n padding: 5px 0;\n }\n\n .opportunities-extension-account-plans-skeleton-details {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n gap: 0 14px;\n padding: 0;\n }\n\n .opportunities-extension-account-plans-skeleton-details > div {\n grid-template-columns: 1fr;\n align-content: center;\n gap: 5px;\n min-height: 54px;\n padding: 5px 0;\n }\n\n .opportunities-extension-account-plans-skeleton-trend {\n margin: 14px 0 0;\n }\n\n .opportunities-extension-account-plans-skeleton-periods {\n display: grid;\n grid-template-columns: repeat(4, minmax(0, 1fr));\n align-items: center;\n gap: 6px;\n }\n\n .opportunities-extension-account-plans-skeleton-periods .opportunities-extension-account-plans-skeleton-bar {\n width: 100% !important;\n }\n\n .opportunities-extension-account-plans-skeleton-chart {\n grid-template-columns: minmax(0, 1fr);\n gap: 12px;\n padding: 12px 8px 0 34px;\n }\n\n .opportunities-extension-account-plans-skeleton-legend {\n display: flex;\n min-height: 24px;\n align-items: center;\n justify-content: center;\n gap: 12px;\n }\n\n .opportunities-extension-consumption-trend-header {\n align-items: stretch;\n }\n\n .opportunities-extension-consumption-periods {\n display: grid;\n grid-template-columns: repeat(4, minmax(0, 1fr));\n gap: 3px;\n }\n\n .opportunities-extension-consumption-periods button {\n min-width: 0;\n padding: 7px 4px;\n font-size: 12px;\n }\n\n .opportunities-extension-consumption-chart {\n min-height: 0;\n }\n\n .opportunities-extension-consumption-svg {\n width: 760px;\n height: 245px;\n }\n\n .opportunities-extension-consumption-visual {\n width: 920px;\n grid-template-columns: 760px 144px;\n gap: 12px;\n }\n\n .opportunities-extension-consumption-figure {\n overflow-x: auto;\n overscroll-behavior-inline: contain;\n }\n\n .opportunities-extension-consumption-chart-skeleton {\n min-height: 0;\n padding: 24px 18px 18px;\n }\n\n .opportunities-extension-consumption-chart-skeleton-plot {\n min-height: 180px;\n gap: 4px;\n padding: 0 6px;\n }\n\n .opportunities-extension-preferences-options {\n grid-template-columns: 1fr;\n }\n\n .opportunities-extension-stage-filter-controls {\n gap: 6px;\n }\n\n .opportunities-extension-status-filter-controls {\n gap: 6px;\n }\n\n .opportunities-extension-table-surface {\n min-width: 0;\n min-height: calc(100vh - 230px);\n }\n\n .opportunities-extension-debug-panel {\n right: 12px;\n bottom: 12px;\n width: calc(100vw - 24px);\n max-height: calc(100vh - 96px);\n }\n }\n \n/* Full-page diagnostics, scoped to the extension and its current theme. */\n.opportunities-extension-modal .opportunities-extension-debug-panel {\n --debug-surface: #fff;\n --debug-code: #f5f6f7;\n --debug-text: #312d2a;\n --debug-muted: #5f5a55;\n --debug-border: #dedbd7;\n --debug-success: #22613b;\n --debug-success-bg: #e1f1e5;\n --debug-failed: #a12721;\n --debug-failed-bg: #fce8e6;\n --debug-pending: #805000;\n --debug-pending-bg: #fff1ce;\n --debug-info: #075e87;\n --debug-info-bg: #e5f1fa;\n --debug-key: #075e87;\n --debug-string: #22613b;\n --debug-number: #865000;\n --debug-literal: #73429b;\n position: fixed;\n inset: 0;\n z-index: 2147483647;\n display: grid;\n grid-template-rows: auto auto minmax(0, 1fr);\n width: auto;\n height: auto;\n max-height: none;\n min-width: 0;\n box-sizing: border-box;\n overflow: hidden;\n margin: 0;\n padding: 20px;\n border: 0;\n border-radius: 0;\n background: var(--debug-surface);\n color: var(--debug-text);\n color-scheme: light;\n}\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-debug-panel {\n --debug-surface: #292827;\n --debug-code: #222120;\n --debug-text: #f6f4f2;\n --debug-muted: #c9c5c1;\n --debug-border: #514c47;\n --debug-success: #a9e3bd;\n --debug-success-bg: #214d34;\n --debug-failed: #ffb4ab;\n --debug-failed-bg: #582c2a;\n --debug-pending: #ffe099;\n --debug-pending-bg: #59441e;\n --debug-info: #a8d9ff;\n --debug-info-bg: #233f52;\n --debug-key: #8ed6f0;\n --debug-string: #a9e3bd;\n --debug-number: #ffe099;\n --debug-literal: #d6b7f1;\n color: #f6f4f2;\n color-scheme: dark;\n}\n.opportunities-extension-debug-actions { display: flex; gap: 8px; flex: 0 0 auto; }\n.opportunities-extension-modal .opportunities-extension-debug-panel .opportunities-extension-debug-list {\n overflow: auto;\n min-height: 0;\n min-width: 0;\n align-content: start;\n scrollbar-gutter: stable;\n padding: 2px 8px 12px 2px;\n}\n.opportunities-extension-modal .opportunities-extension-debug-panel .opportunities-extension-debug-item {\n --debug-state: var(--debug-info);\n --debug-state-bg: var(--debug-info-bg);\n border-color: var(--debug-border);\n border-left-color: var(--debug-state);\n background: var(--debug-surface);\n min-width: 0;\n}\n.opportunities-extension-modal .opportunities-extension-debug-panel .opportunities-extension-debug-item-success { --debug-state: var(--debug-success); --debug-state-bg: var(--debug-success-bg); }\n.opportunities-extension-modal .opportunities-extension-debug-panel .opportunities-extension-debug-item-failed { --debug-state: var(--debug-failed); --debug-state-bg: var(--debug-failed-bg); }\n.opportunities-extension-modal .opportunities-extension-debug-panel .opportunities-extension-debug-item-pending { --debug-state: var(--debug-pending); --debug-state-bg: var(--debug-pending-bg); }\n.opportunities-extension-modal .opportunities-extension-debug-panel .opportunities-extension-debug-status {\n color: var(--debug-state);\n background: var(--debug-state-bg);\n}\n.opportunities-extension-modal .opportunities-extension-debug-panel .opportunities-extension-debug-http-status,\n.opportunities-extension-debug-method {\n color: var(--debug-info);\n background: var(--debug-info-bg);\n}\n.opportunities-extension-debug-method {\n display: inline-flex;\n align-items: center;\n min-height: 22px;\n padding: 0 8px;\n border-radius: 4px;\n font: 700 11px/1.2 Consolas, monospace;\n}\n.opportunities-extension-debug-method[data-method=\"POST\"] { color: var(--debug-literal); background: var(--debug-code); }\n.opportunities-extension-modal .opportunities-extension-debug-panel .opportunities-extension-debug-http-status[data-http-class=\"2\"] { color: var(--debug-success); background: var(--debug-success-bg); }\n.opportunities-extension-modal .opportunities-extension-debug-panel .opportunities-extension-debug-http-status[data-http-class=\"4\"],\n.opportunities-extension-modal .opportunities-extension-debug-panel .opportunities-extension-debug-http-status[data-http-class=\"5\"] { color: var(--debug-failed); background: var(--debug-failed-bg); }\n.opportunities-extension-modal .opportunities-extension-debug-panel .opportunities-extension-debug-http-status[data-http-class=\"pending\"] { color: var(--debug-pending); background: var(--debug-pending-bg); }\n.opportunities-extension-debug-details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding: 0 14px 16px; }\n.opportunities-extension-debug-block { min-width: 0; border-left: 2px solid var(--debug-info); padding-left: 10px; }\n.opportunities-extension-debug-block[data-direction=\"response\"] { border-left-color: var(--debug-success); }\n.opportunities-extension-modal .opportunities-extension-debug-block h3 { margin: 0 0 8px; color: var(--debug-info); font-size: 12px; }\n.opportunities-extension-modal .opportunities-extension-debug-block[data-direction=\"response\"] h3 { color: var(--debug-success); }\n.opportunities-extension-modal .opportunities-extension-debug-panel .opportunities-extension-debug-item pre {\n min-width: 0;\n margin: 0;\n padding: 12px;\n max-height: 380px;\n overflow: auto;\n white-space: pre-wrap;\n overflow-wrap: anywhere;\n color: var(--debug-text);\n background: var(--debug-code);\n line-height: 1.6;\n tab-size: 2;\n}\n.opportunities-extension-debug-json-key { color: var(--debug-key); }\n.opportunities-extension-debug-json-string { color: var(--debug-string); }\n.opportunities-extension-debug-json-number { color: var(--debug-number); }\n.opportunities-extension-debug-json-literal { color: var(--debug-literal); }\n@media (max-width: 760px) {\n .opportunities-extension-modal .opportunities-extension-debug-panel { padding: 12px; }\n .opportunities-extension-debug-details { grid-template-columns: minmax(0, 1fr); }\n}\n.opportunities-extension-debug-tabs {\n display: flex;\n flex-wrap: wrap;\n gap: 4px;\n margin-bottom: 12px;\n padding-bottom: 8px;\n border-bottom: 1px solid #dedbd7;\n}\n\n.opportunities-extension-debug-tabs button {\n max-width: 100%;\n min-height: 32px;\n padding: 6px 8px;\n border: 0;\n border-bottom: 2px solid transparent;\n border-radius: 0;\n background: transparent;\n color: inherit;\n font: inherit;\n font-size: 12px;\n line-height: 1.35;\n overflow-wrap: anywhere;\n cursor: pointer;\n}\n\n.opportunities-extension-debug-tabs button:hover {\n background: #f5f4f2;\n}\n\n.opportunities-extension-debug-tabs button[aria-selected=\"true\"] {\n border-bottom-color: #00758f;\n background: #e8f4f6;\n color: #006b84;\n font-weight: 700;\n}\n\n.opportunities-extension-debug-tabs button:focus-visible,\n.opportunities-extension-debug-list[role=\"tabpanel\"]:focus-visible {\n outline: 2px solid #00758f;\n outline-offset: -2px;\n}\n\n.opportunities-extension-debug-time {\n font-size: 11px;\n font-variant-numeric: tabular-nums;\n white-space: nowrap;\n}\n\n.opportunities-extension-debug-heading {\n flex-wrap: wrap;\n}\n\n.opportunities-extension-debug-heading strong {\n flex: 1 1 180px;\n min-width: 0;\n overflow-wrap: anywhere;\n}\n\n.opportunities-extension-debug-summary-meta {\n flex-wrap: wrap;\n justify-content: flex-end;\n}\n\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-debug-tabs button {\n color: #f6f4f2;\n}\n\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-debug-heading::before {\n color: #c9c5c1;\n}\n\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-debug-tabs {\n border-bottom-color: #514c47;\n}\n\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-debug-tabs button:hover {\n background: #383633;\n}\n\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-debug-tabs button[aria-selected=\"true\"] {\n background: #173f48;\n border-bottom-color: #8cc8d3;\n color: #bde7ee;\n}\n\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-debug-tabs button:focus-visible,\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-debug-list[role=\"tabpanel\"]:focus-visible {\n outline-color: #8cc8d3;\n}\n.opportunities-extension-debug-duration {\n color: #55514d;\n font-size: 11px;\n font-variant-numeric: tabular-nums;\n white-space: nowrap;\n}\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-debug-duration { color: #d6d2ce; }\n\n/* Compact filters use available CSS width, including Windows display scaling. */\n.opportunities-extension-products-progress,\n.opportunities-extension-auth-badge { opacity: 1; transition: opacity 300ms ease; }\n.opportunities-extension-products-progress[data-fading=\"true\"],\n.opportunities-extension-auth-badge[data-fading=\"true\"] { opacity: 0; }\n.opportunities-extension-auth-badge[hidden] { display: none; }\n@media (prefers-reduced-motion: reduce) {\n .opportunities-extension-products-progress,\n .opportunities-extension-auth-badge { transition: none; }\n}\n.opportunities-extension-crm-sr-badge {\n border: 1px solid #408254;\n color: #185b30;\n background: #e1f1e5;\n}\n.opportunities-extension-crm-sr-badge[data-state=\"missing\"] { color: #9f201b; background: #fde8e7; border-color: #c74640; }\n.opportunities-extension-crm-sr-badge[data-state=\"error\"] { color: #785000; background: #fff0cd; border-color: #987021; }\n.opportunities-extension-wl-actions-badge[data-state=\"loading\"] { color: #5f5a55; background: #eceae8; border-color: #8f8a85; }\n.opportunities-extension-crm-sr-badge:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-crm-sr-badge { color: #b8e4c6; background: #214d34; border-color: #6eac82; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-crm-sr-badge[data-state=\"missing\"] { color: #ffd9d5; background: #542824; border-color: #ef938b; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-crm-sr-badge[data-state=\"error\"] { color: #ffe0a3; background: #584219; border-color: #c99b4b; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-wl-actions-badge[data-state=\"loading\"] { color: #dedbd7; background: #484541; border-color: #8f8a85; }\n\n.opportunities-extension-form {\n display: grid;\n grid-template-columns: repeat(4, minmax(0, 1fr)) max-content max-content;\n align-items: end;\n gap: 12px;\n min-height: 0;\n padding: 12px;\n}\n\n.opportunities-extension-form > *,\n.opportunities-extension-badge-filters > section {\n min-width: 0;\n width: 100%;\n max-width: none;\n grid-template-rows: auto 32px;\n gap: 4px;\n font-size: 12px;\n}\n\n.opportunities-extension-form > * > span:first-child,\n.opportunities-extension-badge-filters > section > span:first-child {\n font-size: 12px;\n line-height: 16px;\n}\n\n.opportunities-extension-form .opportunities-extension-select-wrap {\n width: 100%;\n}\n\n.opportunities-extension-form .opportunities-extension-field select,\n.opportunities-extension-form .opportunities-extension-customer-filter-trigger,\n.opportunities-extension-form .opportunities-extension-table-search-field input {\n box-sizing: border-box;\n width: 100%;\n min-width: 0;\n height: 32px;\n min-height: 32px;\n padding: 4px 8px;\n font-size: 12px;\n line-height: 20px;\n}\n\n.opportunities-extension-form .opportunities-extension-field select,\n.opportunities-extension-form .opportunities-extension-customer-filter-trigger {\n padding-right: 26px;\n}\n\n.opportunities-extension-form .opportunities-extension-select-wrap::after,\n.opportunities-extension-form .opportunities-extension-customer-filter-trigger::after {\n right: 10px;\n border-left-width: 4px;\n border-right-width: 4px;\n border-top-width: 5px;\n}\n\n.opportunities-extension-form .opportunities-extension-stage-filter-controls,\n.opportunities-extension-form .opportunities-extension-status-filter-controls {\n flex-wrap: nowrap;\n gap: 4px;\n}\n\n.opportunities-extension-form .opportunities-extension-stage-filter-button,\n.opportunities-extension-form .opportunities-extension-status-filter-button,\n.opportunities-extension-form .opportunities-extension-activity-filter-button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n height: 28px;\n min-height: 28px;\n padding: 4px 7px;\n border: 1px solid currentColor;\n border-radius: 18px;\n font-family: inherit;\n font-size: 11px;\n font-weight: 700;\n letter-spacing: 0;\n line-height: 18px;\n white-space: nowrap;\n}\n\n.opportunities-extension-cell-actions > .opportunities-extension-products-count,\n.opportunities-extension-cell-actions > .opportunities-extension-products-ramp,\n.opportunities-extension-cell-actions > .opportunities-extension-crm-sr-badge {\n display: inline-flex;\n align-items: center;\n justify-content: flex-start;\n box-sizing: border-box;\n flex: 0 0 auto;\n gap: 4px;\n height: 20px;\n min-height: 20px;\n margin: 0;\n padding: 0 6px;\n border-width: 1px;\n border-style: solid;\n border-radius: 8px;\n font-family: inherit;\n font-size: 10px;\n font-style: normal;\n font-weight: 600;\n line-height: 16px;\n letter-spacing: 0;\n text-align: center;\n vertical-align: middle;\n white-space: nowrap;\n}\n\n.opportunities-extension-cell-actions .opportunities-extension-badge-icon,\n.opportunities-extension-activity-filter-button .opportunities-extension-badge-icon {\n display: block;\n order: -1;\n flex: 0 0 16px;\n width: 16px;\n height: 16px;\n margin: 0;\n padding: 0;\n border: 0;\n color: inherit;\n fill: none;\n stroke: currentColor;\n stroke-width: 2.25;\n stroke-linecap: round;\n stroke-linejoin: round;\n pointer-events: none;\n}\n\n@media (max-width: 1150px) {\n .opportunities-extension-form {\n grid-template-columns: repeat(4, minmax(0, 1fr));\n }\n .opportunities-extension-badge-filters > .opportunities-extension-status-filter,\n .opportunities-extension-badge-filters > .opportunities-extension-stage-filter {\n grid-column: span 2;\n }\n}\n\n@media (max-width: 700px) {\n .opportunities-extension-form {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n .opportunities-extension-form .opportunities-extension-stage-filter-controls,\n .opportunities-extension-form .opportunities-extension-status-filter-controls {\n flex-wrap: wrap;\n }\n .opportunities-extension-badge-filters > .opportunities-extension-status-filter,\n .opportunities-extension-badge-filters > .opportunities-extension-stage-filter {\n grid-template-rows: auto auto;\n }\n}\n\n@media (max-width: 420px) {\n .opportunities-extension-form { grid-template-columns: minmax(0, 1fr); }\n .opportunities-extension-badge-filters > .opportunities-extension-status-filter,\n .opportunities-extension-badge-filters > .opportunities-extension-stage-filter { grid-column: auto; }\n}\n\n.opportunities-extension-badge-filters { display: contents; }\n.opportunities-extension-activity-filter { display: grid; }\n.opportunities-extension-activity-filter[hidden] { display: none; }\n.opportunities-extension-activity-filter-controls { display: flex; align-items: center; flex-wrap: nowrap; gap: 4px; }\n/* Flexible fields share the space left by the four compact badge groups. */\n.opportunities-extension-form[data-activity-filters=\"true\"] {\n grid-template-columns: repeat(4, minmax(0, 1fr)) repeat(4, max-content);\n column-gap: 8px;\n}\n.opportunities-extension-activity-filter-button {\n min-width: 32px;\n gap: 4px;\n color: #185b30;\n background: #fff;\n cursor: pointer;\n}\n.opportunities-extension-activity-filter-button[data-value=\"missing\"] { color: #9f201b; }\n.opportunities-extension-activity-filter-button[data-value=\"under4\"] { color: #005f7d; }\n.opportunities-extension-activity-filter-button[aria-pressed=\"true\"] { color: #fff; background: #25653a; border-color: #25653a; }\n.opportunities-extension-activity-filter-button[aria-pressed=\"true\"][data-value=\"missing\"] { background: #a12d27; border-color: #a12d27; }\n.opportunities-extension-activity-filter-button[aria-pressed=\"true\"][data-value=\"under4\"] { background: #006b86; border-color: #006b86; }\n.opportunities-extension-activity-filter-button:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-activity-filter { color: #eeeae6; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-activity-filter-button { color: #b8e4c6; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-activity-filter-button:not([aria-pressed=\"true\"]) { background: #333130; border-color: #6a6560; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-activity-filter-button[data-value=\"missing\"] { color: #ffd9d5; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-activity-filter-button[data-value=\"under4\"] { color: #b5e9fc; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-activity-filter-button[aria-pressed=\"true\"] { border-color: currentColor; }\n@media (max-width: 1350px) {\n .opportunities-extension-form[data-activity-filters=\"true\"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }\n .opportunities-extension-form[data-activity-filters=\"true\"] .opportunities-extension-badge-filters {\n display: flex;\n grid-column: 1 / -1;\n flex-wrap: wrap;\n align-items: start;\n gap: 12px 20px;\n }\n .opportunities-extension-form[data-activity-filters=\"true\"] .opportunities-extension-badge-filters > section {\n width: auto;\n max-width: 100%;\n grid-template-rows: auto auto;\n }\n}\n@media (max-width: 700px) {\n .opportunities-extension-form[data-activity-filters=\"true\"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }\n .opportunities-extension-activity-filter-controls { flex-wrap: wrap; }\n}\n@media (max-width: 420px) {\n .opportunities-extension-form[data-activity-filters=\"true\"] { grid-template-columns: minmax(0, 1fr); }\n}\n\n.opportunities-extension-add-action {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n flex: 0 0 16px;\n width: 16px;\n height: 16px;\n padding: 0;\n margin: 0 0 0 2px;\n border: 0;\n border-radius: 3px;\n background: transparent;\n color: inherit;\n font: inherit;\n cursor: pointer;\n}\n.opportunities-extension-add-action:hover { background: rgba(127, 127, 127, .2); }\n.opportunities-extension-add-action:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }\n.opportunities-extension-action-form-modal {\n position: absolute;\n inset: 0;\n z-index: 5;\n display: grid;\n place-items: center;\n padding: 12px;\n background: rgba(0, 0, 0, .42);\n}\n.opportunities-extension-action-form-dialog {\n box-sizing: border-box;\n width: min(560px, 100%);\n max-height: calc(100vh - 24px);\n overflow-y: auto;\n background: #fff;\n color: #312d2a;\n border: 1px solid #b9b4ae;\n border-radius: 6px;\n box-shadow: 0 12px 36px rgba(0, 0, 0, .25);\n}\n.opportunities-extension-action-form {\n display: grid;\n grid-template-columns: repeat(2, minmax(0, 1fr));\n gap: 14px;\n padding: 18px;\n}\n.opportunities-extension-action-form-heading { min-width: 0; overflow-wrap: anywhere; }\n.opportunities-extension-action-form-context {\n display: grid;\n grid-template-columns: max-content minmax(0, 1fr);\n gap: 6px 12px;\n margin: 12px 0 0;\n font-size: 12px;\n line-height: 18px;\n}\n.opportunities-extension-action-form-context dt { font-weight: 600; }\n.opportunities-extension-action-form-context dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }\n.opportunities-extension-action-form-field { display: grid; gap: 6px; min-width: 0; font-size: 13px; }\n.opportunities-extension-action-form-field[hidden] { display: none; }\n.opportunities-extension-action-form-status { margin: 0; font-size: 13px; overflow-wrap: anywhere; }\n.opportunities-extension-action-form-status[role=\"alert\"] { color: #a12d27; }\n.opportunities-extension-action-form-wide,\n.opportunities-extension-action-form-footer { grid-column: 1 / -1; }\n.opportunities-extension-action-form-field input,\n.opportunities-extension-action-form-field select,\n.opportunities-extension-action-form-field textarea {\n box-sizing: border-box;\n min-width: 0;\n width: 100%;\n border: 1px solid #8f8983;\n border-radius: 4px;\n padding: 8px;\n font: inherit;\n line-height: 20px;\n color: inherit;\n background: #fff;\n}\n.opportunities-extension-action-form-field textarea { resize: vertical; min-height: 96px; }\n.opportunities-extension-action-form-field select { height: 38px; }\n.opportunities-extension-action-form-field select[hidden] { display: none; }\n.opportunities-extension-sr-form-dialog { width: min(900px, 100%); }\n.opportunities-extension-sr-form-dialog > .opportunities-extension-account-plans-header { padding: 20px 24px; }\n.opportunities-extension-sr-form-dialog > .opportunities-extension-action-form { gap: 20px 24px; padding: 24px; align-items: start; }\n.opportunities-extension-sr-form-dialog .opportunities-extension-action-form-field { gap: 8px; }\n.opportunities-extension-sr-form-dialog textarea { min-height: 112px; }\n.opportunities-extension-sr-form-dialog .opportunities-extension-sr-service-option { padding: 12px 0; gap: 10px; }\n.opportunities-extension-sr-form-dialog .opportunities-extension-sr-service-abstract { font-size: 13px; line-height: 20px; }\n@media (min-width: 1000px) {\n .opportunities-extension-sr-form-dialog { width: min(1120px, 100%); }\n .opportunities-extension-sr-form-dialog > .opportunities-extension-action-form { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 24px; }\n .opportunities-extension-sr-services { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; align-items: start; }\n .opportunities-extension-sr-services .opportunities-extension-sr-service-option { margin: 0; border-top: 1px solid #aaa6a040; }\n .opportunities-extension-sr-services .opportunities-extension-sr-service-option:nth-child(-n+2) { border-top: 0; }\n}\n@media (max-width: 600px) {\n .opportunities-extension-sr-form-dialog > .opportunities-extension-account-plans-header { padding: 16px; }\n .opportunities-extension-sr-form-dialog > .opportunities-extension-action-form { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 16px; }\n}\n.opportunities-extension-sr-lookup { min-width: 0; padding: 0; margin: 0; border: 0; font-size: 13px; }\n.opportunities-extension-sr-lookup legend { padding: 0 0 8px; font-weight: 600; }\n.opportunities-extension-sr-lookup[aria-busy=\"true\"] > p { opacity: .65; }\n.opportunities-extension-sr-service-option { display: flex; align-items: flex-start; gap: 8px; padding: 9px 0; cursor: pointer; }\n.opportunities-extension-sr-service-option + .opportunities-extension-sr-service-option { border-top: 1px solid #aaa6a040; }\n.opportunities-extension-sr-service-option input { flex: 0 0 16px; width: 16px; height: 16px; margin: 2px 0 0; accent-color: #00758f; }\n.opportunities-extension-sr-service-option > span { min-width: 0; overflow-wrap: anywhere; }\n.opportunities-extension-sr-service-name { display: block; font-weight: 600; line-height: 20px; }\n.opportunities-extension-sr-service-abstract { display: block; margin-top: 3px; color: #625d58; font-size: 12px; line-height: 18px; white-space: pre-wrap; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-sr-service-abstract { color: #c7c2bc; }\n.opportunities-extension-sr-lookup-retry { color: inherit; background: transparent; border: 1px solid #8f8983; border-radius: 4px; padding: 5px 10px; cursor: pointer; }\n.opportunities-extension-sr-lookup-retry[hidden] { display: none; }\n.opportunities-extension-action-form [aria-invalid=\"true\"] { border-color: #b3261e; outline: 1px solid #b3261e; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-action-form [aria-invalid=\"true\"] { border-color: #ffaaa4; outline-color: #ffaaa4; }\n.opportunities-extension-modal .opportunities-extension-copy-toast { z-index: 20; }\n.opportunities-extension-action-combobox { position: relative; min-width: 0; }\n.opportunities-extension-action-combobox input { height: 38px; }\n.opportunities-extension-action-options {\n position: absolute;\n z-index: 10;\n top: calc(100% + 4px);\n left: 0;\n right: 0;\n box-sizing: border-box;\n max-height: 180px;\n overflow-y: auto;\n overscroll-behavior: contain;\n border: 1px solid #8f8983;\n border-radius: 4px;\n box-shadow: 0 4px 12px rgba(0, 0, 0, .2);\n background: #fff;\n color: #292725;\n}\n.opportunities-extension-action-options[data-placement=\"above\"] { top: auto; bottom: calc(100% + 4px); }\n.opportunities-extension-action-options[hidden] { display: none; }\n.opportunities-extension-action-option { padding: 8px; line-height: 20px; overflow-wrap: anywhere; cursor: pointer; }\n.opportunities-extension-action-option:hover,\n.opportunities-extension-action-option[aria-selected=\"true\"] { background: #e3f2f5; color: #005b70; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-action-options { background: #211f1d; color: #eeeae6; border-color: #918a82; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-action-option:hover,\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-action-option[aria-selected=\"true\"] { background: #174955; color: #c9f4ff; }\n.opportunities-extension-action-form[data-state=\"loading\"] .opportunities-extension-action-combobox input:disabled { animation: opportunities-action-options-loading 1s ease-in-out infinite alternate; }\n.opportunities-extension-action-form[data-state=\"loading\"] .opportunities-extension-action-form-field > :disabled {\n animation: opportunities-action-options-loading 1s ease-in-out infinite alternate;\n}\n@keyframes opportunities-action-options-loading { from { opacity: .45; } to { opacity: .85; } }\n@media (prefers-reduced-motion: reduce) {\n .opportunities-extension-action-form[data-state=\"loading\"] .opportunities-extension-action-form-field > :disabled,\n .opportunities-extension-action-form[data-state=\"loading\"] .opportunities-extension-action-combobox input:disabled { animation: none; }\n}\n.opportunities-extension-action-form-footer { display: flex; justify-content: flex-end; gap: 8px; }\n.opportunities-extension-action-form-footer button {\n border: 1px solid #8f8983;\n border-radius: 4px;\n padding: 7px 14px;\n font: inherit;\n font-size: 13px;\n background: transparent;\n color: inherit;\n cursor: pointer;\n}\n.opportunities-extension-action-form-footer button:disabled { opacity: .55; cursor: not-allowed; }\n.opportunities-extension-action-form :focus-visible { outline: 2px solid #00758f; outline-offset: 2px; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-action-form-dialog {\n color-scheme: dark;\n background: #292725;\n color: #eeeae6;\n border-color: #756f68;\n}\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-action-form-field input,\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-action-form-field select,\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-action-form-field textarea { background: #211f1d; border-color: #918a82; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-action-form-status[role=\"alert\"] { color: #ffd9d5; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-action-form :focus-visible { outline-color: #80d6e8; }\n@media (max-width: 420px) {\n .opportunities-extension-action-form { grid-template-columns: minmax(0, 1fr); }\n}\n\n/* Keep layout rules on the outer table, never on expanded product tables. */\n.opportunities-extension-table[data-opportunities-layout=\"inline-actions\"] {\n width: 100%;\n min-width: 1168px;\n table-layout: fixed;\n}\n\n.opportunities-extension-table-skeleton-row { height: 76px; }\n.opportunities-extension-table-skeleton-text { width: 85%; max-width: 100%; }\n.opportunities-extension-table-skeleton-row:nth-of-type(even) .opportunities-extension-table-skeleton-text { width: 70%; }\n.opportunities-extension-table-skeleton-badge { flex: 0 1 30px; width: 30px; min-width: 0; height: 16px; }\n.opportunities-extension-table-skeleton-row > td[data-column=\"customer\"] .opportunities-extension-table-skeleton-badge { flex-basis: 18px; width: 18px; }\n.opportunities-extension-table-skeleton-row > td[data-column=\"status\"] .opportunities-extension-table-skeleton-text,\n.opportunities-extension-table-skeleton-row > td[data-column=\"stage\"] .opportunities-extension-table-skeleton-text { height: 20px; max-width: 66px; border-radius: 8px; }\n\n/* Fixed table layout shares leftover width only between the two auto columns. */\n.opportunities-extension-table > thead > tr > th[data-column=\"name\"] { width: auto; }\n.opportunities-extension-table > thead > tr > th[data-column=\"customer\"] { width: auto; }\n.opportunities-extension-table > thead > tr > th[data-column=\"owner\"] { width: 132px; }\n.opportunities-extension-table > thead > tr > th[data-column=\"optyNumber\"] { width: 106px; }\n.opportunities-extension-table > thead > tr > th[data-column=\"revenue\"] { width: 124px; }\n.opportunities-extension-table > thead > tr > th[data-column=\"closeDate\"] { width: 100px; }\n.opportunities-extension-table > thead > tr > th[data-column=\"status\"] { width: 114px; }\n.opportunities-extension-table > thead > tr > th[data-column=\"winProbability\"] { width: 110px; }\n.opportunities-extension-table > thead > tr > th[data-column=\"stage\"] { width: 94px; }\n.opportunities-extension-table > thead > tr > th[data-column=\"lastUpdateDate\"] { width: 136px; }\n\n.opportunities-extension-table > tbody > tr > td[data-column] {\n padding: 10px 8px;\n overflow: visible;\n text-overflow: clip;\n white-space: normal;\n font-variant-numeric: tabular-nums;\n}\n\n.opportunities-extension-table > tbody > tr > td[data-column=\"name\"],\n.opportunities-extension-table > tbody > tr > td[data-column=\"customer\"] {\n position: relative;\n padding-right: 16px;\n padding-left: 12px;\n padding-bottom: 38px;\n vertical-align: top;\n}\n\n.opportunities-extension-table > tbody > tr > td[data-column=\"owner\"] {\n padding-right: 16px;\n}\n\n.opportunities-extension-table > tbody > tr > td[data-column=\"closeDate\"],\n.opportunities-extension-table > tbody > tr > td[data-column=\"lastUpdateDate\"],\n.opportunities-extension-table > tbody > tr > td[data-column=\"status\"],\n.opportunities-extension-table > tbody > tr > td[data-column=\"stage\"],\n.opportunities-extension-table > tbody > tr > td[data-column=\"winProbability\"] {\n white-space: nowrap;\n}\n\n.opportunities-extension-cell-content {\n display: block;\n min-width: 0;\n min-height: 2.7em;\n line-height: 1.35;\n}\n\n.opportunities-extension-cell-content > :first-child {\n display: block;\n min-width: 0;\n overflow-wrap: anywhere;\n}\n\n.opportunities-extension-cell-actions {\n position: absolute;\n left: 12px;\n right: 16px;\n bottom: 10px;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n gap: 6px;\n height: 24px;\n}\n\n.opportunities-extension-cell-actions .opportunities-extension-action-button {\n flex: 0 0 24px;\n width: 24px;\n height: 24px;\n padding: 2px;\n}\n\n.opportunities-extension-table > tbody > tr > td[data-column=\"customer\"] .opportunities-extension-cell-actions {\n min-width: 114px;\n}\n\n.opportunities-extension-cell-actions .opportunities-extension-action-button svg {\n width: 18px;\n height: 18px;\n}\n\n.opportunities-extension-cell-actions button:focus-visible {\n outline: 2px solid currentColor;\n outline-offset: 2px;\n}\n\n.opportunities-extension-products-ramp {\n min-width: 0;\n max-width: 100%;\n border: 1px solid #bba5cf;\n background: #f0e8f7;\n color: #63358a;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-products-ramp {\n background: #43334f;\n color: #ead5fc;\n border-color: #9372ac;\n}\n\n.opportunities-extension-products-ramp[data-missing=\"true\"] {\n background: #fde8e7;\n color: #9f201b;\n border-color: #c74640;\n}\n\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-products-ramp[data-missing=\"true\"] {\n background: #542824;\n color: #ffd9d5;\n border-color: #ef938b;\n}\n\n.opportunities-extension-table > thead > tr > th[data-column] .opportunities-extension-sort-button {\n display: grid;\n grid-template-columns: minmax(0, 1fr) 12px;\n gap: 6px;\n padding: 10px 8px;\n align-items: center;\n}\n\n.opportunities-extension-table > thead > tr > th[data-column=\"name\"] .opportunities-extension-sort-button,\n.opportunities-extension-table > thead > tr > th[data-column=\"customer\"] .opportunities-extension-sort-button {\n padding-left: 12px;\n padding-right: 16px;\n}\n\n.opportunities-extension-sort-label {\n min-width: 0;\n white-space: normal;\n overflow-wrap: anywhere;\n}\n\n.opportunities-extension-table > thead > tr > th[data-column] .opportunities-extension-sort-button::after {\n position: static;\n justify-self: end;\n}\n.opportunities-extension-crm-sr-badge[type=\"button\"] { cursor: pointer; font-family: inherit; }\n.opportunities-extension-sr-popover {\n position: fixed; z-index: 8; box-sizing: border-box; overflow: auto;\n padding: 12px; border: 1px solid #b9b5b0; border-radius: 6px;\n background: #fff; color: #302e2b; box-shadow: 0 6px 24px #0003;\n font: 12px/1.5 Arial, sans-serif; text-align: left; overflow-wrap: anywhere;\n}\n.opportunities-extension-sr-popover section { padding: 8px 0; }\n.opportunities-extension-sr-popover section + section { border-top: 1px solid #dedbd7; }\n.opportunities-extension-sr-number { display: flex; align-items: center; gap: 8px; padding-right: 30px; font-weight: 600; }\n.opportunities-extension-sr-popover a { color: #00677d; text-decoration: underline; }\n.opportunities-extension-sr-details { white-space: pre-wrap; margin-top: 6px; }\n.opportunities-extension-sr-children { margin: 10px 0 0 8px; padding-left: 10px; border-left: 2px solid #8c969a; overflow-wrap: anywhere; }\n.opportunities-extension-sr-children[aria-busy=\"true\"] { min-height: 28px; animation: opportunities-action-options-loading 1s ease-in-out infinite alternate; }\n.opportunities-extension-sr-children[role=\"alert\"] { color: #a12d27; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-sr-children[role=\"alert\"] { color: #ffd9d5; }\n@media (prefers-reduced-motion: reduce) { .opportunities-extension-sr-children[aria-busy=\"true\"] { animation: none; } }\n.opportunities-extension-sr-dismiss {\n position: absolute; top: 6px; right: 6px; width: 28px; height: 28px;\n display: grid; place-items: center; padding: 4px; border: 0;\n background: transparent; color: inherit; cursor: pointer;\n}\n.opportunities-extension-sr-dismiss svg { width: 16px; height: 16px; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-sr-popover { background: #292827; color: #f1efec; border-color: #77716b; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-sr-popover section + section { border-color: #5f5953; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-sr-popover a { color: #7ddced; }\n.opportunities-extension-title-row {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n gap: 8px 16px;\n min-width: 0;\n flex: 1;\n}\n.opportunities-extension-title-row h1 {\n display: block;\n margin: 0;\n padding: 0;\n line-height: 1;\n}\n.opportunities-extension-title-row .opportunities-extension-subtitle-row {\n display: flex;\n align-items: center;\n align-self: center;\n flex-wrap: wrap;\n gap: 8px;\n margin: 0;\n padding: 0;\n min-width: 0;\n}\n.opportunities-extension-title-row .opportunities-extension-subtitle-row > span {\n box-sizing: border-box;\n margin: 0;\n min-height: 22px;\n line-height: 16px;\n}\n.opportunities-extension-title-row + .opportunities-extension-header-actions { flex-shrink: 0; }\n.opportunities-extension-refresh-all:disabled { opacity: .65; cursor: wait; }\n.opportunities-extension-refresh-all:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }\n.opportunities-extension-refresh-all[aria-busy=\"true\"] svg { animation: opportunities-refresh-spin 1s linear infinite; }\n@keyframes opportunities-refresh-spin { to { transform: rotate(360deg); } }\n@media (prefers-reduced-motion: reduce) {\n .opportunities-extension-refresh-all[aria-busy=\"true\"] svg { animation: none; }\n}\n.opportunities-extension-option-description { display: block; font-size: 12px; line-height: 1.4; margin-top: 4px; white-space: normal; overflow-wrap: anywhere; opacity: .85; }\n.opportunities-extension-action-form-dialog.opportunities-extension-internal-sr-dialog { width: min(760px, 100%); }\n\n.opportunities-extension-account-plans-dialog.opportunities-extension-install-base-dialog {\n width: min(1700px, 100%);\n}\n.opportunities-extension-install-base-dialog .opportunities-extension-account-plans-header {\n padding: 10px 12px;\n gap: 12px;\n}\n.opportunities-extension-install-base-dialog .opportunities-extension-account-plans-header h2 {\n font-size: 16px;\n line-height: 22px;\n}\n.opportunities-extension-install-base-dialog .opportunities-extension-account-plans-header p {\n font-size: 12px;\n line-height: 16px;\n margin-top: 3px;\n overflow-wrap: anywhere;\n}\n.opportunities-extension-install-base-dialog .opportunities-extension-icon-button {\n width: 28px;\n height: 28px;\n min-width: 28px;\n min-height: 28px;\n padding: 4px;\n}\n.opportunities-extension-install-base-dialog .opportunities-extension-customer-table-toolbar {\n padding: 8px 12px;\n}\n.opportunities-extension-install-base-dialog .opportunities-extension-customer-table-search {\n width: min(320px, 100%);\n height: 32px;\n padding: 4px 8px;\n font-size: 12px;\n line-height: 20px;\n}\n.opportunities-extension-install-base-content {\n min-width: 0;\n min-height: 0;\n overflow: auto;\n scrollbar-gutter: stable;\n}\n.opportunities-extension-install-base-message { margin: 10px 12px; font-size: 12px; line-height: 16px; }\n.opportunities-extension-install-base-table {\n width: 100%; min-width: 1120px; table-layout: fixed; border-collapse: collapse; font-size: 11px;\n}\n.opportunities-extension-install-base-table col { width: 7%; }\n.opportunities-extension-install-base-table .install-base-col-productGroupName { width: 13%; }\n.opportunities-extension-install-base-table .install-base-col-productName { width: 13%; }\n.opportunities-extension-install-base-table .install-base-col-quantity { width: 5%; }\n.opportunities-extension-install-base-table .install-base-col-quantityType { width: 8%; }\n.opportunities-extension-install-base-table th,\n.opportunities-extension-install-base-table td {\n padding: 8px 6px; text-align: left; vertical-align: middle; overflow-wrap: anywhere;\n border-bottom: 1px solid #e8e5e1; line-height: 1.4;\n}\n.opportunities-extension-install-base-table th { position: sticky; top: 0; z-index: 1; background: #faf9f8; }\n.opportunities-extension-install-base-table td[data-format=\"amount\"],\n.opportunities-extension-install-base-table td[data-format=\"quantity\"] { text-align: right; font-variant-numeric: tabular-nums; }\n.opportunities-extension-install-base-table td[data-format=\"date\"] { white-space: nowrap; }\n.opportunities-extension-install-base-status {\n display: inline-block; padding: 2px 5px; border-radius: 12px; font-size: 10px; font-weight: 600;\n color: #5f5a55; background: #eceae8; white-space: nowrap;\n}\n.opportunities-extension-install-base-status[data-status=\"ACTIVE\"] { color: #17693a; background: #e1f1e5; }\n.opportunities-extension-install-base-status[data-status=\"UNSUPPORTED\"] { color: #855300; background: #fff0d6; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-install-base-content,\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-install-base-table,\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-install-base-table th,\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-install-base-table td { color: #f6f4f2; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-install-base-message { color: #c9c5c1; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-install-base-message[role=\"alert\"] { color: #ffb4ab; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-install-base-table th { background: #353331; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-install-base-table th,\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-install-base-table td { border-color: #484541; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-install-base-status { color: #dedbd7; background: #484541; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-install-base-status[data-status=\"ACTIVE\"] { color: #b8e4c6; background: #214d34; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-install-base-status[data-status=\"UNSUPPORTED\"] { color: #ffdfa2; background: #614418; }\n@media (prefers-reduced-motion: reduce) {\n .opportunities-extension-install-base-table .opportunities-extension-account-plans-skeleton-bar { animation: none; }\n}\n.opportunities-extension-install-base-table .opportunities-extension-sort-button { min-height: 28px; padding: 4px 16px 4px 0; overflow-wrap: anywhere; }\n.opportunities-extension-install-base-table .opportunities-extension-sort-button::after { right: 0; font-size: 12px; }\n\n.opportunities-extension-account-plans-dialog.opportunities-extension-service-requests-dialog { width: min(1700px, 100%); }\n.opportunities-extension-service-requests-content { min-width: 0; min-height: 0; overflow: auto; scrollbar-gutter: stable; }\n.opportunities-extension-service-requests-message { margin: 16px; font-size: 13px; }\n.opportunities-extension-service-requests-table {\n width: 100%; min-width: 1200px; table-layout: fixed; border-collapse: collapse; font-size: 12px;\n}\n.opportunities-extension-service-requests-table col { width: 7%; }\n.opportunities-extension-service-requests-table .service-requests-col-name { width: 17%; }\n.opportunities-extension-service-requests-table .service-requests-col-id { width: 10%; }\n.opportunities-extension-service-requests-table .service-requests-col-severity { width: 5%; }\n.opportunities-extension-service-requests-table .service-requests-col-subStatus { width: 14%; }\n.opportunities-extension-service-requests-table .service-requests-col-productName { width: 12%; }\n.opportunities-extension-service-requests-table th,\n.opportunities-extension-service-requests-table td {\n padding: 12px 8px; text-align: left; vertical-align: middle; overflow-wrap: anywhere;\n border-bottom: 1px solid #e8e5e1; line-height: 1.4;\n}\n.opportunities-extension-service-requests-table th { position: sticky; top: 0; z-index: 1; background: #faf9f8; }\n.opportunities-extension-service-requests-table td[data-field=\"created\"],\n.opportunities-extension-service-requests-table td[data-field=\"lastUpdated\"],\n.opportunities-extension-service-requests-table td[data-field=\"id\"] { white-space: nowrap; font-variant-numeric: tabular-nums; }\n.opportunities-extension-service-request-status {\n display: inline-block; padding: 3px 6px; border-radius: 12px; font-size: 10px; font-weight: 600;\n color: #5f5a55; background: #eceae8;\n}\n.opportunities-extension-service-request-status[data-status=\"OPEN\"] { color: #17693a; background: #e1f1e5; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-service-requests-content,\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-service-requests-table,\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-service-requests-table th,\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-service-requests-table td { color: #f6f4f2; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-service-requests-message { color: #c9c5c1; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-service-requests-message[role=\"alert\"] { color: #ffb4ab; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-service-requests-table th { background: #353331; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-service-requests-table th,\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-service-requests-table td { border-color: #484541; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-service-request-status { color: #dedbd7; background: #484541; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-service-request-status[data-status=\"OPEN\"] { color: #b8e4c6; background: #214d34; }\n@media (prefers-reduced-motion: reduce) {\n .opportunities-extension-service-requests-table .opportunities-extension-account-plans-skeleton-bar { animation: none; }\n}\n.opportunities-extension-service-requests-table .opportunities-extension-sort-button { min-height: 28px; padding: 4px 16px 4px 0; overflow-wrap: anywhere; }\n.opportunities-extension-service-requests-table .opportunities-extension-sort-button::after { right: 0; font-size: 12px; }\n\n/* Scope sizing to Cloud Consumption, not other dialogs sharing its components. */\n[data-consumption-layout=\"compact\"] .opportunities-extension-account-plans-header { padding: 10px 12px; gap: 12px; }\n[data-consumption-layout=\"compact\"] .opportunities-extension-account-plans-header h2 { font-size: 16px; line-height: 22px; }\n[data-consumption-layout=\"compact\"] .opportunities-extension-account-plans-header p { font-size: 12px; line-height: 16px; margin-top: 3px; overflow-wrap: anywhere; }\n[data-consumption-layout=\"compact\"] .opportunities-extension-icon-button { width: 28px; height: 28px; min-width: 28px; min-height: 28px; padding: 4px; }\n[data-consumption-layout=\"compact\"] .opportunities-extension-account-plans-tabs { padding: 4px 12px 0; }\n[data-consumption-layout=\"compact\"] .opportunities-extension-account-plan-tab { min-height: 30px; padding: 4px 8px; font-size: 12px; }\n[data-consumption-layout=\"compact\"] .opportunities-extension-account-plan-panel { padding: 8px 12px; }\n[data-consumption-layout=\"compact\"] .opportunities-extension-account-plan-details { gap: 0 12px; }\n[data-consumption-layout=\"compact\"] .opportunities-extension-account-plan-details > div { grid-template-columns: minmax(85px, 35%) minmax(0, 1fr); min-height: 32px; padding: 4px 0; gap: 6px; }\n[data-consumption-layout=\"compact\"] .opportunities-extension-account-plan-details dt { font-size: 11px; line-height: 16px; }\n[data-consumption-layout=\"compact\"] .opportunities-extension-account-plan-details dd { font-size: 12px; line-height: 16px; }\n[data-consumption-layout=\"compact\"] .opportunities-extension-consumption-trend { margin-top: 8px; padding-top: 6px; }\n[data-consumption-layout=\"compact\"] .opportunities-extension-consumption-periods button { min-height: 28px; padding: 4px 8px; font-size: 12px; }\n[data-consumption-layout=\"compact\"] .opportunities-extension-consumption-navigation { grid-template-columns: 28px minmax(120px, auto) 28px; min-height: 30px; }\n[data-consumption-layout=\"compact\"] .opportunities-extension-consumption-navigation strong { font-size: 12px; }\n[data-consumption-layout=\"compact\"] .opportunities-extension-consumption-navigation-button { width: 28px; height: 28px; }\n[data-consumption-layout=\"compact\"] .opportunities-extension-consumption-visual { grid-template-columns: minmax(0, 1fr) 150px; gap: 8px; }\n[data-consumption-layout=\"compact\"] .opportunities-extension-consumption-svg { height: 100%; max-height: 100%; min-width: 0; }\n[data-consumption-layout=\"compact\"] .opportunities-extension-consumption-legend button { font-size: 11px; padding: 4px; gap: 5px; }\n\n/* Small viewports must scroll rather than clip details or collapse the chart. */\n@media (max-height: 560px), (max-width: 700px) {\n [data-consumption-layout=\"compact\"] .opportunities-extension-account-plans-panels { overflow: auto; }\n [data-consumption-layout=\"compact\"] .opportunities-extension-account-plan-panel { height: auto; min-height: 100%; grid-template-rows: auto minmax(280px, 1fr); }\n}\n@media (max-width: 700px) {\n [data-consumption-layout=\"compact\"] .opportunities-extension-account-plan-details { grid-template-columns: minmax(0, 1fr); }\n [data-consumption-layout=\"compact\"] .opportunities-extension-consumption-visual { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }\n [data-consumption-layout=\"compact\"] .opportunities-extension-consumption-legend { display: flex; flex-wrap: wrap; }\n}\n\n.opportunities-extension-plan-detail-badges { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }\n.opportunities-extension-consumption-trend-header { align-items: center; justify-content: space-between; gap: 12px; }\n.opportunities-extension-consumption-trend-header > .opportunities-extension-plan-detail-badges { min-width: 0; }\n.opportunities-extension-plan-detail-skeleton { width: 64px; height: 20px; }\n.opportunities-extension-projection-badge {\n display: inline-flex; align-items: center; justify-content: center; border: 1px solid transparent;\n padding: 3px 8px; border-radius: 12px; font-size: 11px; font-weight: 600; line-height: 1.3;\n color: #5f5a55; background: #eceae8; white-space: nowrap;\n}\nbutton.opportunities-extension-projection-badge { cursor: pointer; }\n.opportunities-extension-projection-badge[data-status=\"forfeit\"] { color: #a12424; background: #fbe5e5; }\n.opportunities-extension-projection-badge[data-status=\"overage\"] { color: #185a9d; background: #e0edfc; }\n.opportunities-extension-projection-badge:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }\n.opportunities-extension-projection-popover {\n position: fixed; z-index: 8; box-sizing: border-box; padding: 14px; overflow: auto; overscroll-behavior: contain;\n border: 1px solid #b9b4ae; border-radius: 4px; background: #ffffff; color: #312d2a;\n box-shadow: 0 4px 16px #0003; font-size: 12px; line-height: 1.4; overflow-wrap: anywhere;\n}\n.opportunities-extension-projection-popover[hidden] { display: none; }\n.opportunities-extension-projection-popover .opportunities-extension-projection-dismiss {\n display: grid; place-items: center; width: 24px; height: 24px; margin-left: auto; margin-bottom: 8px; padding: 4px; border: 1px solid #b9b4ae;\n border-radius: 4px; background: transparent; color: inherit; cursor: pointer; font-size: 12px;\n}\n.opportunities-extension-projection-dismiss svg { width: 14px; height: 14px; }\n.opportunities-extension-projection-line h3 { margin: 0 0 8px; font-size: 12px; }\n.opportunities-extension-projection-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; margin: 0; }\n.opportunities-extension-projection-fields > div { min-width: 0; }\n.opportunities-extension-projection-fields dt { font-weight: 600; color: #5f5a55; font-size: 11px; }\n.opportunities-extension-projection-fields dd { margin: 2px 0 0; font-variant-numeric: tabular-nums; }\n.opportunities-extension-projection-fields a { color: #006d7a; text-decoration: underline; }\n.opportunities-extension-projection-children { margin-top: 14px; padding-left: 12px; border-left: 2px solid #dedbd7; }\n.opportunities-extension-projection-children > section + section { margin-top: 16px; }\n.opportunities-extension-plan-detail-error { color: #a12424; font-size: 12px; }\n.opportunities-extension-projection-empty { color: #5f5a55; font-size: 12px; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-projection-popover { color: #f1efec; background: #302e2b; border-color: #716b64; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-projection-badge { color: #dedbd7; background: #484541; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-projection-badge[data-status=\"forfeit\"] { color: #ffb9b9; background: #682e32; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-projection-badge[data-status=\"overage\"] { color: #c5dfff; background: #224b76; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-projection-fields dt,\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-projection-empty { color: #cec9c2; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-projection-fields a { color: #76dbea; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-plan-detail-error { color: #ffb9b9; }\n@media (max-width: 480px) { .opportunities-extension-projection-fields { grid-template-columns: minmax(0, 1fr); } }\n@media (max-width: 480px) {\n .opportunities-extension-consumption-trend-header > .opportunities-extension-consumption-periods { grid-template-columns: repeat(2, minmax(0, 1fr)); }\n}\n@media (prefers-reduced-motion: reduce) { .opportunities-extension-plan-detail-skeleton { animation: none; } }\n\n.opportunities-extension-account-plan-details > .opportunities-extension-contract-row {\n align-items: center;\n}\n.opportunities-extension-contract-row > dt,\n.opportunities-extension-contract-row > dd,\n.opportunities-extension-contract-ratecard > span {\n line-height: 20px;\n}\n.opportunities-extension-contract-ratecard {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n gap: 6px 10px;\n}\n.opportunities-extension-ratecard-button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n align-self: center;\n box-sizing: border-box;\n height: 28px;\n margin: 0;\n flex: 0 0 auto;\n padding: 0 8px;\n border: 1px solid #8aaeb9;\n border-radius: 4px;\n background: #fff;\n color: #006b80;\n font: inherit;\n font-size: 12px;\n font-weight: 600;\n line-height: 20px;\n cursor: pointer;\n}\n.opportunities-extension-ratecard-button:hover { background: #e8f4f6; }\n.opportunities-extension-ratecard-overlay {\n position: absolute;\n inset: 0;\n z-index: 8;\n display: flex;\n justify-content: flex-end;\n overflow: hidden;\n overflow: clip;\n background: rgba(0, 0, 0, 0);\n transition: background-color 320ms ease;\n}\n.opportunities-extension-ratecard-overlay[data-open=\"true\"] { background: rgba(0, 0, 0, .32); }\n.opportunities-extension-ratecard-drawer {\n --ratecard-bg: #fff;\n --ratecard-heading: #faf9f8;\n --ratecard-text: #312d2a;\n --ratecard-muted: #615a55;\n --ratecard-border: #dedbd8;\n --ratecard-accent: #00758f;\n --ratecard-skeleton: #eae7e4;\n display: grid;\n grid-template-rows: auto auto auto minmax(0, 1fr);\n width: min(1520px, calc(100% - 48px));\n height: 100%;\n min-width: 0;\n box-sizing: border-box;\n overflow: hidden;\n background: var(--ratecard-bg);\n color: var(--ratecard-text);\n box-shadow: -6px 0 24px rgba(0, 0, 0, .2);\n transform: translateX(100%);\n transition: transform 320ms cubic-bezier(.22, .61, .36, 1);\n}\n.opportunities-extension-ratecard-overlay[data-open=\"true\"] .opportunities-extension-ratecard-drawer { transform: translateX(0); }\n.opportunities-extension-ratecard-header > div { min-width: 0; overflow-wrap: anywhere; }\n.opportunities-extension-ratecard-plan-details { padding: 12px 20px 0; }\n.opportunities-extension-ratecard-toolbar { display: flex; align-items: center; gap: 16px; padding: 12px 20px; }\n.opportunities-extension-ratecard-search {\n width: min(360px, 100%);\n min-width: 0;\n box-sizing: border-box;\n padding: 9px 12px;\n border: 1px solid var(--ratecard-muted);\n border-radius: 4px;\n background: var(--ratecard-bg);\n color: var(--ratecard-text);\n font: inherit;\n font-size: 13px;\n}\n.opportunities-extension-ratecard-search::placeholder { color: var(--ratecard-muted); opacity: 1; }\n.opportunities-extension-ratecard-count { color: var(--ratecard-muted); font-size: 12px; white-space: nowrap; }\n.opportunities-extension-ratecard-viewport { overflow: auto; min-height: 0; min-width: 0; scrollbar-gutter: stable; }\n.opportunities-extension-ratecard-table { width: 100%; min-width: 1100px; table-layout: fixed; border-collapse: separate; border-spacing: 0; font-size: 12px; }\n.opportunities-extension-ratecard-table th, .opportunities-extension-ratecard-table td {\n padding: 11px 10px;\n border-bottom: 1px solid var(--ratecard-border);\n vertical-align: top;\n overflow-wrap: anywhere;\n text-align: left;\n}\n.opportunities-extension-ratecard-table th { position: sticky; top: 0; z-index: 1; background: var(--ratecard-heading); }\n.opportunities-extension-ratecard-sort {\n display: grid;\n grid-template-columns: minmax(0, 1fr) 12px;\n align-items: center;\n gap: 5px;\n width: 100%;\n padding: 0;\n border: 0;\n background: transparent;\n color: inherit;\n font: inherit;\n font-weight: 600;\n text-align: left;\n cursor: pointer;\n}\n.opportunities-extension-ratecard-sort-icon { color: var(--ratecard-accent); text-align: center; }\n.opportunities-extension-ratecard-table .opportunities-extension-ratecard-numeric { text-align: right; font-variant-numeric: tabular-nums; }\n.opportunities-extension-ratecard-table .opportunities-extension-ratecard-notice { padding: 28px 20px; text-align: center; }\n.opportunities-extension-ratecard-notice [role=\"alert\"] { color: #b3261e; }\n.opportunities-extension-ratecard-skeleton { display: block; width: 85%; height: 14px; border-radius: 3px; background: var(--ratecard-skeleton); animation: opportunities-ratecard-pulse 1.1s ease-in-out infinite alternate; }\n.opportunities-extension-ratecard-drawer :focus-visible, .opportunities-extension-ratecard-button:focus-visible { outline: 2px solid #00758f; outline-offset: 2px; }\n.opportunities-extension-ratecard-overlay[data-closing=\"true\"] { pointer-events: none; background: rgba(0, 0, 0, 0); transition-duration: 180ms; }\n.opportunities-extension-ratecard-overlay[data-closing=\"true\"] .opportunities-extension-ratecard-drawer { transform: translateX(100%); transition-duration: 180ms; }\n[data-theme=\"dark\"] .opportunities-extension-ratecard-drawer {\n --ratecard-bg: #292725;\n --ratecard-heading: #35322f;\n --ratecard-text: #f5f3f1;\n --ratecard-muted: #c2bcb6;\n --ratecard-border: #514c47;\n --ratecard-accent: #59d1e5;\n --ratecard-skeleton: #514c47;\n}\n[data-theme=\"dark\"] .opportunities-extension-ratecard-button { color: #59d1e5; border-color: #6298a2; background: #292725; }\n[data-theme=\"dark\"] .opportunities-extension-ratecard-button:hover { background: #313f40; }\n[data-theme=\"dark\"] .opportunities-extension-ratecard-notice [role=\"alert\"] { color: #ffb4ab; }\n[data-theme=\"dark\"] .opportunities-extension-ratecard-drawer :focus-visible, [data-theme=\"dark\"] .opportunities-extension-ratecard-button:focus-visible { outline-color: #59d1e5; }\n@keyframes opportunities-ratecard-pulse { from { opacity: .45; } to { opacity: 1; } }\n@media (max-width: 720px) {\n .opportunities-extension-ratecard-drawer { width: 100%; }\n .opportunities-extension-ratecard-toolbar { flex-wrap: wrap; gap: 8px; }\n}\n@media (prefers-reduced-motion: reduce) {\n .opportunities-extension-ratecard-overlay, .opportunities-extension-ratecard-drawer, .opportunities-extension-ratecard-skeleton,\n .opportunities-extension-ratecard-overlay[data-closing=\"true\"], .opportunities-extension-ratecard-overlay[data-closing=\"true\"] .opportunities-extension-ratecard-drawer { animation: none; transition: none; }\n}\n\n.opportunities-extension-ratecard-toolbar { flex-wrap: wrap; }\n.opportunities-extension-ratecard-order-filter { position: relative; min-width: 0; }\n.opportunities-extension-ratecard-order-filter .opportunities-extension-customer-filter-trigger { min-height: 38px; padding-block: 8px; font-size: 13px; }\n.opportunities-extension-ratecard-order-filter .opportunities-extension-customer-filter-panel { width: min(320px, calc(100vw - 80px)); max-height: 45vh; overflow: auto; }\n\n.opportunities-extension-account-plans-dialog.opportunities-extension-install-base-dialog,\n.opportunities-extension-account-plans-dialog.opportunities-extension-service-requests-dialog {\n grid-template-rows: auto auto minmax(0, 1fr);\n}\n.opportunities-extension-customer-table-toolbar { padding: 12px 16px; border-bottom: 1px solid #dedbd7; }\n.opportunities-extension-customer-table-search {\n box-sizing: border-box;\n width: min(420px, 100%);\n min-width: 0;\n height: 38px;\n padding: 8px 12px;\n border: 1px solid #8f8a85;\n border-radius: 4px;\n background: #fff;\n color: #312d2a;\n font: inherit;\n font-size: 13px;\n}\n.opportunities-extension-customer-table-search::placeholder { color: #5f5a55; opacity: 1; }\n.opportunities-extension-customer-table-search:focus-visible { outline: 2px solid #00758f; outline-offset: 2px; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-customer-table-toolbar { border-color: #484541; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-customer-table-search { background: #353331; color: #f6f4f2; border-color: #8f8a85; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-customer-table-search::placeholder { color: #c9c5c1; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-customer-table-search:focus-visible { outline-color: #59d1e5; }\n\n.opportunities-extension-views { min-height: 0; min-width: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 8px; }\n.opportunities-extension-views > [hidden] { display: none; }\n.opportunities-extension-view-tabs { display: flex; gap: 20px; border-bottom: 1px solid #dedbd7; }\n.opportunities-extension-view-tabs button { border: 0; border-bottom: 3px solid transparent; background: transparent; color: #625d58; padding: 6px 2px 9px; font: 600 13px/20px Arial, sans-serif; cursor: pointer; }\n.opportunities-extension-view-tabs button[aria-selected=\"true\"] { border-bottom-color: #00758f; color: #00657b; }\n.opportunities-extension-view-tabs button:focus-visible { outline: 2px solid #00758f; outline-offset: -2px; }\n.opportunities-extension-view-tabs button { display: inline-flex; align-items: center; gap: 6px; }\n.opportunities-extension-view-tabs button svg { width: 16px; height: 16px; flex: 0 0 16px; }\n.opportunities-extension-calendar {\n --fc-border-color: #dedbd7; --fc-page-bg-color: #fff; --fc-neutral-bg-color: #f5f4f2;\n --fc-neutral-text-color: #625d58; --fc-today-bg-color: #eef7fa;\n --fc-button-bg-color: #fff; --fc-button-text-color: #312d2a; --fc-button-border-color: #b9b4ae;\n --fc-button-hover-bg-color: #e6f3f5; --fc-button-hover-border-color: #00758f;\n --fc-button-active-bg-color: #dceff3; --fc-button-active-border-color: #00758f;\n min-height: 0; min-width: 0; overflow: hidden; display: flex; flex-direction: column; padding: 12px; background: #fff; color: #312d2a;\n border: 1px solid var(--fc-border-color); border-radius: 4px; font: 13px/1.4 Arial, sans-serif;\n}\n.opportunities-calendar-grid { flex: 1 1 0; min-height: 0; min-width: 0; }\n.opportunities-extension-calendar .fc { min-width: 620px; }\n.opportunities-extension-calendar .fc .fc-toolbar { gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }\n.opportunities-extension-calendar .fc .fc-toolbar-title { font-size: 18px; line-height: 26px; letter-spacing: 0; }\n.opportunities-extension-calendar .fc .fc-button { font-size: 13px; line-height: 20px; padding: 5px 10px; border-radius: 4px; box-shadow: none; }\n.opportunities-extension-calendar .fc .fc-button:focus-visible { outline: 2px solid #00758f; outline-offset: 2px; }\n.opportunities-extension-calendar .fc .fc-button svg { width: 16px; height: 16px; margin-right: 6px; vertical-align: -3px; }\n.opportunities-extension-calendar .fc a { color: inherit; text-decoration: none; }\n.opportunities-extension-calendar .fc th { background: var(--fc-neutral-bg-color); font-size: 12px; font-weight: 600; padding: 4px 0; }\n.opportunities-extension-calendar .fc .fc-daygrid-day-number { font-size: 11px; line-height: 18px; padding: 1px 6px; }\n.opportunities-extension-calendar .fc .fc-daygrid-day-events { min-height: 0; margin-bottom: 0; }\n.opportunities-extension-calendar .fc .fc-daygrid-day-bottom { margin: 0; }\n.opportunities-extension-calendar .fc .fc-daygrid-day-frame { min-height: 0; padding-top: 0; }\n/* Event content must not contribute to the table's intrinsic row heights. */\n.opportunities-extension-calendar .fc .fc-daygrid-body tbody { height: 100%; }\n.opportunities-extension-calendar .fc .fc-daygrid-body tr { height: calc(100% / var(--opportunities-calendar-weeks, 5)); }\n.opportunities-extension-calendar .fc .fc-daygrid-day { position: relative; }\n.opportunities-extension-calendar .fc .fc-daygrid-day-frame { position: absolute; inset: 0; }\n.opportunities-extension-calendar .fc .fc-daygrid-week-number { top: 0; left: 0; padding: 3px 6px; background: var(--fc-neutral-bg-color); color: inherit; font: 600 10px/16px Arial, sans-serif; white-space: nowrap; }\n.opportunities-calendar-day-count { position: absolute; top: 2px; left: 6px; min-width: 18px; height: 16px; padding: 0 4px; border-radius: 8px; background: #dceff3; color: #005467; font: 600 10px/16px Arial, sans-serif; text-align: center; }\n.fc-daygrid-week-number ~ .opportunities-calendar-day-count { left: 82px; }\n.opportunities-calendar-day-count[hidden] { display: none; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-calendar-day-count:not([data-empty=\"true\"]) { background: #16454f; color: #b9eaf4; }\n.opportunities-extension-calendar .fc .fc-day-other { background: var(--fc-neutral-bg-color); }\n.opportunities-extension-calendar .fc .fc-daygrid-event { white-space: normal; margin: 3px 4px; border-radius: 4px; cursor: pointer; border-width: 0 0 0 3px; border-style: solid; }\n.opportunities-extension-calendar .fc .fc-event-main { color: inherit; }\n.opportunities-calendar-event-content { min-width: 0; padding: 5px 6px; overflow-wrap: anywhere; }\n.opportunities-calendar-event-content strong { display: block; font-size: 12px; line-height: 16px; font-weight: 600; }\n.opportunities-calendar-event-content span { display: block; margin-top: 3px; font-size: 11px; line-height: 15px; }\n.opportunities-calendar-event-content strong,\n.opportunities-calendar-event-content span,\n.opportunities-calendar-day-item strong,\n.opportunities-calendar-day-item span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.opportunities-extension-calendar .fc .fc-daygrid-more-link { color: #00657b; font-size: 11px; line-height: 16px; padding: 0 5px; }\n.opportunities-calendar-day-list { min-height: 0; overflow-y: auto; padding: 8px 20px 20px; }\n.opportunities-calendar-day-item { display: block; width: 100%; padding: 12px 0; border: 0; border-bottom: 1px solid #dedbd7; background: transparent; color: #00657b; text-align: left; cursor: pointer; overflow-wrap: anywhere; }\n.opportunities-calendar-day-item strong, .opportunities-calendar-day-item span { display: block; font: 600 13px/20px Arial, sans-serif; }\n.opportunities-calendar-day-item span { margin-top: 4px; font-weight: 400; }\n.opportunities-calendar-day-item:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-calendar-day-item { border-bottom-color: #514d48; color: #80d6e8; }\n.opportunities-extension-calendar .fc .opportunities-calendar-stage-SQL { background: #dff1f4; border-color: #00829d; color: #005467; }\n.opportunities-extension-calendar .fc .opportunities-calendar-stage-PIPELINE,\n.opportunities-extension-calendar .fc .opportunities-calendar-stage-OTHER { background: #efeeec; border-color: #706a64; color: #49443f; }\n.opportunities-extension-calendar .fc .opportunities-calendar-stage-UPSIDE { background: #fff0da; border-color: #ba7000; color: #774700; }\n.opportunities-extension-calendar .fc .opportunities-calendar-stage-FORECAST { background: #f0e8f7; border-color: #8262a3; color: #624379; }\n.opportunities-extension-calendar .fc .opportunities-calendar-stage-WON { background: #e2f1e5; border-color: #2f8050; color: #215939; }\n.opportunities-calendar-message { margin: 0 0 12px; font-size: 13px; }\n.opportunities-calendar-message[hidden], .opportunities-calendar-grid[hidden], .opportunities-calendar-undated[hidden] { display: none; }\n.opportunities-calendar-undated { flex: 0 0 auto; max-height: 90px; overflow-y: auto; margin-top: 6px; border-top: 1px solid var(--fc-border-color); padding-top: 4px; }\n.opportunities-calendar-undated summary { cursor: pointer; font-size: 12px; line-height: 18px; }\n.opportunities-calendar-undated h3 { font-size: 13px; margin: 0 0 8px; }\n.opportunities-calendar-undated button { display: block; background: none; border: 0; text-align: left; font: inherit; padding: 6px 0; color: inherit; text-decoration: underline; cursor: pointer; overflow-wrap: anywhere; }\n.opportunities-calendar-detail .opportunities-extension-account-plans-header { align-items: start; gap: 16px; }\n.opportunities-calendar-detail .opportunities-extension-action-form-dialog { display: grid; grid-template-rows: auto minmax(0, 1fr); overflow: hidden; }\n.opportunities-calendar-detail h2 { font-size: 18px; overflow-wrap: anywhere; }\n.opportunities-calendar-detail-content { padding: 20px; overflow-y: auto; }\n.opportunities-calendar-detail-content a { color: #006b82; }\n.opportunities-calendar-detail-badges { display: flex; gap: 8px; margin-top: 18px; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-view-tabs { border-color: #514d48; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-view-tabs button { color: #c7c2bc; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-view-tabs button[aria-selected=\"true\"] { color: #80d6e8; border-bottom-color: #80d6e8; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-calendar {\n --fc-border-color: #514d48; --fc-page-bg-color: #292725; --fc-neutral-bg-color: #33302d;\n --fc-neutral-text-color: #c7c2bc; --fc-today-bg-color: #223b3f;\n --fc-button-bg-color: #292725; --fc-button-text-color: #eeeae6; --fc-button-border-color: #756f68;\n --fc-button-hover-bg-color: #234850; --fc-button-hover-border-color: #80d6e8;\n --fc-button-active-bg-color: #234850; --fc-button-active-border-color: #80d6e8;\n background: #292725; color: #eeeae6;\n}\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-calendar .fc .opportunities-calendar-stage-SQL { background: #16454f; color: #b9eaf4; border-color: #67cde0; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-calendar .fc .opportunities-calendar-stage-PIPELINE,\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-calendar .fc .opportunities-calendar-stage-OTHER { background: #403c38; color: #e4dfd9; border-color: #b8b1a8; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-calendar .fc .opportunities-calendar-stage-UPSIDE { background: #533e1e; color: #ffe0a9; border-color: #dba44f; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-calendar .fc .opportunities-calendar-stage-FORECAST { background: #493657; color: #ead5fc; border-color: #b998d8; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-calendar .fc .opportunities-calendar-stage-WON { background: #244a32; color: #c7edce; border-color: #84c396; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-calendar .fc .fc-daygrid-more-link,\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-calendar-detail-content a { color: #80d6e8; }\n@media (max-width: 700px) {\n .opportunities-extension-body { overflow-y: auto; grid-template-rows: max-content max-content minmax(480px, 1fr); }\n .opportunities-extension-views { min-height: 480px; }\n .opportunities-extension-calendar { padding: 10px; overflow-x: auto; }\n .opportunities-extension-calendar .fc { min-width: 0; }\n .opportunities-extension-calendar .fc .fc-view-harness { min-width: 560px; }\n .opportunities-extension-calendar .fc .fc-toolbar-title { font-size: 16px; }\n .opportunities-extension-calendar .fc .fc-daygrid-day-frame { padding-top: 22px; }\n .opportunities-calendar-day-count { top: 25px; }\n .fc-daygrid-week-number ~ .opportunities-calendar-day-count { left: 6px; }\n}\n\n.oe-time-dialog { --time-bg: #fff; --time-input-bg: #fff; --time-muted: #faf9f8; --time-border: #dedbd7; --time-input-border: #8f8983; --time-accent: #00758f; width: min(1600px, 100%); max-height: calc(100dvh - 24px); display: flex; flex-direction: column; overflow: hidden; font-size: 13px; line-height: 20px; }\n.opportunities-extension-modal[data-theme=\"dark\"] .oe-time-dialog { --time-bg: #292725; --time-input-bg: #211f1d; --time-muted: #35322f; --time-border: #514c47; --time-input-border: #918a82; --time-accent: #80d6e8; }\n.oe-time-modal { grid-template-columns: minmax(0, 1fr); }\n.oe-time-dialog, .oe-time-body { min-width: 0; }\n.oe-time-dialog * { box-sizing: border-box; }\n.oe-time-dialog [hidden] { display: none !important; }\n.oe-time-header { flex-shrink: 0; }\n.oe-time-body { padding: 18px; overflow: auto; min-height: 0; }\n.oe-time-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; }\n.oe-time-navigation { display: flex; align-items: center; gap: 8px; }\n.oe-time-ending { display: grid; gap: 4px; text-align: right; }\n.oe-time-summary { display: grid; grid-template-columns: repeat(4, 1fr); padding: 12px 0; gap: 12px; text-align: center; border-block: 1px solid var(--time-border); margin-bottom: 18px; }\n.oe-time-body button { min-width: 38px; min-height: 38px; display: inline-flex; gap: 8px; align-items: center; justify-content: center; color: inherit; background: transparent; border: 1px solid var(--time-input-border); border-radius: 4px; padding: 7px; cursor: pointer; font: inherit; }\n.oe-time-dialog button:hover:not(:disabled) { background: var(--time-muted); border-color: var(--time-accent); }\n.oe-time-dialog svg { width: 17px; height: 17px; flex-shrink: 0; }\n.oe-time-dialog input, .oe-time-dialog select, .oe-time-dialog textarea { font: inherit; line-height: 20px; color: inherit; background: var(--time-input-bg); border: 1px solid var(--time-input-border); border-radius: 4px; padding: 8px; min-height: 38px; }\n.oe-time-dialog select { height: 38px; }\n.oe-time-dialog :focus-visible { outline: 2px solid var(--time-accent); outline-offset: 2px; }\n.oe-time-dialog :disabled { opacity: .55; cursor: not-allowed; }\n.oe-time-grid { overflow-x: auto; }\n.oe-time-grid table { width: 100%; min-width: 1060px; border-collapse: collapse; table-layout: fixed; }\n.oe-time-grid th { background: var(--time-muted); padding: 10px 5px; font-weight: 600; text-align: center; border-bottom: 1px solid var(--time-border); }\n.oe-time-grid .opportunities-extension-sort-button { min-width: 0; min-height: 28px; padding: 4px 12px 4px 0; border: 0; border-radius: 0; gap: 0; }\n.oe-time-grid .opportunities-extension-sort-button::after { right: 0; font-size: 12px; }\n.oe-time-grid .oe-time-day-label { margin-bottom: 0; }\n.oe-time-grid th:first-child { width: 23%; }\n.oe-time-grid th:nth-child(2), .oe-time-grid th:nth-child(3) { width: 12%; }\n.oe-time-grid th:nth-last-child(-n+3) { width: 46px; }\n.oe-time-grid td { padding: 10px 5px; border-bottom: 1px solid var(--time-border); vertical-align: middle; text-align: center; }\n.oe-time-duplicate-row { outline: 2px solid #b3261e; outline-offset: -2px; animation: oe-time-duplicate-fade 5.5s linear forwards; }\n.opportunities-extension-modal[data-theme=\"dark\"] .oe-time-duplicate-row { --time-duplicate-color: #ffaaa4; }\n@keyframes oe-time-duplicate-fade { 0%, 90.909% { outline-color: var(--time-duplicate-color, #b3261e); } 100% { outline-color: transparent; } }\n@media (prefers-reduced-motion: reduce) { .oe-time-duplicate-row { animation-timing-function: step-end; } }\n.oe-time-grid select { width: 100%; }\n.oe-time-grid input[type=\"number\"] { width: min(100%, 60px); padding: 6px 3px; text-align: center; }\n.oe-time-grid .opportunities-extension-action-combobox input { width: 100%; text-align: left; text-overflow: ellipsis; }\n.oe-time-grid .opportunities-extension-action-options { text-align: left; }\n.oe-time-dialog .opportunities-extension-select-tooltip { position: fixed; z-index: 100; width: min(560px, calc(100vw - 40px)); max-height: min(440px, calc(100dvh - 48px)); overflow: auto; padding: 14px; border: 1px solid var(--time-input-border); border-radius: 4px; background: var(--time-input-bg); color: inherit; box-shadow: 0 4px 16px #0003; text-align: left; }\n.oe-time-sr-details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 18px; margin: 0; }\n.oe-time-sr-details > div { min-width: 0; overflow-wrap: anywhere; }\n.oe-time-sr-details dt { font-size: 11px; opacity: .75; margin-bottom: 2px; }\n.oe-time-sr-details dd { margin: 0; white-space: pre-wrap; }\n.oe-time-sr-details .oe-time-sr-description { grid-column: 1 / -1; }\n.oe-time-day > span { display: block; }\n.oe-time-day .oe-time-day-label { display: inline-flex; align-items: center; gap: 4px; margin-bottom: 9px; }\n.oe-time-day-total { font-size: 10px; background: var(--time-accent); color: var(--time-bg); min-width: 16px; border-radius: 8px; padding: 2px 4px; }\n.oe-time-notes textarea { width: 100%; resize: vertical; }\n.oe-time-notes-box { position: relative; text-align: left; background: var(--time-input-bg); border: 1px solid var(--time-input-border); border-radius: 4px; padding: 14px 12px 42px; }\n.oe-time-notes-count { display: block; font-weight: 600; opacity: .8; margin-bottom: 8px; }\n.oe-time-notes-box textarea { border: 0; min-height: 128px; padding: 0; }\n.oe-time-notes-box .oe-time-notes-collapse { position: absolute; right: 0; bottom: 0; background: var(--time-muted); }\n.oe-time-footer { flex-wrap: wrap; justify-content: flex-start; margin-top: 18px; }\n.oe-time-footer button { padding: 7px 14px; }\n.oe-time-status { padding: 12px 0; }\n.oe-time-loading-status { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }\n.oe-time-skeleton { display: inline-block; vertical-align: middle; border-radius: 4px; background: var(--time-border); color: transparent; animation: oe-time-pulse 1.3s ease-in-out infinite alternate; }\n.oe-time-skeleton-select { display: block; width: 100%; height: 38px; }\n.oe-time-skeleton-control { width: min(100%, 60px); height: 38px; }\n.oe-time-skeleton-heading { width: 65%; height: 20px; margin: 17px 0; }\n.oe-time-skeleton-summary { min-width: 44px; height: 20px; }\n@keyframes oe-time-pulse { from { opacity: .4; } to { opacity: 1; } }\n@media (prefers-reduced-motion: reduce) { .oe-time-skeleton { animation: none; } }\n.oe-time-status[role=\"alert\"] { color: #a12d27; }\n.oe-time-dialog [aria-invalid=\"true\"] { border-color: #b3261e; outline: 1px solid #b3261e; }\n.opportunities-extension-modal[data-theme=\"dark\"] .oe-time-status[role=\"alert\"] { color: #ffd9d5; }\n.opportunities-extension-modal[data-theme=\"dark\"] .oe-time-dialog [aria-invalid=\"true\"] { border-color: #ffaaa4; outline-color: #ffaaa4; }\n@media (max-width: 700px) { .oe-time-modal { padding: 8px; } .oe-time-dialog { max-height: calc(100dvh - 16px); } .oe-time-body { padding: 12px; } .oe-time-summary { grid-template-columns: repeat(2, 1fr); text-align: left; } .oe-time-toolbar { flex-wrap: wrap; } .oe-time-ending { text-align: left; } }\n\n.opportunities-extension-products-table th:last-child { width: 90px; padding-left: 6px; padding-right: 6px; white-space: nowrap; text-align: center; }\n.opportunities-extension-products-table .opportunities-extension-projection-cell { text-align: center; vertical-align: middle; }\n.opportunities-extension-projection-alert { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; padding: 0; color: #976000; width: 30px; height: 30px; flex: 0 0 30px; vertical-align: middle; }\n.opportunities-extension-projection-alert svg { display: block; flex: none; width: 19px; height: 19px; }\n.opportunities-extension-cell-actions > .opportunities-extension-opportunity-projection-alert { width: 20px; height: 20px; flex-basis: 20px; }\n.opportunities-extension-projection-alert:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }\n.opportunities-extension-action-form-dialog.opportunities-extension-projection-dialog { width: min(850px, 100%); display: flex; flex-direction: column; overflow: hidden; }\n.opportunities-extension-projection-dialog > header { flex: 0 0 auto; padding: 18px 20px; }\n.opportunities-extension-projection-dialog .opportunities-extension-action-form-heading { min-width: 0; overflow-wrap: anywhere; }\n.opportunities-extension-projection-body { min-height: 0; overflow: auto; padding: 16px 20px 0; }\n.opportunities-extension-projection-context { display: grid; grid-template-columns: max-content minmax(0, 1fr) max-content minmax(0, 1fr); gap: 8px 12px; margin: 0 0 16px; font-size: 12px; }\n.opportunities-extension-projection-context dt { font-weight: 600; }\n.opportunities-extension-projection-context dd { margin: 0; overflow-wrap: anywhere; }\n.opportunities-extension-projection-summary { font-size: 13px; font-weight: 600; color: #815400; margin: 0 0 12px; }\n.opportunities-extension-projection-notice { font-size: 12px; }\n.opportunities-extension-projection-viewport { overflow-x: auto; }\n.opportunities-extension-projection-table { width: 100%; border-collapse: collapse; font-size: 12px; font-variant-numeric: tabular-nums; }\n.opportunities-extension-projection-table th, .opportunities-extension-projection-table td { padding: 9px 12px; border-bottom: 1px solid #dedbd7; text-align: right; white-space: nowrap; }\n.opportunities-extension-projection-table th:first-child { text-align: left; }\n.opportunities-extension-projection-table thead th { background: #f5f4f2; font-weight: 600; }\n.opportunities-extension-projection-table .opportunities-extension-sort-button { min-height: 28px; padding: 4px 18px 4px 0; justify-content: flex-end; }\n.opportunities-extension-projection-table th:first-child .opportunities-extension-sort-button { justify-content: flex-start; }\n.opportunities-extension-projection-table .opportunities-extension-sort-button::after { right: 0; font-size: 12px; }\n.opportunities-extension-projection-table tbody th { font-weight: 400; }\n.opportunities-extension-projection-table tr[data-divergent=\"true\"] { background: #fff7e5; }\n.opportunities-extension-projection-table tr[data-divergent=\"true\"] td:last-child { color: #815400; font-weight: 700; }\n.opportunities-extension-projection-prorated { display: inline; color: #625d58; font-size: 10px; }\n.opportunities-extension-projection-footer { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0; padding: 14px 20px; font-size: 11px; color: #625d58; }\n.opportunities-extension-projection-update { flex: none; padding: 8px 12px; border: 1px solid #006879; border-radius: 4px; background: #006879; color: #fff; font: inherit; font-size: 12px; cursor: pointer; }\n.opportunities-extension-projection-update:hover:not(:disabled) { background: #005563; }\n.opportunities-extension-projection-update:disabled { opacity: .6; cursor: wait; }\n.opportunities-extension-projection-update:focus-visible { outline: 2px solid #00758f; outline-offset: 2px; }\n.opportunities-extension-projection-confirm { padding: 20px; }\n.opportunities-extension-projection-confirm h2 { margin: 0 0 12px; font-size: 18px; }\n.opportunities-extension-projection-confirm p { margin: 0 0 20px; font-size: 13px; line-height: 1.5; }\n.opportunities-extension-projection-confirm-actions { display: flex; justify-content: flex-end; gap: 8px; }\n.opportunities-extension-projection-cancel { padding: 8px 12px; border: 1px solid #8b8580; border-radius: 4px; background: transparent; color: inherit; font: inherit; font-size: 12px; cursor: pointer; }\n.opportunities-extension-projection-error { color: #b3261e; font-size: 12px; overflow-wrap: anywhere; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-projection-error { color: #ffb4ab; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-projection-alert,\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-projection-summary,\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-projection-table tr[data-divergent=\"true\"] td:last-child { color: #ffd080; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-projection-table thead th { background: #34312e; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-projection-table th,\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-projection-table td { border-color: #504b46; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-projection-table tr[data-divergent=\"true\"] { background: #3e3425; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-projection-prorated,\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-projection-footer { color: #c9c3bc; }\n@media (max-width: 600px) {\n .opportunities-extension-projection-context { grid-template-columns: max-content minmax(0, 1fr); }\n .opportunities-extension-projection-dialog > header { padding: 14px 12px; }\n .opportunities-extension-projection-body { padding: 12px 12px 0; }\n .opportunities-extension-projection-table th, .opportunities-extension-projection-table td { padding: 8px 6px; }\n .opportunities-extension-projection-footer { padding: 12px; }\n}\n\n.oe-org-modal { grid-template-columns: minmax(0, 1fr); }\n.oe-org-dialog { --org-bg: #fff; --org-canvas: #faf9f8; --org-border: #dedbd7; --org-muted: #625d58; --org-accent: #00758f; --org-selected: #e3f1f4; width: min(1500px, 100%); height: min(880px, calc(100dvh - 40px)); max-height: calc(100dvh - 40px); display: flex; flex-direction: column; overflow: hidden; font-size: 13px; color: #312d2a; background: var(--org-bg); }\n.opportunities-extension-modal[data-theme=\"dark\"] .oe-org-dialog { --org-bg: #292725; --org-canvas: #211f1d; --org-border: #625d58; --org-muted: #c9c3bd; --org-accent: #80d6e8; --org-selected: #203f46; color: #f5f4f2; }\n.oe-org-modal [hidden] { display: none !important; }\n.oe-org-dialog * { box-sizing: border-box; letter-spacing: 0; }\n.oe-org-dialog > header, .oe-org-toolbar, .oe-org-footer { flex: none; }\n.oe-org-heading { min-width: 0; overflow-wrap: anywhere; }\n.oe-org-heading p { margin: 5px 0 0; font-size: 12px; color: var(--org-muted); }\n.oe-org-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--org-border); }\n.oe-org-tools { display: flex; align-items: center; gap: 6px; margin-left: auto; }\n.oe-org-count { color: var(--org-muted); font-variant-numeric: tabular-nums; }\n.oe-org-zoom { width: 44px; text-align: center; font-variant-numeric: tabular-nums; }\n.oe-org-modal .oe-org-button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 34px; min-height: 34px; padding: 6px 9px; border: 1px solid var(--org-border, #8f8983); border-radius: 4px; background: transparent; color: inherit; font: inherit; cursor: pointer; }\n.oe-org-modal svg { width: 17px; height: 17px; flex: none; }\n.oe-org-dialog button:hover:not(:disabled) { background: var(--org-selected); }\n.oe-org-dialog :focus-visible { outline: 2px solid var(--org-accent); outline-offset: 2px; }\n.oe-org-modal .oe-org-primary { background: #006879; border-color: #006879; color: #fff; }\n.oe-org-dialog .oe-org-primary:hover:not(:disabled) { background: #005563; }\n.oe-org-dialog :disabled { opacity: .5; cursor: not-allowed; }\n.oe-org-workspace { min-height: 0; min-width: 0; flex: 1; display: flex; overflow: hidden; }\n.oe-org-viewport { position: relative; min-width: 0; min-height: 0; flex: 1; overflow: auto; background: var(--org-canvas); overscroll-behavior: contain; cursor: grab; }\n.oe-org-sizing { position: relative; margin-inline: auto; }\n.oe-org-canvas { position: relative; transform-origin: top left; }\n.oe-org-canvas .oe-org-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }\n.oe-org-lines path { stroke: var(--org-border); stroke-width: 2; fill: none; }\n.oe-org-node { position: absolute; width: 236px; height: 146px; border: 1px solid var(--org-border); border-top: 3px solid var(--org-accent); border-radius: 4px; background: var(--org-bg); display: flex; flex-direction: column; cursor: default; }\n.oe-org-node[data-selected=\"true\"] { outline: 2px solid var(--org-accent); outline-offset: 2px; }\n.oe-org-person { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: center; gap: 6px; text-align: left; padding: 9px 12px; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; border-radius: 0; width: 100%; }\n.oe-org-person strong, .oe-org-person > span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; line-height: 18px; }\n.oe-org-person > span { color: var(--org-muted); font-size: 12px; }\n.oe-org-node-actions { flex: none; display: flex; align-items: center; gap: 4px; padding: 4px 8px; height: 38px; border-top: 1px solid var(--org-border); }\n.oe-org-node-actions .oe-org-button { min-height: 28px; height: 28px; min-width: 28px; padding: 3px; border: 0; }\n.oe-org-node-actions [aria-expanded] { margin-left: auto; font-size: 11px; }\n.oe-org-note-marker { display: inline-flex; color: var(--org-muted); margin-left: auto; }\n.oe-org-editor { flex: 0 0 310px; width: 310px; padding: 16px; border-left: 1px solid var(--org-border); overflow-y: auto; background: var(--org-bg); }\n.oe-org-editor-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 16px; }\n.oe-org-editor h3 { margin: 0; font-size: 15px; }\n.oe-org-form { display: grid; gap: 16px; }\n.oe-org-field { display: grid; gap: 6px; font-size: 12px; font-weight: 600; min-width: 0; }\n.oe-org-dialog input, .oe-org-dialog textarea { min-width: 0; width: 100%; font: inherit; font-weight: 400; line-height: 20px; color: inherit; background: var(--org-bg); border: 1px solid var(--org-muted); border-radius: 3px; padding: 7px 8px; }\n.oe-org-dialog textarea { resize: vertical; min-height: 100px; max-height: 300px; }\n.oe-org-form-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }\n.oe-contact-name { position: relative; }\n.oe-org-dialog .oe-contact-name > input { padding-right: 42px; }\n.oe-org-modal .oe-contact-name > .oe-org-button { position: absolute; right: 2px; top: 2px; min-height: 30px; height: 30px; border: 0; }\n.oe-org-dialog.oe-contact-dialog { width: min(680px, 100%); height: auto; padding: 20px; gap: 20px; overflow-y: auto; }\n.oe-contact-dialog > header { margin: 0; }\n.oe-org-dialog.oe-contact-opportunities { width: min(1200px, 100%); height: auto; padding: 20px; gap: 16px; }\n.oe-contact-opportunities > header { margin: 0; }\n.oe-contact-opportunities-table { overflow: auto; min-height: 0; }\n.oe-contact-opportunities table { width: 100%; border-collapse: collapse; font-size: 12px; }\n.oe-contact-opportunities th, .oe-contact-opportunities td { padding: 12px; text-align: left; border-bottom: 1px solid var(--org-border); }\n.oe-contact-opportunities th { background: var(--org-canvas); white-space: nowrap; }\n.oe-contact-opportunities .opportunities-extension-sort-button { white-space: nowrap; min-width: max-content; min-height: 28px; padding: 4px 18px 4px 0; justify-content: flex-start; text-align: left; }\n.oe-contact-opportunities .opportunities-extension-sort-button::after { right: 0; }\n.oe-contact-opportunities th:nth-child(5), .oe-contact-opportunities td:nth-child(5) { text-align: right; font-variant-numeric: tabular-nums; }\n.oe-contact-opportunities th:nth-child(5) .opportunities-extension-sort-button { padding: 4px 0 4px 18px; justify-content: flex-end; text-align: right; }\n.oe-contact-opportunities th:nth-child(5) .opportunities-extension-sort-button::after { left: 0; right: auto; }\n.oe-contact-opportunities td:nth-child(5) .oe-contact-skeleton { margin-left: auto; }\n.oe-contact-opportunities .opportunities-extension-sort-label { white-space: nowrap; overflow-wrap: normal; word-break: normal; }\n.oe-contact-opportunities table { min-width: 900px; }\n.oe-contact-opportunities a { color: var(--org-accent); }\n.oe-contact-skeleton { display: block; height: 14px; min-width: 24px; border-radius: 4px; background: var(--org-border); animation: oe-time-pulse 1.3s ease-in-out infinite alternate; }\n.oe-contact-skeleton-total { width: 110px; }\n.oe-contact-opportunities table[aria-busy=\"true\"] { table-layout: fixed; }\n.oe-contact-opportunities table[aria-busy=\"true\"] th:nth-child(3) { width: 28%; }\n@media (prefers-reduced-motion: reduce) { .oe-contact-skeleton { animation: none; } }\n.oe-contact-dialog [aria-invalid=\"true\"] { border-color: #b3261e; outline: 1px solid #b3261e; }\n.opportunities-extension-modal[data-theme=\"dark\"] .oe-contact-dialog [aria-invalid=\"true\"] { border-color: #ffaaa4; outline-color: #ffaaa4; }\n.oe-contact-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }\n.oe-contact-phone { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; border: 1px solid var(--org-border); border-radius: 4px; padding: 12px; min-width: 0; margin: 0; }\n.oe-contact-form legend { font-weight: 600; padding: 0 4px; }\n.oe-contact-primary { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 20px; border: 0; padding: 0; margin: 0; }\n.oe-contact-primary label { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; }\n.oe-contact-primary input { width: auto; accent-color: var(--org-accent); }\n@media (max-width: 520px) { .oe-contact-form, .oe-contact-phone { grid-template-columns: minmax(0, 1fr); } }\n.oe-org-dialog .oe-org-danger, .oe-org-error { color: #b3261e; }\n.opportunities-extension-modal[data-theme=\"dark\"] .oe-org-dialog .oe-org-danger, .opportunities-extension-modal[data-theme=\"dark\"] .oe-org-error { color: #ffaaa4; }\n.oe-org-footer { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--org-border); }\n.oe-org-status { margin: 0 auto 0 0; font-size: 12px; overflow-wrap: anywhere; }\n.oe-org-footer .oe-org-button { flex: none; }\n.oe-org-empty { display: grid; place-content: center; justify-items: center; height: 100%; min-height: 180px; gap: 12px; }\n.oe-org-empty > svg { width: 40px; height: 40px; color: var(--org-accent); }\n.oe-org-empty h3 { margin: 0; font-size: 16px; }\n.oe-org-tooltip { position: fixed; z-index: 20; max-width: min(360px, calc(100vw - 24px)); max-height: min(260px, 45dvh); overflow-y: auto; padding: 12px; background: #fff; color: #312d2a; border: 1px solid #8f8983; border-radius: 4px; box-shadow: 0 3px 12px #0002; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12px; line-height: 18px; }\n.opportunities-extension-modal[data-theme=\"dark\"] .oe-org-tooltip { background: #35322f; color: #f5f4f2; }\n.oe-org-tooltip { pointer-events: none; }\n.oe-org-confirm { position: absolute; inset: 0; display: grid; place-items: center; background: #0006; z-index: 30; padding: 16px; }\n.oe-org-confirm-panel { width: min(430px, 100%); background: #fff; color: #312d2a; border: 1px solid #8f8983; border-radius: 6px; padding: 24px; overflow-wrap: anywhere; }\n.oe-org-confirm-panel h3 { margin: 0 0 12px; font-size: 18px; }\n.oe-org-confirm-panel p { font-size: 13px; line-height: 20px; margin: 0 0 24px; }\n.opportunities-extension-modal[data-theme=\"dark\"] .oe-org-confirm-panel { background: #292725; color: #f5f4f2; }\n.oe-org-skeleton { width: 236px; height: 146px; margin: 28px; border-radius: 4px; background: var(--org-border); animation: oe-time-pulse 1.3s ease-in-out infinite alternate; }\n@media (prefers-reduced-motion: reduce) { .oe-org-skeleton { animation: none; } }\n@media (max-width: 760px) {\n .oe-org-modal { padding: 8px; }\n .oe-org-dialog { height: calc(100dvh - 16px); max-height: calc(100dvh - 16px); }\n .oe-org-workspace { flex-direction: column; }\n .oe-org-editor { flex: 0 1 55%; width: 100%; border-left: 0; border-top: 1px solid var(--org-border); }\n .oe-org-viewport { min-height: 140px; }\n .oe-org-toolbar { padding: 8px; gap: 6px; }\n .oe-org-tools { gap: 2px; }\n .oe-org-footer { padding: 8px; }\n}\n\n/* Shared data-table presentation. Calendar grids are intentionally not data tables. */\n.opportunities-extension-modal :is(\n .opportunities-extension-table-surface,\n .opportunities-extension-install-base-content,\n .opportunities-extension-service-requests-content,\n .opportunities-extension-ratecard-viewport,\n .opportunities-extension-projection-viewport,\n .oe-time-grid,\n .oe-contact-opportunities-table\n) {\n box-sizing: border-box;\n min-width: 0;\n border: 1px solid var(--oe-table-heading-border);\n border-radius: 4px;\n overflow: auto;\n}\n/* Unpadded dialogs need an inset on the scrolling frame itself. */\n.opportunities-extension-modal :is(\n .opportunities-extension-install-base-content,\n .opportunities-extension-service-requests-content,\n .opportunities-extension-ratecard-viewport\n) { margin: 16px; }\n/* Other frames already sit inside a padded body: keep a single gutter. */\n.opportunities-extension-modal :is(\n .opportunities-extension-body,\n .opportunities-extension-projection-body,\n .opportunities-extension-products-detail,\n .oe-time-body,\n .oe-org-dialog.oe-contact-opportunities\n) { padding: 16px; }\n.opportunities-extension-modal table.opportunities-extension-products-table {\n border: 1px solid var(--oe-table-heading-border);\n}\n.opportunities-extension-modal {\n --oe-table-heading: #faf9f8;\n --oe-table-text: #312d2a;\n --oe-table-border: #ebe8e5;\n --oe-table-heading-border: #b8b2ad;\n --oe-table-hover: #f5f4f2;\n}\n.opportunities-extension-modal[data-theme=\"dark\"] {\n --oe-table-heading: #333130;\n --oe-table-text: #f6f4f2;\n --oe-table-border: #3f3c39;\n --oe-table-heading-border: #4e4a46;\n --oe-table-hover: #35322f;\n}\n.opportunities-extension-modal table[data-table-layout=\"standard\"]:not(.fc-scrollgrid) {\n width: 100%; border-collapse: collapse; border-spacing: 0; table-layout: auto;\n color: var(--oe-table-text); font-size: 12px; line-height: 1.35;\n}\n.opportunities-extension-modal table[data-table-layout=\"standard\"] > thead > tr > th {\n padding: 10px 12px; height: 44px; vertical-align: middle; text-align: left;\n white-space: nowrap; overflow-wrap: normal; word-break: normal;\n font-size: 12px; font-weight: 700; color: var(--oe-table-text);\n background: var(--oe-table-heading); border-bottom: 1px solid var(--oe-table-heading-border);\n}\n.opportunities-extension-modal table[data-table-layout=\"standard\"] > tbody > tr > td {\n padding: 10px 12px; vertical-align: middle; text-align: left;\n border-bottom: 1px solid var(--oe-table-border);\n}\n.opportunities-extension-modal table[data-table-layout=\"standard\"] > tbody > tr:hover { background: var(--oe-table-hover); }\n.opportunities-extension-modal table[data-table-layout=\"standard\"] > thead > tr > th .opportunities-extension-sort-button,\n.opportunities-extension-modal table[data-table-layout=\"standard\"] .opportunities-extension-ratecard-sort {\n display: flex; align-items: center; justify-content: flex-start; gap: 8px;\n width: 100%; min-width: max-content; min-height: 28px; padding: 4px 18px 4px 0;\n border: 0; border-radius: 0; background: transparent; color: inherit;\n text-align: left; white-space: nowrap; overflow-wrap: normal; font-weight: 700;\n}\n.opportunities-extension-modal table[data-table-layout=\"standard\"] .opportunities-extension-sort-label { white-space: nowrap; overflow-wrap: normal; word-break: normal; }\n.opportunities-extension-modal table[data-table-layout=\"standard\"] > thead > tr > th .opportunities-extension-sort-button::after { position: absolute; right: 0; left: auto; font-size: 12px; }\n.opportunities-extension-modal table[data-table-layout=\"standard\"] .opportunities-extension-ratecard-sort-icon { margin-left: auto; }\n/* Currency columns keep their heading and value on the same right edge. */\n.opportunities-extension-modal table[data-table-layout=\"standard\"] :is(th, td)[data-align=\"money\"] { text-align: right; font-variant-numeric: tabular-nums; }\n.opportunities-extension-modal table[data-table-layout=\"standard\"] > thead > tr > th[data-align=\"money\"] .opportunities-extension-sort-button,\n.opportunities-extension-modal table[data-table-layout=\"standard\"] th[data-align=\"money\"] .opportunities-extension-ratecard-sort { justify-content: flex-end; text-align: right; padding: 4px 0 4px 18px; }\n.opportunities-extension-modal table[data-table-layout=\"standard\"] > thead > tr > th[data-align=\"money\"] .opportunities-extension-sort-button::after { left: 0; right: auto; }\n.opportunities-extension-modal table[data-table-layout=\"standard\"] th[data-align=\"money\"] .opportunities-extension-ratecard-sort-icon { order: -1; margin-left: 0; margin-right: auto; }\n.opportunities-extension-modal table[data-table-layout=\"standard\"] td[data-align=\"money\"] > span[class*=\"skeleton\"] { margin-left: auto; }\n/* Preserve room for Overview badges and the compact daily entry controls. */\n.opportunities-extension-modal table.opportunities-extension-table > tbody > tr > td:is([data-column=\"name\"], [data-column=\"customer\"]) { padding-bottom: 38px; vertical-align: top; }\n.opportunities-extension-modal .oe-time-grid table[data-table-layout=\"standard\"] > :is(thead, tbody) > tr > :is(th, td) { padding-left: 5px; padding-right: 5px; }\n.opportunities-extension-modal .oe-time-grid table[data-table-layout=\"standard\"] { table-layout: fixed; }\n.opportunities-extension-modal table[data-table-layout=\"standard\"] > tbody > tr > th[scope=\"row\"] { padding: 10px 12px; text-align: left; background: var(--oe-table-heading); border-bottom: 1px solid var(--oe-table-border); }\n/* Rate Card must fit its drawer; headings may wrap at spaces, never mid-word. */\n.opportunities-extension-modal table.opportunities-extension-ratecard-table[data-table-layout=\"standard\"] {\n min-width: 0;\n table-layout: fixed;\n}\n.opportunities-extension-modal table.opportunities-extension-ratecard-table[data-table-layout=\"standard\"] > :is(thead, tbody) > tr > :is(th, td) {\n padding-inline: 6px;\n}\n.opportunities-extension-modal table.opportunities-extension-ratecard-table[data-table-layout=\"standard\"] > thead > tr > th,\n.opportunities-extension-modal table.opportunities-extension-ratecard-table[data-table-layout=\"standard\"] > thead > tr > th .opportunities-extension-ratecard-sort {\n white-space: normal;\n overflow-wrap: normal;\n word-break: normal;\n hyphens: none;\n min-width: 0;\n}\n.opportunities-extension-modal table.opportunities-extension-ratecard-table[data-table-layout=\"standard\"] > thead > tr > th .opportunities-extension-ratecard-sort {\n padding: 4px 0;\n gap: 4px;\n}\n.opportunities-extension-modal .opportunities-extension-ratecard-sort > span:first-child { min-width: 0; }\n.opportunities-extension-modal .opportunities-extension-ratecard-sort-icon { flex: 0 0 12px; }\n\n/* Modal titles follow the customer Service Requests heading. Keep section and\n calendar headings independent from dialog typography. */\n.opportunities-extension-modal :is(\n .opportunities-extension-header,\n .opportunities-extension-account-plans-header,\n .opportunities-extension-preferences-header\n) {\n padding: 16px;\n gap: 16px;\n align-items: flex-start;\n}\n/* These headers live in panels that already supply the outer inset. */\n.opportunities-extension-modal :is(.oe-org-dialog.oe-contact-dialog,\n .oe-org-confirm-panel, .opportunities-extension-projection-confirm,\n .opportunities-extension-debug-panel) { padding: 16px; }\n.opportunities-extension-modal :is(.oe-org-editor-header,\n .opportunities-extension-debug-panel-header) {\n padding: 0;\n gap: 16px;\n align-items: flex-start;\n}\n.opportunities-extension-modal :is(\n .opportunities-extension-account-plans-header,\n .opportunities-extension-preferences-header,\n .opportunities-extension-debug-panel-header\n) p {\n margin: 5px 0 0;\n font-family: \"Oracle Sans\", Arial, Helvetica, sans-serif;\n font-size: 13px;\n font-weight: 400;\n line-height: 1.35;\n letter-spacing: normal;\n overflow-wrap: anywhere;\n}\n/* Search controls share the 16px inset of their table frames. */\n.opportunities-extension-modal :is(.opportunities-extension-customer-table-toolbar,\n .opportunities-extension-ratecard-toolbar,\n .opportunities-extension-ratecard-plan-details) { padding-inline: 16px; }\n.opportunities-extension-modal .opportunities-extension-customer-table-toolbar {\n padding-block: 12px;\n}\n.opportunities-extension-modal .opportunities-extension-customer-table-search {\n width: min(420px, 100%);\n height: 38px;\n padding: 8px 12px;\n font-size: 13px;\n line-height: 20px;\n}\n.opportunities-extension-modal :is(\n .opportunities-extension-header,\n .opportunities-extension-account-plans-header,\n .opportunities-extension-preferences-header,\n .opportunities-extension-debug-panel-header,\n .oe-org-editor-header\n) :is(h1, h2, h3),\n.opportunities-extension-modal .opportunities-extension-projection-confirm h2,\n.opportunities-extension-modal .oe-org-confirm-panel h3 {\n margin: 0;\n font-family: \"Oracle Sans\", Arial, Helvetica, sans-serif;\n font-size: 20px;\n font-weight: 700;\n line-height: 24px;\n letter-spacing: normal;\n color: #312d2a;\n min-width: 0;\n overflow-wrap: anywhere;\n}\n.opportunities-extension-modal[data-theme=\"dark\"] :is(\n .opportunities-extension-header,\n .opportunities-extension-account-plans-header,\n .opportunities-extension-preferences-header,\n .opportunities-extension-debug-panel-header,\n .oe-org-editor-header\n) :is(h1, h2, h3),\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-projection-confirm h2,\n.opportunities-extension-modal[data-theme=\"dark\"] .oe-org-confirm-panel h3 {\n color: #f6f4f2;\n}\n"; +const redwoodStyles = "\n .opportunities-extension-scroll-lock {\n overflow: hidden !important;\n }\n\n .opportunities-extension-modal,\n .opportunities-extension-modal * {\n box-sizing: border-box;\n font-family: \"Oracle Sans\", Arial, Helvetica, sans-serif;\n }\n\n .opportunities-extension-modal {\n position: fixed;\n inset: 0;\n z-index: 2147483647;\n background: #f5f4f2;\n color: #000000;\n }\n\n .opportunities-extension-modal[hidden] {\n display: none !important;\n }\n\n .opportunities-extension-shell {\n height: 100vh;\n min-height: 0;\n display: grid;\n grid-template-rows: auto minmax(0, 1fr);\n background: #f5f4f2;\n }\n\n .opportunities-extension-header {\n position: relative;\n display: flex;\n align-items: flex-start;\n justify-content: space-between;\n gap: 24px;\n padding: 28px 40px 22px;\n border-bottom: 1px solid #dedbd7;\n background:\n linear-gradient(90deg, #8f624a 0 11%, #c74634 11% 23%, #6f5a7f 23% 36%, #00758f 36% 51%, #d4b06a 51% 63%, transparent 63% 100%) top left / 100% 6px no-repeat,\n #ffffff;\n }\n\n .opportunities-extension-header::before {\n position: absolute;\n left: 40px;\n bottom: -1px;\n width: 64px;\n height: 3px;\n background: #00758f;\n content: \"\";\n }\n\n .opportunities-extension-header h1 {\n margin: 0;\n color: #000000;\n font-size: 24px;\n font-weight: 700;\n line-height: 1.2;\n letter-spacing: 0;\n }\n\n .opportunities-extension-header p {\n margin: 0;\n color: #5f5a55;\n font-size: 14px;\n line-height: 1.4;\n }\n\n .opportunities-extension-subtitle-row {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: 8px;\n margin-top: 6px;\n }\n\n .opportunities-extension-auth-badge {\n display: inline-flex;\n align-items: center;\n min-height: 22px;\n padding: 2px 8px;\n border-radius: 999px;\n color: #ffffff;\n font-size: 12px;\n font-weight: 700;\n line-height: 1.2;\n }\n\n .opportunities-extension-auth-badge-authenticated {\n background: #3f6f17;\n }\n\n .opportunities-extension-auth-badge-unauthenticated {\n background: #c5331f;\n }\n\n .opportunities-extension-auth-badge-pending {\n background: #6f5a7f;\n }\n\n .opportunities-extension-products-progress {\n display: inline-flex;\n align-items: center;\n min-height: 22px;\n padding: 2px 8px;\n border-radius: 999px;\n background: #e8f4f6;\n color: #006d7a;\n font-size: 12px;\n font-weight: 700;\n line-height: 1.2;\n }\n\n .opportunities-extension-products-progress[hidden] {\n display: none !important;\n }\n\n .opportunities-extension-products-cache-timestamp {\n display: inline-flex;\n align-items: center;\n min-height: 22px;\n padding: 2px 8px;\n border-radius: 999px;\n background: #f0eeeb;\n color: #5f5a55;\n font-size: 11px;\n font-weight: 600;\n line-height: 1.2;\n }\n\n .opportunities-extension-products-cache-timestamp[hidden] {\n display: none !important;\n }\n\n .opportunities-extension-products-progress[data-state=\"running\"]::before {\n width: 12px;\n height: 12px;\n margin-right: 6px;\n border: 2px solid currentColor;\n border-right-color: transparent;\n border-radius: 50%;\n content: \"\";\n animation: opportunities-extension-spin .8s linear infinite;\n }\n\n .opportunities-extension-products-progress[data-state=\"complete\"] {\n background: #e2f2e5;\n color: #356d19;\n }\n\n .opportunities-extension-products-progress[data-state=\"complete-with-errors\"],\n .opportunities-extension-products-progress[data-state=\"error\"] {\n background: #f9e3e1;\n color: #a52b1c;\n }\n\n @keyframes opportunities-extension-spin {\n to { transform: rotate(360deg); }\n }\n\n .opportunities-extension-icon-button {\n width: 36px;\n height: 36px;\n flex: 0 0 36px;\n border: 1px solid transparent;\n border-radius: 4px;\n background: transparent;\n color: #312d2a;\n font-size: 18px;\n font-weight: 600;\n line-height: 1;\n cursor: pointer;\n }\n\n .opportunities-extension-header-actions {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n }\n\n .opportunities-extension-icon-button svg {\n width: 18px;\n height: 18px;\n vertical-align: middle;\n }\n\n .opportunities-extension-icon-button .opportunities-extension-settings-icon {\n width: 20px;\n height: 20px;\n }\n\n .opportunities-extension-icon-button:hover,\n .opportunities-extension-icon-button:focus {\n border-color: #b8b2ad;\n background: #f5f4f2;\n outline: none;\n }\n\n .opportunities-extension-body {\n display: grid;\n min-height: 0;\n grid-template-rows: auto auto minmax(0, 1fr);\n gap: 16px;\n padding: 22px 40px 36px;\n background: #f5f4f2;\n overflow: hidden;\n }\n\n .opportunities-extension-form {\n display: flex;\n align-items: end;\n flex-wrap: wrap;\n gap: 24px;\n min-height: 82px;\n max-width: none;\n margin: 0;\n padding: 14px 16px;\n border: 1px solid #dedbd7;\n border-radius: 4px;\n background: #ffffff;\n }\n\n .opportunities-extension-field {\n display: grid;\n max-width: max-content;\n min-width: 270px;\n width: max-content;\n gap: 6px;\n color: #312d2a;\n font-size: 13px;\n font-weight: 600;\n line-height: 1.3;\n }\n\n .opportunities-extension-stage-dashboard {\n display: grid;\n grid-template-columns: repeat(6, minmax(0, 1fr));\n gap: 12px;\n }\n\n .opportunities-extension-stage-dashboard-card {\n display: grid;\n gap: 6px;\n min-width: 0;\n padding: 12px 16px;\n border: 1px solid #dedbd7;\n border-top: 3px solid #5f5a55;\n border-radius: 4px;\n background: #ffffff;\n }\n\n .opportunities-extension-stage-dashboard-card span {\n color: #5f5a55;\n font-size: 11px;\n font-weight: 700;\n line-height: 1.2;\n }\n\n .opportunities-extension-stage-dashboard-value {\n overflow: hidden;\n color: #312d2a;\n font-size: 22px;\n font-weight: 700;\n line-height: 1.2;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n .opportunities-extension-stage-dashboard-card[data-stage=\"SQL\"] {\n border-top-color: #008aa6;\n }\n\n .opportunities-extension-total-dashboard-card {\n border-top-color: #312d2a;\n }\n\n .opportunities-extension-stage-dashboard-card[data-stage=\"PIPELINE\"] {\n border-top-color: #6f6863;\n }\n\n .opportunities-extension-stage-dashboard-card[data-stage=\"UPSIDE\"] {\n border-top-color: #c87b00;\n }\n\n .opportunities-extension-stage-dashboard-card[data-stage=\"FORECAST\"] {\n border-top-color: #755b8b;\n }\n\n .opportunities-extension-stage-dashboard-card[data-stage=\"WON\"] {\n border-top-color: #4b7f22;\n }\n\n .opportunities-extension-stage-filter {\n display: grid;\n grid-template-rows: auto 44px;\n gap: 6px;\n min-width: 0;\n }\n\n .opportunities-extension-stage-filter-label {\n color: #312d2a;\n font-size: 13px;\n font-weight: 600;\n line-height: 1.3;\n }\n\n .opportunities-extension-stage-filter-controls {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: 8px;\n }\n\n .opportunities-extension-stage-filter-button {\n min-height: 36px;\n padding: 6px 12px;\n border: 1px solid currentColor;\n border-radius: 18px;\n background: #ffffff;\n color: #5f5a55;\n font-size: 12px;\n font-weight: 700;\n letter-spacing: 0;\n line-height: 1.2;\n cursor: pointer;\n }\n\n .opportunities-extension-stage-filter-button[data-stage=\"SQL\"] {\n color: #006b84;\n }\n\n .opportunities-extension-stage-filter-button[data-stage=\"PIPELINE\"] {\n color: #5f5a55;\n }\n\n .opportunities-extension-stage-filter-button[data-stage=\"UPSIDE\"] {\n color: #945400;\n }\n\n .opportunities-extension-stage-filter-button[data-stage=\"FORECAST\"] {\n color: #624e74;\n }\n\n .opportunities-extension-stage-filter-button[data-stage=\"WON\"] {\n color: #3f6f17;\n }\n\n .opportunities-extension-stage-filter-button[aria-pressed=\"true\"][data-stage=\"SQL\"] {\n border-color: #006b84;\n background: #006b84;\n color: #ffffff;\n }\n\n .opportunities-extension-stage-filter-button[aria-pressed=\"true\"][data-stage=\"PIPELINE\"] {\n border-color: #5f5a55;\n background: #5f5a55;\n color: #ffffff;\n }\n\n .opportunities-extension-stage-filter-button[aria-pressed=\"true\"][data-stage=\"UPSIDE\"] {\n border-color: #945400;\n background: #945400;\n color: #ffffff;\n }\n\n .opportunities-extension-stage-filter-button[aria-pressed=\"true\"][data-stage=\"FORECAST\"] {\n border-color: #624e74;\n background: #624e74;\n color: #ffffff;\n }\n\n .opportunities-extension-stage-filter-button[aria-pressed=\"true\"][data-stage=\"WON\"] {\n border-color: #3f6f17;\n background: #3f6f17;\n color: #ffffff;\n }\n\n .opportunities-extension-stage-filter-button:focus-visible {\n outline: 2px solid #00758f;\n outline-offset: 2px;\n }\n\n .opportunities-extension-status-filter {\n display: grid;\n grid-template-rows: auto 44px;\n gap: 6px;\n min-width: 0;\n }\n\n .opportunities-extension-status-filter-label {\n color: #312d2a;\n font-size: 13px;\n font-weight: 600;\n line-height: 1.3;\n }\n\n .opportunities-extension-status-filter-controls {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: 8px;\n }\n\n .opportunities-extension-status-filter-button {\n min-height: 36px;\n padding: 6px 12px;\n border: 1px solid currentColor;\n border-radius: 18px;\n background: #ffffff;\n font-size: 12px;\n font-weight: 700;\n letter-spacing: 0;\n line-height: 1.2;\n cursor: pointer;\n }\n\n .opportunities-extension-status-filter-button[data-status=\"OPEN\"] {\n color: #197a3d;\n }\n\n .opportunities-extension-status-filter-button[data-status=\"CLOSED\"] {\n color: #4b5563;\n }\n\n .opportunities-extension-status-filter-button[data-status=\"LOST\"] {\n color: #b13b34;\n }\n\n .opportunities-extension-status-filter-button[data-status=\"WON\"] {\n color: #1f5f99;\n }\n\n .opportunities-extension-status-filter-button[aria-pressed=\"true\"][data-status=\"OPEN\"] {\n border-color: #197a3d;\n background: #197a3d;\n color: #ffffff;\n }\n\n .opportunities-extension-status-filter-button[aria-pressed=\"true\"][data-status=\"CLOSED\"] {\n border-color: #4b5563;\n background: #4b5563;\n color: #ffffff;\n }\n\n .opportunities-extension-status-filter-button[aria-pressed=\"true\"][data-status=\"LOST\"] {\n border-color: #b13b34;\n background: #b13b34;\n color: #ffffff;\n }\n\n .opportunities-extension-status-filter-button[aria-pressed=\"true\"][data-status=\"WON\"] {\n border-color: #1f5f99;\n background: #1f5f99;\n color: #ffffff;\n }\n\n .opportunities-extension-status-filter-button:focus-visible {\n outline: 2px solid #00758f;\n outline-offset: 2px;\n }\n\n .opportunities-extension-customer-filter {\n position: relative;\n display: grid;\n grid-template-rows: auto 44px;\n gap: 6px;\n min-width: 220px;\n }\n\n .opportunities-extension-customer-filter-label {\n color: #312d2a;\n font-size: 13px;\n font-weight: 600;\n line-height: 1.3;\n }\n\n .opportunities-extension-customer-filter-trigger {\n position: relative;\n min-width: 220px;\n min-height: 44px;\n padding: 10px 38px 10px 12px;\n border: 1px solid #b8b2ad;\n border-radius: 3px;\n background: #ffffff;\n color: #312d2a;\n font-size: 14px;\n line-height: 1.3;\n text-align: left;\n cursor: pointer;\n }\n\n .opportunities-extension-customer-filter-trigger::after {\n position: absolute;\n top: 50%;\n right: 16px;\n width: 0;\n height: 0;\n border-top: 6px solid #312d2a;\n border-right: 5px solid transparent;\n border-left: 5px solid transparent;\n content: \"\";\n pointer-events: none;\n transform: translateY(-50%);\n }\n\n .opportunities-extension-customer-filter-trigger:disabled {\n cursor: not-allowed;\n background: #f5f4f2;\n color: #7d7772;\n }\n\n .opportunities-extension-customer-filter-trigger:focus-visible {\n border-color: #312d2a;\n box-shadow: 0 0 0 1px #312d2a;\n outline: none;\n }\n\n .opportunities-extension-customer-filter-panel {\n position: absolute;\n top: calc(100% + 8px);\n left: 0;\n z-index: 4;\n display: grid;\n width: min(360px, calc(100vw - 80px));\n gap: 10px;\n padding: 12px;\n border: 1px solid #8f8a85;\n border-radius: 4px;\n background: #ffffff;\n box-shadow: 0 4px 12px rgba(0, 0, 0, .18);\n }\n\n .opportunities-extension-customer-filter-panel[hidden] {\n display: none !important;\n }\n\n .opportunities-extension-customer-filter-search {\n width: 100%;\n min-height: 40px;\n padding: 8px 10px;\n border: 1px solid #b8b2ad;\n border-radius: 3px;\n background: #ffffff;\n color: #312d2a;\n font-size: 14px;\n }\n\n .opportunities-extension-customer-filter-search:focus {\n border-color: #312d2a;\n box-shadow: 0 0 0 1px #312d2a;\n outline: none;\n }\n\n .opportunities-extension-customer-filter-select-all,\n .opportunities-extension-customer-filter-option {\n display: flex;\n align-items: center;\n gap: 8px;\n color: #312d2a;\n font-size: 13px;\n line-height: 1.35;\n }\n\n .opportunities-extension-customer-filter-select-all {\n min-height: 32px;\n padding-bottom: 8px;\n border-bottom: 1px solid #dedbd7;\n font-weight: 700;\n }\n\n .opportunities-extension-customer-filter-panel input[type=\"checkbox\"] {\n width: 16px;\n height: 16px;\n flex: 0 0 16px;\n accent-color: #00758f;\n }\n\n .opportunities-extension-customer-filter-list {\n display: block;\n max-height: 250px;\n overflow: auto;\n }\n\n .opportunities-extension-customer-filter-option {\n display: grid;\n grid-template-columns: 16px minmax(0, 1fr);\n align-items: start;\n min-height: 0;\n height: auto !important;\n padding: 8px 4px;\n cursor: pointer;\n }\n\n .opportunities-extension-customer-filter-option input[type=\"checkbox\"] {\n margin-top: 1px;\n }\n\n .opportunities-extension-customer-filter-option span {\n display: block;\n min-width: 0;\n line-height: 18px;\n overflow-wrap: anywhere;\n white-space: normal;\n }\n\n .opportunities-extension-customer-filter-option:hover {\n background: #f5f4f2;\n }\n\n .opportunities-extension-customer-filter-empty {\n margin: 4px 0;\n color: #5f5a55;\n font-size: 13px;\n }\n\n .opportunities-extension-table-search-field {\n display: grid;\n grid-template-rows: auto 44px;\n gap: 6px;\n width: 260px;\n color: #312d2a;\n font-size: 13px;\n font-weight: 600;\n line-height: 1.3;\n }\n\n .opportunities-extension-table-search-field input {\n width: 100%;\n min-height: 44px;\n padding: 10px 12px;\n border: 1px solid #b8b2ad;\n border-radius: 3px;\n background: #ffffff;\n color: #312d2a;\n font-size: 14px;\n line-height: 1.3;\n }\n\n .opportunities-extension-table-search-field input:focus {\n border-color: #312d2a;\n box-shadow: 0 0 0 1px #312d2a;\n outline: none;\n }\n\n .opportunities-extension-select-wrap {\n position: relative;\n display: block;\n width: 270px;\n max-width: 100%;\n }\n\n .opportunities-extension-select-wrap::after {\n position: absolute;\n top: 50%;\n right: 16px;\n width: 0;\n height: 0;\n border-left: 5px solid transparent;\n border-right: 5px solid transparent;\n border-top: 6px solid #000000;\n content: \"\";\n pointer-events: none;\n transform: translateY(-50%);\n }\n\n .opportunities-extension-field select {\n width: 100%;\n min-width: 0;\n max-width: 100%;\n min-height: 44px;\n box-sizing: border-box;\n appearance: none;\n border: 1px solid #b8b2ad;\n border-radius: 3px;\n background: #ffffff;\n color: #000000;\n font-size: 14px;\n line-height: 1.3;\n padding: 11px 44px 11px 12px;\n }\n\n .opportunities-extension-field select:focus {\n border-color: #312d2a;\n box-shadow: 0 0 0 1px #312d2a;\n outline: none;\n }\n\n .opportunities-extension-table-surface {\n min-height: 0;\n height: 100%;\n border: 1px solid #dedbd7;\n border-radius: 4px;\n background: #ffffff;\n overflow-x: auto;\n overflow-y: auto;\n }\n\n .opportunities-extension-table {\n width: 100%;\n min-width: 0;\n border-collapse: collapse;\n table-layout: fixed;\n color: #312d2a;\n font-size: 13px;\n line-height: 1.35;\n }\n\n .opportunities-extension-table thead {\n background: #faf9f8;\n }\n\n .opportunities-extension-table th {\n position: sticky;\n top: 0;\n z-index: 1;\n height: 44px;\n border-bottom: 1px solid #b8b2ad;\n background: #faf9f8;\n color: #312d2a;\n font-size: 12px;\n font-weight: 700;\n text-align: left;\n white-space: nowrap;\n }\n\n .opportunities-extension-table td {\n min-height: 48px;\n padding: 12px 16px;\n border-bottom: 1px solid #ebe8e5;\n vertical-align: middle;\n overflow-wrap: anywhere;\n }\n\n .opportunities-extension-table th:nth-child(1) {\n width: 16%;\n }\n\n .opportunities-extension-table th:nth-child(2) {\n width: 8%;\n }\n\n .opportunities-extension-table th:nth-child(3) {\n width: 18%;\n }\n\n .opportunities-extension-table th:nth-child(4) {\n width: 11%;\n }\n\n .opportunities-extension-table th:nth-child(5) {\n width: 8%;\n }\n\n .opportunities-extension-table th:nth-child(6) {\n width: 8%;\n }\n\n .opportunities-extension-table th:nth-child(7) {\n width: 7%;\n }\n\n .opportunities-extension-table th:nth-child(8) {\n width: 6%;\n }\n\n .opportunities-extension-table th:nth-child(9) {\n width: 7%;\n }\n\n .opportunities-extension-table th:nth-child(10) {\n width: 7%;\n }\n\n .opportunities-extension-table th:nth-child(11) {\n width: 4%;\n }\n\n .opportunities-extension-table td:nth-child(2),\n .opportunities-extension-table td:nth-child(5),\n .opportunities-extension-table td:nth-child(6),\n .opportunities-extension-table td:nth-child(8) {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n .opportunities-extension-table td:nth-child(9) {\n padding-right: 6px;\n padding-left: 6px;\n white-space: nowrap;\n overflow: visible;\n }\n\n .opportunities-extension-table td:nth-child(7) {\n padding-right: 6px;\n padding-left: 6px;\n white-space: nowrap;\n overflow: visible;\n }\n\n .opportunities-extension-table td:nth-child(10) {\n padding-right: 6px;\n padding-left: 6px;\n font-size: 12px;\n white-space: nowrap;\n }\n\n .opportunities-extension-table td:nth-child(11) {\n padding-right: 6px;\n padding-left: 6px;\n text-align: center;\n white-space: nowrap;\n }\n\n .opportunities-extension-table tbody tr:hover {\n background: #f7f6f4;\n }\n\n .opportunities-extension-table tbody tr:last-child td {\n border-bottom: 0;\n }\n\n .opportunities-extension-table a {\n color: #006b84;\n text-decoration: underline;\n text-decoration-thickness: 1px;\n text-underline-offset: 2px;\n }\n\n .opportunities-extension-table a:hover {\n color: #004f63;\n }\n\n .opportunities-extension-opty-number-content {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n max-width: 100%;\n }\n\n .opportunities-extension-name-content {\n display: flex;\n align-items: center;\n gap: 8px;\n min-width: 0;\n }\n\n .opportunities-extension-name-content > a {\n min-width: 0;\n }\n\n .opportunities-extension-actions-content {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 4px;\n white-space: nowrap;\n }\n\n .opportunities-extension-products-count {\n display: inline-grid;\n width: auto;\n min-width: 20px;\n height: 20px;\n place-items: center;\n flex: 0 0 auto;\n box-sizing: border-box;\n padding: 0 3px;\n border: 1px solid #7ca7b2;\n border-radius: 999px;\n background: #e8f4f6;\n color: #006d7a;\n font-size: 10px;\n font-weight: 700;\n line-height: 1;\n text-align: center;\n vertical-align: middle;\n cursor: pointer;\n }\n\n .opportunities-extension-products-count:hover,\n .opportunities-extension-products-count:focus-visible,\n .opportunities-extension-products-count[aria-expanded=\"true\"] {\n border-color: #00758f;\n background: #00758f;\n color: #ffffff;\n outline: none;\n }\n\n .opportunities-extension-products-count-error {\n border-color: #d8887e;\n background: #f9e3e1;\n color: #a52b1c;\n }\n\n .opportunities-extension-products-detail-row:hover {\n background: transparent !important;\n }\n\n .opportunities-extension-products-detail-cell {\n padding: 0 !important;\n }\n\n .opportunities-extension-products-detail {\n padding: 14px 20px 18px;\n border-bottom: 1px solid #c9c5c1;\n background: #f0eeeb;\n }\n\n .opportunities-extension-products-detail-heading {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 12px;\n margin-bottom: 10px;\n color: #312d2a;\n }\n\n .opportunities-extension-products-detail-heading strong {\n font-size: 13px;\n }\n\n .opportunities-extension-products-detail-heading span {\n color: #5f5a55;\n font-size: 11px;\n font-weight: 600;\n text-transform: uppercase;\n }\n\n .opportunities-extension-products-table {\n width: 100%;\n table-layout: fixed;\n border-collapse: collapse;\n border: 1px solid #dedbd7;\n background: #ffffff;\n font-size: 12px;\n }\n\n .opportunities-extension-products-table th,\n .opportunities-extension-products-table td {\n position: static;\n height: auto;\n padding: 8px 10px;\n border-bottom: 1px solid #ebe8e5;\n background: transparent;\n overflow-wrap: anywhere;\n vertical-align: middle;\n white-space: normal;\n }\n\n .opportunities-extension-products-table th {\n background: #faf9f8;\n font-size: 11px;\n }\n\n .opportunities-extension-products-table th:nth-child(1) { width: 16%; }\n .opportunities-extension-products-table th:nth-child(2) { width: 16%; }\n .opportunities-extension-products-table th:nth-child(3) { width: 8%; }\n .opportunities-extension-products-table th:nth-child(4) { width: 10%; }\n .opportunities-extension-products-table th:nth-child(5) { width: 8%; }\n .opportunities-extension-products-table th:nth-child(6) { width: 8%; }\n .opportunities-extension-products-table th:nth-child(7) { width: 7%; }\n .opportunities-extension-products-table th:nth-child(8) { width: 10%; }\n .opportunities-extension-products-table th:nth-child(9) { width: 12%; }\n .opportunities-extension-products-table th:nth-child(10) { width: 5%; }\n\n .opportunities-extension-products-empty {\n margin: 0;\n padding: 10px 0;\n color: #5f5a55;\n font-size: 13px;\n }\n\n .opportunities-extension-copy-button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex: 0 0 auto;\n width: 24px;\n height: 24px;\n padding: 3px;\n border: 0;\n border-radius: 3px;\n background: transparent;\n color: #00758f;\n cursor: pointer;\n }\n\n .opportunities-extension-copy-button svg {\n width: 16px;\n height: 16px;\n fill: currentColor;\n }\n\n .opportunities-extension-copy-button:hover,\n .opportunities-extension-copy-button:focus-visible {\n background: #e8f4f6;\n color: #004f63;\n outline: none;\n }\n\n .opportunities-extension-action-button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 32px;\n height: 32px;\n padding: 5px;\n border: 1px solid transparent;\n border-radius: 4px;\n background: transparent;\n color: #00758f;\n cursor: pointer;\n }\n\n .opportunities-extension-action-button svg {\n width: 21px;\n height: 21px;\n }\n\n .opportunities-extension-action-button:hover,\n .opportunities-extension-action-button:focus-visible {\n border-color: #7ca7b2;\n background: #e8f4f6;\n color: #004f63;\n outline: none;\n }\n\n .opportunities-extension-action-button:disabled {\n cursor: wait;\n opacity: .72;\n }\n\n .opportunities-extension-action-button-loading svg {\n animation: opportunities-extension-pulse 1s ease-in-out infinite;\n }\n\n @keyframes opportunities-extension-pulse {\n 50% { opacity: .35; }\n }\n\n .opportunities-extension-copy-toast {\n position: fixed;\n right: 28px;\n bottom: 28px;\n z-index: 3;\n max-width: min(360px, calc(100vw - 56px));\n padding: 12px 16px;\n border-radius: 4px;\n background: #2f6f18;\n box-shadow: 0 4px 12px rgba(0, 0, 0, .18);\n color: #ffffff;\n font-size: 13px;\n font-weight: 700;\n }\n\n .opportunities-extension-copy-toast-error {\n background: #a52b1c;\n }\n\n .opportunities-extension-copy-toast[hidden] {\n display: none !important;\n }\n\n .opportunities-extension-stage-badge {\n display: inline-flex;\n align-items: center;\n min-height: 24px;\n padding: 3px 8px;\n border-radius: 12px;\n background: #ebe8e5;\n color: #312d2a;\n font-size: 11px;\n font-weight: 700;\n line-height: 1.2;\n white-space: nowrap;\n }\n\n .opportunities-extension-stage-badge[data-stage=\"SQL\"] {\n background: #d9f0f5;\n color: #006b84;\n }\n\n .opportunities-extension-stage-badge[data-stage=\"PIPELINE\"] {\n background: #ebe8e5;\n color: #5f5a55;\n }\n\n .opportunities-extension-stage-badge[data-stage=\"UPSIDE\"] {\n background: #fff0d8;\n color: #945400;\n }\n\n .opportunities-extension-stage-badge[data-stage=\"FORECAST\"] {\n background: #eee8f5;\n color: #624e74;\n }\n\n .opportunities-extension-stage-badge[data-stage=\"WON\"] {\n background: #e5f1d9;\n color: #3f6f17;\n }\n\n .opportunities-extension-status-badge {\n display: inline-flex;\n align-items: center;\n min-height: 24px;\n padding: 3px 8px;\n border-radius: 12px;\n background: #ebe8e5;\n color: #312d2a;\n font-size: 11px;\n font-weight: 700;\n line-height: 1.2;\n white-space: nowrap;\n }\n\n .opportunities-extension-status-badge[data-status=\"OPEN\"] {\n background: #e2f2e5;\n color: #197a3d;\n }\n\n .opportunities-extension-status-badge[data-status=\"CLOSED\"] {\n background: #e5e7eb;\n color: #4b5563;\n }\n\n .opportunities-extension-status-badge[data-status=\"LOST\"] {\n background: #f9e3e1;\n color: #b13b34;\n }\n\n .opportunities-extension-status-badge[data-status=\"WON\"] {\n background: #e3edf8;\n color: #1f5f99;\n }\n\n .opportunities-extension-sort-button {\n position: relative;\n display: inline-flex;\n align-items: center;\n width: 100%;\n min-height: 44px;\n padding: 8px 42px 8px 16px;\n border: 0;\n background: transparent;\n color: inherit;\n font: inherit;\n font-weight: inherit;\n letter-spacing: 0;\n line-height: 1.2;\n text-align: left;\n white-space: normal;\n cursor: pointer;\n }\n\n .opportunities-extension-table-header-label {\n display: inline-flex;\n align-items: center;\n min-height: 44px;\n padding: 8px 6px;\n }\n\n .opportunities-extension-sort-button::after {\n position: absolute;\n right: 15px;\n color: #5f5a55;\n content: \"↕\";\n font-size: 16px;\n font-weight: 400;\n }\n\n .opportunities-extension-sort-button[data-sort-direction=\"ascending\"]::after {\n color: #00758f;\n content: \"↑\";\n }\n\n .opportunities-extension-sort-button[data-sort-direction=\"descending\"]::after {\n color: #00758f;\n content: \"↓\";\n }\n\n .opportunities-extension-sort-button:hover {\n background: #f0eeeb;\n }\n\n .opportunities-extension-sort-button:focus-visible {\n outline: 2px solid #00758f;\n outline-offset: -2px;\n }\n\n .opportunities-extension-table-status {\n height: 152px;\n color: #5f5a55;\n font-size: 14px;\n text-align: center;\n }\n\n .opportunities-extension-visually-hidden {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border: 0;\n }\n\n .opportunities-extension-preferences-modal {\n position: absolute;\n inset: 0;\n z-index: 3;\n display: grid;\n place-items: center;\n padding: 24px;\n background: rgba(0, 0, 0, .42);\n }\n\n .opportunities-extension-preferences-modal[hidden] {\n display: none !important;\n }\n\n .opportunities-extension-account-plans-modal {\n position: absolute;\n inset: 0;\n z-index: 4;\n display: grid;\n place-items: center;\n padding: 12px;\n background: rgba(0, 0, 0, .42);\n }\n\n .opportunities-extension-account-plans-modal[hidden] {\n display: none !important;\n }\n\n .opportunities-extension-account-plans-dialog {\n display: grid;\n width: min(1180px, 100%);\n height: min(760px, calc(100vh - 24px));\n min-width: 0;\n grid-template-rows: auto minmax(0, 1fr);\n grid-template-columns: minmax(0, 1fr);\n overflow: hidden;\n border: 1px solid #8f8a85;\n border-radius: 4px;\n background: #ffffff;\n box-shadow: 0 8px 24px rgba(0, 0, 0, .24);\n color: #312d2a;\n }\n\n .opportunities-extension-account-plans-header {\n display: flex;\n align-items: flex-start;\n justify-content: space-between;\n gap: 16px;\n padding: 14px 20px;\n border-bottom: 1px solid #dedbd7;\n }\n\n .opportunities-extension-account-plans-header h2 {\n margin: 0;\n font-size: 20px;\n line-height: 1.2;\n }\n\n .opportunities-extension-account-plans-header p {\n margin: 5px 0 0;\n color: #5f5a55;\n font-size: 13px;\n line-height: 1.35;\n }\n\n .opportunities-extension-account-plans-content {\n display: grid;\n min-width: 0;\n grid-template-rows: auto minmax(0, 1fr);\n grid-template-columns: minmax(0, 1fr);\n min-height: 0;\n overflow: hidden;\n }\n\n .opportunities-extension-account-plans-content > .opportunities-extension-account-plans-skeleton {\n grid-row: 1 / -1;\n }\n\n .opportunities-extension-account-plans-tabs-navigation {\n position: relative;\n min-width: 0;\n border-bottom: 1px solid #dedbd7;\n }\n\n .opportunities-extension-account-plans-tabs-navigation .opportunities-extension-account-plans-tab-navigation-button[hidden] {\n display: none;\n }\n\n .opportunities-extension-account-plans-tabs {\n display: flex;\n min-width: 0;\n gap: 4px;\n overflow-x: auto;\n padding: 8px 20px 0;\n scrollbar-width: none;\n }\n\n .opportunities-extension-account-plans-tabs::-webkit-scrollbar {\n display: none;\n }\n\n .opportunities-extension-account-plans-tab-navigation-button {\n display: grid;\n position: absolute;\n z-index: 1;\n top: 50%;\n width: 32px;\n height: 32px;\n place-items: center;\n padding: 0;\n border: 1px solid #8f8a85;\n border-radius: 4px;\n background: #ffffff;\n color: #312d2a;\n box-shadow: 0 2px 6px rgba(0, 0, 0, .16);\n transform: translateY(-50%);\n cursor: pointer;\n }\n\n .opportunities-extension-account-plans-tab-navigation-button:first-child {\n left: 8px;\n }\n\n .opportunities-extension-account-plans-tab-navigation-button:last-child {\n right: 8px;\n }\n\n .opportunities-extension-account-plans-tab-navigation-button:hover:not(:disabled) {\n border-color: #00758f;\n background: #f0eeeb;\n color: #005e73;\n }\n\n .opportunities-extension-account-plans-tab-navigation-button:disabled {\n border-color: #dedbd7;\n color: #b8b2ad;\n cursor: default;\n }\n\n .opportunities-extension-account-plans-tab-navigation-button:focus-visible {\n outline: 2px solid #00758f;\n outline-offset: 2px;\n }\n\n .opportunities-extension-account-plans-tab-navigation-button svg {\n width: 18px;\n height: 18px;\n }\n\n .opportunities-extension-account-plans-panels {\n min-width: 0;\n min-height: 0;\n overflow: hidden;\n }\n\n .opportunities-extension-account-plan-tab {\n min-height: 38px;\n flex: 0 0 auto;\n padding: 7px 12px;\n border: 0;\n border-bottom: 3px solid transparent;\n background: transparent;\n color: #5f5a55;\n font-size: 13px;\n font-weight: 600;\n cursor: pointer;\n }\n\n .opportunities-extension-account-plan-tab:hover {\n background: #f0eeeb;\n color: #312d2a;\n }\n\n .opportunities-extension-account-plan-tab[aria-selected=\"true\"] {\n border-bottom-color: #00758f;\n color: #006d7a;\n }\n\n .opportunities-extension-account-plan-tab:focus-visible {\n outline: 2px solid #00758f;\n outline-offset: -2px;\n }\n\n .opportunities-extension-account-plan-panel {\n display: grid;\n height: 100%;\n min-height: 0;\n grid-template-rows: auto minmax(0, 1fr);\n box-sizing: border-box;\n padding: 16px 20px;\n }\n\n .opportunities-extension-account-plan-panel[hidden] {\n display: none !important;\n }\n\n .opportunities-extension-account-plan-details {\n display: grid;\n grid-template-columns: repeat(3, minmax(0, 1fr));\n gap: 0 24px;\n margin: 0;\n }\n\n .opportunities-extension-account-plan-details > div {\n display: grid;\n grid-template-columns: minmax(104px, 38%) minmax(0, 1fr);\n gap: 10px;\n min-height: 42px;\n align-items: center;\n padding: 7px 0;\n border-bottom: 1px solid #ebe8e5;\n }\n\n .opportunities-extension-account-plan-details dt {\n color: #5f5a55;\n font-size: 12px;\n font-weight: 700;\n }\n\n .opportunities-extension-account-plan-details dd {\n min-width: 0;\n margin: 0;\n color: #312d2a;\n font-size: 13px;\n overflow-wrap: anywhere;\n }\n\n .opportunities-extension-consumption-trend {\n display: grid;\n min-height: 0;\n grid-template-rows: auto minmax(0, 1fr);\n margin-top: 14px;\n padding-top: 12px;\n border-top: 1px solid #dedbd7;\n }\n\n .opportunities-extension-consumption-trend-header {\n display: flex;\n align-items: center;\n justify-content: flex-end;\n gap: 24px;\n }\n\n .opportunities-extension-consumption-periods {\n display: flex;\n align-items: center;\n gap: 4px;\n }\n\n .opportunities-extension-consumption-periods button {\n min-height: 38px;\n padding: 7px 14px;\n border: 1px solid transparent;\n border-radius: 4px;\n background: transparent;\n color: #312d2a;\n font-size: 13px;\n font-weight: 600;\n line-height: 1.2;\n cursor: pointer;\n }\n\n .opportunities-extension-consumption-periods button:hover {\n background: #f0eeeb;\n }\n\n .opportunities-extension-consumption-periods button[aria-pressed=\"true\"] {\n border-color: #00758f;\n background: #e7f6f8;\n color: #005e73;\n }\n\n .opportunities-extension-consumption-periods button:focus-visible,\n .opportunities-extension-consumption-navigation-button:focus-visible {\n outline: 2px solid #00758f;\n outline-offset: 2px;\n }\n\n .opportunities-extension-consumption-chart {\n display: grid;\n min-height: 0;\n grid-template-rows: auto minmax(0, 1fr);\n margin-top: 4px;\n }\n\n .opportunities-extension-consumption-navigation {\n display: grid;\n grid-template-columns: 36px minmax(130px, auto) 36px;\n align-items: center;\n justify-content: center;\n gap: 8px;\n min-height: 40px;\n margin-bottom: 2px;\n }\n\n .opportunities-extension-consumption-navigation strong {\n color: #312d2a;\n font-size: 13px;\n text-align: center;\n }\n\n .opportunities-extension-consumption-navigation-button {\n display: grid;\n width: 36px;\n height: 36px;\n place-items: center;\n padding: 0;\n border: 1px solid #8f8a85;\n border-radius: 4px;\n background: #ffffff;\n color: #312d2a;\n cursor: pointer;\n }\n\n .opportunities-extension-consumption-navigation-button:hover:not(:disabled) {\n border-color: #00758f;\n background: #f0eeeb;\n color: #005e73;\n }\n\n .opportunities-extension-consumption-navigation-button:disabled {\n border-color: #dedbd7;\n color: #b8b2ad;\n cursor: default;\n }\n\n .opportunities-extension-consumption-navigation-button svg {\n width: 18px;\n height: 18px;\n }\n\n .opportunities-extension-consumption-figure {\n position: relative;\n min-width: 0;\n min-height: 0;\n margin: 0;\n scrollbar-width: none;\n }\n\n .opportunities-extension-consumption-figure::-webkit-scrollbar {\n display: none;\n }\n\n .opportunities-extension-consumption-visual {\n display: grid;\n height: 100%;\n min-height: 0;\n grid-template-columns: minmax(0, 1fr) 176px;\n align-items: center;\n gap: 16px;\n }\n\n .opportunities-extension-consumption-svg {\n display: block;\n width: 100%;\n height: 300px;\n min-height: 0;\n overflow: visible;\n }\n\n .opportunities-extension-consumption-svg .consumption-grid-line {\n stroke: #dedbd7;\n stroke-width: 1;\n shape-rendering: crispEdges;\n }\n\n .opportunities-extension-consumption-svg .consumption-axis-label,\n .opportunities-extension-consumption-svg .consumption-x-label {\n fill: #5f5a55;\n font-family: Arial, sans-serif;\n font-size: 12px;\n }\n\n .opportunities-extension-consumption-svg .consumption-value-label {\n fill: #312d2a;\n font-family: Arial, sans-serif;\n font-size: 12px;\n font-weight: 700;\n }\n\n .opportunities-extension-consumption-svg .consumption-bar-funded {\n fill: #b77888;\n }\n\n .opportunities-extension-consumption-svg .consumption-bar-overage {\n fill: #de7907;\n }\n\n .opportunities-extension-consumption-svg .consumption-average-line {\n stroke: #de7907;\n stroke-width: 1.5;\n stroke-dasharray: 6 6;\n }\n\n .opportunities-extension-consumption-svg .consumption-bar-group {\n cursor: default;\n outline: none;\n }\n\n .opportunities-extension-consumption-svg .consumption-bar-group rect {\n transition: filter .16s ease, opacity .16s ease, stroke .16s ease;\n }\n\n .opportunities-extension-consumption-svg .consumption-bar-group:hover rect,\n .opportunities-extension-consumption-svg .consumption-bar-group:focus rect {\n filter: brightness(1.06);\n stroke: #312d2a;\n stroke-width: 1.5;\n }\n\n .opportunities-extension-consumption-svg .consumption-animated-label {\n opacity: 0;\n animation: opportunities-extension-consumption-label-in .24s ease-out forwards;\n }\n\n .opportunities-extension-consumption-svg .consumption-animated-average {\n opacity: 0;\n animation: opportunities-extension-consumption-average-in .35s .32s ease-out forwards;\n }\n\n @keyframes opportunities-extension-consumption-label-in {\n from { opacity: 0; transform: translateY(4px); }\n to { opacity: 1; transform: translateY(0); }\n }\n\n @keyframes opportunities-extension-consumption-average-in {\n from { opacity: 0; }\n to { opacity: 1; }\n }\n\n .opportunities-extension-consumption-legend {\n display: grid;\n align-content: center;\n gap: 4px;\n }\n\n .opportunities-extension-consumption-legend button {\n display: grid;\n min-width: 0;\n grid-template-columns: 16px minmax(0, 1fr);\n align-items: center;\n gap: 8px;\n padding: 6px 4px;\n border: 0;\n border-radius: 4px;\n background: transparent;\n color: #312d2a;\n font-size: 12px;\n line-height: 1.25;\n text-align: left;\n cursor: pointer;\n }\n\n .opportunities-extension-consumption-legend button:hover {\n background: #f0eeeb;\n }\n\n .opportunities-extension-consumption-legend button:focus-visible {\n outline: 2px solid #00758f;\n outline-offset: 1px;\n }\n\n .opportunities-extension-consumption-legend button[aria-pressed=\"false\"] {\n color: #77726d;\n opacity: .55;\n }\n\n .opportunities-extension-consumption-legend-swatch {\n display: block;\n width: 12px;\n height: 12px;\n justify-self: center;\n }\n\n .opportunities-extension-consumption-legend-funded {\n background: #b77888;\n }\n\n .opportunities-extension-consumption-legend-overage {\n background: #de7907;\n }\n\n .opportunities-extension-consumption-legend-average {\n height: 0;\n border-top: 2px dashed #de7907;\n }\n\n .opportunities-extension-consumption-tooltip {\n position: absolute;\n z-index: 2;\n display: grid;\n min-width: 190px;\n max-width: 260px;\n gap: 4px;\n padding: 10px 12px;\n border: 1px solid #8f8a85;\n border-radius: 4px;\n background: #ffffff;\n box-shadow: 0 4px 12px rgba(0, 0, 0, .2);\n color: #312d2a;\n font-size: 12px;\n line-height: 1.3;\n pointer-events: none;\n }\n\n .opportunities-extension-consumption-tooltip[hidden] {\n display: none !important;\n }\n\n .opportunities-extension-consumption-tooltip strong {\n margin-bottom: 2px;\n font-size: 13px;\n }\n\n .opportunities-extension-consumption-chart-skeleton {\n height: 100%;\n min-height: 0;\n padding: 34px 62px 24px;\n box-sizing: border-box;\n }\n\n .opportunities-extension-consumption-chart-skeleton-plot {\n display: flex;\n height: 100%;\n min-height: 220px;\n align-items: flex-end;\n justify-content: space-around;\n gap: 12px;\n padding: 0 14px;\n border-bottom: 1px solid #dedbd7;\n border-left: 1px solid #dedbd7;\n }\n\n .opportunities-extension-consumption-chart-skeleton-plot span {\n width: min(38px, 6%);\n border-radius: 2px 2px 0 0;\n background: #dedbd7;\n animation: opportunities-extension-skeleton-pulse 1.15s ease-in-out infinite alternate;\n }\n\n .opportunities-extension-consumption-chart-empty,\n .opportunities-extension-consumption-chart-error {\n display: grid;\n min-height: 220px;\n place-items: center;\n margin: 0;\n color: #5f5a55;\n font-size: 14px;\n text-align: center;\n }\n\n .opportunities-extension-consumption-chart-error {\n color: #9f2d20;\n }\n\n .opportunities-extension-account-plan-status-indicator {\n display: inline-block;\n width: 10px;\n height: 10px;\n border-radius: 50%;\n background: #9b9691;\n box-shadow: 0 0 0 3px #efedeb;\n vertical-align: middle;\n }\n\n .opportunities-extension-account-plan-status-indicator[data-active=\"true\"] {\n background: #3f6f17;\n box-shadow: 0 0 0 3px #e2f2e5;\n }\n\n .opportunities-extension-account-plan-tab .opportunities-extension-account-plan-status-indicator {\n margin-right: 8px;\n }\n\n .opportunities-extension-account-plans-skeleton-tabs {\n display: flex;\n min-height: 46px;\n align-items: center;\n padding: 0 20px;\n border-bottom: 1px solid #dedbd7;\n }\n\n .opportunities-extension-account-plans-skeleton {\n display: grid;\n height: 100%;\n min-height: 0;\n grid-template-rows: auto minmax(0, 1fr);\n overflow: hidden;\n }\n\n .opportunities-extension-account-plans-skeleton-panel {\n padding: 16px 20px;\n }\n\n .opportunities-extension-account-plans-skeleton-tab {\n display: inline-flex;\n align-items: center;\n gap: 9px;\n min-height: 38px;\n padding: 0 12px;\n border-bottom: 3px solid #00758f;\n }\n\n .opportunities-extension-account-plans-skeleton-status {\n display: block;\n width: 10px;\n height: 10px;\n flex: 0 0 auto;\n border-radius: 50%;\n background: #dedbd7;\n box-shadow: 0 0 0 3px #efedeb;\n animation: opportunities-extension-skeleton-pulse 1.15s ease-in-out infinite alternate;\n }\n\n .opportunities-extension-account-plans-skeleton-details {\n display: grid;\n grid-template-columns: repeat(3, minmax(0, 1fr));\n gap: 0 24px;\n padding: 0;\n }\n\n .opportunities-extension-account-plans-skeleton-details > div {\n display: grid;\n grid-template-columns: minmax(104px, 38%) minmax(0, 1fr);\n align-items: center;\n gap: 10px;\n min-height: 42px;\n padding: 7px 0;\n border-bottom: 1px solid #ebe8e5;\n }\n\n .opportunities-extension-account-plans-skeleton-bar {\n display: block;\n height: 12px;\n border-radius: 3px;\n background: #dedbd7;\n animation: opportunities-extension-skeleton-pulse 1.15s ease-in-out infinite alternate;\n }\n\n .opportunities-extension-account-plans-skeleton-tabs .opportunities-extension-account-plans-skeleton-bar {\n height: 14px;\n }\n\n .opportunities-extension-account-plans-skeleton-label {\n width: 74%;\n height: 10px;\n }\n\n .opportunities-extension-account-plans-skeleton-trend {\n display: grid;\n min-height: 0;\n grid-template-rows: auto auto minmax(0, 1fr);\n margin: 14px 0 0;\n padding-top: 12px;\n border-top: 1px solid #dedbd7;\n }\n\n .opportunities-extension-account-plans-skeleton-trend-header {\n display: flex;\n justify-content: flex-end;\n min-height: 38px;\n }\n\n .opportunities-extension-account-plans-skeleton-periods {\n display: flex;\n align-items: center;\n gap: 16px;\n }\n\n .opportunities-extension-account-plans-skeleton-periods .opportunities-extension-account-plans-skeleton-bar {\n height: 12px;\n }\n\n .opportunities-extension-account-plans-skeleton-period-active {\n height: 38px !important;\n border: 1px solid #8cc8d3;\n background: #e7f6f8;\n }\n\n .opportunities-extension-account-plans-skeleton-navigation {\n display: grid;\n grid-template-columns: 32px 124px 32px;\n align-items: center;\n justify-content: center;\n gap: 8px;\n min-height: 54px;\n }\n\n .opportunities-extension-account-plans-skeleton-navigation .opportunities-extension-account-plans-skeleton-bar {\n justify-self: center;\n }\n\n .opportunities-extension-account-plans-skeleton-chart {\n display: grid;\n min-height: 0;\n grid-template-columns: minmax(0, 1fr) 150px;\n align-items: center;\n gap: 28px;\n padding: 12px 14px 0 62px;\n }\n\n .opportunities-extension-account-plans-skeleton-plot {\n display: flex;\n position: relative;\n height: 300px;\n min-height: 0;\n box-sizing: border-box;\n align-items: flex-end;\n justify-content: space-around;\n gap: 12px;\n padding: 0 14px 64px;\n background: repeating-linear-gradient(to bottom, transparent 0, transparent 58px, #ebe8e5 58px, #ebe8e5 59px) left top / 100% 236px no-repeat;\n }\n\n .opportunities-extension-account-plans-skeleton-plot::before,\n .opportunities-extension-account-plans-skeleton-plot::after {\n position: absolute;\n display: block;\n content: \"\";\n background: #dedbd7;\n }\n\n .opportunities-extension-account-plans-skeleton-plot::before {\n top: 0;\n bottom: 64px;\n left: 0;\n width: 1px;\n }\n\n .opportunities-extension-account-plans-skeleton-plot::after {\n right: 0;\n bottom: 64px;\n left: 0;\n height: 1px;\n }\n\n .opportunities-extension-account-plans-skeleton-plot .opportunities-extension-account-plans-skeleton-bar {\n width: min(38px, 7%);\n flex: 0 1 38px;\n border-radius: 2px 2px 0 0;\n }\n\n .opportunities-extension-account-plans-skeleton-legend {\n display: grid;\n align-content: center;\n gap: 18px;\n min-height: 0;\n }\n\n .opportunities-extension-account-plans-skeleton-legend .opportunities-extension-account-plans-skeleton-bar {\n height: 11px;\n }\n\n @keyframes opportunities-extension-skeleton-pulse {\n from { opacity: .48; }\n to { opacity: 1; }\n }\n\n @media (prefers-reduced-motion: reduce) {\n .opportunities-extension-account-plans-skeleton-bar,\n .opportunities-extension-consumption-chart-skeleton-plot span,\n .opportunities-extension-consumption-svg .consumption-animated-label,\n .opportunities-extension-consumption-svg .consumption-animated-average {\n animation: none;\n opacity: 1;\n }\n }\n\n .opportunities-extension-account-plans-empty,\n .opportunities-extension-account-plans-error {\n margin: 0;\n padding: 28px 20px;\n color: #5f5a55;\n font-size: 14px;\n }\n\n .opportunities-extension-account-plans-error {\n color: #9f2d20;\n }\n\n .opportunities-extension-preferences-dialog {\n display: grid;\n width: min(680px, 100%);\n max-height: min(720px, calc(100vh - 48px));\n grid-template-rows: auto minmax(0, 1fr) auto;\n overflow: hidden;\n border: 1px solid #8f8a85;\n border-radius: 4px;\n background: #ffffff;\n box-shadow: 0 8px 24px rgba(0, 0, 0, .24);\n color: #312d2a;\n }\n\n .opportunities-extension-preferences-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 16px;\n padding: 18px 20px;\n border-bottom: 1px solid #dedbd7;\n }\n\n .opportunities-extension-preferences-header h2 {\n margin: 0;\n font-size: 20px;\n font-weight: 700;\n line-height: 1.2;\n }\n\n .opportunities-extension-preferences-content {\n min-height: 0;\n overflow: auto;\n padding: 20px;\n }\n\n .opportunities-extension-preferences-fieldset {\n min-width: 0;\n margin: 0;\n padding: 0;\n border: 0;\n }\n\n .opportunities-extension-preferences-fieldset legend {\n margin-bottom: 12px;\n padding: 0;\n color: #312d2a;\n font-size: 15px;\n font-weight: 700;\n line-height: 1.3;\n }\n\n .opportunities-extension-preferences-options {\n display: grid;\n grid-template-columns: repeat(2, minmax(0, 1fr));\n gap: 4px 20px;\n }\n\n .opportunities-extension-preferences-option {\n display: flex;\n align-items: flex-start;\n gap: 10px;\n min-width: 0;\n padding: 9px 8px;\n border-radius: 4px;\n color: #312d2a;\n font-size: 14px;\n line-height: 1.35;\n cursor: pointer;\n }\n\n .opportunities-extension-preferences-option:hover {\n background: #f0eeeb;\n }\n\n .opportunities-extension-preferences-option input {\n width: 18px;\n height: 18px;\n flex: 0 0 18px;\n margin: 0;\n accent-color: #00758f;\n cursor: pointer;\n }\n\n .opportunities-extension-preferences-cache-field {\n display: grid;\n width: min(280px, 100%);\n gap: 6px;\n margin-top: 24px;\n color: #312d2a;\n font-size: 14px;\n font-weight: 700;\n }\n\n .opportunities-extension-preferences-cache-field select {\n width: 100%;\n height: 40px;\n padding: 0 36px 0 12px;\n border: 1px solid #8f8a85;\n border-radius: 4px;\n background: #ffffff;\n color: #312d2a;\n font-size: 14px;\n font-weight: 400;\n }\n\n .opportunities-extension-preferences-cache-field select:focus {\n border-color: #00758f;\n outline: 2px solid #bde7ee;\n outline-offset: 0;\n }\n\n .opportunities-extension-preferences-footer {\n display: flex;\n justify-content: flex-end;\n padding: 14px 20px;\n border-top: 1px solid #dedbd7;\n }\n\n .opportunities-extension-button {\n min-width: 88px;\n min-height: 36px;\n padding: 7px 16px;\n border: 1px solid transparent;\n border-radius: 4px;\n font-size: 14px;\n font-weight: 600;\n line-height: 1.2;\n cursor: pointer;\n }\n\n .opportunities-extension-button-primary {\n border-color: #00758f;\n background: #00758f;\n color: #ffffff;\n }\n\n .opportunities-extension-button-primary:hover,\n .opportunities-extension-button-primary:focus-visible {\n border-color: #005e73;\n background: #005e73;\n outline: none;\n }\n\n .opportunities-extension-debug-panel {\n position: fixed;\n right: 24px;\n bottom: 24px;\n z-index: 1;\n width: min(640px, calc(100vw - 48px));\n max-height: min(560px, calc(100vh - 120px));\n overflow: auto;\n border: 1px solid #8f8a85;\n border-radius: 4px;\n background: #ffffff;\n box-shadow: 0 2px 8px rgba(0, 0, 0, .16);\n padding: 16px;\n color: #000000;\n }\n\n .opportunities-extension-debug-panel[hidden] {\n display: none !important;\n }\n\n .opportunities-extension-debug-panel h2 {\n margin: 0;\n font-size: 18px;\n font-weight: 700;\n line-height: 1.25;\n }\n\n .opportunities-extension-debug-panel p {\n margin: 4px 0 0;\n color: #5f5a55;\n font-size: 13px;\n }\n\n .opportunities-extension-debug-panel-header {\n display: flex;\n align-items: flex-start;\n justify-content: space-between;\n gap: 12px;\n margin-bottom: 12px;\n }\n\n .opportunities-extension-debug-visibility-button {\n width: 34px;\n height: 34px;\n flex: 0 0 34px;\n color: #312d2a;\n }\n\n .opportunities-extension-debug-visibility-button svg {\n width: 20px;\n height: 20px;\n }\n\n .opportunities-extension-debug-list {\n display: grid;\n gap: 10px;\n }\n\n .opportunities-extension-debug-item {\n border: 1px solid #dedbd7;\n border-left-width: 4px;\n border-radius: 4px;\n background: #faf9f8;\n }\n\n .opportunities-extension-debug-item[open] {\n background: #ffffff;\n }\n\n .opportunities-extension-debug-item-success {\n border-left-color: #3f6f17;\n }\n\n .opportunities-extension-debug-item-success .opportunities-extension-debug-status {\n background: #e2f2e5;\n color: #356d19;\n }\n\n .opportunities-extension-debug-item-failed {\n border-left-color: #c5331f;\n }\n\n .opportunities-extension-debug-item-failed .opportunities-extension-debug-status {\n background: #f9e3e1;\n color: #a52b1c;\n }\n\n .opportunities-extension-debug-item-pending {\n border-left-color: #6f5a7f;\n }\n\n .opportunities-extension-debug-item-pending .opportunities-extension-debug-status {\n background: #eee8f2;\n color: #6f5a7f;\n }\n\n .opportunities-extension-debug-heading {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 12px;\n min-height: 42px;\n padding: 9px 12px 9px 10px;\n cursor: pointer;\n list-style: none;\n }\n\n .opportunities-extension-debug-heading::-webkit-details-marker {\n display: none;\n }\n\n .opportunities-extension-debug-heading::before {\n content: \"⌄\";\n width: 14px;\n color: #5f5a55;\n font-size: 16px;\n line-height: 1;\n transform: rotate(-90deg);\n transition: transform .15s ease;\n }\n\n .opportunities-extension-debug-item[open] .opportunities-extension-debug-heading::before {\n transform: rotate(0deg);\n }\n\n .opportunities-extension-debug-summary-meta {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n margin-left: auto;\n }\n\n .opportunities-extension-debug-http-status,\n .opportunities-extension-debug-status {\n display: inline-flex;\n align-items: center;\n min-height: 22px;\n padding: 0 8px;\n border-radius: 999px;\n font-size: 11px;\n font-weight: 700;\n line-height: 1;\n text-transform: uppercase;\n }\n\n .opportunities-extension-debug-http-status {\n background: #e8f4f6;\n color: #006d7a;\n }\n\n .opportunities-extension-debug-status {\n background: #ebe8e5;\n color: #5f5a55;\n }\n\n .opportunities-extension-debug-heading strong {\n font-size: 13px;\n }\n\n .opportunities-extension-debug-item pre {\n margin: 0;\n padding: 8px 12px 12px;\n color: #312d2a;\n font-family: Consolas, \"Courier New\", monospace;\n font-size: 12px;\n line-height: 1.45;\n white-space: pre-wrap;\n word-break: break-word;\n }\n\n .opportunities-extension-debug-empty {\n padding: 14px;\n border: 1px dashed #b8b2ad;\n border-radius: 4px;\n color: #5f5a55;\n font-size: 13px;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] {\n background: #1f1f1f;\n color: #f6f4f2;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-shell,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-body {\n background: #1f1f1f;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-header {\n border-bottom-color: #4e4a46;\n background:\n linear-gradient(90deg, #a8795d 0 11%, #dd5a47 11% 23%, #876e9b 23% 36%, #00a6be 36% 51%, #dfbd76 51% 63%, transparent 63% 100%) top left / 100% 6px no-repeat,\n #292827;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-header h1,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-stage-dashboard-value,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-table,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-field,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-stage-filter-label,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-status-filter-label,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-customer-filter-label,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-table-search-field {\n color: #f6f4f2;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-header p,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plans-header p,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-stage-dashboard-card span,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-customer-filter-empty,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-products-detail-heading span,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-products-empty,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plans-empty,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plan-details dt,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-debug-panel p,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-debug-empty {\n color: #c9c5c1;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plans-error {\n color: #ffb4a8;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-chart-error {\n color: #ffb4a8;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plans-skeleton-bar {\n background: #5b5753;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plans-skeleton-status {\n background: #5b5753;\n box-shadow: 0 0 0 3px #3b3937;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plans-skeleton-period-active {\n border-color: #3f7580;\n background: #23474e;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-chart-skeleton-plot span {\n background: #5b5753;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plan-status-indicator {\n background: #8f8a85;\n box-shadow: 0 0 0 3px #3b3937;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plan-status-indicator[data-active=\"true\"] {\n background: #7fb05b;\n box-shadow: 0 0 0 3px #314527;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-form,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-stage-dashboard-card,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-table-surface,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-customer-filter-panel,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-preferences-dialog,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plans-dialog,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-products-table,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-debug-panel,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-debug-item[open] {\n border-color: #4e4a46;\n background: #292827;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-customer-filter-trigger,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-customer-filter-search,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-table-search-field input,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-field select,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-preferences-cache-field select,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-stage-filter-button,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-status-filter-button {\n border-color: #6a6560;\n background: #333130;\n color: #f6f4f2;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-customer-filter-trigger::after {\n border-top-color: #f6f4f2;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-select-wrap::after {\n border-top-color: #f6f4f2;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-customer-filter-trigger:disabled {\n background: #292827;\n color: #918b86;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-customer-filter-search::placeholder,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-table-search-field input::placeholder {\n color: #b5b0ab;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-customer-filter-select-all,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-customer-filter-option,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-preferences-header h2,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plans-header h2,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-preferences-fieldset legend,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-preferences-option,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-preferences-cache-field,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-products-detail-heading,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plan-details dd,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-debug-heading,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-debug-item pre,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-debug-panel h2 {\n color: #f6f4f2;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-navigation strong {\n color: #f6f4f2;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-chart-empty {\n color: #c9c5c1;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-customer-filter-select-all,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-table th {\n border-bottom-color: #4e4a46;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-preferences-header,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-preferences-footer,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plans-header,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plans-tabs-navigation,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plans-tabs,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plan-details > div,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plans-skeleton-tabs,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plans-skeleton-details > div {\n border-color: #4e4a46;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-trend,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-chart-skeleton-plot,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plans-skeleton-trend,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plans-skeleton-plot {\n border-color: #4e4a46;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plans-skeleton-plot {\n background: repeating-linear-gradient(to bottom, transparent 0, transparent 58px, #4e4a46 58px, #4e4a46 59px) left top / 100% 236px no-repeat;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plans-skeleton-plot::before,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plans-skeleton-plot::after {\n background: #4e4a46;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plan-tab {\n color: #c9c5c1;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plan-tab:hover {\n background: #3b3937;\n color: #f6f4f2;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plan-tab[aria-selected=\"true\"] {\n border-bottom-color: #43c4d5;\n color: #91e4ed;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-periods button {\n color: #f6f4f2;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-periods button:hover {\n background: #3b3937;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-periods button[aria-pressed=\"true\"] {\n border-color: #43c4d5;\n background: #173e43;\n color: #91e4ed;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-navigation-button,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plans-tab-navigation-button {\n border-color: #6a6560;\n background: #333130;\n color: #f6f4f2;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-navigation-button:hover:not(:disabled),\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plans-tab-navigation-button:hover:not(:disabled) {\n border-color: #43c4d5;\n background: #3b3937;\n color: #91e4ed;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-navigation-button:disabled,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plans-tab-navigation-button:disabled {\n border-color: #4e4a46;\n color: #746f6a;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-svg .consumption-grid-line {\n stroke: #4e4a46;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-svg .consumption-axis-label,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-svg .consumption-x-label {\n fill: #c9c5c1;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-svg .consumption-value-label {\n fill: #f6f4f2;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-svg .consumption-bar-funded {\n fill: #ca8798;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-svg .consumption-bar-overage {\n fill: #f09a32;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-svg .consumption-average-line {\n stroke: #f09a32;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-svg .consumption-bar-group:hover rect,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-svg .consumption-bar-group:focus rect {\n stroke: #f6f4f2;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-legend button {\n color: #f6f4f2;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-legend button:hover {\n background: #3b3937;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-legend button[aria-pressed=\"false\"] {\n color: #a8a39e;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-legend-funded {\n background: #ca8798;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-legend-overage {\n background: #f09a32;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-legend-average {\n border-top-color: #f09a32;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-tooltip {\n border-color: #6a6560;\n background: #333130;\n color: #f6f4f2;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-preferences-option:hover {\n background: #3b3937;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-preferences-option input {\n accent-color: #43c4d5;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-button-primary {\n border-color: #00a6be;\n background: #008aa6;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-button-primary:hover,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-button-primary:focus-visible {\n border-color: #43c4d5;\n background: #006d7a;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-customer-filter-option:hover,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-table tbody tr:hover,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-sort-button:hover,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-icon-button:hover,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-icon-button:focus {\n background: #3b3937;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-table thead,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-table th,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-products-table th {\n background: #333130;\n color: #f6f4f2;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-table td {\n border-bottom-color: #3f3c39;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-products-detail {\n border-bottom-color: #4e4a46;\n background: #252423;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-products-table th,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-products-table td {\n border-bottom-color: #3f3c39;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-products-count {\n border-color: #2f9bae;\n background: #1d4e55;\n color: #91e4ed;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-products-count:hover,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-products-count:focus-visible,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-products-count[aria-expanded=\"true\"] {\n border-color: #43c4d5;\n background: #008aa6;\n color: #ffffff;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-products-progress[data-state=\"running\"] {\n background: #1d4e55;\n color: #91e4ed;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-products-progress[data-state=\"complete\"] {\n background: #244f2e;\n color: #a8dfb7;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-products-progress[data-state=\"complete-with-errors\"],\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-products-progress[data-state=\"error\"],\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-products-count-error {\n border-color: #b13b34;\n background: #5f2926;\n color: #ffb4ad;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-products-cache-timestamp {\n background: #3b3937;\n color: #c9c5c1;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-table a,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-copy-button,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-action-button {\n color: #43c4d5;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-table a:hover,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-copy-button:hover,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-copy-button:focus-visible,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-action-button:hover,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-action-button:focus-visible {\n background: #1d4e55;\n color: #91e4ed;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-stage-filter-button[data-stage=\"SQL\"] {\n color: #43c4d5;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-stage-filter-button[data-stage=\"PIPELINE\"] {\n color: #d1cbc6;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-stage-filter-button[data-stage=\"UPSIDE\"] {\n color: #ffbf62;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-stage-filter-button[data-stage=\"FORECAST\"] {\n color: #d2b7e9;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-stage-filter-button[data-stage=\"WON\"] {\n color: #9bd46a;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-stage-dashboard-card[data-stage=\"SQL\"] {\n border-top-color: #43c4d5;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-total-dashboard-card {\n border-top-color: #f6f4f2;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-stage-dashboard-card[data-stage=\"PIPELINE\"] {\n border-top-color: #c0b9b3;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-stage-dashboard-card[data-stage=\"UPSIDE\"] {\n border-top-color: #ffb84d;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-stage-dashboard-card[data-stage=\"FORECAST\"] {\n border-top-color: #cba7e7;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-stage-dashboard-card[data-stage=\"WON\"] {\n border-top-color: #92cf5b;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-stage-filter-button[aria-pressed=\"true\"][data-stage=\"SQL\"] {\n border-color: #008aa6;\n background: #008aa6;\n color: #ffffff;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-stage-filter-button[aria-pressed=\"true\"][data-stage=\"PIPELINE\"] {\n border-color: #6f6863;\n background: #6f6863;\n color: #ffffff;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-stage-filter-button[aria-pressed=\"true\"][data-stage=\"UPSIDE\"] {\n border-color: #b96e00;\n background: #b96e00;\n color: #ffffff;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-stage-filter-button[aria-pressed=\"true\"][data-stage=\"FORECAST\"] {\n border-color: #755b8b;\n background: #755b8b;\n color: #ffffff;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-stage-filter-button[aria-pressed=\"true\"][data-stage=\"WON\"] {\n border-color: #4b7f22;\n background: #4b7f22;\n color: #ffffff;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-status-filter-button[data-status=\"OPEN\"] {\n color: #69c985;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-status-filter-button[data-status=\"CLOSED\"] {\n color: #c3cad3;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-status-filter-button[data-status=\"LOST\"] {\n color: #ff9d94;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-status-filter-button[data-status=\"WON\"] {\n color: #83bfff;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-status-filter-button[aria-pressed=\"true\"][data-status=\"OPEN\"] {\n border-color: #197a3d;\n background: #197a3d;\n color: #ffffff;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-status-filter-button[aria-pressed=\"true\"][data-status=\"CLOSED\"] {\n border-color: #4b5563;\n background: #4b5563;\n color: #ffffff;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-status-filter-button[aria-pressed=\"true\"][data-status=\"LOST\"] {\n border-color: #b13b34;\n background: #b13b34;\n color: #ffffff;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-status-filter-button[aria-pressed=\"true\"][data-status=\"WON\"] {\n border-color: #1f5f99;\n background: #1f5f99;\n color: #ffffff;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-debug-item {\n border-color: #4e4a46;\n background: #252423;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-icon-button {\n color: #f6f4f2;\n }\n\n @media (min-width: 1201px) and (max-width: 1450px) {\n .opportunities-extension-table th:nth-child(1) {\n width: 16%;\n }\n\n .opportunities-extension-table th:nth-child(3) {\n width: 18%;\n }\n\n .opportunities-extension-table th:nth-child(4) {\n width: 12%;\n }\n\n .opportunities-extension-table th:nth-child(6) {\n width: 7%;\n }\n\n .opportunities-extension-table th:nth-child(7) {\n width: 8%;\n }\n\n .opportunities-extension-table th:nth-child(10) {\n width: 10%;\n }\n }\n\n @media (max-width: 1200px) {\n .opportunities-extension-table {\n min-width: 1180px;\n }\n\n .opportunities-extension-table th:nth-child(1) {\n width: 15%;\n }\n\n .opportunities-extension-table th:nth-child(3) {\n width: 17%;\n }\n\n .opportunities-extension-table th:nth-child(4) {\n width: 13%;\n }\n\n .opportunities-extension-table th:nth-child(6) {\n width: 6%;\n }\n\n .opportunities-extension-table th:nth-child(7) {\n width: 9%;\n }\n\n .opportunities-extension-table th:nth-child(10) {\n width: 11%;\n }\n }\n\n @media (max-width: 700px) {\n .opportunities-extension-header {\n padding: 24px 20px 18px;\n }\n\n .opportunities-extension-header::before {\n left: 20px;\n }\n\n .opportunities-extension-header h1 {\n font-size: 22px;\n }\n\n .opportunities-extension-header p {\n font-size: 14px;\n }\n\n .opportunities-extension-body {\n padding: 16px 20px 24px;\n }\n\n .opportunities-extension-form {\n align-items: stretch;\n flex-wrap: wrap;\n gap: 14px;\n min-height: auto;\n padding: 12px;\n }\n\n .opportunities-extension-field {\n max-width: none;\n width: 100%;\n }\n\n .opportunities-extension-customer-filter {\n width: 100%;\n }\n\n .opportunities-extension-customer-filter-trigger {\n width: 100%;\n }\n\n .opportunities-extension-customer-filter-panel {\n width: min(360px, calc(100vw - 64px));\n }\n\n .opportunities-extension-table-search-field {\n width: 100%;\n }\n\n .opportunities-extension-stage-dashboard {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n\n .opportunities-extension-stage-dashboard-value {\n font-size: 18px;\n }\n\n .opportunities-extension-preferences-modal {\n padding: 12px;\n }\n\n .opportunities-extension-account-plans-modal {\n padding: 12px;\n }\n\n .opportunities-extension-preferences-dialog {\n max-height: calc(100vh - 24px);\n }\n\n .opportunities-extension-account-plans-dialog {\n height: calc(100vh - 24px);\n }\n\n .opportunities-extension-account-plan-panel {\n padding: 12px 14px;\n }\n\n .opportunities-extension-account-plan-details {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n gap: 0 14px;\n }\n\n .opportunities-extension-account-plan-details > div {\n grid-template-columns: 1fr;\n align-content: center;\n gap: 3px;\n min-height: 54px;\n padding: 5px 0;\n }\n\n .opportunities-extension-account-plans-skeleton-details {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n gap: 0 14px;\n padding: 0;\n }\n\n .opportunities-extension-account-plans-skeleton-details > div {\n grid-template-columns: 1fr;\n align-content: center;\n gap: 5px;\n min-height: 54px;\n padding: 5px 0;\n }\n\n .opportunities-extension-account-plans-skeleton-trend {\n margin: 14px 0 0;\n }\n\n .opportunities-extension-account-plans-skeleton-periods {\n display: grid;\n grid-template-columns: repeat(4, minmax(0, 1fr));\n align-items: center;\n gap: 6px;\n }\n\n .opportunities-extension-account-plans-skeleton-periods .opportunities-extension-account-plans-skeleton-bar {\n width: 100% !important;\n }\n\n .opportunities-extension-account-plans-skeleton-chart {\n grid-template-columns: minmax(0, 1fr);\n gap: 12px;\n padding: 12px 8px 0 34px;\n }\n\n .opportunities-extension-account-plans-skeleton-legend {\n display: flex;\n min-height: 24px;\n align-items: center;\n justify-content: center;\n gap: 12px;\n }\n\n .opportunities-extension-consumption-trend-header {\n align-items: stretch;\n }\n\n .opportunities-extension-consumption-periods {\n display: grid;\n grid-template-columns: repeat(4, minmax(0, 1fr));\n gap: 3px;\n }\n\n .opportunities-extension-consumption-periods button {\n min-width: 0;\n padding: 7px 4px;\n font-size: 12px;\n }\n\n .opportunities-extension-consumption-chart {\n min-height: 0;\n }\n\n .opportunities-extension-consumption-svg {\n width: 760px;\n height: 245px;\n }\n\n .opportunities-extension-consumption-visual {\n width: 920px;\n grid-template-columns: 760px 144px;\n gap: 12px;\n }\n\n .opportunities-extension-consumption-figure {\n overflow-x: auto;\n overscroll-behavior-inline: contain;\n }\n\n .opportunities-extension-consumption-chart-skeleton {\n min-height: 0;\n padding: 24px 18px 18px;\n }\n\n .opportunities-extension-consumption-chart-skeleton-plot {\n min-height: 180px;\n gap: 4px;\n padding: 0 6px;\n }\n\n .opportunities-extension-preferences-options {\n grid-template-columns: 1fr;\n }\n\n .opportunities-extension-stage-filter-controls {\n gap: 6px;\n }\n\n .opportunities-extension-status-filter-controls {\n gap: 6px;\n }\n\n .opportunities-extension-table-surface {\n min-width: 0;\n min-height: calc(100vh - 230px);\n }\n\n .opportunities-extension-debug-panel {\n right: 12px;\n bottom: 12px;\n width: calc(100vw - 24px);\n max-height: calc(100vh - 96px);\n }\n }\n \n/* Full-page diagnostics, scoped to the extension and its current theme. */\n.opportunities-extension-modal .opportunities-extension-debug-panel {\n --debug-surface: #fff;\n --debug-code: #f5f6f7;\n --debug-text: #312d2a;\n --debug-muted: #5f5a55;\n --debug-border: #dedbd7;\n --debug-success: #22613b;\n --debug-success-bg: #e1f1e5;\n --debug-failed: #a12721;\n --debug-failed-bg: #fce8e6;\n --debug-pending: #805000;\n --debug-pending-bg: #fff1ce;\n --debug-info: #075e87;\n --debug-info-bg: #e5f1fa;\n --debug-key: #075e87;\n --debug-string: #22613b;\n --debug-number: #865000;\n --debug-literal: #73429b;\n position: fixed;\n inset: 0;\n z-index: 2147483647;\n display: grid;\n grid-template-rows: auto auto minmax(0, 1fr);\n width: auto;\n height: auto;\n max-height: none;\n min-width: 0;\n box-sizing: border-box;\n overflow: hidden;\n margin: 0;\n padding: 20px;\n border: 0;\n border-radius: 0;\n background: var(--debug-surface);\n color: var(--debug-text);\n color-scheme: light;\n}\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-debug-panel {\n --debug-surface: #292827;\n --debug-code: #222120;\n --debug-text: #f6f4f2;\n --debug-muted: #c9c5c1;\n --debug-border: #514c47;\n --debug-success: #a9e3bd;\n --debug-success-bg: #214d34;\n --debug-failed: #ffb4ab;\n --debug-failed-bg: #582c2a;\n --debug-pending: #ffe099;\n --debug-pending-bg: #59441e;\n --debug-info: #a8d9ff;\n --debug-info-bg: #233f52;\n --debug-key: #8ed6f0;\n --debug-string: #a9e3bd;\n --debug-number: #ffe099;\n --debug-literal: #d6b7f1;\n color: #f6f4f2;\n color-scheme: dark;\n}\n.opportunities-extension-debug-actions { display: flex; gap: 8px; flex: 0 0 auto; }\n.opportunities-extension-modal .opportunities-extension-debug-panel .opportunities-extension-debug-list {\n overflow: auto;\n min-height: 0;\n min-width: 0;\n align-content: start;\n scrollbar-gutter: stable;\n padding: 2px 8px 12px 2px;\n}\n.opportunities-extension-modal .opportunities-extension-debug-panel .opportunities-extension-debug-item {\n --debug-state: var(--debug-info);\n --debug-state-bg: var(--debug-info-bg);\n border-color: var(--debug-border);\n border-left-color: var(--debug-state);\n background: var(--debug-surface);\n min-width: 0;\n}\n.opportunities-extension-modal .opportunities-extension-debug-panel .opportunities-extension-debug-item-success { --debug-state: var(--debug-success); --debug-state-bg: var(--debug-success-bg); }\n.opportunities-extension-modal .opportunities-extension-debug-panel .opportunities-extension-debug-item-failed { --debug-state: var(--debug-failed); --debug-state-bg: var(--debug-failed-bg); }\n.opportunities-extension-modal .opportunities-extension-debug-panel .opportunities-extension-debug-item-pending { --debug-state: var(--debug-pending); --debug-state-bg: var(--debug-pending-bg); }\n.opportunities-extension-modal .opportunities-extension-debug-panel .opportunities-extension-debug-status {\n color: var(--debug-state);\n background: var(--debug-state-bg);\n}\n.opportunities-extension-modal .opportunities-extension-debug-panel .opportunities-extension-debug-http-status,\n.opportunities-extension-debug-method {\n color: var(--debug-info);\n background: var(--debug-info-bg);\n}\n.opportunities-extension-debug-method {\n display: inline-flex;\n align-items: center;\n min-height: 22px;\n padding: 0 8px;\n border-radius: 4px;\n font: 700 11px/1.2 Consolas, monospace;\n}\n.opportunities-extension-debug-method[data-method=\"POST\"] { color: var(--debug-literal); background: var(--debug-code); }\n.opportunities-extension-modal .opportunities-extension-debug-panel .opportunities-extension-debug-http-status[data-http-class=\"2\"] { color: var(--debug-success); background: var(--debug-success-bg); }\n.opportunities-extension-modal .opportunities-extension-debug-panel .opportunities-extension-debug-http-status[data-http-class=\"4\"],\n.opportunities-extension-modal .opportunities-extension-debug-panel .opportunities-extension-debug-http-status[data-http-class=\"5\"] { color: var(--debug-failed); background: var(--debug-failed-bg); }\n.opportunities-extension-modal .opportunities-extension-debug-panel .opportunities-extension-debug-http-status[data-http-class=\"pending\"] { color: var(--debug-pending); background: var(--debug-pending-bg); }\n.opportunities-extension-debug-details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding: 0 14px 16px; }\n.opportunities-extension-debug-block { min-width: 0; border-left: 2px solid var(--debug-info); padding-left: 10px; }\n.opportunities-extension-debug-block[data-direction=\"response\"] { border-left-color: var(--debug-success); }\n.opportunities-extension-modal .opportunities-extension-debug-block h3 { margin: 0 0 8px; color: var(--debug-info); font-size: 12px; }\n.opportunities-extension-modal .opportunities-extension-debug-block[data-direction=\"response\"] h3 { color: var(--debug-success); }\n.opportunities-extension-modal .opportunities-extension-debug-panel .opportunities-extension-debug-item pre {\n min-width: 0;\n margin: 0;\n padding: 12px;\n max-height: 380px;\n overflow: auto;\n white-space: pre-wrap;\n overflow-wrap: anywhere;\n color: var(--debug-text);\n background: var(--debug-code);\n line-height: 1.6;\n tab-size: 2;\n}\n.opportunities-extension-debug-json-key { color: var(--debug-key); }\n.opportunities-extension-debug-json-string { color: var(--debug-string); }\n.opportunities-extension-debug-json-number { color: var(--debug-number); }\n.opportunities-extension-debug-json-literal { color: var(--debug-literal); }\n@media (max-width: 760px) {\n .opportunities-extension-modal .opportunities-extension-debug-panel { padding: 12px; }\n .opportunities-extension-debug-details { grid-template-columns: minmax(0, 1fr); }\n}\n.opportunities-extension-debug-tabs {\n display: flex;\n flex-wrap: wrap;\n gap: 4px;\n margin-bottom: 12px;\n padding-bottom: 8px;\n border-bottom: 1px solid #dedbd7;\n}\n\n.opportunities-extension-debug-tabs button {\n max-width: 100%;\n min-height: 32px;\n padding: 6px 8px;\n border: 0;\n border-bottom: 2px solid transparent;\n border-radius: 0;\n background: transparent;\n color: inherit;\n font: inherit;\n font-size: 12px;\n line-height: 1.35;\n overflow-wrap: anywhere;\n cursor: pointer;\n}\n\n.opportunities-extension-debug-tabs button:hover {\n background: #f5f4f2;\n}\n\n.opportunities-extension-debug-tabs button[aria-selected=\"true\"] {\n border-bottom-color: #00758f;\n background: #e8f4f6;\n color: #006b84;\n font-weight: 700;\n}\n\n.opportunities-extension-debug-tabs button:focus-visible,\n.opportunities-extension-debug-list[role=\"tabpanel\"]:focus-visible {\n outline: 2px solid #00758f;\n outline-offset: -2px;\n}\n\n.opportunities-extension-debug-time {\n font-size: 11px;\n font-variant-numeric: tabular-nums;\n white-space: nowrap;\n}\n\n.opportunities-extension-debug-heading {\n flex-wrap: wrap;\n}\n\n.opportunities-extension-debug-heading strong {\n flex: 1 1 180px;\n min-width: 0;\n overflow-wrap: anywhere;\n}\n\n.opportunities-extension-debug-summary-meta {\n flex-wrap: wrap;\n justify-content: flex-end;\n}\n\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-debug-tabs button {\n color: #f6f4f2;\n}\n\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-debug-heading::before {\n color: #c9c5c1;\n}\n\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-debug-tabs {\n border-bottom-color: #514c47;\n}\n\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-debug-tabs button:hover {\n background: #383633;\n}\n\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-debug-tabs button[aria-selected=\"true\"] {\n background: #173f48;\n border-bottom-color: #8cc8d3;\n color: #bde7ee;\n}\n\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-debug-tabs button:focus-visible,\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-debug-list[role=\"tabpanel\"]:focus-visible {\n outline-color: #8cc8d3;\n}\n.opportunities-extension-debug-duration {\n color: #55514d;\n font-size: 11px;\n font-variant-numeric: tabular-nums;\n white-space: nowrap;\n}\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-debug-duration { color: #d6d2ce; }\n\n/* Compact filters use available CSS width, including Windows display scaling. */\n.opportunities-extension-products-progress,\n.opportunities-extension-auth-badge { opacity: 1; transition: opacity 300ms ease; }\n.opportunities-extension-products-progress[data-fading=\"true\"],\n.opportunities-extension-auth-badge[data-fading=\"true\"] { opacity: 0; }\n.opportunities-extension-auth-badge[hidden] { display: none; }\n@media (prefers-reduced-motion: reduce) {\n .opportunities-extension-products-progress,\n .opportunities-extension-auth-badge { transition: none; }\n}\n.opportunities-extension-crm-sr-badge {\n border: 1px solid #408254;\n color: #185b30;\n background: #e1f1e5;\n}\n.opportunities-extension-crm-sr-badge[data-state=\"missing\"] { color: #9f201b; background: #fde8e7; border-color: #c74640; }\n.opportunities-extension-crm-sr-badge[data-state=\"error\"] { color: #785000; background: #fff0cd; border-color: #987021; }\n.opportunities-extension-wl-actions-badge[data-state=\"loading\"] { color: #5f5a55; background: #eceae8; border-color: #8f8a85; }\n.opportunities-extension-crm-sr-badge:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-crm-sr-badge { color: #b8e4c6; background: #214d34; border-color: #6eac82; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-crm-sr-badge[data-state=\"missing\"] { color: #ffd9d5; background: #542824; border-color: #ef938b; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-crm-sr-badge[data-state=\"error\"] { color: #ffe0a3; background: #584219; border-color: #c99b4b; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-wl-actions-badge[data-state=\"loading\"] { color: #dedbd7; background: #484541; border-color: #8f8a85; }\n\n.opportunities-extension-form {\n display: grid;\n grid-template-columns: repeat(4, minmax(0, 1fr)) max-content max-content;\n align-items: end;\n gap: 12px;\n min-height: 0;\n padding: 12px;\n}\n\n.opportunities-extension-form > *,\n.opportunities-extension-badge-filters > section {\n min-width: 0;\n width: 100%;\n max-width: none;\n grid-template-rows: auto 32px;\n gap: 4px;\n font-size: 12px;\n}\n\n.opportunities-extension-form > * > span:first-child,\n.opportunities-extension-badge-filters > section > span:first-child {\n font-size: 12px;\n line-height: 16px;\n}\n\n.opportunities-extension-form .opportunities-extension-select-wrap {\n width: 100%;\n}\n\n.opportunities-extension-form .opportunities-extension-field select,\n.opportunities-extension-form .opportunities-extension-customer-filter-trigger,\n.opportunities-extension-form .opportunities-extension-table-search-field input {\n box-sizing: border-box;\n width: 100%;\n min-width: 0;\n height: 32px;\n min-height: 32px;\n padding: 4px 8px;\n font-size: 12px;\n line-height: 20px;\n}\n\n.opportunities-extension-form .opportunities-extension-field select,\n.opportunities-extension-form .opportunities-extension-customer-filter-trigger {\n padding-right: 26px;\n}\n\n.opportunities-extension-form .opportunities-extension-select-wrap::after,\n.opportunities-extension-form .opportunities-extension-customer-filter-trigger::after {\n right: 10px;\n border-left-width: 4px;\n border-right-width: 4px;\n border-top-width: 5px;\n}\n\n.opportunities-extension-form .opportunities-extension-stage-filter-controls,\n.opportunities-extension-form .opportunities-extension-status-filter-controls {\n flex-wrap: nowrap;\n gap: 4px;\n}\n\n.opportunities-extension-form .opportunities-extension-stage-filter-button,\n.opportunities-extension-form .opportunities-extension-status-filter-button,\n.opportunities-extension-form .opportunities-extension-activity-filter-button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n height: 28px;\n min-height: 28px;\n padding: 4px 7px;\n border: 1px solid currentColor;\n border-radius: 18px;\n font-family: inherit;\n font-size: 11px;\n font-weight: 700;\n letter-spacing: 0;\n line-height: 18px;\n white-space: nowrap;\n}\n\n.opportunities-extension-cell-actions > .opportunities-extension-products-count,\n.opportunities-extension-cell-actions > .opportunities-extension-products-ramp,\n.opportunities-extension-cell-actions > .opportunities-extension-crm-sr-badge {\n display: inline-flex;\n align-items: center;\n justify-content: flex-start;\n box-sizing: border-box;\n flex: 0 0 auto;\n gap: 4px;\n height: 20px;\n min-height: 20px;\n margin: 0;\n padding: 0 6px;\n border-width: 1px;\n border-style: solid;\n border-radius: 8px;\n font-family: inherit;\n font-size: 10px;\n font-style: normal;\n font-weight: 600;\n line-height: 16px;\n letter-spacing: 0;\n text-align: center;\n vertical-align: middle;\n white-space: nowrap;\n}\n\n.opportunities-extension-cell-actions .opportunities-extension-badge-icon,\n.opportunities-extension-activity-filter-button .opportunities-extension-badge-icon {\n display: block;\n order: -1;\n flex: 0 0 16px;\n width: 16px;\n height: 16px;\n margin: 0;\n padding: 0;\n border: 0;\n color: inherit;\n fill: none;\n stroke: currentColor;\n stroke-width: 2.25;\n stroke-linecap: round;\n stroke-linejoin: round;\n pointer-events: none;\n}\n\n@media (max-width: 1150px) {\n .opportunities-extension-form {\n grid-template-columns: repeat(4, minmax(0, 1fr));\n }\n .opportunities-extension-badge-filters > .opportunities-extension-status-filter,\n .opportunities-extension-badge-filters > .opportunities-extension-stage-filter {\n grid-column: span 2;\n }\n}\n\n@media (max-width: 700px) {\n .opportunities-extension-form {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n .opportunities-extension-form .opportunities-extension-stage-filter-controls,\n .opportunities-extension-form .opportunities-extension-status-filter-controls {\n flex-wrap: wrap;\n }\n .opportunities-extension-badge-filters > .opportunities-extension-status-filter,\n .opportunities-extension-badge-filters > .opportunities-extension-stage-filter {\n grid-template-rows: auto auto;\n }\n}\n\n@media (max-width: 420px) {\n .opportunities-extension-form { grid-template-columns: minmax(0, 1fr); }\n .opportunities-extension-badge-filters > .opportunities-extension-status-filter,\n .opportunities-extension-badge-filters > .opportunities-extension-stage-filter { grid-column: auto; }\n}\n\n.opportunities-extension-badge-filters { display: contents; }\n.opportunities-extension-activity-filter { display: grid; }\n.opportunities-extension-activity-filter[hidden] { display: none; }\n.opportunities-extension-activity-filter-controls { display: flex; align-items: center; flex-wrap: nowrap; gap: 4px; }\n/* Flexible fields share the space left by the four compact badge groups. */\n.opportunities-extension-form[data-activity-filters=\"true\"] {\n grid-template-columns: repeat(4, minmax(0, 1fr)) repeat(4, max-content);\n column-gap: 8px;\n}\n.opportunities-extension-activity-filter-button {\n min-width: 32px;\n gap: 4px;\n color: #185b30;\n background: #fff;\n cursor: pointer;\n}\n.opportunities-extension-activity-filter-button[data-value=\"missing\"] { color: #9f201b; }\n.opportunities-extension-activity-filter-button[data-value=\"under4\"] { color: #005f7d; }\n.opportunities-extension-activity-filter-button[aria-pressed=\"true\"] { color: #fff; background: #25653a; border-color: #25653a; }\n.opportunities-extension-activity-filter-button[aria-pressed=\"true\"][data-value=\"missing\"] { background: #a12d27; border-color: #a12d27; }\n.opportunities-extension-activity-filter-button[aria-pressed=\"true\"][data-value=\"under4\"] { background: #006b86; border-color: #006b86; }\n.opportunities-extension-activity-filter-button:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-activity-filter { color: #eeeae6; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-activity-filter-button { color: #b8e4c6; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-activity-filter-button:not([aria-pressed=\"true\"]) { background: #333130; border-color: #6a6560; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-activity-filter-button[data-value=\"missing\"] { color: #ffd9d5; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-activity-filter-button[data-value=\"under4\"] { color: #b5e9fc; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-activity-filter-button[aria-pressed=\"true\"] { border-color: currentColor; }\n@media (max-width: 1350px) {\n .opportunities-extension-form[data-activity-filters=\"true\"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }\n .opportunities-extension-form[data-activity-filters=\"true\"] .opportunities-extension-badge-filters {\n display: flex;\n grid-column: 1 / -1;\n flex-wrap: wrap;\n align-items: start;\n gap: 12px 20px;\n }\n .opportunities-extension-form[data-activity-filters=\"true\"] .opportunities-extension-badge-filters > section {\n width: auto;\n max-width: 100%;\n grid-template-rows: auto auto;\n }\n}\n@media (max-width: 700px) {\n .opportunities-extension-form[data-activity-filters=\"true\"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }\n .opportunities-extension-activity-filter-controls { flex-wrap: wrap; }\n}\n@media (max-width: 420px) {\n .opportunities-extension-form[data-activity-filters=\"true\"] { grid-template-columns: minmax(0, 1fr); }\n}\n\n.opportunities-extension-add-action {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n flex: 0 0 16px;\n width: 16px;\n height: 16px;\n padding: 0;\n margin: 0 0 0 2px;\n border: 0;\n border-radius: 3px;\n background: transparent;\n color: inherit;\n font: inherit;\n cursor: pointer;\n}\n.opportunities-extension-add-action:hover { background: rgba(127, 127, 127, .2); }\n.opportunities-extension-add-action:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }\n.opportunities-extension-action-form-modal {\n position: absolute;\n inset: 0;\n z-index: 5;\n display: grid;\n place-items: center;\n padding: 12px;\n background: rgba(0, 0, 0, .42);\n}\n.opportunities-extension-action-form-dialog {\n box-sizing: border-box;\n width: min(560px, 100%);\n max-height: calc(100vh - 24px);\n overflow-y: auto;\n background: #fff;\n color: #312d2a;\n border: 1px solid #b9b4ae;\n border-radius: 6px;\n box-shadow: 0 12px 36px rgba(0, 0, 0, .25);\n}\n.opportunities-extension-action-form {\n display: grid;\n grid-template-columns: repeat(2, minmax(0, 1fr));\n gap: 14px;\n padding: 18px;\n}\n.opportunities-extension-action-form-heading { min-width: 0; overflow-wrap: anywhere; }\n.opportunities-extension-action-form-context {\n display: grid;\n grid-template-columns: max-content minmax(0, 1fr);\n gap: 6px 12px;\n margin: 12px 0 0;\n font-size: 12px;\n line-height: 18px;\n}\n.opportunities-extension-action-form-context dt { font-weight: 600; }\n.opportunities-extension-action-form-context dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }\n.opportunities-extension-action-form-field { display: grid; gap: 6px; min-width: 0; font-size: 13px; }\n.opportunities-extension-action-form-field[hidden] { display: none; }\n.opportunities-extension-action-form-status { margin: 0; font-size: 13px; overflow-wrap: anywhere; }\n.opportunities-extension-action-form-status[role=\"alert\"] { color: #a12d27; }\n.opportunities-extension-action-form-wide,\n.opportunities-extension-action-form-footer { grid-column: 1 / -1; }\n.opportunities-extension-action-form-field input,\n.opportunities-extension-action-form-field select,\n.opportunities-extension-action-form-field textarea {\n box-sizing: border-box;\n min-width: 0;\n width: 100%;\n border: 1px solid #8f8983;\n border-radius: 4px;\n padding: 8px;\n font: inherit;\n line-height: 20px;\n color: inherit;\n background: #fff;\n}\n.opportunities-extension-action-form-field textarea { resize: vertical; min-height: 96px; }\n.opportunities-extension-action-form-field select { height: 38px; }\n.opportunities-extension-action-form-field select[hidden] { display: none; }\n.opportunities-extension-sr-form-dialog { width: min(900px, 100%); }\n.opportunities-extension-sr-form-dialog > .opportunities-extension-account-plans-header { padding: 20px 24px; }\n.opportunities-extension-sr-form-dialog > .opportunities-extension-action-form { gap: 20px 24px; padding: 24px; align-items: start; }\n.opportunities-extension-sr-form-dialog .opportunities-extension-action-form-field { gap: 8px; }\n.opportunities-extension-sr-form-dialog textarea { min-height: 112px; }\n.opportunities-extension-sr-form-dialog .opportunities-extension-sr-service-option { padding: 12px 0; gap: 10px; }\n.opportunities-extension-sr-form-dialog .opportunities-extension-sr-service-abstract { font-size: 13px; line-height: 20px; }\n@media (min-width: 1000px) {\n .opportunities-extension-sr-form-dialog { width: min(1120px, 100%); }\n .opportunities-extension-sr-form-dialog > .opportunities-extension-action-form { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 24px; }\n .opportunities-extension-sr-services { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; align-items: start; }\n .opportunities-extension-sr-services .opportunities-extension-sr-service-option { margin: 0; border-top: 1px solid #aaa6a040; }\n .opportunities-extension-sr-services .opportunities-extension-sr-service-option:nth-child(-n+2) { border-top: 0; }\n}\n@media (max-width: 600px) {\n .opportunities-extension-sr-form-dialog > .opportunities-extension-account-plans-header { padding: 16px; }\n .opportunities-extension-sr-form-dialog > .opportunities-extension-action-form { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 16px; }\n}\n.opportunities-extension-sr-lookup { min-width: 0; padding: 0; margin: 0; border: 0; font-size: 13px; }\n.opportunities-extension-sr-lookup legend { padding: 0 0 8px; font-weight: 600; }\n.opportunities-extension-sr-lookup[aria-busy=\"true\"] > p { opacity: .65; }\n.opportunities-extension-sr-service-option { display: flex; align-items: flex-start; gap: 8px; padding: 9px 0; cursor: pointer; }\n.opportunities-extension-sr-service-option + .opportunities-extension-sr-service-option { border-top: 1px solid #aaa6a040; }\n.opportunities-extension-sr-service-option input { flex: 0 0 16px; width: 16px; height: 16px; margin: 2px 0 0; accent-color: #00758f; }\n.opportunities-extension-sr-service-option > span { min-width: 0; overflow-wrap: anywhere; }\n.opportunities-extension-sr-service-name { display: block; font-weight: 600; line-height: 20px; }\n.opportunities-extension-sr-service-abstract { display: block; margin-top: 3px; color: #625d58; font-size: 12px; line-height: 18px; white-space: pre-wrap; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-sr-service-abstract { color: #c7c2bc; }\n.opportunities-extension-sr-lookup-retry { color: inherit; background: transparent; border: 1px solid #8f8983; border-radius: 4px; padding: 5px 10px; cursor: pointer; }\n.opportunities-extension-sr-lookup-retry[hidden] { display: none; }\n.opportunities-extension-action-form [aria-invalid=\"true\"] { border-color: #b3261e; outline: 1px solid #b3261e; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-action-form [aria-invalid=\"true\"] { border-color: #ffaaa4; outline-color: #ffaaa4; }\n.opportunities-extension-modal .opportunities-extension-copy-toast { z-index: 20; }\n.opportunities-extension-action-combobox { position: relative; min-width: 0; }\n.opportunities-extension-action-combobox input { height: 38px; }\n.opportunities-extension-action-options {\n position: absolute;\n z-index: 10;\n top: calc(100% + 4px);\n left: 0;\n right: 0;\n box-sizing: border-box;\n max-height: 180px;\n overflow-y: auto;\n overscroll-behavior: contain;\n border: 1px solid #8f8983;\n border-radius: 4px;\n box-shadow: 0 4px 12px rgba(0, 0, 0, .2);\n background: #fff;\n color: #292725;\n}\n.opportunities-extension-action-options[data-placement=\"above\"] { top: auto; bottom: calc(100% + 4px); }\n.opportunities-extension-action-options[hidden] { display: none; }\n.opportunities-extension-action-option { padding: 8px; line-height: 20px; overflow-wrap: anywhere; cursor: pointer; }\n.opportunities-extension-action-option:hover,\n.opportunities-extension-action-option[aria-selected=\"true\"] { background: #e3f2f5; color: #005b70; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-action-options { background: #211f1d; color: #eeeae6; border-color: #918a82; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-action-option:hover,\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-action-option[aria-selected=\"true\"] { background: #174955; color: #c9f4ff; }\n.opportunities-extension-action-form[data-state=\"loading\"] .opportunities-extension-action-combobox input:disabled { animation: opportunities-action-options-loading 1s ease-in-out infinite alternate; }\n.opportunities-extension-action-form[data-state=\"loading\"] .opportunities-extension-action-form-field > :disabled {\n animation: opportunities-action-options-loading 1s ease-in-out infinite alternate;\n}\n@keyframes opportunities-action-options-loading { from { opacity: .45; } to { opacity: .85; } }\n@media (prefers-reduced-motion: reduce) {\n .opportunities-extension-action-form[data-state=\"loading\"] .opportunities-extension-action-form-field > :disabled,\n .opportunities-extension-action-form[data-state=\"loading\"] .opportunities-extension-action-combobox input:disabled { animation: none; }\n}\n.opportunities-extension-action-form-footer { display: flex; justify-content: flex-end; gap: 8px; }\n.opportunities-extension-action-form-footer button {\n border: 1px solid #8f8983;\n border-radius: 4px;\n padding: 7px 14px;\n font: inherit;\n font-size: 13px;\n background: transparent;\n color: inherit;\n cursor: pointer;\n}\n.opportunities-extension-action-form-footer button:disabled { opacity: .55; cursor: not-allowed; }\n.opportunities-extension-action-form :focus-visible { outline: 2px solid #00758f; outline-offset: 2px; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-action-form-dialog {\n color-scheme: dark;\n background: #292725;\n color: #eeeae6;\n border-color: #756f68;\n}\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-action-form-field input,\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-action-form-field select,\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-action-form-field textarea { background: #211f1d; border-color: #918a82; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-action-form-status[role=\"alert\"] { color: #ffd9d5; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-action-form :focus-visible { outline-color: #80d6e8; }\n@media (max-width: 420px) {\n .opportunities-extension-action-form { grid-template-columns: minmax(0, 1fr); }\n}\n\n/* Keep layout rules on the outer table, never on expanded product tables. */\n.opportunities-extension-table[data-opportunities-layout=\"inline-actions\"] {\n width: 100%;\n min-width: 1168px;\n table-layout: fixed;\n}\n\n.opportunities-extension-table-skeleton-row { height: 76px; }\n.opportunities-extension-table-skeleton-text { width: 85%; max-width: 100%; }\n.opportunities-extension-table-skeleton-row:nth-of-type(even) .opportunities-extension-table-skeleton-text { width: 70%; }\n.opportunities-extension-table-skeleton-badge { flex: 0 1 30px; width: 30px; min-width: 0; height: 16px; }\n.opportunities-extension-table-skeleton-row > td[data-column=\"customer\"] .opportunities-extension-table-skeleton-badge { flex-basis: 18px; width: 18px; }\n.opportunities-extension-table-skeleton-row > td[data-column=\"status\"] .opportunities-extension-table-skeleton-text,\n.opportunities-extension-table-skeleton-row > td[data-column=\"stage\"] .opportunities-extension-table-skeleton-text { height: 20px; max-width: 66px; border-radius: 8px; }\n\n/* Fixed table layout shares leftover width only between the two auto columns. */\n.opportunities-extension-table > thead > tr > th[data-column=\"name\"] { width: auto; }\n.opportunities-extension-table > thead > tr > th[data-column=\"customer\"] { width: auto; }\n.opportunities-extension-table > thead > tr > th[data-column=\"owner\"] { width: 132px; }\n.opportunities-extension-table > thead > tr > th[data-column=\"optyNumber\"] { width: 106px; }\n.opportunities-extension-table > thead > tr > th[data-column=\"revenue\"] { width: 124px; }\n.opportunities-extension-table > thead > tr > th[data-column=\"closeDate\"] { width: 100px; }\n.opportunities-extension-table > thead > tr > th[data-column=\"status\"] { width: 114px; }\n.opportunities-extension-table > thead > tr > th[data-column=\"winProbability\"] { width: 110px; }\n.opportunities-extension-table > thead > tr > th[data-column=\"stage\"] { width: 94px; }\n.opportunities-extension-table > thead > tr > th[data-column=\"lastUpdateDate\"] { width: 136px; }\n\n.opportunities-extension-table > tbody > tr > td[data-column] {\n padding: 10px 8px;\n overflow: visible;\n text-overflow: clip;\n white-space: normal;\n font-variant-numeric: tabular-nums;\n}\n\n.opportunities-extension-table > tbody > tr > td[data-column=\"name\"],\n.opportunities-extension-table > tbody > tr > td[data-column=\"customer\"] {\n position: relative;\n padding-right: 16px;\n padding-left: 12px;\n padding-bottom: 38px;\n vertical-align: top;\n}\n\n.opportunities-extension-table > tbody > tr > td[data-column=\"owner\"] {\n padding-right: 16px;\n}\n\n.opportunities-extension-table > tbody > tr > td[data-column=\"closeDate\"],\n.opportunities-extension-table > tbody > tr > td[data-column=\"lastUpdateDate\"],\n.opportunities-extension-table > tbody > tr > td[data-column=\"status\"],\n.opportunities-extension-table > tbody > tr > td[data-column=\"stage\"],\n.opportunities-extension-table > tbody > tr > td[data-column=\"winProbability\"] {\n white-space: nowrap;\n}\n\n.opportunities-extension-cell-content {\n display: block;\n min-width: 0;\n min-height: 2.7em;\n line-height: 1.35;\n}\n\n.opportunities-extension-cell-content > :first-child {\n display: block;\n min-width: 0;\n overflow-wrap: anywhere;\n}\n\n.opportunities-extension-cell-actions {\n position: absolute;\n left: 12px;\n right: 16px;\n bottom: 10px;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n gap: 6px;\n height: 24px;\n}\n\n.opportunities-extension-cell-actions .opportunities-extension-action-button {\n flex: 0 0 24px;\n width: 24px;\n height: 24px;\n padding: 2px;\n}\n\n.opportunities-extension-table > tbody > tr > td[data-column=\"customer\"] .opportunities-extension-cell-actions {\n min-width: 114px;\n}\n\n.opportunities-extension-cell-actions .opportunities-extension-action-button svg {\n width: 18px;\n height: 18px;\n}\n\n.opportunities-extension-cell-actions button:focus-visible {\n outline: 2px solid currentColor;\n outline-offset: 2px;\n}\n\n.opportunities-extension-products-ramp {\n min-width: 0;\n max-width: 100%;\n border: 1px solid #bba5cf;\n background: #f0e8f7;\n color: #63358a;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-products-ramp {\n background: #43334f;\n color: #ead5fc;\n border-color: #9372ac;\n}\n\n.opportunities-extension-products-ramp[data-missing=\"true\"] {\n background: #fde8e7;\n color: #9f201b;\n border-color: #c74640;\n}\n\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-products-ramp[data-missing=\"true\"] {\n background: #542824;\n color: #ffd9d5;\n border-color: #ef938b;\n}\n\n.opportunities-extension-table > thead > tr > th[data-column] .opportunities-extension-sort-button {\n display: grid;\n grid-template-columns: minmax(0, 1fr) 12px;\n gap: 6px;\n padding: 10px 8px;\n align-items: center;\n}\n\n.opportunities-extension-table > thead > tr > th[data-column=\"name\"] .opportunities-extension-sort-button,\n.opportunities-extension-table > thead > tr > th[data-column=\"customer\"] .opportunities-extension-sort-button {\n padding-left: 12px;\n padding-right: 16px;\n}\n\n.opportunities-extension-sort-label {\n min-width: 0;\n white-space: normal;\n overflow-wrap: anywhere;\n}\n\n.opportunities-extension-table > thead > tr > th[data-column] .opportunities-extension-sort-button::after {\n position: static;\n justify-self: end;\n}\n.opportunities-extension-crm-sr-badge[type=\"button\"] { cursor: pointer; font-family: inherit; }\n.opportunities-extension-sr-popover {\n position: fixed; z-index: 8; box-sizing: border-box; overflow: auto;\n padding: 12px; border: 1px solid #b9b5b0; border-radius: 6px;\n background: #fff; color: #302e2b; box-shadow: 0 6px 24px #0003;\n font: 12px/1.5 Arial, sans-serif; text-align: left; overflow-wrap: anywhere;\n}\n.opportunities-extension-sr-popover section { padding: 8px 0; }\n.opportunities-extension-sr-popover section + section { border-top: 1px solid #dedbd7; }\n.opportunities-extension-sr-number { display: flex; align-items: center; gap: 8px; padding-right: 30px; font-weight: 600; }\n.opportunities-extension-sr-popover a { color: #00677d; text-decoration: underline; }\n.opportunities-extension-sr-details { white-space: pre-wrap; margin-top: 6px; }\n.opportunities-extension-sr-children { margin: 10px 0 0 8px; padding-left: 10px; border-left: 2px solid #8c969a; overflow-wrap: anywhere; }\n.opportunities-extension-sr-children[aria-busy=\"true\"] { min-height: 28px; animation: opportunities-action-options-loading 1s ease-in-out infinite alternate; }\n.opportunities-extension-sr-children[role=\"alert\"] { color: #a12d27; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-sr-children[role=\"alert\"] { color: #ffd9d5; }\n@media (prefers-reduced-motion: reduce) { .opportunities-extension-sr-children[aria-busy=\"true\"] { animation: none; } }\n.opportunities-extension-sr-dismiss {\n position: absolute; top: 6px; right: 6px; width: 28px; height: 28px;\n display: grid; place-items: center; padding: 4px; border: 0;\n background: transparent; color: inherit; cursor: pointer;\n}\n.opportunities-extension-sr-dismiss svg { width: 16px; height: 16px; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-sr-popover { background: #292827; color: #f1efec; border-color: #77716b; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-sr-popover section + section { border-color: #5f5953; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-sr-popover a { color: #7ddced; }\n.opportunities-extension-title-row {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n gap: 8px 16px;\n min-width: 0;\n flex: 1;\n}\n.opportunities-extension-title-row h1 {\n display: block;\n margin: 0;\n padding: 0;\n line-height: 1;\n}\n.opportunities-extension-title-row .opportunities-extension-subtitle-row {\n display: flex;\n align-items: center;\n align-self: center;\n flex-wrap: wrap;\n gap: 8px;\n margin: 0;\n padding: 0;\n min-width: 0;\n}\n.opportunities-extension-title-row .opportunities-extension-subtitle-row > span {\n box-sizing: border-box;\n margin: 0;\n min-height: 22px;\n line-height: 16px;\n}\n.opportunities-extension-title-row + .opportunities-extension-header-actions { flex-shrink: 0; }\n.opportunities-extension-refresh-all:disabled { opacity: .65; cursor: wait; }\n.opportunities-extension-refresh-all:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }\n.opportunities-extension-refresh-all[aria-busy=\"true\"] svg { animation: opportunities-refresh-spin 1s linear infinite; }\n@keyframes opportunities-refresh-spin { to { transform: rotate(360deg); } }\n@media (prefers-reduced-motion: reduce) {\n .opportunities-extension-refresh-all[aria-busy=\"true\"] svg { animation: none; }\n}\n.opportunities-extension-option-description { display: block; font-size: 12px; line-height: 1.4; margin-top: 4px; white-space: normal; overflow-wrap: anywhere; opacity: .85; }\n.opportunities-extension-action-form-dialog.opportunities-extension-internal-sr-dialog { width: min(760px, 100%); }\n.opportunities-extension-session-retry {\n margin-left: 8px; padding: 2px 6px; border: 1px solid currentColor;\n border-radius: 4px; background: transparent; color: inherit; font: inherit; cursor: pointer;\n}\n.opportunities-extension-session-retry:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }\n.opportunities-extension-session-retry:disabled { opacity: .6; cursor: wait; }\n\n.opportunities-extension-account-plans-dialog.opportunities-extension-install-base-dialog {\n width: min(1700px, 100%);\n}\n.opportunities-extension-install-base-dialog .opportunities-extension-account-plans-header {\n padding: 10px 12px;\n gap: 12px;\n}\n.opportunities-extension-install-base-dialog .opportunities-extension-account-plans-header h2 {\n font-size: 16px;\n line-height: 22px;\n}\n.opportunities-extension-install-base-dialog .opportunities-extension-account-plans-header p {\n font-size: 12px;\n line-height: 16px;\n margin-top: 3px;\n overflow-wrap: anywhere;\n}\n.opportunities-extension-install-base-dialog .opportunities-extension-icon-button {\n width: 28px;\n height: 28px;\n min-width: 28px;\n min-height: 28px;\n padding: 4px;\n}\n.opportunities-extension-install-base-dialog .opportunities-extension-customer-table-toolbar {\n padding: 8px 12px;\n}\n.opportunities-extension-install-base-dialog .opportunities-extension-customer-table-search {\n width: min(320px, 100%);\n height: 32px;\n padding: 4px 8px;\n font-size: 12px;\n line-height: 20px;\n}\n.opportunities-extension-install-base-content {\n min-width: 0;\n min-height: 0;\n overflow: auto;\n scrollbar-gutter: stable;\n}\n.opportunities-extension-install-base-message { margin: 10px 12px; font-size: 12px; line-height: 16px; }\n.opportunities-extension-install-base-table {\n width: 100%; min-width: 1120px; table-layout: fixed; border-collapse: collapse; font-size: 11px;\n}\n.opportunities-extension-install-base-table col { width: 7%; }\n.opportunities-extension-install-base-table .install-base-col-productGroupName { width: 13%; }\n.opportunities-extension-install-base-table .install-base-col-productName { width: 13%; }\n.opportunities-extension-install-base-table .install-base-col-quantity { width: 5%; }\n.opportunities-extension-install-base-table .install-base-col-quantityType { width: 8%; }\n.opportunities-extension-install-base-table th,\n.opportunities-extension-install-base-table td {\n padding: 8px 6px; text-align: left; vertical-align: middle; overflow-wrap: anywhere;\n border-bottom: 1px solid #e8e5e1; line-height: 1.4;\n}\n.opportunities-extension-install-base-table th { position: sticky; top: 0; z-index: 1; background: #faf9f8; }\n.opportunities-extension-install-base-table td[data-format=\"amount\"],\n.opportunities-extension-install-base-table td[data-format=\"quantity\"] { text-align: right; font-variant-numeric: tabular-nums; }\n.opportunities-extension-install-base-table td[data-format=\"date\"] { white-space: nowrap; }\n.opportunities-extension-install-base-status {\n display: inline-block; padding: 2px 5px; border-radius: 12px; font-size: 10px; font-weight: 600;\n color: #5f5a55; background: #eceae8; white-space: nowrap;\n}\n.opportunities-extension-install-base-status[data-status=\"ACTIVE\"] { color: #17693a; background: #e1f1e5; }\n.opportunities-extension-install-base-status[data-status=\"UNSUPPORTED\"] { color: #855300; background: #fff0d6; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-install-base-content,\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-install-base-table,\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-install-base-table th,\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-install-base-table td { color: #f6f4f2; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-install-base-message { color: #c9c5c1; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-install-base-message[role=\"alert\"] { color: #ffb4ab; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-install-base-table th { background: #353331; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-install-base-table th,\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-install-base-table td { border-color: #484541; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-install-base-status { color: #dedbd7; background: #484541; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-install-base-status[data-status=\"ACTIVE\"] { color: #b8e4c6; background: #214d34; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-install-base-status[data-status=\"UNSUPPORTED\"] { color: #ffdfa2; background: #614418; }\n@media (prefers-reduced-motion: reduce) {\n .opportunities-extension-install-base-table .opportunities-extension-account-plans-skeleton-bar { animation: none; }\n}\n.opportunities-extension-install-base-table .opportunities-extension-sort-button { min-height: 28px; padding: 4px 16px 4px 0; overflow-wrap: anywhere; }\n.opportunities-extension-install-base-table .opportunities-extension-sort-button::after { right: 0; font-size: 12px; }\n\n.opportunities-extension-account-plans-dialog.opportunities-extension-service-requests-dialog { width: min(1700px, 100%); }\n.opportunities-extension-service-requests-content { min-width: 0; min-height: 0; overflow: auto; scrollbar-gutter: stable; }\n.opportunities-extension-service-requests-message { margin: 16px; font-size: 13px; }\n.opportunities-extension-service-requests-table {\n width: 100%; min-width: 1200px; table-layout: fixed; border-collapse: collapse; font-size: 12px;\n}\n.opportunities-extension-service-requests-table col { width: 7%; }\n.opportunities-extension-service-requests-table .service-requests-col-name { width: 17%; }\n.opportunities-extension-service-requests-table .service-requests-col-id { width: 10%; }\n.opportunities-extension-service-requests-table .service-requests-col-severity { width: 5%; }\n.opportunities-extension-service-requests-table .service-requests-col-subStatus { width: 14%; }\n.opportunities-extension-service-requests-table .service-requests-col-productName { width: 12%; }\n.opportunities-extension-service-requests-table th,\n.opportunities-extension-service-requests-table td {\n padding: 12px 8px; text-align: left; vertical-align: middle; overflow-wrap: anywhere;\n border-bottom: 1px solid #e8e5e1; line-height: 1.4;\n}\n.opportunities-extension-service-requests-table th { position: sticky; top: 0; z-index: 1; background: #faf9f8; }\n.opportunities-extension-service-requests-table td[data-field=\"created\"],\n.opportunities-extension-service-requests-table td[data-field=\"lastUpdated\"],\n.opportunities-extension-service-requests-table td[data-field=\"id\"] { white-space: nowrap; font-variant-numeric: tabular-nums; }\n.opportunities-extension-service-request-status {\n display: inline-block; padding: 3px 6px; border-radius: 12px; font-size: 10px; font-weight: 600;\n color: #5f5a55; background: #eceae8;\n}\n.opportunities-extension-service-request-status[data-status=\"OPEN\"] { color: #17693a; background: #e1f1e5; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-service-requests-content,\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-service-requests-table,\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-service-requests-table th,\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-service-requests-table td { color: #f6f4f2; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-service-requests-message { color: #c9c5c1; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-service-requests-message[role=\"alert\"] { color: #ffb4ab; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-service-requests-table th { background: #353331; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-service-requests-table th,\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-service-requests-table td { border-color: #484541; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-service-request-status { color: #dedbd7; background: #484541; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-service-request-status[data-status=\"OPEN\"] { color: #b8e4c6; background: #214d34; }\n@media (prefers-reduced-motion: reduce) {\n .opportunities-extension-service-requests-table .opportunities-extension-account-plans-skeleton-bar { animation: none; }\n}\n.opportunities-extension-service-requests-table .opportunities-extension-sort-button { min-height: 28px; padding: 4px 16px 4px 0; overflow-wrap: anywhere; }\n.opportunities-extension-service-requests-table .opportunities-extension-sort-button::after { right: 0; font-size: 12px; }\n\n/* Scope sizing to Cloud Consumption, not other dialogs sharing its components. */\n[data-consumption-layout=\"compact\"] .opportunities-extension-account-plans-header { padding: 10px 12px; gap: 12px; }\n[data-consumption-layout=\"compact\"] .opportunities-extension-account-plans-header h2 { font-size: 16px; line-height: 22px; }\n[data-consumption-layout=\"compact\"] .opportunities-extension-account-plans-header p { font-size: 12px; line-height: 16px; margin-top: 3px; overflow-wrap: anywhere; }\n[data-consumption-layout=\"compact\"] .opportunities-extension-icon-button { width: 28px; height: 28px; min-width: 28px; min-height: 28px; padding: 4px; }\n[data-consumption-layout=\"compact\"] .opportunities-extension-account-plans-tabs { padding: 4px 12px 0; }\n[data-consumption-layout=\"compact\"] .opportunities-extension-account-plan-tab { min-height: 30px; padding: 4px 8px; font-size: 12px; }\n[data-consumption-layout=\"compact\"] .opportunities-extension-account-plan-panel { padding: 8px 12px; }\n[data-consumption-layout=\"compact\"] .opportunities-extension-account-plan-details { gap: 0 12px; }\n[data-consumption-layout=\"compact\"] .opportunities-extension-account-plan-details > div { grid-template-columns: minmax(85px, 35%) minmax(0, 1fr); min-height: 32px; padding: 4px 0; gap: 6px; }\n[data-consumption-layout=\"compact\"] .opportunities-extension-account-plan-details dt { font-size: 11px; line-height: 16px; }\n[data-consumption-layout=\"compact\"] .opportunities-extension-account-plan-details dd { font-size: 12px; line-height: 16px; }\n[data-consumption-layout=\"compact\"] .opportunities-extension-consumption-trend { margin-top: 8px; padding-top: 6px; }\n[data-consumption-layout=\"compact\"] .opportunities-extension-consumption-periods button { min-height: 28px; padding: 4px 8px; font-size: 12px; }\n[data-consumption-layout=\"compact\"] .opportunities-extension-consumption-navigation { grid-template-columns: 28px minmax(120px, auto) 28px; min-height: 30px; }\n[data-consumption-layout=\"compact\"] .opportunities-extension-consumption-navigation strong { font-size: 12px; }\n[data-consumption-layout=\"compact\"] .opportunities-extension-consumption-navigation-button { width: 28px; height: 28px; }\n[data-consumption-layout=\"compact\"] .opportunities-extension-consumption-visual { grid-template-columns: minmax(0, 1fr) 150px; gap: 8px; }\n[data-consumption-layout=\"compact\"] .opportunities-extension-consumption-svg { height: 100%; max-height: 100%; min-width: 0; }\n[data-consumption-layout=\"compact\"] .opportunities-extension-consumption-legend button { font-size: 11px; padding: 4px; gap: 5px; }\n\n/* Small viewports must scroll rather than clip details or collapse the chart. */\n@media (max-height: 560px), (max-width: 700px) {\n [data-consumption-layout=\"compact\"] .opportunities-extension-account-plans-panels { overflow: auto; }\n [data-consumption-layout=\"compact\"] .opportunities-extension-account-plan-panel { height: auto; min-height: 100%; grid-template-rows: auto minmax(280px, 1fr); }\n}\n@media (max-width: 700px) {\n [data-consumption-layout=\"compact\"] .opportunities-extension-account-plan-details { grid-template-columns: minmax(0, 1fr); }\n [data-consumption-layout=\"compact\"] .opportunities-extension-consumption-visual { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }\n [data-consumption-layout=\"compact\"] .opportunities-extension-consumption-legend { display: flex; flex-wrap: wrap; }\n}\n\n.opportunities-extension-plan-detail-badges { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }\n.opportunities-extension-consumption-trend-header { align-items: center; justify-content: space-between; gap: 12px; }\n.opportunities-extension-consumption-trend-header > .opportunities-extension-plan-detail-badges { min-width: 0; }\n.opportunities-extension-plan-detail-skeleton { width: 64px; height: 20px; }\n.opportunities-extension-projection-badge {\n display: inline-flex; align-items: center; justify-content: center; border: 1px solid transparent;\n padding: 3px 8px; border-radius: 12px; font-size: 11px; font-weight: 600; line-height: 1.3;\n color: #5f5a55; background: #eceae8; white-space: nowrap;\n}\nbutton.opportunities-extension-projection-badge { cursor: pointer; }\n.opportunities-extension-projection-badge[data-status=\"forfeit\"] { color: #a12424; background: #fbe5e5; }\n.opportunities-extension-projection-badge[data-status=\"overage\"] { color: #185a9d; background: #e0edfc; }\n.opportunities-extension-projection-badge:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }\n.opportunities-extension-projection-popover {\n position: fixed; z-index: 8; box-sizing: border-box; padding: 14px; overflow: auto; overscroll-behavior: contain;\n border: 1px solid #b9b4ae; border-radius: 4px; background: #ffffff; color: #312d2a;\n box-shadow: 0 4px 16px #0003; font-size: 12px; line-height: 1.4; overflow-wrap: anywhere;\n}\n.opportunities-extension-projection-popover[hidden] { display: none; }\n.opportunities-extension-projection-popover .opportunities-extension-projection-dismiss {\n display: grid; place-items: center; width: 24px; height: 24px; margin-left: auto; margin-bottom: 8px; padding: 4px; border: 1px solid #b9b4ae;\n border-radius: 4px; background: transparent; color: inherit; cursor: pointer; font-size: 12px;\n}\n.opportunities-extension-projection-dismiss svg { width: 14px; height: 14px; }\n.opportunities-extension-projection-line h3 { margin: 0 0 8px; font-size: 12px; }\n.opportunities-extension-projection-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; margin: 0; }\n.opportunities-extension-projection-fields > div { min-width: 0; }\n.opportunities-extension-projection-fields dt { font-weight: 600; color: #5f5a55; font-size: 11px; }\n.opportunities-extension-projection-fields dd { margin: 2px 0 0; font-variant-numeric: tabular-nums; }\n.opportunities-extension-projection-fields a { color: #006d7a; text-decoration: underline; }\n.opportunities-extension-projection-children { margin-top: 14px; padding-left: 12px; border-left: 2px solid #dedbd7; }\n.opportunities-extension-projection-children > section + section { margin-top: 16px; }\n.opportunities-extension-plan-detail-error { color: #a12424; font-size: 12px; }\n.opportunities-extension-projection-empty { color: #5f5a55; font-size: 12px; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-projection-popover { color: #f1efec; background: #302e2b; border-color: #716b64; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-projection-badge { color: #dedbd7; background: #484541; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-projection-badge[data-status=\"forfeit\"] { color: #ffb9b9; background: #682e32; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-projection-badge[data-status=\"overage\"] { color: #c5dfff; background: #224b76; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-projection-fields dt,\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-projection-empty { color: #cec9c2; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-projection-fields a { color: #76dbea; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-plan-detail-error { color: #ffb9b9; }\n@media (max-width: 480px) { .opportunities-extension-projection-fields { grid-template-columns: minmax(0, 1fr); } }\n@media (max-width: 480px) {\n .opportunities-extension-consumption-trend-header > .opportunities-extension-consumption-periods { grid-template-columns: repeat(2, minmax(0, 1fr)); }\n}\n@media (prefers-reduced-motion: reduce) { .opportunities-extension-plan-detail-skeleton { animation: none; } }\n\n.opportunities-extension-account-plan-details > .opportunities-extension-contract-row {\n align-items: center;\n}\n.opportunities-extension-contract-row > dt,\n.opportunities-extension-contract-row > dd,\n.opportunities-extension-contract-ratecard > span {\n line-height: 20px;\n}\n.opportunities-extension-contract-ratecard {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n gap: 6px 10px;\n}\n.opportunities-extension-ratecard-button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n align-self: center;\n box-sizing: border-box;\n height: 28px;\n margin: 0;\n flex: 0 0 auto;\n padding: 0 8px;\n border: 1px solid #8aaeb9;\n border-radius: 4px;\n background: #fff;\n color: #006b80;\n font: inherit;\n font-size: 12px;\n font-weight: 600;\n line-height: 20px;\n cursor: pointer;\n}\n.opportunities-extension-ratecard-button:hover { background: #e8f4f6; }\n.opportunities-extension-ratecard-overlay {\n position: absolute;\n inset: 0;\n z-index: 8;\n display: flex;\n justify-content: flex-end;\n overflow: hidden;\n overflow: clip;\n background: rgba(0, 0, 0, 0);\n transition: background-color 320ms ease;\n}\n.opportunities-extension-ratecard-overlay[data-open=\"true\"] { background: rgba(0, 0, 0, .32); }\n.opportunities-extension-ratecard-drawer {\n --ratecard-bg: #fff;\n --ratecard-heading: #faf9f8;\n --ratecard-text: #312d2a;\n --ratecard-muted: #615a55;\n --ratecard-border: #dedbd8;\n --ratecard-accent: #00758f;\n --ratecard-skeleton: #eae7e4;\n display: grid;\n grid-template-rows: auto auto auto minmax(0, 1fr);\n width: min(1520px, calc(100% - 48px));\n height: 100%;\n min-width: 0;\n box-sizing: border-box;\n overflow: hidden;\n background: var(--ratecard-bg);\n color: var(--ratecard-text);\n box-shadow: -6px 0 24px rgba(0, 0, 0, .2);\n transform: translateX(100%);\n transition: transform 320ms cubic-bezier(.22, .61, .36, 1);\n}\n.opportunities-extension-ratecard-overlay[data-open=\"true\"] .opportunities-extension-ratecard-drawer { transform: translateX(0); }\n.opportunities-extension-ratecard-header > div { min-width: 0; overflow-wrap: anywhere; }\n.opportunities-extension-ratecard-plan-details { padding: 12px 20px 0; }\n.opportunities-extension-ratecard-toolbar { display: flex; align-items: center; gap: 16px; padding: 12px 20px; }\n.opportunities-extension-ratecard-search {\n width: min(360px, 100%);\n min-width: 0;\n box-sizing: border-box;\n padding: 9px 12px;\n border: 1px solid var(--ratecard-muted);\n border-radius: 4px;\n background: var(--ratecard-bg);\n color: var(--ratecard-text);\n font: inherit;\n font-size: 13px;\n}\n.opportunities-extension-ratecard-search::placeholder { color: var(--ratecard-muted); opacity: 1; }\n.opportunities-extension-ratecard-count { color: var(--ratecard-muted); font-size: 12px; white-space: nowrap; }\n.opportunities-extension-ratecard-viewport { overflow: auto; min-height: 0; min-width: 0; scrollbar-gutter: stable; }\n.opportunities-extension-ratecard-table { width: 100%; min-width: 1100px; table-layout: fixed; border-collapse: separate; border-spacing: 0; font-size: 12px; }\n.opportunities-extension-ratecard-table th, .opportunities-extension-ratecard-table td {\n padding: 11px 10px;\n border-bottom: 1px solid var(--ratecard-border);\n vertical-align: top;\n overflow-wrap: anywhere;\n text-align: left;\n}\n.opportunities-extension-ratecard-table th { position: sticky; top: 0; z-index: 1; background: var(--ratecard-heading); }\n.opportunities-extension-ratecard-sort {\n display: grid;\n grid-template-columns: minmax(0, 1fr) 12px;\n align-items: center;\n gap: 5px;\n width: 100%;\n padding: 0;\n border: 0;\n background: transparent;\n color: inherit;\n font: inherit;\n font-weight: 600;\n text-align: left;\n cursor: pointer;\n}\n.opportunities-extension-ratecard-sort-icon { color: var(--ratecard-accent); text-align: center; }\n.opportunities-extension-ratecard-table .opportunities-extension-ratecard-numeric { text-align: right; font-variant-numeric: tabular-nums; }\n.opportunities-extension-ratecard-table .opportunities-extension-ratecard-notice { padding: 28px 20px; text-align: center; }\n.opportunities-extension-ratecard-notice [role=\"alert\"] { color: #b3261e; }\n.opportunities-extension-ratecard-skeleton { display: block; width: 85%; height: 14px; border-radius: 3px; background: var(--ratecard-skeleton); animation: opportunities-ratecard-pulse 1.1s ease-in-out infinite alternate; }\n.opportunities-extension-ratecard-drawer :focus-visible, .opportunities-extension-ratecard-button:focus-visible { outline: 2px solid #00758f; outline-offset: 2px; }\n.opportunities-extension-ratecard-overlay[data-closing=\"true\"] { pointer-events: none; background: rgba(0, 0, 0, 0); transition-duration: 180ms; }\n.opportunities-extension-ratecard-overlay[data-closing=\"true\"] .opportunities-extension-ratecard-drawer { transform: translateX(100%); transition-duration: 180ms; }\n[data-theme=\"dark\"] .opportunities-extension-ratecard-drawer {\n --ratecard-bg: #292725;\n --ratecard-heading: #35322f;\n --ratecard-text: #f5f3f1;\n --ratecard-muted: #c2bcb6;\n --ratecard-border: #514c47;\n --ratecard-accent: #59d1e5;\n --ratecard-skeleton: #514c47;\n}\n[data-theme=\"dark\"] .opportunities-extension-ratecard-button { color: #59d1e5; border-color: #6298a2; background: #292725; }\n[data-theme=\"dark\"] .opportunities-extension-ratecard-button:hover { background: #313f40; }\n[data-theme=\"dark\"] .opportunities-extension-ratecard-notice [role=\"alert\"] { color: #ffb4ab; }\n[data-theme=\"dark\"] .opportunities-extension-ratecard-drawer :focus-visible, [data-theme=\"dark\"] .opportunities-extension-ratecard-button:focus-visible { outline-color: #59d1e5; }\n@keyframes opportunities-ratecard-pulse { from { opacity: .45; } to { opacity: 1; } }\n@media (max-width: 720px) {\n .opportunities-extension-ratecard-drawer { width: 100%; }\n .opportunities-extension-ratecard-toolbar { flex-wrap: wrap; gap: 8px; }\n}\n@media (prefers-reduced-motion: reduce) {\n .opportunities-extension-ratecard-overlay, .opportunities-extension-ratecard-drawer, .opportunities-extension-ratecard-skeleton,\n .opportunities-extension-ratecard-overlay[data-closing=\"true\"], .opportunities-extension-ratecard-overlay[data-closing=\"true\"] .opportunities-extension-ratecard-drawer { animation: none; transition: none; }\n}\n\n.opportunities-extension-ratecard-toolbar { flex-wrap: wrap; }\n.opportunities-extension-ratecard-order-filter { position: relative; min-width: 0; }\n.opportunities-extension-ratecard-order-filter .opportunities-extension-customer-filter-trigger { min-height: 38px; padding-block: 8px; font-size: 13px; }\n.opportunities-extension-ratecard-order-filter .opportunities-extension-customer-filter-panel { width: min(320px, calc(100vw - 80px)); max-height: 45vh; overflow: auto; }\n\n.opportunities-extension-account-plans-dialog.opportunities-extension-install-base-dialog,\n.opportunities-extension-account-plans-dialog.opportunities-extension-service-requests-dialog {\n grid-template-rows: auto auto minmax(0, 1fr);\n}\n.opportunities-extension-customer-table-toolbar { padding: 12px 16px; border-bottom: 1px solid #dedbd7; }\n.opportunities-extension-customer-table-search {\n box-sizing: border-box;\n width: min(420px, 100%);\n min-width: 0;\n height: 38px;\n padding: 8px 12px;\n border: 1px solid #8f8a85;\n border-radius: 4px;\n background: #fff;\n color: #312d2a;\n font: inherit;\n font-size: 13px;\n}\n.opportunities-extension-customer-table-search::placeholder { color: #5f5a55; opacity: 1; }\n.opportunities-extension-customer-table-search:focus-visible { outline: 2px solid #00758f; outline-offset: 2px; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-customer-table-toolbar { border-color: #484541; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-customer-table-search { background: #353331; color: #f6f4f2; border-color: #8f8a85; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-customer-table-search::placeholder { color: #c9c5c1; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-customer-table-search:focus-visible { outline-color: #59d1e5; }\n\n.opportunities-extension-views { min-height: 0; min-width: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 8px; }\n.opportunities-extension-views > [hidden] { display: none; }\n.opportunities-extension-view-tabs { display: flex; gap: 20px; border-bottom: 1px solid #dedbd7; }\n.opportunities-extension-view-tabs button { border: 0; border-bottom: 3px solid transparent; background: transparent; color: #625d58; padding: 6px 2px 9px; font: 600 13px/20px Arial, sans-serif; cursor: pointer; }\n.opportunities-extension-view-tabs button[aria-selected=\"true\"] { border-bottom-color: #00758f; color: #00657b; }\n.opportunities-extension-view-tabs button:focus-visible { outline: 2px solid #00758f; outline-offset: -2px; }\n.opportunities-extension-view-tabs button { display: inline-flex; align-items: center; gap: 6px; }\n.opportunities-extension-view-tabs button svg { width: 16px; height: 16px; flex: 0 0 16px; }\n.opportunities-extension-calendar {\n --fc-border-color: #dedbd7; --fc-page-bg-color: #fff; --fc-neutral-bg-color: #f5f4f2;\n --fc-neutral-text-color: #625d58; --fc-today-bg-color: #eef7fa;\n --fc-button-bg-color: #fff; --fc-button-text-color: #312d2a; --fc-button-border-color: #b9b4ae;\n --fc-button-hover-bg-color: #e6f3f5; --fc-button-hover-border-color: #00758f;\n --fc-button-active-bg-color: #dceff3; --fc-button-active-border-color: #00758f;\n min-height: 0; min-width: 0; overflow: hidden; display: flex; flex-direction: column; padding: 12px; background: #fff; color: #312d2a;\n border: 1px solid var(--fc-border-color); border-radius: 4px; font: 13px/1.4 Arial, sans-serif;\n}\n.opportunities-calendar-grid { flex: 1 1 0; min-height: 0; min-width: 0; }\n.opportunities-calendar-day-cards { position: absolute; inset: 27px 0 0; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; padding-bottom: 4px; }\n.opportunities-calendar-day-card { display: block; width: calc(100% - 8px); padding: 0; text-align: left; font: inherit; }\n.opportunities-calendar-day-card:focus-visible { outline: 2px solid #00758f; outline-offset: -2px; }\n/* A single vertical sequence of months, with a separate scroll area per day. */\n.opportunities-extension-calendar .fc .fc-multimonth { overflow-y: auto; overflow-x: hidden; }\n.opportunities-extension-calendar .fc .fc-multimonth-month { width: 100%; }\n.opportunities-extension-calendar .fc .fc-multimonth-daygrid-table { height: auto !important; }\n.opportunities-extension-calendar .fc .fc-multimonth .fc-daygrid-body tbody { height: auto; }\n.opportunities-extension-calendar .fc .fc-multimonth .fc-daygrid-body tr { height: var(--calendar-week-height, 190px); }\n.opportunities-extension-calendar .fc .fc-multimonth .fc-daygrid-day-frame { position: relative; height: var(--calendar-week-height, 190px); min-height: var(--calendar-week-height, 190px); }\n.opportunities-extension-calendar .fc .fc-multimonth .fc-daygrid-day-events {\n position: absolute; inset: 27px 0 0; overflow-y: auto; overflow-x: hidden;\n margin: 0; padding-bottom: 4px; scrollbar-width: thin;\n}\n.opportunities-extension-calendar .fc .fc-multimonth .fc-daygrid-event-harness { position: relative !important; top: auto !important; left: auto !important; right: auto !important; }\n.opportunities-extension-calendar .fc .fc-multimonth .fc-daygrid-day-bg { pointer-events: none; }\n.opportunities-extension-calendar .fc { min-width: 620px; }\n.opportunities-extension-calendar .fc .fc-toolbar { gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }\n.opportunities-extension-calendar .fc .fc-toolbar-title { font-size: 18px; line-height: 26px; letter-spacing: 0; }\n.opportunities-extension-calendar .fc .fc-button { font-size: 13px; line-height: 20px; padding: 5px 10px; border-radius: 4px; box-shadow: none; }\n.opportunities-extension-calendar .fc .fc-button:focus-visible { outline: 2px solid #00758f; outline-offset: 2px; }\n.opportunities-extension-calendar .fc .fc-button svg { width: 16px; height: 16px; margin-right: 6px; vertical-align: -3px; }\n.opportunities-extension-calendar .fc a { color: inherit; text-decoration: none; }\n.opportunities-extension-calendar .fc th { background: var(--fc-neutral-bg-color); font-size: 12px; font-weight: 600; padding: 4px 0; }\n.opportunities-extension-calendar .fc .fc-daygrid-day-number { font-size: 11px; line-height: 18px; padding: 1px 6px; }\n.opportunities-extension-calendar .fc .fc-daygrid-day-events { min-height: 0; margin-bottom: 0; }\n.opportunities-extension-calendar .fc .fc-daygrid-day-bottom { margin: 0; }\n.opportunities-extension-calendar .fc .fc-daygrid-day-frame { min-height: 0; padding-top: 0; }\n/* Event content must not contribute to the table's intrinsic row heights. */\n.opportunities-extension-calendar .fc .fc-daygrid-body tbody { height: 100%; }\n.opportunities-extension-calendar .fc .fc-daygrid-body tr { height: calc(100% / var(--opportunities-calendar-weeks, 5)); }\n.opportunities-extension-calendar .fc .fc-daygrid-day { position: relative; }\n.opportunities-extension-calendar .fc .fc-daygrid-day-frame { position: absolute; inset: 0; }\n.opportunities-extension-calendar .fc .fc-daygrid-week-number { top: 0; left: 0; padding: 3px 6px; background: var(--fc-neutral-bg-color); color: inherit; font: 600 10px/16px Arial, sans-serif; white-space: nowrap; }\n.opportunities-calendar-day-count { position: absolute; top: 2px; left: 6px; min-width: 18px; height: 16px; padding: 0 4px; border-radius: 8px; background: #dceff3; color: #005467; font: 600 10px/16px Arial, sans-serif; text-align: center; }\n.fc-daygrid-week-number ~ .opportunities-calendar-day-count { left: 82px; }\n.opportunities-calendar-day-count[hidden] { display: none; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-calendar-day-count:not([data-empty=\"true\"]) { background: #16454f; color: #b9eaf4; }\n.opportunities-extension-calendar .fc .fc-day-other { background: var(--fc-neutral-bg-color); }\n.opportunities-extension-calendar .fc .fc-daygrid-event { white-space: normal; margin: 3px 4px; border-radius: 4px; cursor: pointer; border-width: 0 0 0 3px; border-style: solid; }\n.opportunities-extension-calendar .fc .fc-event-main { color: inherit; }\n.opportunities-calendar-event-content { min-width: 0; padding: 5px 6px; overflow-wrap: anywhere; }\n.opportunities-calendar-event-content strong { display: block; font-size: 12px; line-height: 16px; font-weight: 600; }\n.opportunities-calendar-event-content span { display: block; margin-top: 3px; font-size: 11px; line-height: 15px; }\n.opportunities-calendar-event-content strong,\n.opportunities-calendar-event-content span,\n.opportunities-calendar-day-item strong,\n.opportunities-calendar-day-item span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.opportunities-extension-calendar .fc .fc-daygrid-more-link { color: #00657b; font-size: 11px; line-height: 16px; padding: 0 5px; }\n.opportunities-calendar-day-list { min-height: 0; overflow-y: auto; padding: 8px 20px 20px; }\n.opportunities-calendar-day-item { display: block; width: 100%; padding: 12px 0; border: 0; border-bottom: 1px solid #dedbd7; background: transparent; color: #00657b; text-align: left; cursor: pointer; overflow-wrap: anywhere; }\n.opportunities-calendar-day-item strong, .opportunities-calendar-day-item span { display: block; font: 600 13px/20px Arial, sans-serif; }\n.opportunities-calendar-day-item span { margin-top: 4px; font-weight: 400; }\n.opportunities-calendar-day-item:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-calendar-day-item { border-bottom-color: #514d48; color: #80d6e8; }\n.opportunities-extension-calendar .fc .opportunities-calendar-stage-SQL { background: #dff1f4; border-color: #00829d; color: #005467; }\n.opportunities-extension-calendar .fc .opportunities-calendar-stage-PIPELINE,\n.opportunities-extension-calendar .fc .opportunities-calendar-stage-OTHER { background: #efeeec; border-color: #706a64; color: #49443f; }\n.opportunities-extension-calendar .fc .opportunities-calendar-stage-UPSIDE { background: #fff0da; border-color: #ba7000; color: #774700; }\n.opportunities-extension-calendar .fc .opportunities-calendar-stage-FORECAST { background: #f0e8f7; border-color: #8262a3; color: #624379; }\n.opportunities-extension-calendar .fc .opportunities-calendar-stage-WON { background: #e2f1e5; border-color: #2f8050; color: #215939; }\n.opportunities-calendar-message { margin: 0 0 12px; font-size: 13px; }\n.opportunities-calendar-message[hidden], .opportunities-calendar-grid[hidden], .opportunities-calendar-undated[hidden] { display: none; }\n.opportunities-calendar-undated { flex: 0 0 auto; max-height: 90px; overflow-y: auto; margin-top: 6px; border-top: 1px solid var(--fc-border-color); padding-top: 4px; }\n.opportunities-calendar-undated summary { cursor: pointer; font-size: 12px; line-height: 18px; }\n.opportunities-calendar-undated h3 { font-size: 13px; margin: 0 0 8px; }\n.opportunities-calendar-undated button { display: block; background: none; border: 0; text-align: left; font: inherit; padding: 6px 0; color: inherit; text-decoration: underline; cursor: pointer; overflow-wrap: anywhere; }\n.opportunities-calendar-detail .opportunities-extension-account-plans-header { align-items: start; gap: 16px; }\n.opportunities-calendar-detail .opportunities-extension-action-form-dialog { display: grid; grid-template-rows: auto minmax(0, 1fr); overflow: hidden; }\n.opportunities-calendar-detail h2 { font-size: 18px; overflow-wrap: anywhere; }\n.opportunities-calendar-detail-content { padding: 20px; overflow-y: auto; }\n.opportunities-calendar-detail-content a { color: #006b82; }\n.opportunities-calendar-detail-badges { display: flex; gap: 8px; margin-top: 18px; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-view-tabs { border-color: #514d48; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-view-tabs button { color: #c7c2bc; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-view-tabs button[aria-selected=\"true\"] { color: #80d6e8; border-bottom-color: #80d6e8; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-calendar {\n --fc-border-color: #514d48; --fc-page-bg-color: #292725; --fc-neutral-bg-color: #33302d;\n --fc-neutral-text-color: #c7c2bc; --fc-today-bg-color: #223b3f;\n --fc-button-bg-color: #292725; --fc-button-text-color: #eeeae6; --fc-button-border-color: #756f68;\n --fc-button-hover-bg-color: #234850; --fc-button-hover-border-color: #80d6e8;\n --fc-button-active-bg-color: #234850; --fc-button-active-border-color: #80d6e8;\n background: #292725; color: #eeeae6;\n}\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-calendar .fc .opportunities-calendar-stage-SQL { background: #16454f; color: #b9eaf4; border-color: #67cde0; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-calendar .fc .opportunities-calendar-stage-PIPELINE,\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-calendar .fc .opportunities-calendar-stage-OTHER { background: #403c38; color: #e4dfd9; border-color: #b8b1a8; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-calendar .fc .opportunities-calendar-stage-UPSIDE { background: #533e1e; color: #ffe0a9; border-color: #dba44f; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-calendar .fc .opportunities-calendar-stage-FORECAST { background: #493657; color: #ead5fc; border-color: #b998d8; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-calendar .fc .opportunities-calendar-stage-WON { background: #244a32; color: #c7edce; border-color: #84c396; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-calendar .fc .fc-daygrid-more-link,\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-calendar-detail-content a { color: #80d6e8; }\n@media (max-width: 700px) {\n .opportunities-extension-body { overflow-y: auto; grid-template-rows: max-content max-content minmax(480px, 1fr); }\n .opportunities-extension-views { min-height: 480px; }\n .opportunities-extension-calendar { padding: 10px; overflow-x: auto; }\n .opportunities-extension-calendar .fc { min-width: 0; }\n .opportunities-extension-calendar .fc .fc-view-harness { min-width: 560px; }\n .opportunities-extension-calendar .fc .fc-toolbar-title { font-size: 16px; }\n .opportunities-extension-calendar .fc .fc-daygrid-day-frame { padding-top: 22px; }\n .opportunities-calendar-day-count { top: 25px; }\n .fc-daygrid-week-number ~ .opportunities-calendar-day-count { left: 6px; }\n}\n.opportunities-view-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--oe-table-heading-border); flex-wrap: wrap; }\n.opportunities-view-bar .opportunities-extension-view-tabs { border-bottom: 0; }\n.opportunities-product-type-filters { display: flex; gap: 8px; margin-left: auto; padding: 4px 0; }\n.opportunities-product-type-filter { border: 1px solid #8f8a85; border-radius: 12px; padding: 3px 9px; background: transparent; color: inherit; font: 600 12px/16px Arial, sans-serif; cursor: pointer; }\n.opportunities-product-type-filter[aria-pressed=\"true\"][data-type=\"Booking\"] { color: #714016; background: #fff0df; border-color: #c58b50; }\n.opportunities-product-type-filter[aria-pressed=\"true\"][data-type=\"Workload\"] { color: #63358a; background: #f0e8f7; border-color: #bba5cf; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-product-type-filter[aria-pressed=\"true\"][data-type=\"Booking\"] { color: #ffdbb5; background: #4b321e; border-color: #c99760; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-product-type-filter[aria-pressed=\"true\"][data-type=\"Workload\"] { color: #ead5fc; background: #43334f; border-color: #9372ac; }\n.opportunities-product-type-filter:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }\n\n.oe-time-dialog { --time-bg: #fff; --time-input-bg: #fff; --time-muted: #faf9f8; --time-border: #dedbd7; --time-input-border: #8f8983; --time-accent: #00758f; width: min(1600px, 100%); max-height: calc(100dvh - 24px); display: flex; flex-direction: column; overflow: hidden; font-size: 13px; line-height: 20px; }\n.opportunities-extension-modal[data-theme=\"dark\"] .oe-time-dialog { --time-bg: #292725; --time-input-bg: #211f1d; --time-muted: #35322f; --time-border: #514c47; --time-input-border: #918a82; --time-accent: #80d6e8; }\n.oe-time-modal { grid-template-columns: minmax(0, 1fr); }\n.oe-time-dialog, .oe-time-body { min-width: 0; }\n.oe-time-dialog * { box-sizing: border-box; }\n.oe-time-dialog [hidden] { display: none !important; }\n.oe-time-header { flex-shrink: 0; }\n.oe-time-body { padding: 18px; overflow: auto; min-height: 0; }\n.oe-time-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; }\n.oe-time-navigation { display: flex; align-items: center; gap: 8px; }\n.oe-time-ending { display: grid; gap: 4px; text-align: right; }\n.oe-time-summary { display: grid; grid-template-columns: repeat(4, 1fr); padding: 12px 0; gap: 12px; text-align: center; border-block: 1px solid var(--time-border); margin-bottom: 18px; }\n.oe-time-body button { min-width: 38px; min-height: 38px; display: inline-flex; gap: 8px; align-items: center; justify-content: center; color: inherit; background: transparent; border: 1px solid var(--time-input-border); border-radius: 4px; padding: 7px; cursor: pointer; font: inherit; }\n.oe-time-dialog button:hover:not(:disabled) { background: var(--time-muted); border-color: var(--time-accent); }\n.oe-time-dialog svg { width: 17px; height: 17px; flex-shrink: 0; }\n.oe-time-dialog input, .oe-time-dialog select, .oe-time-dialog textarea { font: inherit; line-height: 20px; color: inherit; background: var(--time-input-bg); border: 1px solid var(--time-input-border); border-radius: 4px; padding: 8px; min-height: 38px; }\n.oe-time-dialog select { height: 38px; }\n.oe-time-dialog :focus-visible { outline: 2px solid var(--time-accent); outline-offset: 2px; }\n.oe-time-dialog :disabled { opacity: .55; cursor: not-allowed; }\n.oe-time-grid { overflow-x: auto; }\n.oe-time-grid table { width: 100%; min-width: 1060px; border-collapse: collapse; table-layout: fixed; }\n.oe-time-grid th { background: var(--time-muted); padding: 10px 5px; font-weight: 600; text-align: center; border-bottom: 1px solid var(--time-border); }\n.oe-time-grid .opportunities-extension-sort-button { min-width: 0; min-height: 28px; padding: 4px 12px 4px 0; border: 0; border-radius: 0; gap: 0; }\n.oe-time-grid .opportunities-extension-sort-button::after { right: 0; font-size: 12px; }\n.oe-time-grid .oe-time-day-label { margin-bottom: 0; }\n.oe-time-grid th:first-child { width: 23%; }\n.oe-time-grid th:nth-child(2), .oe-time-grid th:nth-child(3) { width: 12%; }\n.oe-time-grid th:nth-last-child(-n+3) { width: 46px; }\n.oe-time-grid td { padding: 10px 5px; border-bottom: 1px solid var(--time-border); vertical-align: middle; text-align: center; }\n.oe-time-duplicate-row { outline: 2px solid #b3261e; outline-offset: -2px; animation: oe-time-duplicate-fade 5.5s linear forwards; }\n.opportunities-extension-modal[data-theme=\"dark\"] .oe-time-duplicate-row { --time-duplicate-color: #ffaaa4; }\n@keyframes oe-time-duplicate-fade { 0%, 90.909% { outline-color: var(--time-duplicate-color, #b3261e); } 100% { outline-color: transparent; } }\n@media (prefers-reduced-motion: reduce) { .oe-time-duplicate-row { animation-timing-function: step-end; } }\n.oe-time-grid select { width: 100%; }\n.oe-time-grid input[type=\"number\"] { width: min(100%, 60px); padding: 6px 3px; text-align: center; }\n.oe-time-grid .opportunities-extension-action-combobox input { width: 100%; text-align: left; text-overflow: ellipsis; }\n.oe-time-grid .opportunities-extension-action-options { text-align: left; }\n.oe-time-dialog .opportunities-extension-select-tooltip { position: fixed; z-index: 100; width: min(560px, calc(100vw - 40px)); max-height: min(440px, calc(100dvh - 48px)); overflow: auto; padding: 14px; border: 1px solid var(--time-input-border); border-radius: 4px; background: var(--time-input-bg); color: inherit; box-shadow: 0 4px 16px #0003; text-align: left; }\n.oe-time-sr-details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 18px; margin: 0; }\n.oe-time-sr-details > div { min-width: 0; overflow-wrap: anywhere; }\n.oe-time-sr-details dt { font-size: 11px; opacity: .75; margin-bottom: 2px; }\n.oe-time-sr-details dd { margin: 0; white-space: pre-wrap; }\n.oe-time-sr-details .oe-time-sr-description { grid-column: 1 / -1; }\n.oe-time-day > span { display: block; }\n.oe-time-day .oe-time-day-label { display: inline-flex; align-items: center; gap: 4px; margin-bottom: 9px; }\n.oe-time-day-total { font-size: 10px; background: var(--time-accent); color: var(--time-bg); min-width: 16px; border-radius: 8px; padding: 2px 4px; }\n.oe-time-notes textarea { width: 100%; resize: vertical; }\n.oe-time-notes-box { position: relative; text-align: left; background: var(--time-input-bg); border: 1px solid var(--time-input-border); border-radius: 4px; padding: 14px 12px 42px; }\n.oe-time-notes-count { display: block; font-weight: 600; opacity: .8; margin-bottom: 8px; }\n.oe-time-notes-box textarea { border: 0; min-height: 128px; padding: 0; }\n.oe-time-notes-box .oe-time-notes-collapse { position: absolute; right: 0; bottom: 0; background: var(--time-muted); }\n.oe-time-footer { flex-wrap: wrap; justify-content: flex-start; margin-top: 18px; }\n.oe-time-footer button { padding: 7px 14px; }\n.oe-time-status { padding: 12px 0; }\n.oe-time-loading-status { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }\n.oe-time-skeleton { display: inline-block; vertical-align: middle; border-radius: 4px; background: var(--time-border); color: transparent; animation: oe-time-pulse 1.3s ease-in-out infinite alternate; }\n.oe-time-skeleton-select { display: block; width: 100%; height: 38px; }\n.oe-time-skeleton-control { width: min(100%, 60px); height: 38px; }\n.oe-time-skeleton-heading { width: 65%; height: 20px; margin: 17px 0; }\n.oe-time-skeleton-summary { min-width: 44px; height: 20px; }\n@keyframes oe-time-pulse { from { opacity: .4; } to { opacity: 1; } }\n@media (prefers-reduced-motion: reduce) { .oe-time-skeleton { animation: none; } }\n.oe-time-status[role=\"alert\"] { color: #a12d27; }\n.oe-time-dialog [aria-invalid=\"true\"] { border-color: #b3261e; outline: 1px solid #b3261e; }\n.opportunities-extension-modal[data-theme=\"dark\"] .oe-time-status[role=\"alert\"] { color: #ffd9d5; }\n.opportunities-extension-modal[data-theme=\"dark\"] .oe-time-dialog [aria-invalid=\"true\"] { border-color: #ffaaa4; outline-color: #ffaaa4; }\n@media (max-width: 700px) { .oe-time-modal { padding: 8px; } .oe-time-dialog { max-height: calc(100dvh - 16px); } .oe-time-body { padding: 12px; } .oe-time-summary { grid-template-columns: repeat(2, 1fr); text-align: left; } .oe-time-toolbar { flex-wrap: wrap; } .oe-time-ending { text-align: left; } }\n\n.opportunities-extension-products-table th:last-child { width: 90px; padding-left: 6px; padding-right: 6px; white-space: nowrap; text-align: center; }\n.opportunities-extension-products-table .opportunities-extension-projection-cell { text-align: center; vertical-align: middle; }\n.opportunities-extension-projection-alert { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; padding: 0; color: #976000; width: 30px; height: 30px; flex: 0 0 30px; vertical-align: middle; }\n.opportunities-extension-projection-alert svg { display: block; flex: none; width: 19px; height: 19px; }\n.opportunities-extension-cell-actions > .opportunities-extension-opportunity-projection-alert { width: 20px; height: 20px; flex-basis: 20px; }\n.opportunities-extension-projection-alert:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }\n.opportunities-extension-modal .opportunities-extension-projection-alert:disabled { color: #8f8a85; opacity: .55; cursor: not-allowed; background: transparent; }\n.opportunities-extension-products-ramp { cursor: pointer; font-family: inherit; }\n.opportunities-extension-products-ramp[data-booking=\"true\"] { cursor: default; color: #714016; background: #fff0df; border-color: #c58b50; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-products-ramp[data-booking=\"true\"] { color: #ffdbb5; background: #4b321e; border-color: #c99760; }\n.opportunities-extension-products-ramp:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }\n.opportunities-extension-projection-product { max-width: 100%; margin: 0 0 16px; padding: 8px; font: inherit; color: inherit; background: inherit; }\n.opportunities-extension-action-form-dialog.opportunities-extension-projection-dialog { width: min(850px, 100%); display: flex; flex-direction: column; overflow: hidden; }\n.opportunities-extension-projection-dialog > header { flex: 0 0 auto; padding: 18px 20px; }\n.opportunities-extension-projection-dialog .opportunities-extension-action-form-heading { min-width: 0; overflow-wrap: anywhere; }\n.opportunities-extension-projection-body { min-height: 0; overflow: auto; padding: 16px 20px 0; }\n.opportunities-extension-projection-context { display: grid; grid-template-columns: max-content minmax(0, 1fr) max-content minmax(0, 1fr); gap: 8px 12px; margin: 0 0 16px; font-size: 12px; }\n.opportunities-extension-projection-context dt { font-weight: 600; }\n.opportunities-extension-projection-context dd { margin: 0; overflow-wrap: anywhere; }\n.opportunities-extension-projection-summary { font-size: 13px; font-weight: 600; color: #815400; margin: 0 0 12px; }\n.opportunities-extension-projection-notice { font-size: 12px; }\n.opportunities-extension-projection-viewport { overflow-x: auto; }\n.opportunities-extension-projection-table { width: 100%; border-collapse: collapse; font-size: 12px; font-variant-numeric: tabular-nums; }\n.opportunities-extension-projection-table th, .opportunities-extension-projection-table td { padding: 9px 12px; border-bottom: 1px solid #dedbd7; text-align: right; white-space: nowrap; }\n.opportunities-extension-projection-table th:first-child { text-align: left; }\n.opportunities-extension-projection-table thead th { background: #f5f4f2; font-weight: 600; }\n.opportunities-extension-projection-table .opportunities-extension-sort-button { min-height: 28px; padding: 4px 18px 4px 0; justify-content: flex-end; }\n.opportunities-extension-projection-table th:first-child .opportunities-extension-sort-button { justify-content: flex-start; }\n.opportunities-extension-projection-table .opportunities-extension-sort-button::after { right: 0; font-size: 12px; }\n.opportunities-extension-projection-table tbody th { font-weight: 400; }\n.opportunities-extension-projection-table tr[data-divergent=\"true\"] { background: #fff7e5; }\n.opportunities-extension-projection-table tr[data-divergent=\"true\"] td:last-child { color: #815400; font-weight: 700; }\n.opportunities-extension-projection-prorated { display: inline; color: #625d58; font-size: 10px; }\n.opportunities-extension-projection-footer { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0; padding: 14px 20px; font-size: 11px; color: #625d58; }\n.opportunities-extension-projection-update { flex: none; padding: 8px 12px; border: 1px solid #006879; border-radius: 4px; background: #006879; color: #fff; font: inherit; font-size: 12px; cursor: pointer; }\n.opportunities-extension-projection-update:hover:not(:disabled) { background: #005563; }\n.opportunities-extension-projection-update:disabled { opacity: .6; cursor: wait; }\n.opportunities-extension-projection-update:focus-visible { outline: 2px solid #00758f; outline-offset: 2px; }\n.opportunities-extension-projection-confirm { padding: 20px; }\n.opportunities-extension-projection-confirm h2 { margin: 0 0 12px; font-size: 18px; }\n.opportunities-extension-projection-confirm p { margin: 0 0 20px; font-size: 13px; line-height: 1.5; }\n.opportunities-extension-projection-confirm-actions { display: flex; justify-content: flex-end; gap: 8px; }\n.opportunities-extension-projection-cancel { padding: 8px 12px; border: 1px solid #8b8580; border-radius: 4px; background: transparent; color: inherit; font: inherit; font-size: 12px; cursor: pointer; }\n.opportunities-extension-projection-error { color: #b3261e; font-size: 12px; overflow-wrap: anywhere; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-projection-error { color: #ffb4ab; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-projection-alert,\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-projection-summary,\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-projection-table tr[data-divergent=\"true\"] td:last-child { color: #ffd080; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-projection-table thead th { background: #34312e; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-projection-table th,\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-projection-table td { border-color: #504b46; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-projection-table tr[data-divergent=\"true\"] { background: #3e3425; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-projection-prorated,\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-projection-footer { color: #c9c3bc; }\n@media (max-width: 600px) {\n .opportunities-extension-projection-context { grid-template-columns: max-content minmax(0, 1fr); }\n .opportunities-extension-projection-dialog > header { padding: 14px 12px; }\n .opportunities-extension-projection-body { padding: 12px 12px 0; }\n .opportunities-extension-projection-table th, .opportunities-extension-projection-table td { padding: 8px 6px; }\n .opportunities-extension-projection-footer { padding: 12px; }\n}\n\n.oe-org-modal { grid-template-columns: minmax(0, 1fr); }\n.oe-org-dialog { --org-bg: #fff; --org-canvas: #faf9f8; --org-border: #dedbd7; --org-muted: #625d58; --org-accent: #00758f; --org-selected: #e3f1f4; width: min(1500px, 100%); height: min(880px, calc(100dvh - 40px)); max-height: calc(100dvh - 40px); display: flex; flex-direction: column; overflow: hidden; font-size: 13px; color: #312d2a; background: var(--org-bg); }\n.opportunities-extension-modal[data-theme=\"dark\"] .oe-org-dialog { --org-bg: #292725; --org-canvas: #211f1d; --org-border: #625d58; --org-muted: #c9c3bd; --org-accent: #80d6e8; --org-selected: #203f46; color: #f5f4f2; }\n.oe-org-modal [hidden] { display: none !important; }\n.oe-org-dialog * { box-sizing: border-box; letter-spacing: 0; }\n.oe-org-dialog > header, .oe-org-toolbar, .oe-org-footer { flex: none; }\n.oe-org-heading { min-width: 0; overflow-wrap: anywhere; }\n.oe-org-heading p { margin: 5px 0 0; font-size: 12px; color: var(--org-muted); }\n.oe-org-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--org-border); }\n.oe-org-tools { display: flex; align-items: center; gap: 6px; margin-left: auto; }\n.oe-org-count { color: var(--org-muted); font-variant-numeric: tabular-nums; }\n.oe-org-zoom { width: 44px; text-align: center; font-variant-numeric: tabular-nums; }\n.oe-org-modal .oe-org-button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 34px; min-height: 34px; padding: 6px 9px; border: 1px solid var(--org-border, #8f8983); border-radius: 4px; background: transparent; color: inherit; font: inherit; cursor: pointer; }\n.oe-org-modal svg { width: 17px; height: 17px; flex: none; }\n.oe-org-dialog button:hover:not(:disabled) { background: var(--org-selected); }\n.oe-org-dialog :focus-visible { outline: 2px solid var(--org-accent); outline-offset: 2px; }\n.oe-org-modal .oe-org-primary { background: #006879; border-color: #006879; color: #fff; }\n.oe-org-dialog .oe-org-primary:hover:not(:disabled) { background: #005563; }\n.oe-org-dialog :disabled { opacity: .5; cursor: not-allowed; }\n.oe-org-workspace { min-height: 0; min-width: 0; flex: 1; display: flex; overflow: hidden; }\n.oe-org-viewport { position: relative; min-width: 0; min-height: 0; flex: 1; overflow: auto; background: var(--org-canvas); overscroll-behavior: contain; cursor: grab; }\n.oe-org-sizing { position: relative; margin-inline: auto; }\n.oe-org-canvas { position: relative; transform-origin: top left; }\n.oe-org-canvas .oe-org-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }\n.oe-org-lines path { stroke: var(--org-border); stroke-width: 2; fill: none; }\n.oe-org-node { position: absolute; width: 236px; height: 146px; border: 1px solid var(--org-border); border-top: 3px solid var(--org-accent); border-radius: 4px; background: var(--org-bg); display: flex; flex-direction: column; cursor: default; }\n.oe-org-node[data-selected=\"true\"] { outline: 2px solid var(--org-accent); outline-offset: 2px; }\n.oe-org-person { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: center; gap: 6px; text-align: left; padding: 9px 12px; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; border-radius: 0; width: 100%; }\n.oe-org-person strong, .oe-org-person > span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; line-height: 18px; }\n.oe-org-person > span { color: var(--org-muted); font-size: 12px; }\n.oe-org-node-actions { flex: none; display: flex; align-items: center; gap: 4px; padding: 4px 8px; height: 38px; border-top: 1px solid var(--org-border); }\n.oe-org-node-actions .oe-org-button { min-height: 28px; height: 28px; min-width: 28px; padding: 3px; border: 0; }\n.oe-org-node-actions [aria-expanded] { margin-left: auto; font-size: 11px; }\n.oe-org-note-marker { display: inline-flex; color: var(--org-muted); margin-left: auto; }\n.oe-org-editor { flex: 0 0 310px; width: 310px; padding: 16px; border-left: 1px solid var(--org-border); overflow-y: auto; background: var(--org-bg); }\n.oe-org-editor-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 16px; }\n.oe-org-editor h3 { margin: 0; font-size: 15px; }\n.oe-org-form { display: grid; gap: 16px; }\n.oe-org-field { display: grid; gap: 6px; font-size: 12px; font-weight: 600; min-width: 0; }\n.oe-org-dialog input, .oe-org-dialog textarea { min-width: 0; width: 100%; font: inherit; font-weight: 400; line-height: 20px; color: inherit; background: var(--org-bg); border: 1px solid var(--org-muted); border-radius: 3px; padding: 7px 8px; }\n.oe-org-dialog textarea { resize: vertical; min-height: 100px; max-height: 300px; }\n.oe-org-form-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }\n.oe-contact-name { position: relative; }\n.oe-org-dialog .oe-contact-name > input { padding-right: 42px; }\n.oe-org-modal .oe-contact-name > .oe-org-button { position: absolute; right: 2px; top: 2px; min-height: 30px; height: 30px; border: 0; }\n.oe-org-dialog.oe-contact-dialog { width: min(680px, 100%); height: auto; padding: 20px; gap: 20px; overflow-y: auto; }\n.oe-contact-dialog > header { margin: 0; }\n.oe-org-dialog.oe-contact-opportunities { width: min(1200px, 100%); height: auto; padding: 20px; gap: 16px; }\n.oe-contact-opportunities > header { margin: 0; }\n.oe-contact-opportunities-table { overflow: auto; min-height: 0; }\n.oe-contact-opportunities table { width: 100%; border-collapse: collapse; font-size: 12px; }\n.oe-contact-opportunities th, .oe-contact-opportunities td { padding: 12px; text-align: left; border-bottom: 1px solid var(--org-border); }\n.oe-contact-opportunities th { background: var(--org-canvas); white-space: nowrap; }\n.oe-contact-opportunities .opportunities-extension-sort-button { white-space: nowrap; min-width: max-content; min-height: 28px; padding: 4px 18px 4px 0; justify-content: flex-start; text-align: left; }\n.oe-contact-opportunities .opportunities-extension-sort-button::after { right: 0; }\n.oe-contact-opportunities th:nth-child(5), .oe-contact-opportunities td:nth-child(5) { text-align: right; font-variant-numeric: tabular-nums; }\n.oe-contact-opportunities th:nth-child(5) .opportunities-extension-sort-button { padding: 4px 0 4px 18px; justify-content: flex-end; text-align: right; }\n.oe-contact-opportunities th:nth-child(5) .opportunities-extension-sort-button::after { left: 0; right: auto; }\n.oe-contact-opportunities td:nth-child(5) .oe-contact-skeleton { margin-left: auto; }\n.oe-contact-opportunities .opportunities-extension-sort-label { white-space: nowrap; overflow-wrap: normal; word-break: normal; }\n.oe-contact-opportunities table { min-width: 900px; }\n.oe-contact-opportunities a { color: var(--org-accent); }\n.oe-contact-skeleton { display: block; height: 14px; min-width: 24px; border-radius: 4px; background: var(--org-border); animation: oe-time-pulse 1.3s ease-in-out infinite alternate; }\n.oe-contact-skeleton-total { width: 110px; }\n.oe-contact-opportunities table[aria-busy=\"true\"] { table-layout: fixed; }\n.oe-contact-opportunities table[aria-busy=\"true\"] th:nth-child(3) { width: 28%; }\n@media (prefers-reduced-motion: reduce) { .oe-contact-skeleton { animation: none; } }\n.oe-contact-dialog [aria-invalid=\"true\"] { border-color: #b3261e; outline: 1px solid #b3261e; }\n.opportunities-extension-modal[data-theme=\"dark\"] .oe-contact-dialog [aria-invalid=\"true\"] { border-color: #ffaaa4; outline-color: #ffaaa4; }\n.oe-contact-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }\n.oe-contact-phone { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; border: 1px solid var(--org-border); border-radius: 4px; padding: 12px; min-width: 0; margin: 0; }\n.oe-contact-form legend { font-weight: 600; padding: 0 4px; }\n.oe-contact-primary { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 20px; border: 0; padding: 0; margin: 0; }\n.oe-contact-primary label { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; }\n.oe-contact-primary input { width: auto; accent-color: var(--org-accent); }\n@media (max-width: 520px) { .oe-contact-form, .oe-contact-phone { grid-template-columns: minmax(0, 1fr); } }\n.oe-org-dialog .oe-org-danger, .oe-org-error { color: #b3261e; }\n.opportunities-extension-modal[data-theme=\"dark\"] .oe-org-dialog .oe-org-danger, .opportunities-extension-modal[data-theme=\"dark\"] .oe-org-error { color: #ffaaa4; }\n.oe-org-footer { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--org-border); }\n.oe-org-status { margin: 0 auto 0 0; font-size: 12px; overflow-wrap: anywhere; }\n.oe-org-footer .oe-org-button { flex: none; }\n.oe-org-empty { display: grid; place-content: center; justify-items: center; height: 100%; min-height: 180px; gap: 12px; }\n.oe-org-empty > svg { width: 40px; height: 40px; color: var(--org-accent); }\n.oe-org-empty h3 { margin: 0; font-size: 16px; }\n.oe-org-tooltip { position: fixed; z-index: 20; max-width: min(360px, calc(100vw - 24px)); max-height: min(260px, 45dvh); overflow-y: auto; padding: 12px; background: #fff; color: #312d2a; border: 1px solid #8f8983; border-radius: 4px; box-shadow: 0 3px 12px #0002; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12px; line-height: 18px; }\n.opportunities-extension-modal[data-theme=\"dark\"] .oe-org-tooltip { background: #35322f; color: #f5f4f2; }\n.oe-org-tooltip { pointer-events: none; }\n.oe-org-confirm { position: absolute; inset: 0; display: grid; place-items: center; background: #0006; z-index: 30; padding: 16px; }\n.oe-org-confirm-panel { width: min(430px, 100%); background: #fff; color: #312d2a; border: 1px solid #8f8983; border-radius: 6px; padding: 24px; overflow-wrap: anywhere; }\n.oe-org-confirm-panel h3 { margin: 0 0 12px; font-size: 18px; }\n.oe-org-confirm-panel p { font-size: 13px; line-height: 20px; margin: 0 0 24px; }\n.opportunities-extension-modal[data-theme=\"dark\"] .oe-org-confirm-panel { background: #292725; color: #f5f4f2; }\n.oe-org-skeleton { width: 236px; height: 146px; margin: 28px; border-radius: 4px; background: var(--org-border); animation: oe-time-pulse 1.3s ease-in-out infinite alternate; }\n@media (prefers-reduced-motion: reduce) { .oe-org-skeleton { animation: none; } }\n@media (max-width: 760px) {\n .oe-org-modal { padding: 8px; }\n .oe-org-dialog { height: calc(100dvh - 16px); max-height: calc(100dvh - 16px); }\n .oe-org-workspace { flex-direction: column; }\n .oe-org-editor { flex: 0 1 55%; width: 100%; border-left: 0; border-top: 1px solid var(--org-border); }\n .oe-org-viewport { min-height: 140px; }\n .oe-org-toolbar { padding: 8px; gap: 6px; }\n .oe-org-tools { gap: 2px; }\n .oe-org-footer { padding: 8px; }\n}\n\n/* Shared data-table presentation. Calendar grids are intentionally not data tables. */\n.opportunities-extension-modal :is(\n .opportunities-extension-table-surface,\n .opportunities-extension-install-base-content,\n .opportunities-extension-service-requests-content,\n .opportunities-extension-ratecard-viewport,\n .opportunities-extension-projection-viewport,\n .oe-time-grid,\n .oe-contact-opportunities-table\n) {\n box-sizing: border-box;\n min-width: 0;\n border: 1px solid var(--oe-table-heading-border);\n border-radius: 4px;\n overflow: auto;\n}\n/* Unpadded dialogs need an inset on the scrolling frame itself. */\n.opportunities-extension-modal :is(\n .opportunities-extension-install-base-content,\n .opportunities-extension-service-requests-content,\n .opportunities-extension-ratecard-viewport\n) { margin: 16px; }\n/* Other frames already sit inside a padded body: keep a single gutter. */\n.opportunities-extension-modal :is(\n .opportunities-extension-body,\n .opportunities-extension-projection-body,\n .opportunities-extension-products-detail,\n .oe-time-body,\n .oe-org-dialog.oe-contact-opportunities\n) { padding: 16px; }\n.opportunities-extension-modal table.opportunities-extension-products-table {\n border: 1px solid var(--oe-table-heading-border);\n}\n.opportunities-extension-modal {\n --oe-table-heading: #faf9f8;\n --oe-table-text: #312d2a;\n --oe-table-border: #ebe8e5;\n --oe-table-heading-border: #b8b2ad;\n --oe-table-hover: #f5f4f2;\n}\n.opportunities-extension-modal[data-theme=\"dark\"] {\n --oe-table-heading: #333130;\n --oe-table-text: #f6f4f2;\n --oe-table-border: #3f3c39;\n --oe-table-heading-border: #4e4a46;\n --oe-table-hover: #35322f;\n}\n.opportunities-extension-modal table[data-table-layout=\"standard\"]:not(.fc-scrollgrid) {\n width: 100%; border-collapse: collapse; border-spacing: 0; table-layout: auto;\n color: var(--oe-table-text); font-size: 12px; line-height: 1.35;\n}\n.opportunities-extension-modal table[data-table-layout=\"standard\"] > thead > tr > th {\n padding: 10px 12px; height: 44px; vertical-align: middle; text-align: left;\n white-space: nowrap; overflow-wrap: normal; word-break: normal;\n font-size: 12px; font-weight: 700; color: var(--oe-table-text);\n background: var(--oe-table-heading); border-bottom: 1px solid var(--oe-table-heading-border);\n}\n.opportunities-extension-modal table[data-table-layout=\"standard\"] > tbody > tr > td {\n padding: 10px 12px; vertical-align: middle; text-align: left;\n border-bottom: 1px solid var(--oe-table-border);\n}\n.opportunities-extension-modal table[data-table-layout=\"standard\"] > tbody > tr:hover { background: var(--oe-table-hover); }\n.opportunities-extension-modal table[data-table-layout=\"standard\"] > thead > tr > th .opportunities-extension-sort-button,\n.opportunities-extension-modal table[data-table-layout=\"standard\"] .opportunities-extension-ratecard-sort {\n display: flex; align-items: center; justify-content: flex-start; gap: 8px;\n width: 100%; min-width: max-content; min-height: 28px; padding: 4px 18px 4px 0;\n border: 0; border-radius: 0; background: transparent; color: inherit;\n text-align: left; white-space: nowrap; overflow-wrap: normal; font-weight: 700;\n}\n.opportunities-extension-modal table[data-table-layout=\"standard\"] .opportunities-extension-sort-label { white-space: nowrap; overflow-wrap: normal; word-break: normal; }\n.opportunities-extension-modal table[data-table-layout=\"standard\"] > thead > tr > th .opportunities-extension-sort-button::after { position: absolute; right: 0; left: auto; font-size: 12px; }\n.opportunities-extension-modal table[data-table-layout=\"standard\"] .opportunities-extension-ratecard-sort-icon { margin-left: auto; }\n/* Currency columns keep their heading and value on the same right edge. */\n.opportunities-extension-modal table[data-table-layout=\"standard\"] :is(th, td)[data-align=\"money\"] { text-align: right; font-variant-numeric: tabular-nums; }\n.opportunities-extension-modal table[data-table-layout=\"standard\"] > thead > tr > th[data-align=\"money\"] .opportunities-extension-sort-button,\n.opportunities-extension-modal table[data-table-layout=\"standard\"] th[data-align=\"money\"] .opportunities-extension-ratecard-sort { justify-content: flex-end; text-align: right; padding: 4px 0 4px 18px; }\n.opportunities-extension-modal table[data-table-layout=\"standard\"] > thead > tr > th[data-align=\"money\"] .opportunities-extension-sort-button::after { left: 0; right: auto; }\n.opportunities-extension-modal table[data-table-layout=\"standard\"] th[data-align=\"money\"] .opportunities-extension-ratecard-sort-icon { order: -1; margin-left: 0; margin-right: auto; }\n.opportunities-extension-modal table[data-table-layout=\"standard\"] td[data-align=\"money\"] > span[class*=\"skeleton\"] { margin-left: auto; }\n/* Preserve room for Overview badges and the compact daily entry controls. */\n.opportunities-extension-modal table.opportunities-extension-table > tbody > tr > td:is([data-column=\"name\"], [data-column=\"customer\"]) { padding-bottom: 38px; vertical-align: top; }\n.opportunities-extension-modal .oe-time-grid table[data-table-layout=\"standard\"] > :is(thead, tbody) > tr > :is(th, td) { padding-left: 5px; padding-right: 5px; }\n.opportunities-extension-modal .oe-time-grid table[data-table-layout=\"standard\"] { table-layout: fixed; }\n.opportunities-extension-modal table[data-table-layout=\"standard\"] > tbody > tr > th[scope=\"row\"] { padding: 10px 12px; text-align: left; background: var(--oe-table-heading); border-bottom: 1px solid var(--oe-table-border); }\n/* Rate Card must fit its drawer; headings may wrap at spaces, never mid-word. */\n/* Overview reserves nearly half its width for the two primary descriptions. */\n.opportunities-extension-modal table.opportunities-extension-table[data-table-layout=\"standard\"] { table-layout: fixed; }\n.opportunities-extension-modal .opportunities-extension-table > thead > tr > th[data-column=\"name\"] { width: 24%; }\n.opportunities-extension-modal .opportunities-extension-table > thead > tr > th[data-column=\"customer\"] { width: 24%; }\n.opportunities-extension-modal .opportunities-extension-table > thead > tr > th[data-column=\"optyNumber\"] { width: 7%; }\n.opportunities-extension-modal .opportunities-extension-table > thead > tr > th[data-column=\"owner\"] { width: 7%; }\n.opportunities-extension-modal .opportunities-extension-table > thead > tr > th[data-column=\"revenue\"] { width: 8%; }\n.opportunities-extension-modal .opportunities-extension-table > thead > tr > th[data-column=\"closeDate\"] { width: 7%; }\n.opportunities-extension-modal .opportunities-extension-table > thead > tr > th[data-column=\"status\"] { width: 5%; }\n.opportunities-extension-modal .opportunities-extension-table > thead > tr > th[data-column=\"winProbability\"] { width: 4%; }\n.opportunities-extension-modal .opportunities-extension-table > thead > tr > th[data-column=\"stage\"] { width: 6%; }\n.opportunities-extension-modal .opportunities-extension-table > thead > tr > th[data-column=\"lastUpdateDate\"] { width: 8%; }\n.opportunities-extension-modal table.opportunities-extension-table[data-table-layout=\"standard\"] > :is(thead, tbody) > tr > :is(th, td) { padding-inline: 6px; }\n.opportunities-extension-modal table.opportunities-extension-table[data-table-layout=\"standard\"] > thead > tr > th .opportunities-extension-sort-button { min-width: 0; gap: 4px; }\n.opportunities-extension-modal table.opportunities-extension-table[data-table-layout=\"standard\"] .opportunities-extension-sort-label { overflow: hidden; text-overflow: ellipsis; }\n\n.opportunities-extension-modal table.opportunities-extension-ratecard-table[data-table-layout=\"standard\"] {\n min-width: 0;\n table-layout: fixed;\n}\n.opportunities-extension-modal table.opportunities-extension-ratecard-table[data-table-layout=\"standard\"] > :is(thead, tbody) > tr > :is(th, td) {\n padding-inline: 6px;\n}\n.opportunities-extension-modal table.opportunities-extension-ratecard-table[data-table-layout=\"standard\"] > thead > tr > th,\n.opportunities-extension-modal table.opportunities-extension-ratecard-table[data-table-layout=\"standard\"] > thead > tr > th .opportunities-extension-ratecard-sort {\n white-space: normal;\n overflow-wrap: normal;\n word-break: normal;\n hyphens: none;\n min-width: 0;\n}\n.opportunities-extension-modal table.opportunities-extension-ratecard-table[data-table-layout=\"standard\"] > thead > tr > th .opportunities-extension-ratecard-sort {\n padding: 4px 0;\n gap: 4px;\n}\n.opportunities-extension-modal .opportunities-extension-ratecard-sort > span:first-child { min-width: 0; }\n.opportunities-extension-modal .opportunities-extension-ratecard-sort-icon { flex: 0 0 12px; }\n\n/* Modal titles follow the customer Service Requests heading. Keep section and\n calendar headings independent from dialog typography. */\n.opportunities-extension-modal :is(\n .opportunities-extension-header,\n .opportunities-extension-account-plans-header,\n .opportunities-extension-preferences-header\n) {\n padding: 16px;\n gap: 16px;\n align-items: flex-start;\n}\n/* These headers live in panels that already supply the outer inset. */\n.opportunities-extension-modal :is(.oe-org-dialog.oe-contact-dialog,\n .oe-org-confirm-panel, .opportunities-extension-projection-confirm,\n .opportunities-extension-debug-panel) { padding: 16px; }\n.opportunities-extension-modal :is(.oe-org-editor-header,\n .opportunities-extension-debug-panel-header) {\n padding: 0;\n gap: 16px;\n align-items: flex-start;\n}\n.opportunities-extension-modal :is(\n .opportunities-extension-account-plans-header,\n .opportunities-extension-preferences-header,\n .opportunities-extension-debug-panel-header\n) p {\n margin: 5px 0 0;\n font-family: \"Oracle Sans\", Arial, Helvetica, sans-serif;\n font-size: 13px;\n font-weight: 400;\n line-height: 1.35;\n letter-spacing: normal;\n overflow-wrap: anywhere;\n}\n/* Search controls share the 16px inset of their table frames. */\n.opportunities-extension-modal :is(.opportunities-extension-customer-table-toolbar,\n .opportunities-extension-ratecard-toolbar,\n .opportunities-extension-ratecard-plan-details) { padding-inline: 16px; }\n.opportunities-extension-modal .opportunities-extension-customer-table-toolbar {\n padding-block: 12px;\n}\n.opportunities-extension-modal .opportunities-extension-customer-table-search {\n width: min(420px, 100%);\n height: 38px;\n padding: 8px 12px;\n font-size: 13px;\n line-height: 20px;\n}\n.opportunities-extension-modal :is(\n .opportunities-extension-header,\n .opportunities-extension-account-plans-header,\n .opportunities-extension-preferences-header,\n .opportunities-extension-debug-panel-header,\n .oe-org-editor-header\n) :is(h1, h2, h3),\n.opportunities-extension-modal .opportunities-extension-projection-confirm h2,\n.opportunities-extension-modal .oe-org-confirm-panel h3 {\n margin: 0;\n font-family: \"Oracle Sans\", Arial, Helvetica, sans-serif;\n font-size: 20px;\n font-weight: 700;\n line-height: 24px;\n letter-spacing: normal;\n color: #312d2a;\n min-width: 0;\n overflow-wrap: anywhere;\n}\n.opportunities-extension-modal[data-theme=\"dark\"] :is(\n .opportunities-extension-header,\n .opportunities-extension-account-plans-header,\n .opportunities-extension-preferences-header,\n .opportunities-extension-debug-panel-header,\n .oe-org-editor-header\n) :is(h1, h2, h3),\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-projection-confirm h2,\n.opportunities-extension-modal[data-theme=\"dark\"] .oe-org-confirm-panel h3 {\n color: #f6f4f2;\n}\n"; function loadOpportunityCalendarLibrary() { /* MIT License @@ -332,7 +332,7 @@ function createOrgChartView({ environment, tableSorting, model, loadLayout, icon person = entry.nodes.find(node => node.id === person.id) || person; const overlay = el("div", "oe-org-confirm"), panel = el("section", "opportunities-extension-action-form-dialog oe-org-dialog oe-contact-opportunities"); panel.setAttribute("role", "dialog"); panel.setAttribute("aria-modal", "true"); panel.setAttribute("aria-labelledby", "oe-contact-opportunities-title"); - const header = el("header", "oe-org-editor-header"), title = el("h3", "", "Opportunities — " + person.name); title.id = "oe-contact-opportunities-title"; + const header = el("header", "oe-org-editor-header"), title = el("h3", "", "Opportunities | " + person.name); title.id = "oe-contact-opportunities-title"; let closed = false, offset = 0, partyNumber = person.PartyNumber; const current = () => !closed && active === entry; function finish() { closed = true; overlay.remove(); entry.confirmation = null; entry.contactCleanup = null; dialog.inert = false; trigger.focus(); } @@ -1726,19 +1726,11 @@ function createAuthSessionState({ AUTH_STATUS } = {}) { }; } -// Source: src/auth/sales-common-state.js -/** @returns {{salesCommonToken: null | {access_token: string, expiresAt: number}, salesCommonTokenRequest: null | Promise}} */ -function createAuthSalesCommonState() { - return { - salesCommonToken: null, - salesCommonTokenRequest: null - }; -} - // Source: src/features/opportunities/query-state.js function createOpportunitiesQueryState() { return { - periodRequestVersion: 0 + periodRequestVersion: 0, + dateRange: null }; } @@ -1758,6 +1750,7 @@ function createOpportunitiesTableState() { // Source: src/features/opportunities/filter-state.js function createOpportunitiesFilterState({ STAGE_OPTIONS, STATUS_OPTIONS } = {}) { return { + selectedProductTypes: new Set(["Booking", "Workload"]), selectedStages: new Set(STAGE_OPTIONS), selectedStatuses: new Set(STATUS_OPTIONS), selectedCustomerKeys: new Set(), @@ -1871,13 +1864,6 @@ function createProductsContentState() { }; } -// Source: src/features/ai-summary/state.js -function createAiSummaryState() { - return { - aiSummariesByOptyNumber: new Map() - }; -} - // Source: src/features/consumption/plans-state.js function createConsumptionPlansState() { return { @@ -1902,11 +1888,92 @@ function createOpportunitiesDashboardState({ STAGE_OPTIONS } = {}) { } // Source: src/features/debug/state.js -function createDebugState() { - return { +function createDebugState(environment = {}) { + let storage; + let tabId; + try { + storage = environment.localStorage; + const session = environment.window?.sessionStorage; + tabId = session?.getItem("opportunities-extension-debug-tab"); + if (!tabId) { + tabId = environment.crypto?.randomUUID?.() || `${Date.now()}-${Math.random().toString(36).slice(2)}`; + session?.setItem("opportunities-extension-debug-tab", tabId); + } + } catch { storage = null; } + const prefix = `opportunities-extension-debug:${tabId || "memory"}:`; + let timer = null; + const pending = new Map(); + const state = { requestLog: [], - debugSecretsVisible: false + debugSecretsVisible: false, + storageError: "", + generation: 0, + persist, + flush, + reload, + reset }; + function persist(entry) { + if (!state.requestLog.includes(entry)) return; + pending.set(entry.id, entry); + try { + if (timer === null && environment.setTimeout) timer = environment.setTimeout(flush, 100); + else if (!environment.setTimeout) flush(); + } catch { + // Debug persistence must never interrupt the request being recorded. + timer = null; + flush(); + } + } + function flush() { + if (timer !== null) environment.clearTimeout?.(timer); + timer = null; + if (!storage) { pending.clear(); return; } + try { + // Write only changed records, never stringify all response bodies per request. + for (const [id, entry] of pending) storage.setItem(`${prefix}${id}`, JSON.stringify(entry)); + storage.setItem(`${prefix}index`, JSON.stringify({ version: 1, count: state.requestLog.length })); + state.storageError = ""; + } catch { + state.storageError = "Local storage is unavailable or full. Requests remain available in memory for this session."; + } + pending.clear(); + } + function reload() { + flush(); + if (!storage || state.storageError) return; + try { + const index = JSON.parse(storage.getItem(`${prefix}index`) || "null"); + if (!index || index.version !== 1 || index.count !== state.requestLog.length) return; + const records = state.requestLog.map(entry => { + const saved = JSON.parse(storage.getItem(`${prefix}${entry.id}`) || "null"); + if (!saved || saved.id !== entry.id) throw new Error("Incomplete debug record"); + return { ...saved, startedAt: new Date(saved.startedAt), completedAt: saved.completedAt ? new Date(saved.completedAt) : null }; + }); + // Preserve the handles held by requests which are still in flight. + records.forEach((record, i) => Object.assign(state.requestLog[i], record)); + } catch { state.storageError = "Saved debug data could not be read. Showing this session's requests from memory."; } + } + function reset() { + if (timer !== null) environment.clearTimeout?.(timer); + timer = null; + pending.clear(); + state.requestLog = []; + state.debugSecretsVisible = false; + state.storageError = ""; + state.generation++; + try { + if (!storage) return; + const keys = []; + for (let i = 0; i < storage.length; i++) { + const key = storage.key(i); + if (key?.startsWith(prefix)) keys.push(key); + } + keys.forEach(key => storage.removeItem(key)); + storage.setItem(`${prefix}index`, JSON.stringify({ version: 1, count: 0 })); + } catch { state.storageError = "Local storage is unavailable. Requests will be kept in memory for this session."; } + } + return state; } // Source: src/features/opportunities/columns.js @@ -1919,7 +1986,7 @@ function createOpportunitiesColumns({ formatOracleResponseDate, formatRevenue, f { key: "revenue", label: "Amount", value: (item) => getNestedValue(item, ["PrimaryRevenue", "RevnAmount"]), display: formatRevenue }, { key: "closeDate", label: "Close Date", value: (item) => item.EffectiveDate, display: (item) => formatOracleResponseDate(item.EffectiveDate) }, { key: "status", label: "Status", value: (item) => item.StatusCode, display: (item) => item.StatusCode }, - { key: "winProbability", label: "Win Probability", value: (item) => getNestedValue(item, ["PrimaryRevenue", "WinProb"]), display: formatWinProbability }, + { key: "winProbability", label: "Prob.", value: (item) => getNestedValue(item, ["PrimaryRevenue", "WinProb"]), display: formatWinProbability }, { key: "stage", label: "Stage", value: (item) => item.ForecastGroup_c, display: (item) => item.ForecastGroup_c }, { key: "lastUpdateDate", label: "Last Update Date", value: (item) => item.LastUpdateDate, display: (item) => formatOracleResponseDate(item.LastUpdateDate, true) } ]; @@ -2183,6 +2250,8 @@ function createContentModal({ } function openOpportunitiesModal() { ensureExtensionStyles(); + const oldDebug = document.getElementById(DEBUG_PANEL_ID); + if (oldDebug) { oldDebug.hidden = true; oldDebug.textContent = ""; } debugState.debugSecretsVisible = false; const existingModal = document.getElementById(MODAL_ID); @@ -2203,7 +2272,6 @@ function createContentModal({ const overlay = document.createElement("div"); overlay.setAttribute("lang", "en"); - debugState.requestLog = []; authSessionState.tokenRelayRequest = null; authSessionState.consumerTokenServiceRequest = null; authSessionState.accessToken = ""; @@ -2927,6 +2995,7 @@ function createAuthContentSession({ return token; }) .catch((error) => { + authSessionState.tokenRelayRequest = null; authSessionState.accessToken = ""; authSessionState.principal = ""; authSessionState.authStatus = AUTH_STATUS.unauthenticated; @@ -3001,41 +3070,6 @@ function createCurrentUser({ sendRuntimeMessage, appendBackgroundRequestLog, mes return { ensure, allowsCrmActivities: () => allowed, getUserId: () => userId }; } -// Source: src/auth/sales-common.js -function createAuthSalesCommon({ - TOKEN_RELAY_URL, - authSalesCommonState, - requestTokenRelay -}) { - function requestTokenRelaySalesCommon() { - if (authSalesCommonState.salesCommonToken && Date.now() < authSalesCommonState.salesCommonToken.expiresAt) { - return Promise.resolve(authSalesCommonState.salesCommonToken.access_token); - } - if (authSalesCommonState.salesCommonTokenRequest) { - return authSalesCommonState.salesCommonTokenRequest; - } - authSalesCommonState.salesCommonTokenRequest = requestTokenRelay({ - name: "requestTokenRelaySalesCommon", - url: `${TOKEN_RELAY_URL}?scopesfq=urn%3Aopc%3Aresource%3Afusion%3Aeeho%3Asales-common%2F`, - includeExpiry: true - }).then((token) => { - authSalesCommonState.salesCommonToken = token; - return token.access_token; - }).finally(() => { - authSalesCommonState.salesCommonTokenRequest = null; - }); - return authSalesCommonState.salesCommonTokenRequest; - } - - function invalidateSalesCommonToken(rejectedToken) { - if (authSalesCommonState.salesCommonToken && authSalesCommonState.salesCommonToken.access_token === rejectedToken) { - authSalesCommonState.salesCommonToken = null; - } - } - - return { requestTokenRelaySalesCommon, invalidateSalesCommonToken }; -} - // Source: src/auth/token-relay.js function createAuthTokenRelay({ TOKEN_RELAY_URL, @@ -3073,17 +3107,27 @@ function createAuthTokenRelay({ } const requestEntry = createTokenRelayRequestEntry(xsrfTokenSource, refreshResult, name, url); + const controller = environment.AbortController ? new environment.AbortController() : null; + let timeoutId; + const timeout = new Promise((_, reject) => { + if (!environment.setTimeout) return; + timeoutId = environment.setTimeout(() => { + reject(new Error("Token relay timed out after 30 seconds. Please try again.")); + controller?.abort(); + }, 30000); + }); try { - const response = await fetch(url, { + const response = await Promise.race([fetch(url, { method: "GET", credentials: "include", + ...(controller ? { signal: controller.signal } : {}), headers: { "x-xsrf-token": xsrfTokenSource.token } - }); + }), timeout]); - const responseBody = await readResponseBodyForDebug(response); + const responseBody = await Promise.race([readResponseBodyForDebug(response), timeout]); if (!response.ok) { logRequestSuccess(requestEntry, response, responseBody); @@ -3102,8 +3146,9 @@ function createAuthTokenRelay({ let responseData; try { - responseData = await response.json(); + responseData = await Promise.race([response.json(), timeout]); } catch (error) { + if (controller?.signal.aborted) throw error; logRequestSuccess(requestEntry, response, responseBody); if (!refreshAttempted) { @@ -3148,6 +3193,8 @@ function createAuthTokenRelay({ } catch (error) { logRequestFailure(requestEntry, error.message || "Request failed."); throw error; + } finally { + if (timeoutId !== undefined) environment.clearTimeout?.(timeoutId); } } } @@ -3389,6 +3436,7 @@ function createOpportunitiesController({ }) { async function requestOpportunitiesForPeriod(period) { const dateRange = getFiscalPeriodRange(period, new Date()); + opportunitiesQueryState.dateRange = dateRange; const requestVersion = ++opportunitiesQueryState.periodRequestVersion; resetWorkloadActions(); resetWorkloads(); @@ -3533,6 +3581,7 @@ function createFusionOpportunities({ maskToken, getOpportunityTypeValues, readResponseBodyForDebug, + resetDebugRequests = () => {}, environment }) { const { fetch } = environment; @@ -3560,6 +3609,8 @@ function createFusionOpportunities({ if (!isCurrentPeriodRequest(requestVersion)) return null; const payload = createOpportunitiesQueryPayload(dateRange, offset, savedSearchNumber); const requestBody = JSON.stringify(payload); + // One history per query, preserving all pages of the same result set. + if (page === 1) resetDebugRequests(); const requestEntry = logRequestStart({ name: "requestOpportunities", method: "POST", @@ -3928,7 +3979,7 @@ function createProductActivities({ productsContentState, opportunitiesQueryState // Source: src/features/opportunities/refresh-all.js function createRefreshAll({ messageTypes, sendRuntimeMessage, activityCache, resetRelatedData, opportunitiesQueryState, productsContentState, consumptionPlansState, consumptionTrendState, - aiSummaryState, reload, onFailure, notify, createRefreshIcon, environment }) { + reload, onFailure, notify, createRefreshIcon, environment }) { let pending = null; function refresh(period) { if (pending) return pending; @@ -3941,7 +3992,6 @@ function createRefreshAll({ messageTypes, sendRuntimeMessage, activityCache, res consumptionTrendState.consumptionTrendCache = new Map(); consumptionTrendState.consumptionTrendWindowOffsets = new Map(); consumptionTrendState.consumptionTrendSeriesFilters = new Map(); - aiSummaryState.aiSummariesByOptyNumber = new Map(); resetRelatedData(); pending = (async () => { await activityCache.invalidate(); @@ -4046,7 +4096,7 @@ function createActivityCache({ authSessionState, preferencesState, environment } } // Source: src/features/opportunities/activity-progress.js -function createActivityProgress({ MODAL_ID, environment }) { +function createActivityProgress({ MODAL_ID, environment, retrySession = () => {} }) { const { document, setTimeout, clearTimeout, matchMedia } = environment; const entries = new Map(); function update(key, state, completed = 0, total = null) { @@ -4077,6 +4127,15 @@ function createActivityProgress({ MODAL_ID, environment }) { : state === "complete" ? `${label} ready ${completed}` : `${label} ${count}`; if (key === "session") entry.badge.textContent = state === "complete" ? "SR session ready" : state === "error" ? "SR session unavailable" : "SR session loading"; entry.badge.title = key === "session" ? "Service Request session initialization" : key === "sr" ? "CRM service request records loaded" : "Product workloads checked for Actions in the selected Reference, regardless of display filters"; + if (key === "session" && state === "error") { + const retry = document.createElement("button"); + retry.type = "button"; + retry.className = "opportunities-extension-session-retry"; + retry.textContent = "Retry"; + retry.setAttribute("aria-label", "Retry Service Request session initialization"); + retry.addEventListener("click", () => { retry.disabled = true; retrySession(); }); + entry.badge.append(retry); + } if (state === "complete") entry.timer = setTimeout(() => { entry.badge.setAttribute("data-fading", "true"); const reduced = typeof matchMedia === "function" && matchMedia("(prefers-reduced-motion: reduce)").matches; @@ -5200,25 +5259,33 @@ function createInternalSrSession({ query, environment, sessionUrl, sessionLabel // Source: src/features/opportunities/sr-session-preparation.js function createSrSessionPreparation({ ensureCurrentUser, allowsCrmActivities, sendRequest, reportProgress, appendLog, onReady = async () => {} }) { let pending = null; + let failed = false; function ensure() { if (pending) return pending; pending = (async () => { + failed = false; try { - await ensureCurrentUser(); - if (!allowsCrmActivities()) return; reportProgress("running"); - const result = await sendRequest(); + // Navigation establishes SR cookies independently of the SPA identity. + // Consume user-dependent data only once both preparations have finished. + const [, result] = await Promise.all([ensureCurrentUser(), sendRequest()]); appendLog(result?.debugRequests || []); if (!result?.ok) throw new Error(result?.error || "Session initialization failed."); + if (!allowsCrmActivities()) { reportProgress("idle"); return; } reportProgress("complete"); await onReady(); } catch { + failed = true; reportProgress("error"); } })(); return pending; } - return { ensure }; + function retry() { + if (failed) pending = null; + return ensure(); + } + return { ensure, retry }; } // Source: src/features/opportunities/workload-actions.js @@ -5949,16 +6016,16 @@ function createOpportunitiesTable({ const productsResult = item.OptyNumber && productsContentState.opptyProductsByNumber.get(String(item.OptyNumber)); if (productsResult) { productActions.append(createProductsCountButton(item.OptyNumber, productsResult)); - const rampBadge = createProductsRampBadge(productsResult); + const rampBadge = createProductsRampBadge(productsResult, item); if (rampBadge) productActions.append(rampBadge); } + const projectionIndicator = createProjectionIndicator(productsResult, item, + productsContentState.expandedProductOptyNumbers.has(String(item.OptyNumber))); + if (projectionIndicator) productActions.append(projectionIndicator); const srBadge = createCrmServiceRequestBadge(item.OptyNumber); if (srBadge) productActions.append(srBadge); const actionsBadge = createWorkloadActionsBadge(item.OptyNumber); if (actionsBadge) productActions.append(actionsBadge); - const projectionIndicator = createProjectionIndicator(productsResult, item, - productsContentState.expandedProductOptyNumbers.has(String(item.OptyNumber))); - if (projectionIndicator) productActions.append(projectionIndicator); nameCellContent.append(opportunityLink, productActions); cell.append(nameCellContent); } else if (column.key === "optyNumber" && item.OptyNumber) { @@ -6016,9 +6083,10 @@ function createOpportunitiesTable({ } // Source: src/features/opportunities/calendar.js -function createOpportunityCalendar({ environment, loadLibrary, getState, getItems, getVersion, +function createOpportunityCalendar({ environment, loadLibrary, getState, getItems, getVersion, getRange, formatRevenue, formatDate, getOwnerName, createDetailLink, createCopyButton, createCloseIcon, - createStageBadge, createStatusBadge, opportunityUrl, modalId, closeSrPopover, createViewIcon }) { + createStageBadge, createStatusBadge, opportunityUrl, modalId, closeSrPopover, createViewIcon, + productTypeSelection, onProductTypeChange }) { const { document } = environment; let elements = null; let calendar = null; @@ -6028,34 +6096,49 @@ function createOpportunityCalendar({ environment, loadLibrary, getState, getItem let details = null; let lastEvents = ""; let dayCounts = new Map(); + let dayEvents = new Map(); const dayBadges = new Map(); let resizeObserver = null; let layoutFrame = null; - let eventLimit = 2; - function visibleEventLimit(height, weeks, headerHeight) { - return Math.max(0, Math.min(2, Math.floor((height / Math.max(1, weeks) - headerHeight - 26) / 48))); - } + let positionToday = false; function scheduleLayout() { - for (const [name, icon] of [["today", "today"], ["dayGridMonth", "calendar"], ["dayGridWeek", "week"]]) { - const button = elements?.calendarHost.querySelector?.(`.fc-${name}-button`); - if (button && !button.querySelector("svg")) button.prepend(createViewIcon(icon)); - } const win = environment.window; if (!win?.requestAnimationFrame || layoutFrame !== null) return; layoutFrame = win.requestAnimationFrame(() => { layoutFrame = null; - if (!calendar || selectedView !== "calendar" || !elements.calendarHost.clientHeight) return; - calendar.updateSize(); - const frame = elements.calendarHost.querySelector(".fc-daygrid-day-frame"); - const events = frame?.querySelector(".fc-daygrid-day-events"); - if (!frame || !events) return; - const scroller = frame.closest(".fc-scroller"); - const weeks = elements.calendarHost.querySelectorAll(".fc-daygrid-body tr").length; - if (!scroller || !weeks) return; - elements.calendarHost.style.setProperty("--opportunities-calendar-weeks", String(weeks)); - const headerHeight = events.getBoundingClientRect().top - frame.getBoundingClientRect().top; - const limit = visibleEventLimit(scroller.clientHeight, weeks, headerHeight); - if (limit !== eventLimit) { eventLimit = limit; calendar.setOption("dayMaxEvents", limit); } + if (calendar && selectedView === "calendar") { + calendar.updateSize(); + if (positionToday && !elements.calendarHost.hidden) { + const scroller = elements.calendarHost.querySelector(".fc-multimonth"); + if (!scroller?.clientHeight) return; + const today = dateKey(new Date()); + const range = getRange(); + const cell = range && today >= range.startCloseDate.slice(0, 10) && today < range.endCloseDate.slice(0, 10) + ? elements.calendarHost.querySelector(`[data-date="${today}"]:not(.fc-day-other)`) + : null; + if (cell) { + const first = new Date(`${today}T12:00:00`); + first.setDate(first.getDate() - first.getDay() - 7); + const last = new Date(first); + last.setDate(last.getDate() + 20); + const start = dateKey(first), end = dateKey(last); + // A week crossing a month boundary has two rendered rows. Include both. + const rows = [...scroller.querySelectorAll(".fc-daygrid-body tr")].filter(row => + [...row.querySelectorAll("[data-date]:not(.fc-day-other)")].some(day => { + const date = day.getAttribute("data-date"); + return date >= start && date <= end; + })); + const headings = [...new Set(rows.map(row => row.closest(".fc-multimonth-month")?.querySelector(".fc-multimonth-header")))].filter(Boolean); + const headerSpace = headings.reduce((sum, header) => sum + header.getBoundingClientRect().height, 0); + const height = Math.max(48, Math.floor((scroller.clientHeight - headerSpace - 20) / Math.max(1, rows.length))); + elements.calendarHost.style.setProperty("--calendar-week-height", `${height}px`); + const target = rows[0] || cell; + const inset = (headings[0]?.getBoundingClientRect().height || 0) + 8; + scroller.scrollTop += target.getBoundingClientRect().top - scroller.getBoundingClientRect().top - inset; + } else scroller.scrollTop = 0; + positionToday = false; + } + } }); } function dateKey(date) { @@ -6082,6 +6165,21 @@ function createOpportunityCalendar({ environment, loadLibrary, getState, getItem badge.setAttribute("aria-label", badge.title); badge.setAttribute("data-empty", String(count === 0)); } + function renderDayCards(container, key) { + container.textContent = ""; + for (const event of dayEvents.get(key) || []) { + const item = event.extendedProps.item; + const button = node("button", `opportunities-calendar-day-card fc-daygrid-event ${event.classNames.join(" ")}`); + button.type = "button"; + const card = node("div", "opportunities-calendar-event-content"); + const summary = `${item.OptyNumber || "-"} | ${item.ForecastGroup_c || "N/A"} | ${formatRevenue(item)}`; + card.append(node("strong", "", event.title), node("span", "", summary)); + button.title = `${event.title}\n${summary}`; + button.append(card); + button.addEventListener("click", () => showDetails(item, button)); + container.append(button); + } + } function node(tag, className, text) { const el = document.createElement(tag); el.className = className; @@ -6163,29 +6261,10 @@ function createOpportunityCalendar({ environment, loadLibrary, getState, getItem content.append(identity, summary, badges); showDialog(item.Name || item.OptyNumber || "Opportunity", content, item.OptyNumber ? [link, copy] : [], trigger); } - function showDayOpportunities({ date, allSegs, jsEvent }) { - jsEvent.preventDefault(); - const trigger = jsEvent.currentTarget || elements?.tabs.calendar; - const content = node("div", "opportunities-calendar-day-list"); - const controls = []; - const events = new Map(allSegs.map(({ event }) => [event.id, event])); - for (const event of events.values()) { - const item = event.extendedProps.item; - const button = node("button", "opportunities-calendar-day-item"); button.type = "button"; - const summary = `${item.OptyNumber || "-"} | ${item.ForecastGroup_c || "N/A"} | ${formatRevenue(item)}`; - button.append(node("strong", "", event.title), node("span", "", summary)); - button.title = `${event.title}\n${summary}`; - button.addEventListener("click", () => showDetails(item, trigger)); - controls.push(button); content.append(button); - } - showDialog(`${formatDate(date.toISOString().slice(0, 10))} | ${events.size} ${events.size === 1 ? "opportunity" : "opportunities"}`, content, controls, trigger); - // A truthy non-string result prevents FullCalendar from opening its measured popover. - return true; - } function mount(body, tableSurface) { resizeObserver?.disconnect(); if (layoutFrame !== null) environment.window?.cancelAnimationFrame(layoutFrame); - layoutFrame = null; eventLimit = 2; + layoutFrame = null; calendar?.destroy(); calendar = null; lastEvents = ""; anchoredVersion = null; selectedView = "overview"; dayBadges.clear(); dayCounts.clear(); closeDetails(false); @@ -6212,7 +6291,26 @@ function createOpportunityCalendar({ environment, loadLibrary, getState, getItem }); tabs[key] = tab; tablist.append(tab); } - workspace.append(tablist, tableSurface, surface); body.append(workspace); + const viewbar = node("div", "opportunities-view-bar"); + viewbar.append(tablist); + if (productTypeSelection) { + const filters = node("div", "opportunities-product-type-filters"); + filters.setAttribute("role", "group"); filters.setAttribute("aria-label", "Opportunity type"); + for (const type of ["Booking", "Workload"]) { + const button = node("button", "opportunities-product-type-filter", type); + button.type = "button"; + button.setAttribute("data-type", type); + button.setAttribute("aria-pressed", String(productTypeSelection.has(type))); + button.addEventListener("click", () => { + if (productTypeSelection.has(type)) productTypeSelection.delete(type); else productTypeSelection.add(type); + button.setAttribute("aria-pressed", String(productTypeSelection.has(type))); + onProductTypeChange(); + }); + filters.append(button); + } + viewbar.append(filters); + } + workspace.append(viewbar, tableSurface, surface); body.append(workspace); elements = { workspace, tableSurface, surface, message, calendarHost, undated, tabs }; if (environment.window?.ResizeObserver) { resizeObserver = new environment.window.ResizeObserver(scheduleLayout); @@ -6222,6 +6320,7 @@ function createOpportunityCalendar({ environment, loadLibrary, getState, getItem } function selectView(view) { if (!elements || !["overview", "calendar"].includes(view)) return; + if (view === "calendar" && selectedView !== "calendar") positionToday = true; closeDetails(false); closeSrPopover(); selectedView = view; elements.tableSurface.hidden = view !== "overview"; elements.surface.hidden = view !== "calendar"; for (const [key, tab] of Object.entries(elements.tabs)) { @@ -6235,41 +6334,57 @@ function createOpportunityCalendar({ environment, loadLibrary, getState, getItem if (!elements || selectedView !== "calendar") return; const { surface, message, calendarHost, undated } = elements; surface.setAttribute("aria-busy", String(state.status === "loading")); - if (["loading", "error", "empty", "idle"].includes(state.status)) { + if (["loading", "error", "idle"].includes(state.status)) { message.textContent = state.message || (state.status === "loading" ? "Loading opportunities..." : "No opportunities found."); message.hidden = false; calendarHost.hidden = true; undated.hidden = true; closeDetails(false); return; } message.textContent = items.length ? "" : "No opportunities found."; message.hidden = !!items.length; calendarHost.hidden = false; - const events = eventsFor(items); + const range = getRange(); + if (!range) { calendarHost.hidden = true; return; } + const start = range.startCloseDate.slice(0, 10); + const end = range.endCloseDate.slice(0, 10); + const visibleRange = { start, end }; // Fiscal ranges end at the next period's start (exclusive). + const events = eventsFor(items).filter(event => event.start >= start && event.start < end); dayCounts = new Map(); - for (const event of events) dayCounts.set(event.start, (dayCounts.get(event.start) || 0) + 1); - for (const { badge, key } of dayBadges.values()) updateDayBadge(badge, key); - const anchor = initialDate(state.items); + dayEvents = new Map(); + for (const event of events) { + dayCounts.set(event.start, (dayCounts.get(event.start) || 0) + 1); + if (!dayEvents.has(event.start)) dayEvents.set(event.start, []); + dayEvents.get(event.start).push(event); + } + for (const { badge, key, cards } of dayBadges.values()) { updateDayBadge(badge, key); renderDayCards(cards, key); } + const anchor = start; if (!calendar) { try { library ||= loadLibrary(); calendar = new library.Calendar(calendarHost, { - initialView: "dayGridMonth", initialDate: anchor, height: "100%", expandRows: true, fixedWeekCount: false, + initialView: "referenceMonths", initialDate: anchor, height: "100%", fixedWeekCount: false, + views: { referenceMonths: { type: "multiMonth", visibleRange, dayMaxEvents: false, dayMaxEventRows: false } }, + visibleRange, validRange: visibleRange, showNonCurrentDates: false, + multiMonthMaxColumns: 1, multiMonthMinWidth: 0, + multiMonthTitleFormat: { month: "long", year: "numeric" }, datesSet: scheduleLayout, locale: "en", firstDay: 0, editable: false, selectable: false, eventInteractive: true, - headerToolbar: { left: "prev,next today", center: "title", right: "dayGridMonth,dayGridWeek" }, - buttonText: { today: "Today", month: "Month", week: "Week" }, - buttonHints: { prev: "Previous", next: "Next", today: "Today", dayGridMonth: "Month", dayGridWeek: "Week" }, - dayMaxEvents: 2, moreLinkText: count => `... +${count}`, displayEventTime: false, - moreLinkHint: count => `View ${count} more ${count === 1 ? "opportunity" : "opportunities"}`, - moreLinkClick: showDayOpportunities, + headerToolbar: false, + dayMaxEvents: false, dayMaxEventRows: false, displayEventTime: false, weekNumbers: true, weekNumberContent: ({ date }) => ({ domNodes: [node("span", "opportunities-calendar-fiscal-week", fiscalWeekLabel(date))] }), dayCellDidMount: ({ el, date }) => { const badge = node("span", "opportunities-calendar-day-count"); const key = dateKey(date); updateDayBadge(badge, key); - el.querySelector(".fc-daygrid-day-frame").append(badge); - dayBadges.set(el, { badge, key }); + const cards = node("div", "opportunities-calendar-day-cards"); + cards.tabIndex = 0; + cards.setAttribute("role", "region"); + cards.setAttribute("aria-label", `Opportunities for ${formatDate(key)}`); + renderDayCards(cards, key); + el.querySelector(".fc-daygrid-day-frame").append(badge, cards); + dayBadges.set(el, { badge, key, cards }); }, - dayCellWillUnmount: ({ el }) => { dayBadges.get(el)?.badge.remove(); dayBadges.delete(el); }, - eventOrder: "title", eventDisplay: "block", events, + dayCellWillUnmount: ({ el }) => { dayBadges.get(el)?.badge.remove(); dayBadges.get(el)?.cards.remove(); dayBadges.delete(el); }, + // MultiMonth imposes its own event limit. Render all cards in our scrollable day region. + eventOrder: "title", eventDisplay: "none", events, eventContent: ({ event }) => { const item = event.extendedProps.item; const card = node("div", "opportunities-calendar-event-content"); @@ -6292,7 +6407,15 @@ function createOpportunityCalendar({ environment, loadLibrary, getState, getItem } const signature = JSON.stringify(events); calendar.batchRendering(() => { - if (anchoredVersion !== getVersion()) { calendar.gotoDate(anchor); anchoredVersion = getVersion(); closeDetails(false); } + if (anchoredVersion !== getVersion()) { + positionToday = true; + calendar.setOption("views", { referenceMonths: { type: "multiMonth", visibleRange, dayMaxEvents: false, dayMaxEventRows: false } }); + calendar.setOption("visibleRange", visibleRange); + calendar.setOption("validRange", visibleRange); + calendar.gotoDate(anchor); anchoredVersion = getVersion(); closeDetails(false); + const scroller = calendarHost.querySelector?.(".fc-multimonth"); + if (scroller) scroller.scrollTop = 0; + } if (signature !== lastEvents) { calendar.removeAllEvents(); calendar.addEventSource(events); lastEvents = signature; closeDetails(false); } }); const missing = items.filter(item => !closeDate(item.EffectiveDate)); @@ -6306,7 +6429,7 @@ function createOpportunityCalendar({ environment, loadLibrary, getState, getItem } scheduleLayout(); } - return { mount, render, selectView, closeDetails, closeDate, eventsFor, initialDate, fiscalWeekLabel, visibleEventLimit }; + return { mount, render, selectView, closeDetails, closeDate, eventsFor, initialDate, fiscalWeekLabel }; } // Source: src/features/opportunities/dashboard.js @@ -6458,6 +6581,7 @@ function createOpportunitiesFilters({ saveFilterPreferences, stringifySearchValue, matchesActivities, + matchesProductType = () => true, environment }) { const { document } = environment; @@ -6778,7 +6902,8 @@ function createOpportunitiesFilters({ && (allCustomers || opportunitiesFilterState.selectedCustomerKeys.has(getCustomerKey(item))) && (allOwners || opportunitiesFilterState.selectedOwnerKeys.has(getOwnerKey(item))) && matchesTableSearch(item, normalizedSearch) - && matchesActivities(item); + && matchesActivities(item) + && matchesProductType(item); }); const column = OPPORTUNITIES_COLUMNS.find((candidate) => candidate.key === opportunitiesTableState.opportunitiesTableState.sortKey); @@ -7726,27 +7851,45 @@ function createProductWorkloads({ productsContentState, opportunitiesQueryState, function createProductsDetails({ OPPORTUNITIES_COLUMNS, setBadgeContent, - createAiSummaryAlert, createProjectionIndicator, + openProjection, formatOracleResponseDate, productsContentState, renderOpportunitiesTable, - requestGenerateAiSummary, environment }) { const { document } = environment; - function createProductsRampBadge(productsResult) { - const values = (Array.isArray(productsResult.items) ? productsResult.items : []) + function isBooking(products) { + return Boolean(products?.length) && products.every(item => !String(item?.WorkloadName_c ?? "").trim() || String(item.WorkloadName_c).trim() === "-"); + } + function createProductsRampBadge(productsResult, opportunity) { + const products = Array.isArray(productsResult.items) ? productsResult.items : []; + if (isBooking(products)) { + const badge = document.createElement("span"); + badge.className = "opportunities-extension-products-ramp"; + badge.setAttribute("data-booking", "true"); + badge.textContent = "Booking"; + badge.title = "Booking: no product has a Workload assigned."; + badge.setAttribute("aria-label", badge.title); + return badge; + } + const values = products .map(item => item && item.RampMonths_c) .map(value => value === null || value === undefined || String(value).trim() === "" ? "N/A" : String(value).trim()) .filter((value, index, items) => value !== "N/A" || items.indexOf(value) === index); if (!values.length) return null; - const badge = document.createElement("span"); + const badge = document.createElement("button"); + badge.type = "button"; badge.className = "opportunities-extension-products-ramp"; badge.setAttribute("data-missing", String(values.includes("N/A"))); setBadgeContent(badge, "ramp", values.join(" | ")); badge.title = `Ramp Months: ${values.join(", ")}`; badge.setAttribute("aria-label", badge.title); + badge.setAttribute("aria-haspopup", "dialog"); + badge.addEventListener("click", event => { + event.preventDefault(); event.stopPropagation(); + openProjection(productsResult.items, opportunity, badge); + }); return badge; } @@ -7754,7 +7897,6 @@ function createProductsDetails({ const number = String(optyNumber); if (productsContentState.expandedProductOptyNumbers.has(number)) return; productsContentState.expandedProductOptyNumbers.add(number); - requestGenerateAiSummary(number); renderOpportunitiesTable(); } @@ -7811,7 +7953,6 @@ function createProductsDetails({ summary.textContent = productsResult && productsResult.fromCache ? "Cached" : "Updated"; heading.append(title, summary); panel.append(heading); - panel.append(createAiSummaryAlert(optyNumber)); if (productsResult && productsResult.error) { const error = document.createElement("p"); @@ -7906,7 +8047,7 @@ function createProductsDetails({ return Number.isFinite(number) ? `${number}%` : "-"; } - return { expandProducts, createProductsRampBadge, createProductsCountButton, createProductsDetailRow, formatProductNumber, formatProductAmount, formatProductWinProbability }; + return { isBooking, expandProducts, createProductsRampBadge, createProductsCountButton, createProductsDetailRow, formatProductNumber, formatProductAmount, formatProductWinProbability }; } // Source: src/features/products/ramp-projection.js @@ -8045,6 +8186,15 @@ function createRampProjectionView({ MODAL_ID, compare, createAlertIcon, createCl } function createIndicator(product, opportunity) { const result = compare(product); + if (!product?.workload) { + const disabled = node("button", "opportunities-extension-icon-button opportunities-extension-projection-alert"); + disabled.type = "button"; + disabled.disabled = true; + disabled.title = "No Workload is available for this product."; + disabled.setAttribute("aria-label", disabled.title); + disabled.append(createAlertIcon()); + return disabled; + } if (result.status !== "divergent") { const text = node("span", "opportunities-extension-projection-status", result.status === "matched" ? "OK" : "-"); text.title = result.status === "matched" ? "Monthly forecast matches the ramp calculation." : result.reason; @@ -8081,10 +8231,10 @@ function createRampProjectionView({ MODAL_ID, compare, createAlertIcon, createCl }); return indicator; } - function open(product, opportunity, trigger) { + function open(product, opportunity, trigger, products = []) { const host = document.getElementById(MODAL_ID); const result = compare(product); - if (!host || host.hidden || result.status !== "divergent") return; + if (!host || host.hidden || !product) return; close(false); const modal = node("section", "opportunities-extension-action-form-modal opportunities-extension-projection-modal"); modal.setAttribute("role", "dialog"); @@ -8104,12 +8254,25 @@ function createRampProjectionView({ MODAL_ID, compare, createAlertIcon, createCl dismiss.addEventListener("click", () => close()); header.append(heading, dismiss); const body = node("div", "opportunities-extension-projection-body"); + let productSelect = null; + if (products.length > 1) { + const label = node("label", "", "Product "); + productSelect = node("select", "opportunities-extension-projection-product"); + productSelect.setAttribute("aria-label", "Product"); + products.forEach((item, index) => { + const option = node("option", "", `${item.ProdGroupName || "Product"} | ${item.WorkloadName_c || item.RevnId || index + 1}`); + option.value = String(index); option.selected = item === product; + productSelect.append(option); + }); + productSelect.addEventListener("change", () => open(products[Number(productSelect.value)], opportunity, trigger, products)); + label.append(productSelect); body.append(label); + } const details = node("dl", "opportunities-extension-projection-context"); const currency = product.RevnAmountCurcyCode || "USD"; for (const [label, value] of [ ["Customer", opportunity.CustomerAccount?.PartyUniqueName || "-"], ["Product", product.ProdGroupName || "-"], - ["Annual value", formatAmount(result.annual, currency)], ["Ramp months", String(result.ramp)], - ["Consumption start", formatDate(result.start)], ["First month", `${result.firstMonthDays}/${result.firstMonthTotalDays} days`] + ["Annual value", result.annual == null ? "-" : formatAmount(result.annual, currency)], ["Ramp months", String(result.ramp ?? "-")], + ["Consumption start", result.start ? formatDate(result.start) : "-"], ["First month", result.firstMonthDays == null ? "-" : `${result.firstMonthDays}/${result.firstMonthTotalDays} days`] ]) details.append(node("dt", "", label), node("dd", "", value)); body.append(details); const summary = node("p", "opportunities-extension-projection-summary", `${result.divergentCount} month${result.divergentCount === 1 ? "" : "s"} with a difference`); @@ -8154,6 +8317,7 @@ function createRampProjectionView({ MODAL_ID, compare, createAlertIcon, createCl body.append(errorMessage); const footer = node("footer", "opportunities-extension-projection-footer"); const updateButton = node("button", "opportunities-extension-projection-update", "Update estimates"); + updateButton.disabled = result.status !== "divergent"; updateButton.type = "button"; footer.append(node("span", "", "Difference = forecast - calculated."), updateButton); dialog.append(header, body, footer); @@ -8238,7 +8402,7 @@ function createRampProjectionView({ MODAL_ID, compare, createAlertIcon, createCl modal.addEventListener("keydown", event => { if (event.key === "Escape") { event.preventDefault(); event.stopPropagation(); close(); } if (event.key === "Tab") { - const controls = [dismiss, viewport, ...table.querySelectorAll("button"), updateButton].filter(control => !control.disabled); + const controls = [dismiss, productSelect, viewport, ...table.querySelectorAll("button"), updateButton].filter(control => control && !control.disabled); const index = controls.indexOf(document.activeElement); if (index < 0 || (event.shiftKey ? index === 0 : index === controls.length - 1)) { event.preventDefault(); controls[event.shiftKey ? controls.length - 1 : 0].focus(); @@ -8250,111 +8414,6 @@ function createRampProjectionView({ MODAL_ID, compare, createAlertIcon, createCl return { createIndicator, createOpportunityIndicator, open, close }; } -// Source: src/features/ai-summary/content.js -function createAiSummaryContent({ - aiSummaryState, - invalidateSalesCommonToken, - logRequestFailure, - logRequestStart, - logRequestSuccess, - readResponseBodyForDebug, - requestTokenRelaySalesCommon, - environment -}) { - const { document, fetch } = environment; - function requestGenerateAiSummary(optyNumber) { - const key = String(optyNumber); - const existing = aiSummaryState.aiSummariesByOptyNumber.get(key); - if (existing && existing.status === "loading") { - return existing.promise; - } - - const state = { status: "loading", summaryText: "", error: "", promise: null }; - aiSummaryState.aiSummariesByOptyNumber.set(key, state); - state.promise = (async () => { - let entry; - try { - let token = await requestTokenRelaySalesCommon(); - if (!token) { - throw new Error("Authentication is required to generate the summary."); - } - const path = "/api/sales-common/gen-ai/v1/summarizations/generate"; - const url = `https://eeho.fa.us2.oraclecloud.com${path}`; - const payload = { path, promptCode: "cx.sales.generate_opportunity_summary", object: "opportunities", puid: key }; - let response; - for (let attempt = 0; attempt < 2; attempt += 1) { - const headers = { Accept: "application/json", Authorization: `Bearer ${token}`, "Content-Type": "application/json" }; - entry = logRequestStart({ - name: "requestGenerateAiSummary", method: "POST", url, headers, - body: JSON.stringify(payload, null, 2), metadata: { optyNumber: key, attempt: attempt + 1 } - }); - response = await fetch(url, { - method: "POST", credentials: "include", headers, body: JSON.stringify(payload) - }); - logRequestSuccess(entry, response, await readResponseBodyForDebug(response)); - if (response.status !== 401 && response.status !== 403) { - break; - } - // A late failure for an old token must not discard a newly refreshed token. - invalidateSalesCommonToken(token); - if (attempt === 0) { - token = await requestTokenRelaySalesCommon(); - } - } - if (!response.ok) { - throw new Error(`requestGenerateAiSummary failed with status ${response.status}.`); - } - let data; - try { - data = await response.json(); - } catch (error) { - throw new Error("requestGenerateAiSummary returned an invalid JSON response."); - } - if (!data || typeof data.summaryText !== "string" || !data.summaryText.trim()) { - throw new Error("requestGenerateAiSummary returned an empty summary."); - } - state.summaryText = data.summaryText; - state.status = "ready"; - } catch (error) { - state.status = "error"; - state.error = error.message || "Unable to generate the AI summary."; - if (entry) { - logRequestFailure(entry, state.error); - } - } finally { - // Update only visible summaries, without reopening rows or rebuilding the table. - document.querySelectorAll(".opportunities-extension-ai-summary").forEach((alert) => { - if (alert.dataset.optyNumber === key) { - alert.replaceWith(createAiSummaryAlert(key)); - } - }); - } - })(); - return state.promise; - } - - function createAiSummaryAlert(optyNumber) { - const state = aiSummaryState.aiSummariesByOptyNumber.get(optyNumber); - const alert = document.createElement("div"); - alert.className = "opportunities-extension-ai-summary"; - alert.dataset.optyNumber = optyNumber; - alert.setAttribute("role", "status"); - alert.setAttribute("aria-live", "polite"); - alert.setAttribute("aria-busy", String(!state || state.status === "loading")); - const title = document.createElement("strong"); - title.textContent = "Summary generated by AI"; - const description = document.createElement("p"); - description.textContent = !state || state.status === "loading" - ? "Generating summary..." - : state.status === "error" ? state.error : state.summaryText; - alert.classList.toggle("opportunities-extension-ai-summary-error", Boolean(state && state.status === "error")); - alert.append(title, description); - return alert; - } - - return { requestGenerateAiSummary, createAiSummaryAlert }; -} - // Source: src/features/consumption/plans-action.js function createConsumptionPlansAction({ messageTypes, @@ -10667,11 +10726,13 @@ function createDebugContentLog({ }; debugState.requestLog.push(entry); + debugState.persist(entry); renderDebugPanel(); return entry; } function logRequestSuccess(entry, response, responseBody) { + if (!debugState.requestLog.includes(entry)) return; entry.status = response.ok ? "success" : "failed"; entry.completedAt = new Date(); entry.durationMs = entry.completedAt.getTime() - entry.startedAt.getTime(); @@ -10680,14 +10741,17 @@ function createDebugContentLog({ entry.responseHeaders = headersToObject(response.headers); entry.responseBody = responseBody.value; entry.responseBodyTruncated = responseBody.truncated; + debugState.persist(entry); renderDebugPanel(); } function logRequestFailure(entry, errorMessage) { + if (!debugState.requestLog.includes(entry)) return; entry.status = "failed"; entry.completedAt = new Date(); entry.durationMs = entry.completedAt.getTime() - entry.startedAt.getTime(); entry.error = errorMessage; + debugState.persist(entry); renderDebugPanel(); } @@ -10722,6 +10786,7 @@ function createDebugContentLog({ }; if (existing) Object.assign(existing, normalized); else debugState.requestLog.push(normalized); + debugState.persist(existing || normalized); }); renderDebugPanel(); } @@ -10857,12 +10922,13 @@ function createDebugContentView({ const categories = [ ["all", "All"], ["authentication", "Authentication"], ["opportunities", "Opportunities"], ["contacts", "Contacts"], ["products", "Products"], - ["ai", "AI"], ["consumption", "Consumption"], ["installBase", "Installed Base"], + ["consumption", "Consumption"], ["installBase", "Installed Base"], ["serviceRequests", "Service Requests"], ["actions", "Actions"], ["other", "Other"] ]; let selectedCategory = "all"; const expandedIds = new Set(); let returnFocus = null; + let generation = -1; function getRequestCategory(entry) { if (/^request(?:CurrentUser|TokenRelay|ConsumerTokenService|CustomerTokenService)/.test(entry.name)) return "authentication"; @@ -10870,7 +10936,6 @@ function createDebugContentView({ if (["requestQueryAccountContact", "requestPersistContact"].includes(entry.name)) return "contacts"; if (entry.name === "requestOpptyProducts") return "products"; if (["requestWlActions", "requestActionTeamMembers", "requestActionFindLookup", "requestMgmtAction"].includes(entry.name)) return "actions"; - if (entry.name === "requestGenerateAiSummary") return "ai"; if (entry.name === "requestInstallBase") return "installBase"; if (["requestSRInfo", "requestLookupTypePlatform", "requestInternalSrServices", "requestPostInternalServiceRequest"].includes(entry.name)) return "serviceRequests"; if (["requestCustomerServiceRequest", "resquestCrmServiceRequest", "requestInternalServiceRequest", "requestSrLookupPrimaryPillar", "requestSrLookupLanguage", "requestSrLookupTechPlatform", "requestSrLookupOpportunityBusiness", "requestResourceUser", "requestSrCatalog", "requestSrTokenCatalog", "requestPostServiceRequest"].includes(entry.name)) return "serviceRequests"; @@ -10899,6 +10964,7 @@ function createDebugContentView({ closeDebugPanel(); return; } + debugState.reload(); returnFocus = document.activeElement; // Escape nested stacking contexts and inert containers created by child modals. modal.append(panel); @@ -10912,6 +10978,8 @@ function createDebugContentView({ const panel = document.getElementById(DEBUG_PANEL_ID); if (!panel) return; panel.hidden = true; + panel.textContent = ""; + panel.onkeydown = null; if (returnFocus?.isConnected) returnFocus.focus({ preventScroll: true }); returnFocus = null; } @@ -10923,6 +10991,7 @@ function createDebugContentView({ return; } + if (generation !== debugState.generation) { expandedIds.clear(); selectedCategory = "all"; generation = debugState.generation; } for (const item of panel.querySelectorAll("details[data-request-id]")) { const id = item.getAttribute("data-request-id"); if (item.open) expandedIds.add(id); @@ -10947,7 +11016,8 @@ function createDebugContentView({ title.textContent = "Debug Requests"; const summary = document.createElement("p"); - summary.textContent = `${debugState.requestLog.length} request${debugState.requestLog.length === 1 ? "" : "s"} since modal opened.`; + summary.textContent = `${debugState.requestLog.length} request${debugState.requestLog.length === 1 ? "" : "s"} in the current query history.`; + if (debugState.storageError) summary.textContent += ` ${debugState.storageError}`; const running = debugState.requestLog.filter(entry => entry.status === "pending").length; if (running) summary.textContent += ` ${running} running.`; heading.append(title, summary); @@ -11083,6 +11153,9 @@ function createDebugContentView({ heading.append(name, summaryMeta); + item.append(heading); + const renderDetails = () => { + if (!item.open || item.children.length > 1) return; const lines = [ `${entry.method} ${entry.url}`, `Started: ${formatDebugTime(entry.startedAt)}`, @@ -11101,7 +11174,17 @@ function createDebugContentView({ appendDebugBlock(details, "Response Headers", formatHeaderBlock(entry.responseHeaders)); appendDebugBlock(details, "Response Body", formatDebugBody(entry.responseBody, entry.name)); - item.append(heading, details); + item.append(details); + + }; + item.addEventListener("toggle", () => { + if (item.open) { expandedIds.add(String(entry.id)); renderDetails(); } + else { + expandedIds.delete(String(entry.id)); + item.querySelector(".opportunities-extension-debug-details")?.remove(); + } + }); + renderDetails(); list.append(item); }); @@ -11227,7 +11310,7 @@ function createContentApplication(overrides = {}) { navigator: globalThis.navigator, crypto: globalThis.crypto, get localStorage() { return globalThis.localStorage; }, - fetch: globalThis.fetch, + fetch: globalThis.fetch && ((...args) => globalThis.fetch.call(undefined, ...args)), browser: globalThis.browser, chrome: globalThis.chrome, MutationObserver: globalThis.MutationObserver, @@ -11235,8 +11318,9 @@ function createContentApplication(overrides = {}) { requestAnimationFrame: globalThis.requestAnimationFrame, performance: globalThis.performance, cancelAnimationFrame: globalThis.cancelAnimationFrame, - setTimeout: globalThis.setTimeout, - clearTimeout: globalThis.clearTimeout, + setTimeout: globalThis.setTimeout && ((...args) => globalThis.setTimeout.call(undefined, ...args)), + clearTimeout: globalThis.clearTimeout && ((...args) => globalThis.clearTimeout.call(undefined, ...args)), + AbortController: globalThis.AbortController, matchMedia: globalThis.matchMedia, ...overrides }; @@ -11250,7 +11334,6 @@ function createContentApplication(overrides = {}) { const contracts = createContentContracts(); const searchableSelect = createSearchableSelect({ environment }); const authSessionState = createAuthSessionState(contracts); - const authSalesCommonState = createAuthSalesCommonState(); const opportunitiesQueryState = createOpportunitiesQueryState(); const tableSorting = createTableSorting({ environment }); const orgChartIcons = createOrgChartIcons({ environment }); @@ -11279,11 +11362,10 @@ function createContentApplication(overrides = {}) { const preferencesState = createPreferencesState(contracts); const activityCache = createActivityCache({ authSessionState, preferencesState, environment }); const productsContentState = createProductsContentState(); - const aiSummaryState = createAiSummaryState(); const consumptionPlansState = createConsumptionPlansState(); const consumptionTrendState = createConsumptionTrendState(); const opportunitiesDashboardState = createOpportunitiesDashboardState(contracts); - const debugState = createDebugState(); + const debugState = createDebugState(environment); const columns = createOpportunitiesColumns({ formatOracleResponseDate: (...args) => opportunitiesFormatters.formatOracleResponseDate(...args), formatRevenue: (...args) => opportunitiesFormatters.formatRevenue(...args), @@ -11449,11 +11531,6 @@ function createContentApplication(overrides = {}) { sendRuntimeMessage: (...args) => platformContentMessages.sendRuntimeMessage(...args), updateAuthBadge: (...args) => contentModal.updateAuthBadge(...args) }); - const authSalesCommon = createAuthSalesCommon({ - TOKEN_RELAY_URL: contracts.TOKEN_RELAY_URL, - authSalesCommonState, - requestTokenRelay: (...args) => authTokenRelay.requestTokenRelay(...args) - }); const authTokenRelay = createAuthTokenRelay({ authSessionState, TOKEN_RELAY_URL: contracts.TOKEN_RELAY_URL, @@ -11501,6 +11578,7 @@ function createContentApplication(overrides = {}) { setOpportunitiesTableState: (...args) => opportunitiesTable.setOpportunitiesTableState(...args) }); const fusionOpportunities = createFusionOpportunities({ + resetDebugRequests: () => debugState.reset(), OPPORTUNITIES_PAGE_LIMIT: contracts.OPPORTUNITIES_PAGE_LIMIT, OPPORTUNITIES_QUERY_URL: contracts.OPPORTUNITIES_QUERY_URL, isCurrentPeriodRequest: (...args) => opportunitiesController.isCurrentPeriodRequest(...args), @@ -11592,11 +11670,14 @@ function createContentApplication(overrides = {}) { isCurrentPeriodRequest: (...args) => opportunitiesController.isCurrentPeriodRequest(...args), environment }); const opportunityCalendar = createOpportunityCalendar({ + productTypeSelection: opportunitiesFilterState.selectedProductTypes, + onProductTypeChange: () => opportunitiesTable.renderOpportunitiesTable(), createViewIcon: view => contentIcons.createViewIcon(view), environment, loadLibrary: () => loadOpportunityCalendarLibrary(), getState: () => opportunitiesTableState.opportunitiesTableState, getItems: () => opportunitiesFilters.getSortedOpportunities(), getVersion: () => opportunitiesQueryState.periodRequestVersion, + getRange: () => opportunitiesQueryState.dateRange, formatRevenue: item => opportunitiesFormatters.formatRevenue(item), formatDate: value => opportunitiesFormatters.formatOracleResponseDate(value), getOwnerName: item => opportunitiesFormatters.getOwnerName(item), @@ -11651,6 +11732,13 @@ function createContentApplication(overrides = {}) { environment }); const opportunitiesFilters = createOpportunitiesFilters({ + matchesProductType: item => { + const selected = opportunitiesFilterState.selectedProductTypes; + if (selected.size === 2) return true; + const result = productsContentState.opptyProductsByNumber.get(String(item.OptyNumber)); + if (!result || result.error) return false; + return selected.has(productsDetails.isBooking(result.items) ? "Booking" : "Workload"); + }, matchesActivities: item => activityFilters.matches(item), CUSTOMER_FILTER_BUTTON_ID: contracts.CUSTOMER_FILTER_BUTTON_ID, CUSTOMER_FILTER_LIST_ID: contracts.CUSTOMER_FILTER_LIST_ID, @@ -11718,7 +11806,7 @@ function createContentApplication(overrides = {}) { const refreshAll = createRefreshAll({ createRefreshIcon: () => contentIcons.createRefreshIcon(), messageTypes, activityCache, opportunitiesQueryState, productsContentState, - consumptionPlansState, consumptionTrendState, aiSummaryState, environment, + consumptionPlansState, consumptionTrendState, environment, sendRuntimeMessage: (...args) => platformContentMessages.sendRuntimeMessage(...args), reload: (...args) => opportunitiesController.requestOpportunitiesForPeriod(...args), onFailure: error => opportunitiesTable.setOpportunitiesTableState({ status: "error", message: error.message || "Unable to refresh cached data." }), @@ -11739,7 +11827,8 @@ function createContentApplication(overrides = {}) { opportunitiesTable.setOpportunitiesTableState({ status: "loading", message: "Refreshing data..." }); } }); - const activityProgress = createActivityProgress({ MODAL_ID: contracts.MODAL_ID, environment }); + const activityProgress = createActivityProgress({ MODAL_ID: contracts.MODAL_ID, environment, + retrySession: () => srSessionPreparation.retry() }); const srSessionPreparation = createSrSessionPreparation({ async onReady() { const result = await platformContentMessages.sendRuntimeMessage({ type: messageTypes.requestResourceUser, emailAddress: currentUser.getUserId() }); @@ -11833,13 +11922,12 @@ function createContentApplication(overrides = {}) { }); const productsDetails = createProductsDetails({ createProjectionIndicator: (...args) => rampProjectionView.createIndicator(...args), + openProjection: (products, opportunity, trigger) => rampProjectionView.open(products[0], opportunity, trigger, products), setBadgeContent: (...args) => opportunityBadgeContent.setContent(...args), OPPORTUNITIES_COLUMNS: columns, - createAiSummaryAlert: (...args) => aiSummaryContent.createAiSummaryAlert(...args), formatOracleResponseDate: (...args) => opportunitiesFormatters.formatOracleResponseDate(...args), productsContentState, renderOpportunitiesTable: (...args) => opportunitiesTable.renderOpportunitiesTable(...args), - requestGenerateAiSummary: (...args) => aiSummaryContent.requestGenerateAiSummary(...args), environment }); const rampProjection = createRampProjection(); @@ -11867,16 +11955,6 @@ function createContentApplication(overrides = {}) { formatDate: value => opportunitiesFormatters.formatOracleResponseDate(value), environment }); - const aiSummaryContent = createAiSummaryContent({ - aiSummaryState, - invalidateSalesCommonToken: (...args) => authSalesCommon.invalidateSalesCommonToken(...args), - logRequestFailure: (...args) => debugContentLog.logRequestFailure(...args), - logRequestStart: (...args) => debugContentLog.logRequestStart(...args), - logRequestSuccess: (...args) => debugContentLog.logRequestSuccess(...args), - readResponseBodyForDebug: (...args) => debugContentLog.readResponseBodyForDebug(...args), - requestTokenRelaySalesCommon: (...args) => authSalesCommon.requestTokenRelaySalesCommon(...args), - environment - }); const customerTableSearch = createCustomerTableSearch({ environment }); const installBaseView = createInstallBaseView({ tableSorting, @@ -12032,13 +12110,11 @@ function createContentApplication(overrides = {}) { opportunityWorkloadActions, fusionCrmServiceRequests, opportunityCrmServiceRequests, authSessionState, - authSalesCommonState, opportunitiesQueryState, opportunitiesTableState, opportunitiesFilterState, preferencesState, productsContentState, - aiSummaryState, consumptionPlansState, consumptionTrendState, opportunitiesDashboardState, @@ -12050,7 +12126,6 @@ function createContentApplication(overrides = {}) { contentStyles, authContentSession, currentUser, - authSalesCommon, authTokenRelay, authXsrfContent, platformContentMessages, @@ -12075,7 +12150,6 @@ function createContentApplication(overrides = {}) { rampProjection, workloadForecastUpdate, rampProjectionView, - aiSummaryContent, consumptionPlansAction, installBaseAction, installBaseView, diff --git a/dist/firefox/background.js b/dist/firefox/background.js index f09134a..a137362 100644 --- a/dist/firefox/background.js +++ b/dist/firefox/background.js @@ -1553,7 +1553,7 @@ function createFusionSrDetails({ fetchJson, tabsCreate, tabsRemove, supportsFire let session = sessions.get(key); if (!session) { const details = { - url: "https://comcipapic-oalprod.integration.ocp.oraclecloud.com/ic/builder/rt/SeaaS_initiation/live/webApps/external/", + url: "https://comcipapic-oalprod.integration.ocp.oraclecloud.com/ic/builder/rt/oalset_semc/live/webApps/Dashboard/?page=shell&shell=main&main=manageresourcerequests", active: false }; if (Number.isInteger(sender?.tab?.windowId)) details.windowId = sender.tab.windowId; @@ -1570,8 +1570,8 @@ function createFusionSrDetails({ fetchJson, tabsCreate, tabsRemove, supportsFire let tab; try { tab = await session.tab; - const deadline = Date.now() + 60000; - for (let attempt = 0; attempt < 240 && Date.now() < deadline; attempt += 1) { + const deadline = Date.now() + 70000; + for (let attempt = 0; attempt < 280 && Date.now() < deadline; attempt += 1) { const pendingCookies = initialize && attempt === 0 ? sessionCookies(sender) : waitForSessionCookies(session, sender); const cookies = await (initialize ? Promise.race([session.cookieReady, pendingCookies]) : pendingCookies); @@ -1590,7 +1590,7 @@ function createFusionSrDetails({ fetchJson, tabsCreate, tabsRemove, supportsFire if (error.httpStatus !== 401) throw error; } } - throw new Error("Service Request session could not be established after 60 seconds. Sign in to Oracle and retry."); + throw new Error("Service Request session could not be established after 70 seconds. Sign in to Oracle and retry."); } catch (error) { error.debugRequests = logs; throw error; @@ -1879,12 +1879,29 @@ function createFusionSrCreate({ fetchJson, tokenHeaders, previewTokenHeaders, in } // Source: src/services/spa/current-user.js -function createSpaCurrentUser({ fetchJson, fetchInTab, openSessionTab, waitForSession, closeSessionTab, sessionUrl }) { +function createSpaCurrentUser({ fetchJson, fetchInTab, openSessionTab, waitForSession, closeSessionTab, sessionUrl, sessionStorage }) { const pending = new Map(); + const identities = new Map(); function requestCurrentUser(sender) { - const key = JSON.stringify([sender?.tab?.windowId ?? null, sender?.tab?.cookieStoreId ?? "", Boolean(sender?.tab?.incognito)]); + // Windows share cookies; Firefox containers and private sessions do not. + const key = JSON.stringify([sender?.tab?.cookieStoreId ?? "", Boolean(sender?.tab?.incognito)]); + if (identities.has(key)) return Promise.resolve({ ok: true, user: identities.get(key), debugRequests: [] }); if (!pending.has(key)) { - pending.set(key, loadCurrentUser(sender).finally(() => pending.delete(key))); + pending.set(key, (async () => { + const storageKey = `opportunities-extension-current-user:${key}`; + try { + const stored = (await sessionStorage?.get(storageKey))?.[storageKey]; + if (stored && typeof stored.id === "string" && stored.id.trim() && typeof stored.name === "string" && stored.name.trim() + && Array.isArray(stored.roles) && stored.roles.every(role => typeof role === "string" && role.trim())) { + identities.set(key, stored); + return { ok: true, user: stored, debugRequests: [] }; + } + } catch { /* Memory cache still works if session storage is unavailable. */ } + const result = await loadCurrentUser(sender); + identities.set(key, result.user); + try { await sessionStorage?.set({ [storageKey]: result.user }); } catch { /* Keep the successful in-memory identity. */ } + return result; + })().finally(() => pending.delete(key))); } return pending.get(key); } @@ -3370,6 +3387,7 @@ function createBackgroundApplication(overrides = {}) { getHttp: () => httpBackgroundJson }); const spaCurrentUser = createSpaCurrentUser({ + sessionStorage: (environment.browser || environment.chrome)?.storage?.session, fetchJson: (...args) => httpBackgroundJson.fetchJson(...args), fetchInTab: (tab, logs) => spaPageClient.requestIdentity(tab, logs), openSessionTab: sender => authConsumerSession.openConsumerTokenSessionTab(sender), diff --git a/dist/firefox/content.js b/dist/firefox/content.js index 5d9238a..fb27c07 100644 --- a/dist/firefox/content.js +++ b/dist/firefox/content.js @@ -1,6 +1,6 @@ (function () { "use strict"; -const redwoodStyles = "\n .opportunities-extension-scroll-lock {\n overflow: hidden !important;\n }\n\n .opportunities-extension-modal,\n .opportunities-extension-modal * {\n box-sizing: border-box;\n font-family: \"Oracle Sans\", Arial, Helvetica, sans-serif;\n }\n\n .opportunities-extension-modal {\n position: fixed;\n inset: 0;\n z-index: 2147483647;\n background: #f5f4f2;\n color: #000000;\n }\n\n .opportunities-extension-modal[hidden] {\n display: none !important;\n }\n\n .opportunities-extension-shell {\n height: 100vh;\n min-height: 0;\n display: grid;\n grid-template-rows: auto minmax(0, 1fr);\n background: #f5f4f2;\n }\n\n .opportunities-extension-header {\n position: relative;\n display: flex;\n align-items: flex-start;\n justify-content: space-between;\n gap: 24px;\n padding: 28px 40px 22px;\n border-bottom: 1px solid #dedbd7;\n background:\n linear-gradient(90deg, #8f624a 0 11%, #c74634 11% 23%, #6f5a7f 23% 36%, #00758f 36% 51%, #d4b06a 51% 63%, transparent 63% 100%) top left / 100% 6px no-repeat,\n #ffffff;\n }\n\n .opportunities-extension-header::before {\n position: absolute;\n left: 40px;\n bottom: -1px;\n width: 64px;\n height: 3px;\n background: #00758f;\n content: \"\";\n }\n\n .opportunities-extension-header h1 {\n margin: 0;\n color: #000000;\n font-size: 24px;\n font-weight: 700;\n line-height: 1.2;\n letter-spacing: 0;\n }\n\n .opportunities-extension-header p {\n margin: 0;\n color: #5f5a55;\n font-size: 14px;\n line-height: 1.4;\n }\n\n .opportunities-extension-subtitle-row {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: 8px;\n margin-top: 6px;\n }\n\n .opportunities-extension-auth-badge {\n display: inline-flex;\n align-items: center;\n min-height: 22px;\n padding: 2px 8px;\n border-radius: 999px;\n color: #ffffff;\n font-size: 12px;\n font-weight: 700;\n line-height: 1.2;\n }\n\n .opportunities-extension-auth-badge-authenticated {\n background: #3f6f17;\n }\n\n .opportunities-extension-auth-badge-unauthenticated {\n background: #c5331f;\n }\n\n .opportunities-extension-auth-badge-pending {\n background: #6f5a7f;\n }\n\n .opportunities-extension-products-progress {\n display: inline-flex;\n align-items: center;\n min-height: 22px;\n padding: 2px 8px;\n border-radius: 999px;\n background: #e8f4f6;\n color: #006d7a;\n font-size: 12px;\n font-weight: 700;\n line-height: 1.2;\n }\n\n .opportunities-extension-products-progress[hidden] {\n display: none !important;\n }\n\n .opportunities-extension-products-cache-timestamp {\n display: inline-flex;\n align-items: center;\n min-height: 22px;\n padding: 2px 8px;\n border-radius: 999px;\n background: #f0eeeb;\n color: #5f5a55;\n font-size: 11px;\n font-weight: 600;\n line-height: 1.2;\n }\n\n .opportunities-extension-products-cache-timestamp[hidden] {\n display: none !important;\n }\n\n .opportunities-extension-products-progress[data-state=\"running\"]::before {\n width: 12px;\n height: 12px;\n margin-right: 6px;\n border: 2px solid currentColor;\n border-right-color: transparent;\n border-radius: 50%;\n content: \"\";\n animation: opportunities-extension-spin .8s linear infinite;\n }\n\n .opportunities-extension-products-progress[data-state=\"complete\"] {\n background: #e2f2e5;\n color: #356d19;\n }\n\n .opportunities-extension-products-progress[data-state=\"complete-with-errors\"],\n .opportunities-extension-products-progress[data-state=\"error\"] {\n background: #f9e3e1;\n color: #a52b1c;\n }\n\n @keyframes opportunities-extension-spin {\n to { transform: rotate(360deg); }\n }\n\n .opportunities-extension-icon-button {\n width: 36px;\n height: 36px;\n flex: 0 0 36px;\n border: 1px solid transparent;\n border-radius: 4px;\n background: transparent;\n color: #312d2a;\n font-size: 18px;\n font-weight: 600;\n line-height: 1;\n cursor: pointer;\n }\n\n .opportunities-extension-header-actions {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n }\n\n .opportunities-extension-icon-button svg {\n width: 18px;\n height: 18px;\n vertical-align: middle;\n }\n\n .opportunities-extension-icon-button .opportunities-extension-settings-icon {\n width: 20px;\n height: 20px;\n }\n\n .opportunities-extension-icon-button:hover,\n .opportunities-extension-icon-button:focus {\n border-color: #b8b2ad;\n background: #f5f4f2;\n outline: none;\n }\n\n .opportunities-extension-body {\n display: grid;\n min-height: 0;\n grid-template-rows: auto auto minmax(0, 1fr);\n gap: 16px;\n padding: 22px 40px 36px;\n background: #f5f4f2;\n overflow: hidden;\n }\n\n .opportunities-extension-form {\n display: flex;\n align-items: end;\n flex-wrap: wrap;\n gap: 24px;\n min-height: 82px;\n max-width: none;\n margin: 0;\n padding: 14px 16px;\n border: 1px solid #dedbd7;\n border-radius: 4px;\n background: #ffffff;\n }\n\n .opportunities-extension-field {\n display: grid;\n max-width: max-content;\n min-width: 270px;\n width: max-content;\n gap: 6px;\n color: #312d2a;\n font-size: 13px;\n font-weight: 600;\n line-height: 1.3;\n }\n\n .opportunities-extension-stage-dashboard {\n display: grid;\n grid-template-columns: repeat(6, minmax(0, 1fr));\n gap: 12px;\n }\n\n .opportunities-extension-stage-dashboard-card {\n display: grid;\n gap: 6px;\n min-width: 0;\n padding: 12px 16px;\n border: 1px solid #dedbd7;\n border-top: 3px solid #5f5a55;\n border-radius: 4px;\n background: #ffffff;\n }\n\n .opportunities-extension-stage-dashboard-card span {\n color: #5f5a55;\n font-size: 11px;\n font-weight: 700;\n line-height: 1.2;\n }\n\n .opportunities-extension-stage-dashboard-value {\n overflow: hidden;\n color: #312d2a;\n font-size: 22px;\n font-weight: 700;\n line-height: 1.2;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n .opportunities-extension-stage-dashboard-card[data-stage=\"SQL\"] {\n border-top-color: #008aa6;\n }\n\n .opportunities-extension-total-dashboard-card {\n border-top-color: #312d2a;\n }\n\n .opportunities-extension-stage-dashboard-card[data-stage=\"PIPELINE\"] {\n border-top-color: #6f6863;\n }\n\n .opportunities-extension-stage-dashboard-card[data-stage=\"UPSIDE\"] {\n border-top-color: #c87b00;\n }\n\n .opportunities-extension-stage-dashboard-card[data-stage=\"FORECAST\"] {\n border-top-color: #755b8b;\n }\n\n .opportunities-extension-stage-dashboard-card[data-stage=\"WON\"] {\n border-top-color: #4b7f22;\n }\n\n .opportunities-extension-stage-filter {\n display: grid;\n grid-template-rows: auto 44px;\n gap: 6px;\n min-width: 0;\n }\n\n .opportunities-extension-stage-filter-label {\n color: #312d2a;\n font-size: 13px;\n font-weight: 600;\n line-height: 1.3;\n }\n\n .opportunities-extension-stage-filter-controls {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: 8px;\n }\n\n .opportunities-extension-stage-filter-button {\n min-height: 36px;\n padding: 6px 12px;\n border: 1px solid currentColor;\n border-radius: 18px;\n background: #ffffff;\n color: #5f5a55;\n font-size: 12px;\n font-weight: 700;\n letter-spacing: 0;\n line-height: 1.2;\n cursor: pointer;\n }\n\n .opportunities-extension-stage-filter-button[data-stage=\"SQL\"] {\n color: #006b84;\n }\n\n .opportunities-extension-stage-filter-button[data-stage=\"PIPELINE\"] {\n color: #5f5a55;\n }\n\n .opportunities-extension-stage-filter-button[data-stage=\"UPSIDE\"] {\n color: #945400;\n }\n\n .opportunities-extension-stage-filter-button[data-stage=\"FORECAST\"] {\n color: #624e74;\n }\n\n .opportunities-extension-stage-filter-button[data-stage=\"WON\"] {\n color: #3f6f17;\n }\n\n .opportunities-extension-stage-filter-button[aria-pressed=\"true\"][data-stage=\"SQL\"] {\n border-color: #006b84;\n background: #006b84;\n color: #ffffff;\n }\n\n .opportunities-extension-stage-filter-button[aria-pressed=\"true\"][data-stage=\"PIPELINE\"] {\n border-color: #5f5a55;\n background: #5f5a55;\n color: #ffffff;\n }\n\n .opportunities-extension-stage-filter-button[aria-pressed=\"true\"][data-stage=\"UPSIDE\"] {\n border-color: #945400;\n background: #945400;\n color: #ffffff;\n }\n\n .opportunities-extension-stage-filter-button[aria-pressed=\"true\"][data-stage=\"FORECAST\"] {\n border-color: #624e74;\n background: #624e74;\n color: #ffffff;\n }\n\n .opportunities-extension-stage-filter-button[aria-pressed=\"true\"][data-stage=\"WON\"] {\n border-color: #3f6f17;\n background: #3f6f17;\n color: #ffffff;\n }\n\n .opportunities-extension-stage-filter-button:focus-visible {\n outline: 2px solid #00758f;\n outline-offset: 2px;\n }\n\n .opportunities-extension-status-filter {\n display: grid;\n grid-template-rows: auto 44px;\n gap: 6px;\n min-width: 0;\n }\n\n .opportunities-extension-status-filter-label {\n color: #312d2a;\n font-size: 13px;\n font-weight: 600;\n line-height: 1.3;\n }\n\n .opportunities-extension-status-filter-controls {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: 8px;\n }\n\n .opportunities-extension-status-filter-button {\n min-height: 36px;\n padding: 6px 12px;\n border: 1px solid currentColor;\n border-radius: 18px;\n background: #ffffff;\n font-size: 12px;\n font-weight: 700;\n letter-spacing: 0;\n line-height: 1.2;\n cursor: pointer;\n }\n\n .opportunities-extension-status-filter-button[data-status=\"OPEN\"] {\n color: #197a3d;\n }\n\n .opportunities-extension-status-filter-button[data-status=\"CLOSED\"] {\n color: #4b5563;\n }\n\n .opportunities-extension-status-filter-button[data-status=\"LOST\"] {\n color: #b13b34;\n }\n\n .opportunities-extension-status-filter-button[data-status=\"WON\"] {\n color: #1f5f99;\n }\n\n .opportunities-extension-status-filter-button[aria-pressed=\"true\"][data-status=\"OPEN\"] {\n border-color: #197a3d;\n background: #197a3d;\n color: #ffffff;\n }\n\n .opportunities-extension-status-filter-button[aria-pressed=\"true\"][data-status=\"CLOSED\"] {\n border-color: #4b5563;\n background: #4b5563;\n color: #ffffff;\n }\n\n .opportunities-extension-status-filter-button[aria-pressed=\"true\"][data-status=\"LOST\"] {\n border-color: #b13b34;\n background: #b13b34;\n color: #ffffff;\n }\n\n .opportunities-extension-status-filter-button[aria-pressed=\"true\"][data-status=\"WON\"] {\n border-color: #1f5f99;\n background: #1f5f99;\n color: #ffffff;\n }\n\n .opportunities-extension-status-filter-button:focus-visible {\n outline: 2px solid #00758f;\n outline-offset: 2px;\n }\n\n .opportunities-extension-customer-filter {\n position: relative;\n display: grid;\n grid-template-rows: auto 44px;\n gap: 6px;\n min-width: 220px;\n }\n\n .opportunities-extension-customer-filter-label {\n color: #312d2a;\n font-size: 13px;\n font-weight: 600;\n line-height: 1.3;\n }\n\n .opportunities-extension-customer-filter-trigger {\n position: relative;\n min-width: 220px;\n min-height: 44px;\n padding: 10px 38px 10px 12px;\n border: 1px solid #b8b2ad;\n border-radius: 3px;\n background: #ffffff;\n color: #312d2a;\n font-size: 14px;\n line-height: 1.3;\n text-align: left;\n cursor: pointer;\n }\n\n .opportunities-extension-customer-filter-trigger::after {\n position: absolute;\n top: 50%;\n right: 16px;\n width: 0;\n height: 0;\n border-top: 6px solid #312d2a;\n border-right: 5px solid transparent;\n border-left: 5px solid transparent;\n content: \"\";\n pointer-events: none;\n transform: translateY(-50%);\n }\n\n .opportunities-extension-customer-filter-trigger:disabled {\n cursor: not-allowed;\n background: #f5f4f2;\n color: #7d7772;\n }\n\n .opportunities-extension-customer-filter-trigger:focus-visible {\n border-color: #312d2a;\n box-shadow: 0 0 0 1px #312d2a;\n outline: none;\n }\n\n .opportunities-extension-customer-filter-panel {\n position: absolute;\n top: calc(100% + 8px);\n left: 0;\n z-index: 4;\n display: grid;\n width: min(360px, calc(100vw - 80px));\n gap: 10px;\n padding: 12px;\n border: 1px solid #8f8a85;\n border-radius: 4px;\n background: #ffffff;\n box-shadow: 0 4px 12px rgba(0, 0, 0, .18);\n }\n\n .opportunities-extension-customer-filter-panel[hidden] {\n display: none !important;\n }\n\n .opportunities-extension-customer-filter-search {\n width: 100%;\n min-height: 40px;\n padding: 8px 10px;\n border: 1px solid #b8b2ad;\n border-radius: 3px;\n background: #ffffff;\n color: #312d2a;\n font-size: 14px;\n }\n\n .opportunities-extension-customer-filter-search:focus {\n border-color: #312d2a;\n box-shadow: 0 0 0 1px #312d2a;\n outline: none;\n }\n\n .opportunities-extension-customer-filter-select-all,\n .opportunities-extension-customer-filter-option {\n display: flex;\n align-items: center;\n gap: 8px;\n color: #312d2a;\n font-size: 13px;\n line-height: 1.35;\n }\n\n .opportunities-extension-customer-filter-select-all {\n min-height: 32px;\n padding-bottom: 8px;\n border-bottom: 1px solid #dedbd7;\n font-weight: 700;\n }\n\n .opportunities-extension-customer-filter-panel input[type=\"checkbox\"] {\n width: 16px;\n height: 16px;\n flex: 0 0 16px;\n accent-color: #00758f;\n }\n\n .opportunities-extension-customer-filter-list {\n display: block;\n max-height: 250px;\n overflow: auto;\n }\n\n .opportunities-extension-customer-filter-option {\n display: grid;\n grid-template-columns: 16px minmax(0, 1fr);\n align-items: start;\n min-height: 0;\n height: auto !important;\n padding: 8px 4px;\n cursor: pointer;\n }\n\n .opportunities-extension-customer-filter-option input[type=\"checkbox\"] {\n margin-top: 1px;\n }\n\n .opportunities-extension-customer-filter-option span {\n display: block;\n min-width: 0;\n line-height: 18px;\n overflow-wrap: anywhere;\n white-space: normal;\n }\n\n .opportunities-extension-customer-filter-option:hover {\n background: #f5f4f2;\n }\n\n .opportunities-extension-customer-filter-empty {\n margin: 4px 0;\n color: #5f5a55;\n font-size: 13px;\n }\n\n .opportunities-extension-table-search-field {\n display: grid;\n grid-template-rows: auto 44px;\n gap: 6px;\n width: 260px;\n color: #312d2a;\n font-size: 13px;\n font-weight: 600;\n line-height: 1.3;\n }\n\n .opportunities-extension-table-search-field input {\n width: 100%;\n min-height: 44px;\n padding: 10px 12px;\n border: 1px solid #b8b2ad;\n border-radius: 3px;\n background: #ffffff;\n color: #312d2a;\n font-size: 14px;\n line-height: 1.3;\n }\n\n .opportunities-extension-table-search-field input:focus {\n border-color: #312d2a;\n box-shadow: 0 0 0 1px #312d2a;\n outline: none;\n }\n\n .opportunities-extension-select-wrap {\n position: relative;\n display: block;\n width: 270px;\n max-width: 100%;\n }\n\n .opportunities-extension-select-wrap::after {\n position: absolute;\n top: 50%;\n right: 16px;\n width: 0;\n height: 0;\n border-left: 5px solid transparent;\n border-right: 5px solid transparent;\n border-top: 6px solid #000000;\n content: \"\";\n pointer-events: none;\n transform: translateY(-50%);\n }\n\n .opportunities-extension-field select {\n width: 100%;\n min-width: 0;\n max-width: 100%;\n min-height: 44px;\n box-sizing: border-box;\n appearance: none;\n border: 1px solid #b8b2ad;\n border-radius: 3px;\n background: #ffffff;\n color: #000000;\n font-size: 14px;\n line-height: 1.3;\n padding: 11px 44px 11px 12px;\n }\n\n .opportunities-extension-field select:focus {\n border-color: #312d2a;\n box-shadow: 0 0 0 1px #312d2a;\n outline: none;\n }\n\n .opportunities-extension-table-surface {\n min-height: 0;\n height: 100%;\n border: 1px solid #dedbd7;\n border-radius: 4px;\n background: #ffffff;\n overflow-x: auto;\n overflow-y: auto;\n }\n\n .opportunities-extension-table {\n width: 100%;\n min-width: 0;\n border-collapse: collapse;\n table-layout: fixed;\n color: #312d2a;\n font-size: 13px;\n line-height: 1.35;\n }\n\n .opportunities-extension-table thead {\n background: #faf9f8;\n }\n\n .opportunities-extension-table th {\n position: sticky;\n top: 0;\n z-index: 1;\n height: 44px;\n border-bottom: 1px solid #b8b2ad;\n background: #faf9f8;\n color: #312d2a;\n font-size: 12px;\n font-weight: 700;\n text-align: left;\n white-space: nowrap;\n }\n\n .opportunities-extension-table td {\n min-height: 48px;\n padding: 12px 16px;\n border-bottom: 1px solid #ebe8e5;\n vertical-align: middle;\n overflow-wrap: anywhere;\n }\n\n .opportunities-extension-table th:nth-child(1) {\n width: 16%;\n }\n\n .opportunities-extension-table th:nth-child(2) {\n width: 8%;\n }\n\n .opportunities-extension-table th:nth-child(3) {\n width: 18%;\n }\n\n .opportunities-extension-table th:nth-child(4) {\n width: 11%;\n }\n\n .opportunities-extension-table th:nth-child(5) {\n width: 8%;\n }\n\n .opportunities-extension-table th:nth-child(6) {\n width: 8%;\n }\n\n .opportunities-extension-table th:nth-child(7) {\n width: 7%;\n }\n\n .opportunities-extension-table th:nth-child(8) {\n width: 6%;\n }\n\n .opportunities-extension-table th:nth-child(9) {\n width: 7%;\n }\n\n .opportunities-extension-table th:nth-child(10) {\n width: 7%;\n }\n\n .opportunities-extension-table th:nth-child(11) {\n width: 4%;\n }\n\n .opportunities-extension-table td:nth-child(2),\n .opportunities-extension-table td:nth-child(5),\n .opportunities-extension-table td:nth-child(6),\n .opportunities-extension-table td:nth-child(8) {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n .opportunities-extension-table td:nth-child(9) {\n padding-right: 6px;\n padding-left: 6px;\n white-space: nowrap;\n overflow: visible;\n }\n\n .opportunities-extension-table td:nth-child(7) {\n padding-right: 6px;\n padding-left: 6px;\n white-space: nowrap;\n overflow: visible;\n }\n\n .opportunities-extension-table td:nth-child(10) {\n padding-right: 6px;\n padding-left: 6px;\n font-size: 12px;\n white-space: nowrap;\n }\n\n .opportunities-extension-table td:nth-child(11) {\n padding-right: 6px;\n padding-left: 6px;\n text-align: center;\n white-space: nowrap;\n }\n\n .opportunities-extension-table tbody tr:hover {\n background: #f7f6f4;\n }\n\n .opportunities-extension-table tbody tr:last-child td {\n border-bottom: 0;\n }\n\n .opportunities-extension-table a {\n color: #006b84;\n text-decoration: underline;\n text-decoration-thickness: 1px;\n text-underline-offset: 2px;\n }\n\n .opportunities-extension-table a:hover {\n color: #004f63;\n }\n\n .opportunities-extension-opty-number-content {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n max-width: 100%;\n }\n\n .opportunities-extension-name-content {\n display: flex;\n align-items: center;\n gap: 8px;\n min-width: 0;\n }\n\n .opportunities-extension-name-content > a {\n min-width: 0;\n }\n\n .opportunities-extension-actions-content {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 4px;\n white-space: nowrap;\n }\n\n .opportunities-extension-products-count {\n display: inline-grid;\n width: auto;\n min-width: 20px;\n height: 20px;\n place-items: center;\n flex: 0 0 auto;\n box-sizing: border-box;\n padding: 0 3px;\n border: 1px solid #7ca7b2;\n border-radius: 999px;\n background: #e8f4f6;\n color: #006d7a;\n font-size: 10px;\n font-weight: 700;\n line-height: 1;\n text-align: center;\n vertical-align: middle;\n cursor: pointer;\n }\n\n .opportunities-extension-products-count:hover,\n .opportunities-extension-products-count:focus-visible,\n .opportunities-extension-products-count[aria-expanded=\"true\"] {\n border-color: #00758f;\n background: #00758f;\n color: #ffffff;\n outline: none;\n }\n\n .opportunities-extension-products-count-error {\n border-color: #d8887e;\n background: #f9e3e1;\n color: #a52b1c;\n }\n\n .opportunities-extension-products-detail-row:hover {\n background: transparent !important;\n }\n\n .opportunities-extension-products-detail-cell {\n padding: 0 !important;\n }\n\n .opportunities-extension-products-detail {\n padding: 14px 20px 18px;\n border-bottom: 1px solid #c9c5c1;\n background: #f0eeeb;\n }\n\n .opportunities-extension-products-detail-heading {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 12px;\n margin-bottom: 10px;\n color: #312d2a;\n }\n\n .opportunities-extension-ai-summary {\n box-sizing: border-box;\n width: 100%;\n min-width: 0;\n margin: 0 0 12px;\n padding: 12px 16px;\n border: 1px solid #dedbd7;\n border-radius: 6px;\n background: #ffffff;\n color: #312d2a;\n font-size: 13px;\n line-height: 1.5;\n text-align: left;\n white-space: normal;\n overflow-wrap: anywhere;\n }\n\n .opportunities-extension-ai-summary strong {\n display: block;\n font-size: 13px;\n font-weight: 600;\n }\n\n .opportunities-extension-ai-summary p {\n margin: 4px 0 0;\n font: inherit;\n white-space: pre-wrap;\n }\n\n .opportunities-extension-ai-summary-error {\n color: #b42318;\n border-color: #d9928b;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-ai-summary {\n background: #292827;\n color: #f6f4f2;\n border-color: #5f5a55;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-ai-summary-error {\n color: #ffb4ab;\n border-color: #a45c55;\n }\n\n .opportunities-extension-products-detail-heading strong {\n font-size: 13px;\n }\n\n .opportunities-extension-products-detail-heading span {\n color: #5f5a55;\n font-size: 11px;\n font-weight: 600;\n text-transform: uppercase;\n }\n\n .opportunities-extension-products-table {\n width: 100%;\n table-layout: fixed;\n border-collapse: collapse;\n border: 1px solid #dedbd7;\n background: #ffffff;\n font-size: 12px;\n }\n\n .opportunities-extension-products-table th,\n .opportunities-extension-products-table td {\n position: static;\n height: auto;\n padding: 8px 10px;\n border-bottom: 1px solid #ebe8e5;\n background: transparent;\n overflow-wrap: anywhere;\n vertical-align: middle;\n white-space: normal;\n }\n\n .opportunities-extension-products-table th {\n background: #faf9f8;\n font-size: 11px;\n }\n\n .opportunities-extension-products-table th:nth-child(1) { width: 16%; }\n .opportunities-extension-products-table th:nth-child(2) { width: 16%; }\n .opportunities-extension-products-table th:nth-child(3) { width: 8%; }\n .opportunities-extension-products-table th:nth-child(4) { width: 10%; }\n .opportunities-extension-products-table th:nth-child(5) { width: 8%; }\n .opportunities-extension-products-table th:nth-child(6) { width: 8%; }\n .opportunities-extension-products-table th:nth-child(7) { width: 7%; }\n .opportunities-extension-products-table th:nth-child(8) { width: 10%; }\n .opportunities-extension-products-table th:nth-child(9) { width: 12%; }\n .opportunities-extension-products-table th:nth-child(10) { width: 5%; }\n\n .opportunities-extension-products-empty {\n margin: 0;\n padding: 10px 0;\n color: #5f5a55;\n font-size: 13px;\n }\n\n .opportunities-extension-copy-button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex: 0 0 auto;\n width: 24px;\n height: 24px;\n padding: 3px;\n border: 0;\n border-radius: 3px;\n background: transparent;\n color: #00758f;\n cursor: pointer;\n }\n\n .opportunities-extension-copy-button svg {\n width: 16px;\n height: 16px;\n fill: currentColor;\n }\n\n .opportunities-extension-copy-button:hover,\n .opportunities-extension-copy-button:focus-visible {\n background: #e8f4f6;\n color: #004f63;\n outline: none;\n }\n\n .opportunities-extension-action-button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 32px;\n height: 32px;\n padding: 5px;\n border: 1px solid transparent;\n border-radius: 4px;\n background: transparent;\n color: #00758f;\n cursor: pointer;\n }\n\n .opportunities-extension-action-button svg {\n width: 21px;\n height: 21px;\n }\n\n .opportunities-extension-action-button:hover,\n .opportunities-extension-action-button:focus-visible {\n border-color: #7ca7b2;\n background: #e8f4f6;\n color: #004f63;\n outline: none;\n }\n\n .opportunities-extension-action-button:disabled {\n cursor: wait;\n opacity: .72;\n }\n\n .opportunities-extension-action-button-loading svg {\n animation: opportunities-extension-pulse 1s ease-in-out infinite;\n }\n\n @keyframes opportunities-extension-pulse {\n 50% { opacity: .35; }\n }\n\n .opportunities-extension-copy-toast {\n position: fixed;\n right: 28px;\n bottom: 28px;\n z-index: 3;\n max-width: min(360px, calc(100vw - 56px));\n padding: 12px 16px;\n border-radius: 4px;\n background: #2f6f18;\n box-shadow: 0 4px 12px rgba(0, 0, 0, .18);\n color: #ffffff;\n font-size: 13px;\n font-weight: 700;\n }\n\n .opportunities-extension-copy-toast-error {\n background: #a52b1c;\n }\n\n .opportunities-extension-copy-toast[hidden] {\n display: none !important;\n }\n\n .opportunities-extension-stage-badge {\n display: inline-flex;\n align-items: center;\n min-height: 24px;\n padding: 3px 8px;\n border-radius: 12px;\n background: #ebe8e5;\n color: #312d2a;\n font-size: 11px;\n font-weight: 700;\n line-height: 1.2;\n white-space: nowrap;\n }\n\n .opportunities-extension-stage-badge[data-stage=\"SQL\"] {\n background: #d9f0f5;\n color: #006b84;\n }\n\n .opportunities-extension-stage-badge[data-stage=\"PIPELINE\"] {\n background: #ebe8e5;\n color: #5f5a55;\n }\n\n .opportunities-extension-stage-badge[data-stage=\"UPSIDE\"] {\n background: #fff0d8;\n color: #945400;\n }\n\n .opportunities-extension-stage-badge[data-stage=\"FORECAST\"] {\n background: #eee8f5;\n color: #624e74;\n }\n\n .opportunities-extension-stage-badge[data-stage=\"WON\"] {\n background: #e5f1d9;\n color: #3f6f17;\n }\n\n .opportunities-extension-status-badge {\n display: inline-flex;\n align-items: center;\n min-height: 24px;\n padding: 3px 8px;\n border-radius: 12px;\n background: #ebe8e5;\n color: #312d2a;\n font-size: 11px;\n font-weight: 700;\n line-height: 1.2;\n white-space: nowrap;\n }\n\n .opportunities-extension-status-badge[data-status=\"OPEN\"] {\n background: #e2f2e5;\n color: #197a3d;\n }\n\n .opportunities-extension-status-badge[data-status=\"CLOSED\"] {\n background: #e5e7eb;\n color: #4b5563;\n }\n\n .opportunities-extension-status-badge[data-status=\"LOST\"] {\n background: #f9e3e1;\n color: #b13b34;\n }\n\n .opportunities-extension-status-badge[data-status=\"WON\"] {\n background: #e3edf8;\n color: #1f5f99;\n }\n\n .opportunities-extension-sort-button {\n position: relative;\n display: inline-flex;\n align-items: center;\n width: 100%;\n min-height: 44px;\n padding: 8px 42px 8px 16px;\n border: 0;\n background: transparent;\n color: inherit;\n font: inherit;\n font-weight: inherit;\n letter-spacing: 0;\n line-height: 1.2;\n text-align: left;\n white-space: normal;\n cursor: pointer;\n }\n\n .opportunities-extension-table-header-label {\n display: inline-flex;\n align-items: center;\n min-height: 44px;\n padding: 8px 6px;\n }\n\n .opportunities-extension-sort-button::after {\n position: absolute;\n right: 15px;\n color: #5f5a55;\n content: \"↕\";\n font-size: 16px;\n font-weight: 400;\n }\n\n .opportunities-extension-sort-button[data-sort-direction=\"ascending\"]::after {\n color: #00758f;\n content: \"↑\";\n }\n\n .opportunities-extension-sort-button[data-sort-direction=\"descending\"]::after {\n color: #00758f;\n content: \"↓\";\n }\n\n .opportunities-extension-sort-button:hover {\n background: #f0eeeb;\n }\n\n .opportunities-extension-sort-button:focus-visible {\n outline: 2px solid #00758f;\n outline-offset: -2px;\n }\n\n .opportunities-extension-table-status {\n height: 152px;\n color: #5f5a55;\n font-size: 14px;\n text-align: center;\n }\n\n .opportunities-extension-visually-hidden {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border: 0;\n }\n\n .opportunities-extension-preferences-modal {\n position: absolute;\n inset: 0;\n z-index: 3;\n display: grid;\n place-items: center;\n padding: 24px;\n background: rgba(0, 0, 0, .42);\n }\n\n .opportunities-extension-preferences-modal[hidden] {\n display: none !important;\n }\n\n .opportunities-extension-account-plans-modal {\n position: absolute;\n inset: 0;\n z-index: 4;\n display: grid;\n place-items: center;\n padding: 12px;\n background: rgba(0, 0, 0, .42);\n }\n\n .opportunities-extension-account-plans-modal[hidden] {\n display: none !important;\n }\n\n .opportunities-extension-account-plans-dialog {\n display: grid;\n width: min(1180px, 100%);\n height: min(760px, calc(100vh - 24px));\n min-width: 0;\n grid-template-rows: auto minmax(0, 1fr);\n grid-template-columns: minmax(0, 1fr);\n overflow: hidden;\n border: 1px solid #8f8a85;\n border-radius: 4px;\n background: #ffffff;\n box-shadow: 0 8px 24px rgba(0, 0, 0, .24);\n color: #312d2a;\n }\n\n .opportunities-extension-account-plans-header {\n display: flex;\n align-items: flex-start;\n justify-content: space-between;\n gap: 16px;\n padding: 14px 20px;\n border-bottom: 1px solid #dedbd7;\n }\n\n .opportunities-extension-account-plans-header h2 {\n margin: 0;\n font-size: 20px;\n line-height: 1.2;\n }\n\n .opportunities-extension-account-plans-header p {\n margin: 5px 0 0;\n color: #5f5a55;\n font-size: 13px;\n line-height: 1.35;\n }\n\n .opportunities-extension-account-plans-content {\n display: grid;\n min-width: 0;\n grid-template-rows: auto minmax(0, 1fr);\n grid-template-columns: minmax(0, 1fr);\n min-height: 0;\n overflow: hidden;\n }\n\n .opportunities-extension-account-plans-content > .opportunities-extension-account-plans-skeleton {\n grid-row: 1 / -1;\n }\n\n .opportunities-extension-account-plans-tabs-navigation {\n position: relative;\n min-width: 0;\n border-bottom: 1px solid #dedbd7;\n }\n\n .opportunities-extension-account-plans-tabs-navigation .opportunities-extension-account-plans-tab-navigation-button[hidden] {\n display: none;\n }\n\n .opportunities-extension-account-plans-tabs {\n display: flex;\n min-width: 0;\n gap: 4px;\n overflow-x: auto;\n padding: 8px 20px 0;\n scrollbar-width: none;\n }\n\n .opportunities-extension-account-plans-tabs::-webkit-scrollbar {\n display: none;\n }\n\n .opportunities-extension-account-plans-tab-navigation-button {\n display: grid;\n position: absolute;\n z-index: 1;\n top: 50%;\n width: 32px;\n height: 32px;\n place-items: center;\n padding: 0;\n border: 1px solid #8f8a85;\n border-radius: 4px;\n background: #ffffff;\n color: #312d2a;\n box-shadow: 0 2px 6px rgba(0, 0, 0, .16);\n transform: translateY(-50%);\n cursor: pointer;\n }\n\n .opportunities-extension-account-plans-tab-navigation-button:first-child {\n left: 8px;\n }\n\n .opportunities-extension-account-plans-tab-navigation-button:last-child {\n right: 8px;\n }\n\n .opportunities-extension-account-plans-tab-navigation-button:hover:not(:disabled) {\n border-color: #00758f;\n background: #f0eeeb;\n color: #005e73;\n }\n\n .opportunities-extension-account-plans-tab-navigation-button:disabled {\n border-color: #dedbd7;\n color: #b8b2ad;\n cursor: default;\n }\n\n .opportunities-extension-account-plans-tab-navigation-button:focus-visible {\n outline: 2px solid #00758f;\n outline-offset: 2px;\n }\n\n .opportunities-extension-account-plans-tab-navigation-button svg {\n width: 18px;\n height: 18px;\n }\n\n .opportunities-extension-account-plans-panels {\n min-width: 0;\n min-height: 0;\n overflow: hidden;\n }\n\n .opportunities-extension-account-plan-tab {\n min-height: 38px;\n flex: 0 0 auto;\n padding: 7px 12px;\n border: 0;\n border-bottom: 3px solid transparent;\n background: transparent;\n color: #5f5a55;\n font-size: 13px;\n font-weight: 600;\n cursor: pointer;\n }\n\n .opportunities-extension-account-plan-tab:hover {\n background: #f0eeeb;\n color: #312d2a;\n }\n\n .opportunities-extension-account-plan-tab[aria-selected=\"true\"] {\n border-bottom-color: #00758f;\n color: #006d7a;\n }\n\n .opportunities-extension-account-plan-tab:focus-visible {\n outline: 2px solid #00758f;\n outline-offset: -2px;\n }\n\n .opportunities-extension-account-plan-panel {\n display: grid;\n height: 100%;\n min-height: 0;\n grid-template-rows: auto minmax(0, 1fr);\n box-sizing: border-box;\n padding: 16px 20px;\n }\n\n .opportunities-extension-account-plan-panel[hidden] {\n display: none !important;\n }\n\n .opportunities-extension-account-plan-details {\n display: grid;\n grid-template-columns: repeat(3, minmax(0, 1fr));\n gap: 0 24px;\n margin: 0;\n }\n\n .opportunities-extension-account-plan-details > div {\n display: grid;\n grid-template-columns: minmax(104px, 38%) minmax(0, 1fr);\n gap: 10px;\n min-height: 42px;\n align-items: center;\n padding: 7px 0;\n border-bottom: 1px solid #ebe8e5;\n }\n\n .opportunities-extension-account-plan-details dt {\n color: #5f5a55;\n font-size: 12px;\n font-weight: 700;\n }\n\n .opportunities-extension-account-plan-details dd {\n min-width: 0;\n margin: 0;\n color: #312d2a;\n font-size: 13px;\n overflow-wrap: anywhere;\n }\n\n .opportunities-extension-consumption-trend {\n display: grid;\n min-height: 0;\n grid-template-rows: auto minmax(0, 1fr);\n margin-top: 14px;\n padding-top: 12px;\n border-top: 1px solid #dedbd7;\n }\n\n .opportunities-extension-consumption-trend-header {\n display: flex;\n align-items: center;\n justify-content: flex-end;\n gap: 24px;\n }\n\n .opportunities-extension-consumption-periods {\n display: flex;\n align-items: center;\n gap: 4px;\n }\n\n .opportunities-extension-consumption-periods button {\n min-height: 38px;\n padding: 7px 14px;\n border: 1px solid transparent;\n border-radius: 4px;\n background: transparent;\n color: #312d2a;\n font-size: 13px;\n font-weight: 600;\n line-height: 1.2;\n cursor: pointer;\n }\n\n .opportunities-extension-consumption-periods button:hover {\n background: #f0eeeb;\n }\n\n .opportunities-extension-consumption-periods button[aria-pressed=\"true\"] {\n border-color: #00758f;\n background: #e7f6f8;\n color: #005e73;\n }\n\n .opportunities-extension-consumption-periods button:focus-visible,\n .opportunities-extension-consumption-navigation-button:focus-visible {\n outline: 2px solid #00758f;\n outline-offset: 2px;\n }\n\n .opportunities-extension-consumption-chart {\n display: grid;\n min-height: 0;\n grid-template-rows: auto minmax(0, 1fr);\n margin-top: 4px;\n }\n\n .opportunities-extension-consumption-navigation {\n display: grid;\n grid-template-columns: 36px minmax(130px, auto) 36px;\n align-items: center;\n justify-content: center;\n gap: 8px;\n min-height: 40px;\n margin-bottom: 2px;\n }\n\n .opportunities-extension-consumption-navigation strong {\n color: #312d2a;\n font-size: 13px;\n text-align: center;\n }\n\n .opportunities-extension-consumption-navigation-button {\n display: grid;\n width: 36px;\n height: 36px;\n place-items: center;\n padding: 0;\n border: 1px solid #8f8a85;\n border-radius: 4px;\n background: #ffffff;\n color: #312d2a;\n cursor: pointer;\n }\n\n .opportunities-extension-consumption-navigation-button:hover:not(:disabled) {\n border-color: #00758f;\n background: #f0eeeb;\n color: #005e73;\n }\n\n .opportunities-extension-consumption-navigation-button:disabled {\n border-color: #dedbd7;\n color: #b8b2ad;\n cursor: default;\n }\n\n .opportunities-extension-consumption-navigation-button svg {\n width: 18px;\n height: 18px;\n }\n\n .opportunities-extension-consumption-figure {\n position: relative;\n min-width: 0;\n min-height: 0;\n margin: 0;\n scrollbar-width: none;\n }\n\n .opportunities-extension-consumption-figure::-webkit-scrollbar {\n display: none;\n }\n\n .opportunities-extension-consumption-visual {\n display: grid;\n height: 100%;\n min-height: 0;\n grid-template-columns: minmax(0, 1fr) 176px;\n align-items: center;\n gap: 16px;\n }\n\n .opportunities-extension-consumption-svg {\n display: block;\n width: 100%;\n height: 300px;\n min-height: 0;\n overflow: visible;\n }\n\n .opportunities-extension-consumption-svg .consumption-grid-line {\n stroke: #dedbd7;\n stroke-width: 1;\n shape-rendering: crispEdges;\n }\n\n .opportunities-extension-consumption-svg .consumption-axis-label,\n .opportunities-extension-consumption-svg .consumption-x-label {\n fill: #5f5a55;\n font-family: Arial, sans-serif;\n font-size: 12px;\n }\n\n .opportunities-extension-consumption-svg .consumption-value-label {\n fill: #312d2a;\n font-family: Arial, sans-serif;\n font-size: 12px;\n font-weight: 700;\n }\n\n .opportunities-extension-consumption-svg .consumption-bar-funded {\n fill: #b77888;\n }\n\n .opportunities-extension-consumption-svg .consumption-bar-overage {\n fill: #de7907;\n }\n\n .opportunities-extension-consumption-svg .consumption-average-line {\n stroke: #de7907;\n stroke-width: 1.5;\n stroke-dasharray: 6 6;\n }\n\n .opportunities-extension-consumption-svg .consumption-bar-group {\n cursor: default;\n outline: none;\n }\n\n .opportunities-extension-consumption-svg .consumption-bar-group rect {\n transition: filter .16s ease, opacity .16s ease, stroke .16s ease;\n }\n\n .opportunities-extension-consumption-svg .consumption-bar-group:hover rect,\n .opportunities-extension-consumption-svg .consumption-bar-group:focus rect {\n filter: brightness(1.06);\n stroke: #312d2a;\n stroke-width: 1.5;\n }\n\n .opportunities-extension-consumption-svg .consumption-animated-label {\n opacity: 0;\n animation: opportunities-extension-consumption-label-in .24s ease-out forwards;\n }\n\n .opportunities-extension-consumption-svg .consumption-animated-average {\n opacity: 0;\n animation: opportunities-extension-consumption-average-in .35s .32s ease-out forwards;\n }\n\n @keyframes opportunities-extension-consumption-label-in {\n from { opacity: 0; transform: translateY(4px); }\n to { opacity: 1; transform: translateY(0); }\n }\n\n @keyframes opportunities-extension-consumption-average-in {\n from { opacity: 0; }\n to { opacity: 1; }\n }\n\n .opportunities-extension-consumption-legend {\n display: grid;\n align-content: center;\n gap: 4px;\n }\n\n .opportunities-extension-consumption-legend button {\n display: grid;\n min-width: 0;\n grid-template-columns: 16px minmax(0, 1fr);\n align-items: center;\n gap: 8px;\n padding: 6px 4px;\n border: 0;\n border-radius: 4px;\n background: transparent;\n color: #312d2a;\n font-size: 12px;\n line-height: 1.25;\n text-align: left;\n cursor: pointer;\n }\n\n .opportunities-extension-consumption-legend button:hover {\n background: #f0eeeb;\n }\n\n .opportunities-extension-consumption-legend button:focus-visible {\n outline: 2px solid #00758f;\n outline-offset: 1px;\n }\n\n .opportunities-extension-consumption-legend button[aria-pressed=\"false\"] {\n color: #77726d;\n opacity: .55;\n }\n\n .opportunities-extension-consumption-legend-swatch {\n display: block;\n width: 12px;\n height: 12px;\n justify-self: center;\n }\n\n .opportunities-extension-consumption-legend-funded {\n background: #b77888;\n }\n\n .opportunities-extension-consumption-legend-overage {\n background: #de7907;\n }\n\n .opportunities-extension-consumption-legend-average {\n height: 0;\n border-top: 2px dashed #de7907;\n }\n\n .opportunities-extension-consumption-tooltip {\n position: absolute;\n z-index: 2;\n display: grid;\n min-width: 190px;\n max-width: 260px;\n gap: 4px;\n padding: 10px 12px;\n border: 1px solid #8f8a85;\n border-radius: 4px;\n background: #ffffff;\n box-shadow: 0 4px 12px rgba(0, 0, 0, .2);\n color: #312d2a;\n font-size: 12px;\n line-height: 1.3;\n pointer-events: none;\n }\n\n .opportunities-extension-consumption-tooltip[hidden] {\n display: none !important;\n }\n\n .opportunities-extension-consumption-tooltip strong {\n margin-bottom: 2px;\n font-size: 13px;\n }\n\n .opportunities-extension-consumption-chart-skeleton {\n height: 100%;\n min-height: 0;\n padding: 34px 62px 24px;\n box-sizing: border-box;\n }\n\n .opportunities-extension-consumption-chart-skeleton-plot {\n display: flex;\n height: 100%;\n min-height: 220px;\n align-items: flex-end;\n justify-content: space-around;\n gap: 12px;\n padding: 0 14px;\n border-bottom: 1px solid #dedbd7;\n border-left: 1px solid #dedbd7;\n }\n\n .opportunities-extension-consumption-chart-skeleton-plot span {\n width: min(38px, 6%);\n border-radius: 2px 2px 0 0;\n background: #dedbd7;\n animation: opportunities-extension-skeleton-pulse 1.15s ease-in-out infinite alternate;\n }\n\n .opportunities-extension-consumption-chart-empty,\n .opportunities-extension-consumption-chart-error {\n display: grid;\n min-height: 220px;\n place-items: center;\n margin: 0;\n color: #5f5a55;\n font-size: 14px;\n text-align: center;\n }\n\n .opportunities-extension-consumption-chart-error {\n color: #9f2d20;\n }\n\n .opportunities-extension-account-plan-status-indicator {\n display: inline-block;\n width: 10px;\n height: 10px;\n border-radius: 50%;\n background: #9b9691;\n box-shadow: 0 0 0 3px #efedeb;\n vertical-align: middle;\n }\n\n .opportunities-extension-account-plan-status-indicator[data-active=\"true\"] {\n background: #3f6f17;\n box-shadow: 0 0 0 3px #e2f2e5;\n }\n\n .opportunities-extension-account-plan-tab .opportunities-extension-account-plan-status-indicator {\n margin-right: 8px;\n }\n\n .opportunities-extension-account-plans-skeleton-tabs {\n display: flex;\n min-height: 46px;\n align-items: center;\n padding: 0 20px;\n border-bottom: 1px solid #dedbd7;\n }\n\n .opportunities-extension-account-plans-skeleton {\n display: grid;\n height: 100%;\n min-height: 0;\n grid-template-rows: auto minmax(0, 1fr);\n overflow: hidden;\n }\n\n .opportunities-extension-account-plans-skeleton-panel {\n padding: 16px 20px;\n }\n\n .opportunities-extension-account-plans-skeleton-tab {\n display: inline-flex;\n align-items: center;\n gap: 9px;\n min-height: 38px;\n padding: 0 12px;\n border-bottom: 3px solid #00758f;\n }\n\n .opportunities-extension-account-plans-skeleton-status {\n display: block;\n width: 10px;\n height: 10px;\n flex: 0 0 auto;\n border-radius: 50%;\n background: #dedbd7;\n box-shadow: 0 0 0 3px #efedeb;\n animation: opportunities-extension-skeleton-pulse 1.15s ease-in-out infinite alternate;\n }\n\n .opportunities-extension-account-plans-skeleton-details {\n display: grid;\n grid-template-columns: repeat(3, minmax(0, 1fr));\n gap: 0 24px;\n padding: 0;\n }\n\n .opportunities-extension-account-plans-skeleton-details > div {\n display: grid;\n grid-template-columns: minmax(104px, 38%) minmax(0, 1fr);\n align-items: center;\n gap: 10px;\n min-height: 42px;\n padding: 7px 0;\n border-bottom: 1px solid #ebe8e5;\n }\n\n .opportunities-extension-account-plans-skeleton-bar {\n display: block;\n height: 12px;\n border-radius: 3px;\n background: #dedbd7;\n animation: opportunities-extension-skeleton-pulse 1.15s ease-in-out infinite alternate;\n }\n\n .opportunities-extension-account-plans-skeleton-tabs .opportunities-extension-account-plans-skeleton-bar {\n height: 14px;\n }\n\n .opportunities-extension-account-plans-skeleton-label {\n width: 74%;\n height: 10px;\n }\n\n .opportunities-extension-account-plans-skeleton-trend {\n display: grid;\n min-height: 0;\n grid-template-rows: auto auto minmax(0, 1fr);\n margin: 14px 0 0;\n padding-top: 12px;\n border-top: 1px solid #dedbd7;\n }\n\n .opportunities-extension-account-plans-skeleton-trend-header {\n display: flex;\n justify-content: flex-end;\n min-height: 38px;\n }\n\n .opportunities-extension-account-plans-skeleton-periods {\n display: flex;\n align-items: center;\n gap: 16px;\n }\n\n .opportunities-extension-account-plans-skeleton-periods .opportunities-extension-account-plans-skeleton-bar {\n height: 12px;\n }\n\n .opportunities-extension-account-plans-skeleton-period-active {\n height: 38px !important;\n border: 1px solid #8cc8d3;\n background: #e7f6f8;\n }\n\n .opportunities-extension-account-plans-skeleton-navigation {\n display: grid;\n grid-template-columns: 32px 124px 32px;\n align-items: center;\n justify-content: center;\n gap: 8px;\n min-height: 54px;\n }\n\n .opportunities-extension-account-plans-skeleton-navigation .opportunities-extension-account-plans-skeleton-bar {\n justify-self: center;\n }\n\n .opportunities-extension-account-plans-skeleton-chart {\n display: grid;\n min-height: 0;\n grid-template-columns: minmax(0, 1fr) 150px;\n align-items: center;\n gap: 28px;\n padding: 12px 14px 0 62px;\n }\n\n .opportunities-extension-account-plans-skeleton-plot {\n display: flex;\n position: relative;\n height: 300px;\n min-height: 0;\n box-sizing: border-box;\n align-items: flex-end;\n justify-content: space-around;\n gap: 12px;\n padding: 0 14px 64px;\n background: repeating-linear-gradient(to bottom, transparent 0, transparent 58px, #ebe8e5 58px, #ebe8e5 59px) left top / 100% 236px no-repeat;\n }\n\n .opportunities-extension-account-plans-skeleton-plot::before,\n .opportunities-extension-account-plans-skeleton-plot::after {\n position: absolute;\n display: block;\n content: \"\";\n background: #dedbd7;\n }\n\n .opportunities-extension-account-plans-skeleton-plot::before {\n top: 0;\n bottom: 64px;\n left: 0;\n width: 1px;\n }\n\n .opportunities-extension-account-plans-skeleton-plot::after {\n right: 0;\n bottom: 64px;\n left: 0;\n height: 1px;\n }\n\n .opportunities-extension-account-plans-skeleton-plot .opportunities-extension-account-plans-skeleton-bar {\n width: min(38px, 7%);\n flex: 0 1 38px;\n border-radius: 2px 2px 0 0;\n }\n\n .opportunities-extension-account-plans-skeleton-legend {\n display: grid;\n align-content: center;\n gap: 18px;\n min-height: 0;\n }\n\n .opportunities-extension-account-plans-skeleton-legend .opportunities-extension-account-plans-skeleton-bar {\n height: 11px;\n }\n\n @keyframes opportunities-extension-skeleton-pulse {\n from { opacity: .48; }\n to { opacity: 1; }\n }\n\n @media (prefers-reduced-motion: reduce) {\n .opportunities-extension-account-plans-skeleton-bar,\n .opportunities-extension-consumption-chart-skeleton-plot span,\n .opportunities-extension-consumption-svg .consumption-animated-label,\n .opportunities-extension-consumption-svg .consumption-animated-average {\n animation: none;\n opacity: 1;\n }\n }\n\n .opportunities-extension-account-plans-empty,\n .opportunities-extension-account-plans-error {\n margin: 0;\n padding: 28px 20px;\n color: #5f5a55;\n font-size: 14px;\n }\n\n .opportunities-extension-account-plans-error {\n color: #9f2d20;\n }\n\n .opportunities-extension-preferences-dialog {\n display: grid;\n width: min(680px, 100%);\n max-height: min(720px, calc(100vh - 48px));\n grid-template-rows: auto minmax(0, 1fr) auto;\n overflow: hidden;\n border: 1px solid #8f8a85;\n border-radius: 4px;\n background: #ffffff;\n box-shadow: 0 8px 24px rgba(0, 0, 0, .24);\n color: #312d2a;\n }\n\n .opportunities-extension-preferences-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 16px;\n padding: 18px 20px;\n border-bottom: 1px solid #dedbd7;\n }\n\n .opportunities-extension-preferences-header h2 {\n margin: 0;\n font-size: 20px;\n font-weight: 700;\n line-height: 1.2;\n }\n\n .opportunities-extension-preferences-content {\n min-height: 0;\n overflow: auto;\n padding: 20px;\n }\n\n .opportunities-extension-preferences-fieldset {\n min-width: 0;\n margin: 0;\n padding: 0;\n border: 0;\n }\n\n .opportunities-extension-preferences-fieldset legend {\n margin-bottom: 12px;\n padding: 0;\n color: #312d2a;\n font-size: 15px;\n font-weight: 700;\n line-height: 1.3;\n }\n\n .opportunities-extension-preferences-options {\n display: grid;\n grid-template-columns: repeat(2, minmax(0, 1fr));\n gap: 4px 20px;\n }\n\n .opportunities-extension-preferences-option {\n display: flex;\n align-items: flex-start;\n gap: 10px;\n min-width: 0;\n padding: 9px 8px;\n border-radius: 4px;\n color: #312d2a;\n font-size: 14px;\n line-height: 1.35;\n cursor: pointer;\n }\n\n .opportunities-extension-preferences-option:hover {\n background: #f0eeeb;\n }\n\n .opportunities-extension-preferences-option input {\n width: 18px;\n height: 18px;\n flex: 0 0 18px;\n margin: 0;\n accent-color: #00758f;\n cursor: pointer;\n }\n\n .opportunities-extension-preferences-cache-field {\n display: grid;\n width: min(280px, 100%);\n gap: 6px;\n margin-top: 24px;\n color: #312d2a;\n font-size: 14px;\n font-weight: 700;\n }\n\n .opportunities-extension-preferences-cache-field select {\n width: 100%;\n height: 40px;\n padding: 0 36px 0 12px;\n border: 1px solid #8f8a85;\n border-radius: 4px;\n background: #ffffff;\n color: #312d2a;\n font-size: 14px;\n font-weight: 400;\n }\n\n .opportunities-extension-preferences-cache-field select:focus {\n border-color: #00758f;\n outline: 2px solid #bde7ee;\n outline-offset: 0;\n }\n\n .opportunities-extension-preferences-footer {\n display: flex;\n justify-content: flex-end;\n padding: 14px 20px;\n border-top: 1px solid #dedbd7;\n }\n\n .opportunities-extension-button {\n min-width: 88px;\n min-height: 36px;\n padding: 7px 16px;\n border: 1px solid transparent;\n border-radius: 4px;\n font-size: 14px;\n font-weight: 600;\n line-height: 1.2;\n cursor: pointer;\n }\n\n .opportunities-extension-button-primary {\n border-color: #00758f;\n background: #00758f;\n color: #ffffff;\n }\n\n .opportunities-extension-button-primary:hover,\n .opportunities-extension-button-primary:focus-visible {\n border-color: #005e73;\n background: #005e73;\n outline: none;\n }\n\n .opportunities-extension-debug-panel {\n position: fixed;\n right: 24px;\n bottom: 24px;\n z-index: 1;\n width: min(640px, calc(100vw - 48px));\n max-height: min(560px, calc(100vh - 120px));\n overflow: auto;\n border: 1px solid #8f8a85;\n border-radius: 4px;\n background: #ffffff;\n box-shadow: 0 2px 8px rgba(0, 0, 0, .16);\n padding: 16px;\n color: #000000;\n }\n\n .opportunities-extension-debug-panel[hidden] {\n display: none !important;\n }\n\n .opportunities-extension-debug-panel h2 {\n margin: 0;\n font-size: 18px;\n font-weight: 700;\n line-height: 1.25;\n }\n\n .opportunities-extension-debug-panel p {\n margin: 4px 0 0;\n color: #5f5a55;\n font-size: 13px;\n }\n\n .opportunities-extension-debug-panel-header {\n display: flex;\n align-items: flex-start;\n justify-content: space-between;\n gap: 12px;\n margin-bottom: 12px;\n }\n\n .opportunities-extension-debug-visibility-button {\n width: 34px;\n height: 34px;\n flex: 0 0 34px;\n color: #312d2a;\n }\n\n .opportunities-extension-debug-visibility-button svg {\n width: 20px;\n height: 20px;\n }\n\n .opportunities-extension-debug-list {\n display: grid;\n gap: 10px;\n }\n\n .opportunities-extension-debug-item {\n border: 1px solid #dedbd7;\n border-left-width: 4px;\n border-radius: 4px;\n background: #faf9f8;\n }\n\n .opportunities-extension-debug-item[open] {\n background: #ffffff;\n }\n\n .opportunities-extension-debug-item-success {\n border-left-color: #3f6f17;\n }\n\n .opportunities-extension-debug-item-success .opportunities-extension-debug-status {\n background: #e2f2e5;\n color: #356d19;\n }\n\n .opportunities-extension-debug-item-failed {\n border-left-color: #c5331f;\n }\n\n .opportunities-extension-debug-item-failed .opportunities-extension-debug-status {\n background: #f9e3e1;\n color: #a52b1c;\n }\n\n .opportunities-extension-debug-item-pending {\n border-left-color: #6f5a7f;\n }\n\n .opportunities-extension-debug-item-pending .opportunities-extension-debug-status {\n background: #eee8f2;\n color: #6f5a7f;\n }\n\n .opportunities-extension-debug-heading {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 12px;\n min-height: 42px;\n padding: 9px 12px 9px 10px;\n cursor: pointer;\n list-style: none;\n }\n\n .opportunities-extension-debug-heading::-webkit-details-marker {\n display: none;\n }\n\n .opportunities-extension-debug-heading::before {\n content: \"⌄\";\n width: 14px;\n color: #5f5a55;\n font-size: 16px;\n line-height: 1;\n transform: rotate(-90deg);\n transition: transform .15s ease;\n }\n\n .opportunities-extension-debug-item[open] .opportunities-extension-debug-heading::before {\n transform: rotate(0deg);\n }\n\n .opportunities-extension-debug-summary-meta {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n margin-left: auto;\n }\n\n .opportunities-extension-debug-http-status,\n .opportunities-extension-debug-status {\n display: inline-flex;\n align-items: center;\n min-height: 22px;\n padding: 0 8px;\n border-radius: 999px;\n font-size: 11px;\n font-weight: 700;\n line-height: 1;\n text-transform: uppercase;\n }\n\n .opportunities-extension-debug-http-status {\n background: #e8f4f6;\n color: #006d7a;\n }\n\n .opportunities-extension-debug-status {\n background: #ebe8e5;\n color: #5f5a55;\n }\n\n .opportunities-extension-debug-heading strong {\n font-size: 13px;\n }\n\n .opportunities-extension-debug-item pre {\n margin: 0;\n padding: 8px 12px 12px;\n color: #312d2a;\n font-family: Consolas, \"Courier New\", monospace;\n font-size: 12px;\n line-height: 1.45;\n white-space: pre-wrap;\n word-break: break-word;\n }\n\n .opportunities-extension-debug-empty {\n padding: 14px;\n border: 1px dashed #b8b2ad;\n border-radius: 4px;\n color: #5f5a55;\n font-size: 13px;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] {\n background: #1f1f1f;\n color: #f6f4f2;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-shell,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-body {\n background: #1f1f1f;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-header {\n border-bottom-color: #4e4a46;\n background:\n linear-gradient(90deg, #a8795d 0 11%, #dd5a47 11% 23%, #876e9b 23% 36%, #00a6be 36% 51%, #dfbd76 51% 63%, transparent 63% 100%) top left / 100% 6px no-repeat,\n #292827;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-header h1,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-stage-dashboard-value,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-table,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-field,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-stage-filter-label,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-status-filter-label,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-customer-filter-label,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-table-search-field {\n color: #f6f4f2;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-header p,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plans-header p,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-stage-dashboard-card span,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-customer-filter-empty,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-products-detail-heading span,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-products-empty,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plans-empty,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plan-details dt,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-debug-panel p,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-debug-empty {\n color: #c9c5c1;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plans-error {\n color: #ffb4a8;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-chart-error {\n color: #ffb4a8;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plans-skeleton-bar {\n background: #5b5753;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plans-skeleton-status {\n background: #5b5753;\n box-shadow: 0 0 0 3px #3b3937;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plans-skeleton-period-active {\n border-color: #3f7580;\n background: #23474e;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-chart-skeleton-plot span {\n background: #5b5753;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plan-status-indicator {\n background: #8f8a85;\n box-shadow: 0 0 0 3px #3b3937;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plan-status-indicator[data-active=\"true\"] {\n background: #7fb05b;\n box-shadow: 0 0 0 3px #314527;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-form,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-stage-dashboard-card,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-table-surface,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-customer-filter-panel,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-preferences-dialog,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plans-dialog,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-products-table,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-debug-panel,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-debug-item[open] {\n border-color: #4e4a46;\n background: #292827;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-customer-filter-trigger,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-customer-filter-search,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-table-search-field input,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-field select,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-preferences-cache-field select,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-stage-filter-button,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-status-filter-button {\n border-color: #6a6560;\n background: #333130;\n color: #f6f4f2;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-customer-filter-trigger::after {\n border-top-color: #f6f4f2;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-select-wrap::after {\n border-top-color: #f6f4f2;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-customer-filter-trigger:disabled {\n background: #292827;\n color: #918b86;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-customer-filter-search::placeholder,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-table-search-field input::placeholder {\n color: #b5b0ab;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-customer-filter-select-all,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-customer-filter-option,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-preferences-header h2,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plans-header h2,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-preferences-fieldset legend,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-preferences-option,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-preferences-cache-field,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-products-detail-heading,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plan-details dd,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-debug-heading,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-debug-item pre,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-debug-panel h2 {\n color: #f6f4f2;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-navigation strong {\n color: #f6f4f2;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-chart-empty {\n color: #c9c5c1;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-customer-filter-select-all,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-table th {\n border-bottom-color: #4e4a46;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-preferences-header,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-preferences-footer,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plans-header,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plans-tabs-navigation,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plans-tabs,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plan-details > div,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plans-skeleton-tabs,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plans-skeleton-details > div {\n border-color: #4e4a46;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-trend,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-chart-skeleton-plot,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plans-skeleton-trend,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plans-skeleton-plot {\n border-color: #4e4a46;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plans-skeleton-plot {\n background: repeating-linear-gradient(to bottom, transparent 0, transparent 58px, #4e4a46 58px, #4e4a46 59px) left top / 100% 236px no-repeat;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plans-skeleton-plot::before,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plans-skeleton-plot::after {\n background: #4e4a46;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plan-tab {\n color: #c9c5c1;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plan-tab:hover {\n background: #3b3937;\n color: #f6f4f2;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plan-tab[aria-selected=\"true\"] {\n border-bottom-color: #43c4d5;\n color: #91e4ed;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-periods button {\n color: #f6f4f2;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-periods button:hover {\n background: #3b3937;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-periods button[aria-pressed=\"true\"] {\n border-color: #43c4d5;\n background: #173e43;\n color: #91e4ed;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-navigation-button,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plans-tab-navigation-button {\n border-color: #6a6560;\n background: #333130;\n color: #f6f4f2;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-navigation-button:hover:not(:disabled),\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plans-tab-navigation-button:hover:not(:disabled) {\n border-color: #43c4d5;\n background: #3b3937;\n color: #91e4ed;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-navigation-button:disabled,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plans-tab-navigation-button:disabled {\n border-color: #4e4a46;\n color: #746f6a;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-svg .consumption-grid-line {\n stroke: #4e4a46;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-svg .consumption-axis-label,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-svg .consumption-x-label {\n fill: #c9c5c1;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-svg .consumption-value-label {\n fill: #f6f4f2;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-svg .consumption-bar-funded {\n fill: #ca8798;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-svg .consumption-bar-overage {\n fill: #f09a32;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-svg .consumption-average-line {\n stroke: #f09a32;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-svg .consumption-bar-group:hover rect,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-svg .consumption-bar-group:focus rect {\n stroke: #f6f4f2;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-legend button {\n color: #f6f4f2;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-legend button:hover {\n background: #3b3937;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-legend button[aria-pressed=\"false\"] {\n color: #a8a39e;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-legend-funded {\n background: #ca8798;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-legend-overage {\n background: #f09a32;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-legend-average {\n border-top-color: #f09a32;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-tooltip {\n border-color: #6a6560;\n background: #333130;\n color: #f6f4f2;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-preferences-option:hover {\n background: #3b3937;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-preferences-option input {\n accent-color: #43c4d5;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-button-primary {\n border-color: #00a6be;\n background: #008aa6;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-button-primary:hover,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-button-primary:focus-visible {\n border-color: #43c4d5;\n background: #006d7a;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-customer-filter-option:hover,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-table tbody tr:hover,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-sort-button:hover,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-icon-button:hover,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-icon-button:focus {\n background: #3b3937;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-table thead,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-table th,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-products-table th {\n background: #333130;\n color: #f6f4f2;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-table td {\n border-bottom-color: #3f3c39;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-products-detail {\n border-bottom-color: #4e4a46;\n background: #252423;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-products-table th,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-products-table td {\n border-bottom-color: #3f3c39;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-products-count {\n border-color: #2f9bae;\n background: #1d4e55;\n color: #91e4ed;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-products-count:hover,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-products-count:focus-visible,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-products-count[aria-expanded=\"true\"] {\n border-color: #43c4d5;\n background: #008aa6;\n color: #ffffff;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-products-progress[data-state=\"running\"] {\n background: #1d4e55;\n color: #91e4ed;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-products-progress[data-state=\"complete\"] {\n background: #244f2e;\n color: #a8dfb7;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-products-progress[data-state=\"complete-with-errors\"],\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-products-progress[data-state=\"error\"],\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-products-count-error {\n border-color: #b13b34;\n background: #5f2926;\n color: #ffb4ad;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-products-cache-timestamp {\n background: #3b3937;\n color: #c9c5c1;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-table a,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-copy-button,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-action-button {\n color: #43c4d5;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-table a:hover,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-copy-button:hover,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-copy-button:focus-visible,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-action-button:hover,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-action-button:focus-visible {\n background: #1d4e55;\n color: #91e4ed;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-stage-filter-button[data-stage=\"SQL\"] {\n color: #43c4d5;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-stage-filter-button[data-stage=\"PIPELINE\"] {\n color: #d1cbc6;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-stage-filter-button[data-stage=\"UPSIDE\"] {\n color: #ffbf62;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-stage-filter-button[data-stage=\"FORECAST\"] {\n color: #d2b7e9;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-stage-filter-button[data-stage=\"WON\"] {\n color: #9bd46a;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-stage-dashboard-card[data-stage=\"SQL\"] {\n border-top-color: #43c4d5;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-total-dashboard-card {\n border-top-color: #f6f4f2;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-stage-dashboard-card[data-stage=\"PIPELINE\"] {\n border-top-color: #c0b9b3;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-stage-dashboard-card[data-stage=\"UPSIDE\"] {\n border-top-color: #ffb84d;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-stage-dashboard-card[data-stage=\"FORECAST\"] {\n border-top-color: #cba7e7;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-stage-dashboard-card[data-stage=\"WON\"] {\n border-top-color: #92cf5b;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-stage-filter-button[aria-pressed=\"true\"][data-stage=\"SQL\"] {\n border-color: #008aa6;\n background: #008aa6;\n color: #ffffff;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-stage-filter-button[aria-pressed=\"true\"][data-stage=\"PIPELINE\"] {\n border-color: #6f6863;\n background: #6f6863;\n color: #ffffff;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-stage-filter-button[aria-pressed=\"true\"][data-stage=\"UPSIDE\"] {\n border-color: #b96e00;\n background: #b96e00;\n color: #ffffff;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-stage-filter-button[aria-pressed=\"true\"][data-stage=\"FORECAST\"] {\n border-color: #755b8b;\n background: #755b8b;\n color: #ffffff;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-stage-filter-button[aria-pressed=\"true\"][data-stage=\"WON\"] {\n border-color: #4b7f22;\n background: #4b7f22;\n color: #ffffff;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-status-filter-button[data-status=\"OPEN\"] {\n color: #69c985;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-status-filter-button[data-status=\"CLOSED\"] {\n color: #c3cad3;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-status-filter-button[data-status=\"LOST\"] {\n color: #ff9d94;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-status-filter-button[data-status=\"WON\"] {\n color: #83bfff;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-status-filter-button[aria-pressed=\"true\"][data-status=\"OPEN\"] {\n border-color: #197a3d;\n background: #197a3d;\n color: #ffffff;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-status-filter-button[aria-pressed=\"true\"][data-status=\"CLOSED\"] {\n border-color: #4b5563;\n background: #4b5563;\n color: #ffffff;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-status-filter-button[aria-pressed=\"true\"][data-status=\"LOST\"] {\n border-color: #b13b34;\n background: #b13b34;\n color: #ffffff;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-status-filter-button[aria-pressed=\"true\"][data-status=\"WON\"] {\n border-color: #1f5f99;\n background: #1f5f99;\n color: #ffffff;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-debug-item {\n border-color: #4e4a46;\n background: #252423;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-icon-button {\n color: #f6f4f2;\n }\n\n @media (min-width: 1201px) and (max-width: 1450px) {\n .opportunities-extension-table th:nth-child(1) {\n width: 16%;\n }\n\n .opportunities-extension-table th:nth-child(3) {\n width: 18%;\n }\n\n .opportunities-extension-table th:nth-child(4) {\n width: 12%;\n }\n\n .opportunities-extension-table th:nth-child(6) {\n width: 7%;\n }\n\n .opportunities-extension-table th:nth-child(7) {\n width: 8%;\n }\n\n .opportunities-extension-table th:nth-child(10) {\n width: 10%;\n }\n }\n\n @media (max-width: 1200px) {\n .opportunities-extension-table {\n min-width: 1180px;\n }\n\n .opportunities-extension-table th:nth-child(1) {\n width: 15%;\n }\n\n .opportunities-extension-table th:nth-child(3) {\n width: 17%;\n }\n\n .opportunities-extension-table th:nth-child(4) {\n width: 13%;\n }\n\n .opportunities-extension-table th:nth-child(6) {\n width: 6%;\n }\n\n .opportunities-extension-table th:nth-child(7) {\n width: 9%;\n }\n\n .opportunities-extension-table th:nth-child(10) {\n width: 11%;\n }\n }\n\n @media (max-width: 700px) {\n .opportunities-extension-header {\n padding: 24px 20px 18px;\n }\n\n .opportunities-extension-header::before {\n left: 20px;\n }\n\n .opportunities-extension-header h1 {\n font-size: 22px;\n }\n\n .opportunities-extension-header p {\n font-size: 14px;\n }\n\n .opportunities-extension-body {\n padding: 16px 20px 24px;\n }\n\n .opportunities-extension-form {\n align-items: stretch;\n flex-wrap: wrap;\n gap: 14px;\n min-height: auto;\n padding: 12px;\n }\n\n .opportunities-extension-field {\n max-width: none;\n width: 100%;\n }\n\n .opportunities-extension-customer-filter {\n width: 100%;\n }\n\n .opportunities-extension-customer-filter-trigger {\n width: 100%;\n }\n\n .opportunities-extension-customer-filter-panel {\n width: min(360px, calc(100vw - 64px));\n }\n\n .opportunities-extension-table-search-field {\n width: 100%;\n }\n\n .opportunities-extension-stage-dashboard {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n\n .opportunities-extension-stage-dashboard-value {\n font-size: 18px;\n }\n\n .opportunities-extension-preferences-modal {\n padding: 12px;\n }\n\n .opportunities-extension-account-plans-modal {\n padding: 12px;\n }\n\n .opportunities-extension-preferences-dialog {\n max-height: calc(100vh - 24px);\n }\n\n .opportunities-extension-account-plans-dialog {\n height: calc(100vh - 24px);\n }\n\n .opportunities-extension-account-plan-panel {\n padding: 12px 14px;\n }\n\n .opportunities-extension-account-plan-details {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n gap: 0 14px;\n }\n\n .opportunities-extension-account-plan-details > div {\n grid-template-columns: 1fr;\n align-content: center;\n gap: 3px;\n min-height: 54px;\n padding: 5px 0;\n }\n\n .opportunities-extension-account-plans-skeleton-details {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n gap: 0 14px;\n padding: 0;\n }\n\n .opportunities-extension-account-plans-skeleton-details > div {\n grid-template-columns: 1fr;\n align-content: center;\n gap: 5px;\n min-height: 54px;\n padding: 5px 0;\n }\n\n .opportunities-extension-account-plans-skeleton-trend {\n margin: 14px 0 0;\n }\n\n .opportunities-extension-account-plans-skeleton-periods {\n display: grid;\n grid-template-columns: repeat(4, minmax(0, 1fr));\n align-items: center;\n gap: 6px;\n }\n\n .opportunities-extension-account-plans-skeleton-periods .opportunities-extension-account-plans-skeleton-bar {\n width: 100% !important;\n }\n\n .opportunities-extension-account-plans-skeleton-chart {\n grid-template-columns: minmax(0, 1fr);\n gap: 12px;\n padding: 12px 8px 0 34px;\n }\n\n .opportunities-extension-account-plans-skeleton-legend {\n display: flex;\n min-height: 24px;\n align-items: center;\n justify-content: center;\n gap: 12px;\n }\n\n .opportunities-extension-consumption-trend-header {\n align-items: stretch;\n }\n\n .opportunities-extension-consumption-periods {\n display: grid;\n grid-template-columns: repeat(4, minmax(0, 1fr));\n gap: 3px;\n }\n\n .opportunities-extension-consumption-periods button {\n min-width: 0;\n padding: 7px 4px;\n font-size: 12px;\n }\n\n .opportunities-extension-consumption-chart {\n min-height: 0;\n }\n\n .opportunities-extension-consumption-svg {\n width: 760px;\n height: 245px;\n }\n\n .opportunities-extension-consumption-visual {\n width: 920px;\n grid-template-columns: 760px 144px;\n gap: 12px;\n }\n\n .opportunities-extension-consumption-figure {\n overflow-x: auto;\n overscroll-behavior-inline: contain;\n }\n\n .opportunities-extension-consumption-chart-skeleton {\n min-height: 0;\n padding: 24px 18px 18px;\n }\n\n .opportunities-extension-consumption-chart-skeleton-plot {\n min-height: 180px;\n gap: 4px;\n padding: 0 6px;\n }\n\n .opportunities-extension-preferences-options {\n grid-template-columns: 1fr;\n }\n\n .opportunities-extension-stage-filter-controls {\n gap: 6px;\n }\n\n .opportunities-extension-status-filter-controls {\n gap: 6px;\n }\n\n .opportunities-extension-table-surface {\n min-width: 0;\n min-height: calc(100vh - 230px);\n }\n\n .opportunities-extension-debug-panel {\n right: 12px;\n bottom: 12px;\n width: calc(100vw - 24px);\n max-height: calc(100vh - 96px);\n }\n }\n \n/* Full-page diagnostics, scoped to the extension and its current theme. */\n.opportunities-extension-modal .opportunities-extension-debug-panel {\n --debug-surface: #fff;\n --debug-code: #f5f6f7;\n --debug-text: #312d2a;\n --debug-muted: #5f5a55;\n --debug-border: #dedbd7;\n --debug-success: #22613b;\n --debug-success-bg: #e1f1e5;\n --debug-failed: #a12721;\n --debug-failed-bg: #fce8e6;\n --debug-pending: #805000;\n --debug-pending-bg: #fff1ce;\n --debug-info: #075e87;\n --debug-info-bg: #e5f1fa;\n --debug-key: #075e87;\n --debug-string: #22613b;\n --debug-number: #865000;\n --debug-literal: #73429b;\n position: fixed;\n inset: 0;\n z-index: 2147483647;\n display: grid;\n grid-template-rows: auto auto minmax(0, 1fr);\n width: auto;\n height: auto;\n max-height: none;\n min-width: 0;\n box-sizing: border-box;\n overflow: hidden;\n margin: 0;\n padding: 20px;\n border: 0;\n border-radius: 0;\n background: var(--debug-surface);\n color: var(--debug-text);\n color-scheme: light;\n}\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-debug-panel {\n --debug-surface: #292827;\n --debug-code: #222120;\n --debug-text: #f6f4f2;\n --debug-muted: #c9c5c1;\n --debug-border: #514c47;\n --debug-success: #a9e3bd;\n --debug-success-bg: #214d34;\n --debug-failed: #ffb4ab;\n --debug-failed-bg: #582c2a;\n --debug-pending: #ffe099;\n --debug-pending-bg: #59441e;\n --debug-info: #a8d9ff;\n --debug-info-bg: #233f52;\n --debug-key: #8ed6f0;\n --debug-string: #a9e3bd;\n --debug-number: #ffe099;\n --debug-literal: #d6b7f1;\n color: #f6f4f2;\n color-scheme: dark;\n}\n.opportunities-extension-debug-actions { display: flex; gap: 8px; flex: 0 0 auto; }\n.opportunities-extension-modal .opportunities-extension-debug-panel .opportunities-extension-debug-list {\n overflow: auto;\n min-height: 0;\n min-width: 0;\n align-content: start;\n scrollbar-gutter: stable;\n padding: 2px 8px 12px 2px;\n}\n.opportunities-extension-modal .opportunities-extension-debug-panel .opportunities-extension-debug-item {\n --debug-state: var(--debug-info);\n --debug-state-bg: var(--debug-info-bg);\n border-color: var(--debug-border);\n border-left-color: var(--debug-state);\n background: var(--debug-surface);\n min-width: 0;\n}\n.opportunities-extension-modal .opportunities-extension-debug-panel .opportunities-extension-debug-item-success { --debug-state: var(--debug-success); --debug-state-bg: var(--debug-success-bg); }\n.opportunities-extension-modal .opportunities-extension-debug-panel .opportunities-extension-debug-item-failed { --debug-state: var(--debug-failed); --debug-state-bg: var(--debug-failed-bg); }\n.opportunities-extension-modal .opportunities-extension-debug-panel .opportunities-extension-debug-item-pending { --debug-state: var(--debug-pending); --debug-state-bg: var(--debug-pending-bg); }\n.opportunities-extension-modal .opportunities-extension-debug-panel .opportunities-extension-debug-status {\n color: var(--debug-state);\n background: var(--debug-state-bg);\n}\n.opportunities-extension-modal .opportunities-extension-debug-panel .opportunities-extension-debug-http-status,\n.opportunities-extension-debug-method {\n color: var(--debug-info);\n background: var(--debug-info-bg);\n}\n.opportunities-extension-debug-method {\n display: inline-flex;\n align-items: center;\n min-height: 22px;\n padding: 0 8px;\n border-radius: 4px;\n font: 700 11px/1.2 Consolas, monospace;\n}\n.opportunities-extension-debug-method[data-method=\"POST\"] { color: var(--debug-literal); background: var(--debug-code); }\n.opportunities-extension-modal .opportunities-extension-debug-panel .opportunities-extension-debug-http-status[data-http-class=\"2\"] { color: var(--debug-success); background: var(--debug-success-bg); }\n.opportunities-extension-modal .opportunities-extension-debug-panel .opportunities-extension-debug-http-status[data-http-class=\"4\"],\n.opportunities-extension-modal .opportunities-extension-debug-panel .opportunities-extension-debug-http-status[data-http-class=\"5\"] { color: var(--debug-failed); background: var(--debug-failed-bg); }\n.opportunities-extension-modal .opportunities-extension-debug-panel .opportunities-extension-debug-http-status[data-http-class=\"pending\"] { color: var(--debug-pending); background: var(--debug-pending-bg); }\n.opportunities-extension-debug-details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding: 0 14px 16px; }\n.opportunities-extension-debug-block { min-width: 0; border-left: 2px solid var(--debug-info); padding-left: 10px; }\n.opportunities-extension-debug-block[data-direction=\"response\"] { border-left-color: var(--debug-success); }\n.opportunities-extension-modal .opportunities-extension-debug-block h3 { margin: 0 0 8px; color: var(--debug-info); font-size: 12px; }\n.opportunities-extension-modal .opportunities-extension-debug-block[data-direction=\"response\"] h3 { color: var(--debug-success); }\n.opportunities-extension-modal .opportunities-extension-debug-panel .opportunities-extension-debug-item pre {\n min-width: 0;\n margin: 0;\n padding: 12px;\n max-height: 380px;\n overflow: auto;\n white-space: pre-wrap;\n overflow-wrap: anywhere;\n color: var(--debug-text);\n background: var(--debug-code);\n line-height: 1.6;\n tab-size: 2;\n}\n.opportunities-extension-debug-json-key { color: var(--debug-key); }\n.opportunities-extension-debug-json-string { color: var(--debug-string); }\n.opportunities-extension-debug-json-number { color: var(--debug-number); }\n.opportunities-extension-debug-json-literal { color: var(--debug-literal); }\n@media (max-width: 760px) {\n .opportunities-extension-modal .opportunities-extension-debug-panel { padding: 12px; }\n .opportunities-extension-debug-details { grid-template-columns: minmax(0, 1fr); }\n}\n.opportunities-extension-debug-tabs {\n display: flex;\n flex-wrap: wrap;\n gap: 4px;\n margin-bottom: 12px;\n padding-bottom: 8px;\n border-bottom: 1px solid #dedbd7;\n}\n\n.opportunities-extension-debug-tabs button {\n max-width: 100%;\n min-height: 32px;\n padding: 6px 8px;\n border: 0;\n border-bottom: 2px solid transparent;\n border-radius: 0;\n background: transparent;\n color: inherit;\n font: inherit;\n font-size: 12px;\n line-height: 1.35;\n overflow-wrap: anywhere;\n cursor: pointer;\n}\n\n.opportunities-extension-debug-tabs button:hover {\n background: #f5f4f2;\n}\n\n.opportunities-extension-debug-tabs button[aria-selected=\"true\"] {\n border-bottom-color: #00758f;\n background: #e8f4f6;\n color: #006b84;\n font-weight: 700;\n}\n\n.opportunities-extension-debug-tabs button:focus-visible,\n.opportunities-extension-debug-list[role=\"tabpanel\"]:focus-visible {\n outline: 2px solid #00758f;\n outline-offset: -2px;\n}\n\n.opportunities-extension-debug-time {\n font-size: 11px;\n font-variant-numeric: tabular-nums;\n white-space: nowrap;\n}\n\n.opportunities-extension-debug-heading {\n flex-wrap: wrap;\n}\n\n.opportunities-extension-debug-heading strong {\n flex: 1 1 180px;\n min-width: 0;\n overflow-wrap: anywhere;\n}\n\n.opportunities-extension-debug-summary-meta {\n flex-wrap: wrap;\n justify-content: flex-end;\n}\n\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-debug-tabs button {\n color: #f6f4f2;\n}\n\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-debug-heading::before {\n color: #c9c5c1;\n}\n\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-debug-tabs {\n border-bottom-color: #514c47;\n}\n\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-debug-tabs button:hover {\n background: #383633;\n}\n\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-debug-tabs button[aria-selected=\"true\"] {\n background: #173f48;\n border-bottom-color: #8cc8d3;\n color: #bde7ee;\n}\n\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-debug-tabs button:focus-visible,\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-debug-list[role=\"tabpanel\"]:focus-visible {\n outline-color: #8cc8d3;\n}\n.opportunities-extension-debug-duration {\n color: #55514d;\n font-size: 11px;\n font-variant-numeric: tabular-nums;\n white-space: nowrap;\n}\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-debug-duration { color: #d6d2ce; }\n\n/* Compact filters use available CSS width, including Windows display scaling. */\n.opportunities-extension-products-progress,\n.opportunities-extension-auth-badge { opacity: 1; transition: opacity 300ms ease; }\n.opportunities-extension-products-progress[data-fading=\"true\"],\n.opportunities-extension-auth-badge[data-fading=\"true\"] { opacity: 0; }\n.opportunities-extension-auth-badge[hidden] { display: none; }\n@media (prefers-reduced-motion: reduce) {\n .opportunities-extension-products-progress,\n .opportunities-extension-auth-badge { transition: none; }\n}\n.opportunities-extension-crm-sr-badge {\n border: 1px solid #408254;\n color: #185b30;\n background: #e1f1e5;\n}\n.opportunities-extension-crm-sr-badge[data-state=\"missing\"] { color: #9f201b; background: #fde8e7; border-color: #c74640; }\n.opportunities-extension-crm-sr-badge[data-state=\"error\"] { color: #785000; background: #fff0cd; border-color: #987021; }\n.opportunities-extension-wl-actions-badge[data-state=\"loading\"] { color: #5f5a55; background: #eceae8; border-color: #8f8a85; }\n.opportunities-extension-crm-sr-badge:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-crm-sr-badge { color: #b8e4c6; background: #214d34; border-color: #6eac82; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-crm-sr-badge[data-state=\"missing\"] { color: #ffd9d5; background: #542824; border-color: #ef938b; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-crm-sr-badge[data-state=\"error\"] { color: #ffe0a3; background: #584219; border-color: #c99b4b; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-wl-actions-badge[data-state=\"loading\"] { color: #dedbd7; background: #484541; border-color: #8f8a85; }\n\n.opportunities-extension-form {\n display: grid;\n grid-template-columns: repeat(4, minmax(0, 1fr)) max-content max-content;\n align-items: end;\n gap: 12px;\n min-height: 0;\n padding: 12px;\n}\n\n.opportunities-extension-form > *,\n.opportunities-extension-badge-filters > section {\n min-width: 0;\n width: 100%;\n max-width: none;\n grid-template-rows: auto 32px;\n gap: 4px;\n font-size: 12px;\n}\n\n.opportunities-extension-form > * > span:first-child,\n.opportunities-extension-badge-filters > section > span:first-child {\n font-size: 12px;\n line-height: 16px;\n}\n\n.opportunities-extension-form .opportunities-extension-select-wrap {\n width: 100%;\n}\n\n.opportunities-extension-form .opportunities-extension-field select,\n.opportunities-extension-form .opportunities-extension-customer-filter-trigger,\n.opportunities-extension-form .opportunities-extension-table-search-field input {\n box-sizing: border-box;\n width: 100%;\n min-width: 0;\n height: 32px;\n min-height: 32px;\n padding: 4px 8px;\n font-size: 12px;\n line-height: 20px;\n}\n\n.opportunities-extension-form .opportunities-extension-field select,\n.opportunities-extension-form .opportunities-extension-customer-filter-trigger {\n padding-right: 26px;\n}\n\n.opportunities-extension-form .opportunities-extension-select-wrap::after,\n.opportunities-extension-form .opportunities-extension-customer-filter-trigger::after {\n right: 10px;\n border-left-width: 4px;\n border-right-width: 4px;\n border-top-width: 5px;\n}\n\n.opportunities-extension-form .opportunities-extension-stage-filter-controls,\n.opportunities-extension-form .opportunities-extension-status-filter-controls {\n flex-wrap: nowrap;\n gap: 4px;\n}\n\n.opportunities-extension-form .opportunities-extension-stage-filter-button,\n.opportunities-extension-form .opportunities-extension-status-filter-button,\n.opportunities-extension-form .opportunities-extension-activity-filter-button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n height: 28px;\n min-height: 28px;\n padding: 4px 7px;\n border: 1px solid currentColor;\n border-radius: 18px;\n font-family: inherit;\n font-size: 11px;\n font-weight: 700;\n letter-spacing: 0;\n line-height: 18px;\n white-space: nowrap;\n}\n\n.opportunities-extension-cell-actions > .opportunities-extension-products-count,\n.opportunities-extension-cell-actions > .opportunities-extension-products-ramp,\n.opportunities-extension-cell-actions > .opportunities-extension-crm-sr-badge {\n display: inline-flex;\n align-items: center;\n justify-content: flex-start;\n box-sizing: border-box;\n flex: 0 0 auto;\n gap: 4px;\n height: 20px;\n min-height: 20px;\n margin: 0;\n padding: 0 6px;\n border-width: 1px;\n border-style: solid;\n border-radius: 8px;\n font-family: inherit;\n font-size: 10px;\n font-style: normal;\n font-weight: 600;\n line-height: 16px;\n letter-spacing: 0;\n text-align: center;\n vertical-align: middle;\n white-space: nowrap;\n}\n\n.opportunities-extension-cell-actions .opportunities-extension-badge-icon,\n.opportunities-extension-activity-filter-button .opportunities-extension-badge-icon {\n display: block;\n order: -1;\n flex: 0 0 16px;\n width: 16px;\n height: 16px;\n margin: 0;\n padding: 0;\n border: 0;\n color: inherit;\n fill: none;\n stroke: currentColor;\n stroke-width: 2.25;\n stroke-linecap: round;\n stroke-linejoin: round;\n pointer-events: none;\n}\n\n@media (max-width: 1150px) {\n .opportunities-extension-form {\n grid-template-columns: repeat(4, minmax(0, 1fr));\n }\n .opportunities-extension-badge-filters > .opportunities-extension-status-filter,\n .opportunities-extension-badge-filters > .opportunities-extension-stage-filter {\n grid-column: span 2;\n }\n}\n\n@media (max-width: 700px) {\n .opportunities-extension-form {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n .opportunities-extension-form .opportunities-extension-stage-filter-controls,\n .opportunities-extension-form .opportunities-extension-status-filter-controls {\n flex-wrap: wrap;\n }\n .opportunities-extension-badge-filters > .opportunities-extension-status-filter,\n .opportunities-extension-badge-filters > .opportunities-extension-stage-filter {\n grid-template-rows: auto auto;\n }\n}\n\n@media (max-width: 420px) {\n .opportunities-extension-form { grid-template-columns: minmax(0, 1fr); }\n .opportunities-extension-badge-filters > .opportunities-extension-status-filter,\n .opportunities-extension-badge-filters > .opportunities-extension-stage-filter { grid-column: auto; }\n}\n\n.opportunities-extension-badge-filters { display: contents; }\n.opportunities-extension-activity-filter { display: grid; }\n.opportunities-extension-activity-filter[hidden] { display: none; }\n.opportunities-extension-activity-filter-controls { display: flex; align-items: center; flex-wrap: nowrap; gap: 4px; }\n/* Flexible fields share the space left by the four compact badge groups. */\n.opportunities-extension-form[data-activity-filters=\"true\"] {\n grid-template-columns: repeat(4, minmax(0, 1fr)) repeat(4, max-content);\n column-gap: 8px;\n}\n.opportunities-extension-activity-filter-button {\n min-width: 32px;\n gap: 4px;\n color: #185b30;\n background: #fff;\n cursor: pointer;\n}\n.opportunities-extension-activity-filter-button[data-value=\"missing\"] { color: #9f201b; }\n.opportunities-extension-activity-filter-button[data-value=\"under4\"] { color: #005f7d; }\n.opportunities-extension-activity-filter-button[aria-pressed=\"true\"] { color: #fff; background: #25653a; border-color: #25653a; }\n.opportunities-extension-activity-filter-button[aria-pressed=\"true\"][data-value=\"missing\"] { background: #a12d27; border-color: #a12d27; }\n.opportunities-extension-activity-filter-button[aria-pressed=\"true\"][data-value=\"under4\"] { background: #006b86; border-color: #006b86; }\n.opportunities-extension-activity-filter-button:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-activity-filter { color: #eeeae6; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-activity-filter-button { color: #b8e4c6; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-activity-filter-button:not([aria-pressed=\"true\"]) { background: #333130; border-color: #6a6560; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-activity-filter-button[data-value=\"missing\"] { color: #ffd9d5; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-activity-filter-button[data-value=\"under4\"] { color: #b5e9fc; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-activity-filter-button[aria-pressed=\"true\"] { border-color: currentColor; }\n@media (max-width: 1350px) {\n .opportunities-extension-form[data-activity-filters=\"true\"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }\n .opportunities-extension-form[data-activity-filters=\"true\"] .opportunities-extension-badge-filters {\n display: flex;\n grid-column: 1 / -1;\n flex-wrap: wrap;\n align-items: start;\n gap: 12px 20px;\n }\n .opportunities-extension-form[data-activity-filters=\"true\"] .opportunities-extension-badge-filters > section {\n width: auto;\n max-width: 100%;\n grid-template-rows: auto auto;\n }\n}\n@media (max-width: 700px) {\n .opportunities-extension-form[data-activity-filters=\"true\"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }\n .opportunities-extension-activity-filter-controls { flex-wrap: wrap; }\n}\n@media (max-width: 420px) {\n .opportunities-extension-form[data-activity-filters=\"true\"] { grid-template-columns: minmax(0, 1fr); }\n}\n\n.opportunities-extension-add-action {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n flex: 0 0 16px;\n width: 16px;\n height: 16px;\n padding: 0;\n margin: 0 0 0 2px;\n border: 0;\n border-radius: 3px;\n background: transparent;\n color: inherit;\n font: inherit;\n cursor: pointer;\n}\n.opportunities-extension-add-action:hover { background: rgba(127, 127, 127, .2); }\n.opportunities-extension-add-action:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }\n.opportunities-extension-action-form-modal {\n position: absolute;\n inset: 0;\n z-index: 5;\n display: grid;\n place-items: center;\n padding: 12px;\n background: rgba(0, 0, 0, .42);\n}\n.opportunities-extension-action-form-dialog {\n box-sizing: border-box;\n width: min(560px, 100%);\n max-height: calc(100vh - 24px);\n overflow-y: auto;\n background: #fff;\n color: #312d2a;\n border: 1px solid #b9b4ae;\n border-radius: 6px;\n box-shadow: 0 12px 36px rgba(0, 0, 0, .25);\n}\n.opportunities-extension-action-form {\n display: grid;\n grid-template-columns: repeat(2, minmax(0, 1fr));\n gap: 14px;\n padding: 18px;\n}\n.opportunities-extension-action-form-heading { min-width: 0; overflow-wrap: anywhere; }\n.opportunities-extension-action-form-context {\n display: grid;\n grid-template-columns: max-content minmax(0, 1fr);\n gap: 6px 12px;\n margin: 12px 0 0;\n font-size: 12px;\n line-height: 18px;\n}\n.opportunities-extension-action-form-context dt { font-weight: 600; }\n.opportunities-extension-action-form-context dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }\n.opportunities-extension-action-form-field { display: grid; gap: 6px; min-width: 0; font-size: 13px; }\n.opportunities-extension-action-form-field[hidden] { display: none; }\n.opportunities-extension-action-form-status { margin: 0; font-size: 13px; overflow-wrap: anywhere; }\n.opportunities-extension-action-form-status[role=\"alert\"] { color: #a12d27; }\n.opportunities-extension-action-form-wide,\n.opportunities-extension-action-form-footer { grid-column: 1 / -1; }\n.opportunities-extension-action-form-field input,\n.opportunities-extension-action-form-field select,\n.opportunities-extension-action-form-field textarea {\n box-sizing: border-box;\n min-width: 0;\n width: 100%;\n border: 1px solid #8f8983;\n border-radius: 4px;\n padding: 8px;\n font: inherit;\n line-height: 20px;\n color: inherit;\n background: #fff;\n}\n.opportunities-extension-action-form-field textarea { resize: vertical; min-height: 96px; }\n.opportunities-extension-action-form-field select { height: 38px; }\n.opportunities-extension-action-form-field select[hidden] { display: none; }\n.opportunities-extension-sr-form-dialog { width: min(900px, 100%); }\n.opportunities-extension-sr-form-dialog > .opportunities-extension-account-plans-header { padding: 20px 24px; }\n.opportunities-extension-sr-form-dialog > .opportunities-extension-action-form { gap: 20px 24px; padding: 24px; align-items: start; }\n.opportunities-extension-sr-form-dialog .opportunities-extension-action-form-field { gap: 8px; }\n.opportunities-extension-sr-form-dialog textarea { min-height: 112px; }\n.opportunities-extension-sr-form-dialog .opportunities-extension-sr-service-option { padding: 12px 0; gap: 10px; }\n.opportunities-extension-sr-form-dialog .opportunities-extension-sr-service-abstract { font-size: 13px; line-height: 20px; }\n@media (min-width: 1000px) {\n .opportunities-extension-sr-form-dialog { width: min(1120px, 100%); }\n .opportunities-extension-sr-form-dialog > .opportunities-extension-action-form { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 24px; }\n .opportunities-extension-sr-services { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; align-items: start; }\n .opportunities-extension-sr-services .opportunities-extension-sr-service-option { margin: 0; border-top: 1px solid #aaa6a040; }\n .opportunities-extension-sr-services .opportunities-extension-sr-service-option:nth-child(-n+2) { border-top: 0; }\n}\n@media (max-width: 600px) {\n .opportunities-extension-sr-form-dialog > .opportunities-extension-account-plans-header { padding: 16px; }\n .opportunities-extension-sr-form-dialog > .opportunities-extension-action-form { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 16px; }\n}\n.opportunities-extension-sr-lookup { min-width: 0; padding: 0; margin: 0; border: 0; font-size: 13px; }\n.opportunities-extension-sr-lookup legend { padding: 0 0 8px; font-weight: 600; }\n.opportunities-extension-sr-lookup[aria-busy=\"true\"] > p { opacity: .65; }\n.opportunities-extension-sr-service-option { display: flex; align-items: flex-start; gap: 8px; padding: 9px 0; cursor: pointer; }\n.opportunities-extension-sr-service-option + .opportunities-extension-sr-service-option { border-top: 1px solid #aaa6a040; }\n.opportunities-extension-sr-service-option input { flex: 0 0 16px; width: 16px; height: 16px; margin: 2px 0 0; accent-color: #00758f; }\n.opportunities-extension-sr-service-option > span { min-width: 0; overflow-wrap: anywhere; }\n.opportunities-extension-sr-service-name { display: block; font-weight: 600; line-height: 20px; }\n.opportunities-extension-sr-service-abstract { display: block; margin-top: 3px; color: #625d58; font-size: 12px; line-height: 18px; white-space: pre-wrap; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-sr-service-abstract { color: #c7c2bc; }\n.opportunities-extension-sr-lookup-retry { color: inherit; background: transparent; border: 1px solid #8f8983; border-radius: 4px; padding: 5px 10px; cursor: pointer; }\n.opportunities-extension-sr-lookup-retry[hidden] { display: none; }\n.opportunities-extension-action-form [aria-invalid=\"true\"] { border-color: #b3261e; outline: 1px solid #b3261e; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-action-form [aria-invalid=\"true\"] { border-color: #ffaaa4; outline-color: #ffaaa4; }\n.opportunities-extension-modal .opportunities-extension-copy-toast { z-index: 20; }\n.opportunities-extension-action-combobox { position: relative; min-width: 0; }\n.opportunities-extension-action-combobox input { height: 38px; }\n.opportunities-extension-action-options {\n position: absolute;\n z-index: 10;\n top: calc(100% + 4px);\n left: 0;\n right: 0;\n box-sizing: border-box;\n max-height: 180px;\n overflow-y: auto;\n overscroll-behavior: contain;\n border: 1px solid #8f8983;\n border-radius: 4px;\n box-shadow: 0 4px 12px rgba(0, 0, 0, .2);\n background: #fff;\n color: #292725;\n}\n.opportunities-extension-action-options[data-placement=\"above\"] { top: auto; bottom: calc(100% + 4px); }\n.opportunities-extension-action-options[hidden] { display: none; }\n.opportunities-extension-action-option { padding: 8px; line-height: 20px; overflow-wrap: anywhere; cursor: pointer; }\n.opportunities-extension-action-option:hover,\n.opportunities-extension-action-option[aria-selected=\"true\"] { background: #e3f2f5; color: #005b70; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-action-options { background: #211f1d; color: #eeeae6; border-color: #918a82; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-action-option:hover,\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-action-option[aria-selected=\"true\"] { background: #174955; color: #c9f4ff; }\n.opportunities-extension-action-form[data-state=\"loading\"] .opportunities-extension-action-combobox input:disabled { animation: opportunities-action-options-loading 1s ease-in-out infinite alternate; }\n.opportunities-extension-action-form[data-state=\"loading\"] .opportunities-extension-action-form-field > :disabled {\n animation: opportunities-action-options-loading 1s ease-in-out infinite alternate;\n}\n@keyframes opportunities-action-options-loading { from { opacity: .45; } to { opacity: .85; } }\n@media (prefers-reduced-motion: reduce) {\n .opportunities-extension-action-form[data-state=\"loading\"] .opportunities-extension-action-form-field > :disabled,\n .opportunities-extension-action-form[data-state=\"loading\"] .opportunities-extension-action-combobox input:disabled { animation: none; }\n}\n.opportunities-extension-action-form-footer { display: flex; justify-content: flex-end; gap: 8px; }\n.opportunities-extension-action-form-footer button {\n border: 1px solid #8f8983;\n border-radius: 4px;\n padding: 7px 14px;\n font: inherit;\n font-size: 13px;\n background: transparent;\n color: inherit;\n cursor: pointer;\n}\n.opportunities-extension-action-form-footer button:disabled { opacity: .55; cursor: not-allowed; }\n.opportunities-extension-action-form :focus-visible { outline: 2px solid #00758f; outline-offset: 2px; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-action-form-dialog {\n color-scheme: dark;\n background: #292725;\n color: #eeeae6;\n border-color: #756f68;\n}\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-action-form-field input,\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-action-form-field select,\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-action-form-field textarea { background: #211f1d; border-color: #918a82; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-action-form-status[role=\"alert\"] { color: #ffd9d5; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-action-form :focus-visible { outline-color: #80d6e8; }\n@media (max-width: 420px) {\n .opportunities-extension-action-form { grid-template-columns: minmax(0, 1fr); }\n}\n\n/* Keep layout rules on the outer table, never on expanded product tables. */\n.opportunities-extension-table[data-opportunities-layout=\"inline-actions\"] {\n width: 100%;\n min-width: 1168px;\n table-layout: fixed;\n}\n\n.opportunities-extension-table-skeleton-row { height: 76px; }\n.opportunities-extension-table-skeleton-text { width: 85%; max-width: 100%; }\n.opportunities-extension-table-skeleton-row:nth-of-type(even) .opportunities-extension-table-skeleton-text { width: 70%; }\n.opportunities-extension-table-skeleton-badge { flex: 0 1 30px; width: 30px; min-width: 0; height: 16px; }\n.opportunities-extension-table-skeleton-row > td[data-column=\"customer\"] .opportunities-extension-table-skeleton-badge { flex-basis: 18px; width: 18px; }\n.opportunities-extension-table-skeleton-row > td[data-column=\"status\"] .opportunities-extension-table-skeleton-text,\n.opportunities-extension-table-skeleton-row > td[data-column=\"stage\"] .opportunities-extension-table-skeleton-text { height: 20px; max-width: 66px; border-radius: 8px; }\n\n/* Fixed table layout shares leftover width only between the two auto columns. */\n.opportunities-extension-table > thead > tr > th[data-column=\"name\"] { width: auto; }\n.opportunities-extension-table > thead > tr > th[data-column=\"customer\"] { width: auto; }\n.opportunities-extension-table > thead > tr > th[data-column=\"owner\"] { width: 132px; }\n.opportunities-extension-table > thead > tr > th[data-column=\"optyNumber\"] { width: 106px; }\n.opportunities-extension-table > thead > tr > th[data-column=\"revenue\"] { width: 124px; }\n.opportunities-extension-table > thead > tr > th[data-column=\"closeDate\"] { width: 100px; }\n.opportunities-extension-table > thead > tr > th[data-column=\"status\"] { width: 114px; }\n.opportunities-extension-table > thead > tr > th[data-column=\"winProbability\"] { width: 110px; }\n.opportunities-extension-table > thead > tr > th[data-column=\"stage\"] { width: 94px; }\n.opportunities-extension-table > thead > tr > th[data-column=\"lastUpdateDate\"] { width: 136px; }\n\n.opportunities-extension-table > tbody > tr > td[data-column] {\n padding: 10px 8px;\n overflow: visible;\n text-overflow: clip;\n white-space: normal;\n font-variant-numeric: tabular-nums;\n}\n\n.opportunities-extension-table > tbody > tr > td[data-column=\"name\"],\n.opportunities-extension-table > tbody > tr > td[data-column=\"customer\"] {\n position: relative;\n padding-right: 16px;\n padding-left: 12px;\n padding-bottom: 38px;\n vertical-align: top;\n}\n\n.opportunities-extension-table > tbody > tr > td[data-column=\"owner\"] {\n padding-right: 16px;\n}\n\n.opportunities-extension-table > tbody > tr > td[data-column=\"closeDate\"],\n.opportunities-extension-table > tbody > tr > td[data-column=\"lastUpdateDate\"],\n.opportunities-extension-table > tbody > tr > td[data-column=\"status\"],\n.opportunities-extension-table > tbody > tr > td[data-column=\"stage\"],\n.opportunities-extension-table > tbody > tr > td[data-column=\"winProbability\"] {\n white-space: nowrap;\n}\n\n.opportunities-extension-cell-content {\n display: block;\n min-width: 0;\n min-height: 2.7em;\n line-height: 1.35;\n}\n\n.opportunities-extension-cell-content > :first-child {\n display: block;\n min-width: 0;\n overflow-wrap: anywhere;\n}\n\n.opportunities-extension-cell-actions {\n position: absolute;\n left: 12px;\n right: 16px;\n bottom: 10px;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n gap: 6px;\n height: 24px;\n}\n\n.opportunities-extension-cell-actions .opportunities-extension-action-button {\n flex: 0 0 24px;\n width: 24px;\n height: 24px;\n padding: 2px;\n}\n\n.opportunities-extension-table > tbody > tr > td[data-column=\"customer\"] .opportunities-extension-cell-actions {\n min-width: 114px;\n}\n\n.opportunities-extension-cell-actions .opportunities-extension-action-button svg {\n width: 18px;\n height: 18px;\n}\n\n.opportunities-extension-cell-actions button:focus-visible {\n outline: 2px solid currentColor;\n outline-offset: 2px;\n}\n\n.opportunities-extension-products-ramp {\n min-width: 0;\n max-width: 100%;\n border: 1px solid #bba5cf;\n background: #f0e8f7;\n color: #63358a;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-products-ramp {\n background: #43334f;\n color: #ead5fc;\n border-color: #9372ac;\n}\n\n.opportunities-extension-products-ramp[data-missing=\"true\"] {\n background: #fde8e7;\n color: #9f201b;\n border-color: #c74640;\n}\n\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-products-ramp[data-missing=\"true\"] {\n background: #542824;\n color: #ffd9d5;\n border-color: #ef938b;\n}\n\n.opportunities-extension-table > thead > tr > th[data-column] .opportunities-extension-sort-button {\n display: grid;\n grid-template-columns: minmax(0, 1fr) 12px;\n gap: 6px;\n padding: 10px 8px;\n align-items: center;\n}\n\n.opportunities-extension-table > thead > tr > th[data-column=\"name\"] .opportunities-extension-sort-button,\n.opportunities-extension-table > thead > tr > th[data-column=\"customer\"] .opportunities-extension-sort-button {\n padding-left: 12px;\n padding-right: 16px;\n}\n\n.opportunities-extension-sort-label {\n min-width: 0;\n white-space: normal;\n overflow-wrap: anywhere;\n}\n\n.opportunities-extension-table > thead > tr > th[data-column] .opportunities-extension-sort-button::after {\n position: static;\n justify-self: end;\n}\n.opportunities-extension-crm-sr-badge[type=\"button\"] { cursor: pointer; font-family: inherit; }\n.opportunities-extension-sr-popover {\n position: fixed; z-index: 8; box-sizing: border-box; overflow: auto;\n padding: 12px; border: 1px solid #b9b5b0; border-radius: 6px;\n background: #fff; color: #302e2b; box-shadow: 0 6px 24px #0003;\n font: 12px/1.5 Arial, sans-serif; text-align: left; overflow-wrap: anywhere;\n}\n.opportunities-extension-sr-popover section { padding: 8px 0; }\n.opportunities-extension-sr-popover section + section { border-top: 1px solid #dedbd7; }\n.opportunities-extension-sr-number { display: flex; align-items: center; gap: 8px; padding-right: 30px; font-weight: 600; }\n.opportunities-extension-sr-popover a { color: #00677d; text-decoration: underline; }\n.opportunities-extension-sr-details { white-space: pre-wrap; margin-top: 6px; }\n.opportunities-extension-sr-children { margin: 10px 0 0 8px; padding-left: 10px; border-left: 2px solid #8c969a; overflow-wrap: anywhere; }\n.opportunities-extension-sr-children[aria-busy=\"true\"] { min-height: 28px; animation: opportunities-action-options-loading 1s ease-in-out infinite alternate; }\n.opportunities-extension-sr-children[role=\"alert\"] { color: #a12d27; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-sr-children[role=\"alert\"] { color: #ffd9d5; }\n@media (prefers-reduced-motion: reduce) { .opportunities-extension-sr-children[aria-busy=\"true\"] { animation: none; } }\n.opportunities-extension-sr-dismiss {\n position: absolute; top: 6px; right: 6px; width: 28px; height: 28px;\n display: grid; place-items: center; padding: 4px; border: 0;\n background: transparent; color: inherit; cursor: pointer;\n}\n.opportunities-extension-sr-dismiss svg { width: 16px; height: 16px; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-sr-popover { background: #292827; color: #f1efec; border-color: #77716b; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-sr-popover section + section { border-color: #5f5953; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-sr-popover a { color: #7ddced; }\n.opportunities-extension-title-row {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n gap: 8px 16px;\n min-width: 0;\n flex: 1;\n}\n.opportunities-extension-title-row h1 {\n display: block;\n margin: 0;\n padding: 0;\n line-height: 1;\n}\n.opportunities-extension-title-row .opportunities-extension-subtitle-row {\n display: flex;\n align-items: center;\n align-self: center;\n flex-wrap: wrap;\n gap: 8px;\n margin: 0;\n padding: 0;\n min-width: 0;\n}\n.opportunities-extension-title-row .opportunities-extension-subtitle-row > span {\n box-sizing: border-box;\n margin: 0;\n min-height: 22px;\n line-height: 16px;\n}\n.opportunities-extension-title-row + .opportunities-extension-header-actions { flex-shrink: 0; }\n.opportunities-extension-refresh-all:disabled { opacity: .65; cursor: wait; }\n.opportunities-extension-refresh-all:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }\n.opportunities-extension-refresh-all[aria-busy=\"true\"] svg { animation: opportunities-refresh-spin 1s linear infinite; }\n@keyframes opportunities-refresh-spin { to { transform: rotate(360deg); } }\n@media (prefers-reduced-motion: reduce) {\n .opportunities-extension-refresh-all[aria-busy=\"true\"] svg { animation: none; }\n}\n.opportunities-extension-option-description { display: block; font-size: 12px; line-height: 1.4; margin-top: 4px; white-space: normal; overflow-wrap: anywhere; opacity: .85; }\n.opportunities-extension-action-form-dialog.opportunities-extension-internal-sr-dialog { width: min(760px, 100%); }\n\n.opportunities-extension-account-plans-dialog.opportunities-extension-install-base-dialog {\n width: min(1700px, 100%);\n}\n.opportunities-extension-install-base-dialog .opportunities-extension-account-plans-header {\n padding: 10px 12px;\n gap: 12px;\n}\n.opportunities-extension-install-base-dialog .opportunities-extension-account-plans-header h2 {\n font-size: 16px;\n line-height: 22px;\n}\n.opportunities-extension-install-base-dialog .opportunities-extension-account-plans-header p {\n font-size: 12px;\n line-height: 16px;\n margin-top: 3px;\n overflow-wrap: anywhere;\n}\n.opportunities-extension-install-base-dialog .opportunities-extension-icon-button {\n width: 28px;\n height: 28px;\n min-width: 28px;\n min-height: 28px;\n padding: 4px;\n}\n.opportunities-extension-install-base-dialog .opportunities-extension-customer-table-toolbar {\n padding: 8px 12px;\n}\n.opportunities-extension-install-base-dialog .opportunities-extension-customer-table-search {\n width: min(320px, 100%);\n height: 32px;\n padding: 4px 8px;\n font-size: 12px;\n line-height: 20px;\n}\n.opportunities-extension-install-base-content {\n min-width: 0;\n min-height: 0;\n overflow: auto;\n scrollbar-gutter: stable;\n}\n.opportunities-extension-install-base-message { margin: 10px 12px; font-size: 12px; line-height: 16px; }\n.opportunities-extension-install-base-table {\n width: 100%; min-width: 1120px; table-layout: fixed; border-collapse: collapse; font-size: 11px;\n}\n.opportunities-extension-install-base-table col { width: 7%; }\n.opportunities-extension-install-base-table .install-base-col-productGroupName { width: 13%; }\n.opportunities-extension-install-base-table .install-base-col-productName { width: 13%; }\n.opportunities-extension-install-base-table .install-base-col-quantity { width: 5%; }\n.opportunities-extension-install-base-table .install-base-col-quantityType { width: 8%; }\n.opportunities-extension-install-base-table th,\n.opportunities-extension-install-base-table td {\n padding: 8px 6px; text-align: left; vertical-align: middle; overflow-wrap: anywhere;\n border-bottom: 1px solid #e8e5e1; line-height: 1.4;\n}\n.opportunities-extension-install-base-table th { position: sticky; top: 0; z-index: 1; background: #faf9f8; }\n.opportunities-extension-install-base-table td[data-format=\"amount\"],\n.opportunities-extension-install-base-table td[data-format=\"quantity\"] { text-align: right; font-variant-numeric: tabular-nums; }\n.opportunities-extension-install-base-table td[data-format=\"date\"] { white-space: nowrap; }\n.opportunities-extension-install-base-status {\n display: inline-block; padding: 2px 5px; border-radius: 12px; font-size: 10px; font-weight: 600;\n color: #5f5a55; background: #eceae8; white-space: nowrap;\n}\n.opportunities-extension-install-base-status[data-status=\"ACTIVE\"] { color: #17693a; background: #e1f1e5; }\n.opportunities-extension-install-base-status[data-status=\"UNSUPPORTED\"] { color: #855300; background: #fff0d6; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-install-base-content,\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-install-base-table,\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-install-base-table th,\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-install-base-table td { color: #f6f4f2; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-install-base-message { color: #c9c5c1; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-install-base-message[role=\"alert\"] { color: #ffb4ab; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-install-base-table th { background: #353331; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-install-base-table th,\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-install-base-table td { border-color: #484541; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-install-base-status { color: #dedbd7; background: #484541; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-install-base-status[data-status=\"ACTIVE\"] { color: #b8e4c6; background: #214d34; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-install-base-status[data-status=\"UNSUPPORTED\"] { color: #ffdfa2; background: #614418; }\n@media (prefers-reduced-motion: reduce) {\n .opportunities-extension-install-base-table .opportunities-extension-account-plans-skeleton-bar { animation: none; }\n}\n.opportunities-extension-install-base-table .opportunities-extension-sort-button { min-height: 28px; padding: 4px 16px 4px 0; overflow-wrap: anywhere; }\n.opportunities-extension-install-base-table .opportunities-extension-sort-button::after { right: 0; font-size: 12px; }\n\n.opportunities-extension-account-plans-dialog.opportunities-extension-service-requests-dialog { width: min(1700px, 100%); }\n.opportunities-extension-service-requests-content { min-width: 0; min-height: 0; overflow: auto; scrollbar-gutter: stable; }\n.opportunities-extension-service-requests-message { margin: 16px; font-size: 13px; }\n.opportunities-extension-service-requests-table {\n width: 100%; min-width: 1200px; table-layout: fixed; border-collapse: collapse; font-size: 12px;\n}\n.opportunities-extension-service-requests-table col { width: 7%; }\n.opportunities-extension-service-requests-table .service-requests-col-name { width: 17%; }\n.opportunities-extension-service-requests-table .service-requests-col-id { width: 10%; }\n.opportunities-extension-service-requests-table .service-requests-col-severity { width: 5%; }\n.opportunities-extension-service-requests-table .service-requests-col-subStatus { width: 14%; }\n.opportunities-extension-service-requests-table .service-requests-col-productName { width: 12%; }\n.opportunities-extension-service-requests-table th,\n.opportunities-extension-service-requests-table td {\n padding: 12px 8px; text-align: left; vertical-align: middle; overflow-wrap: anywhere;\n border-bottom: 1px solid #e8e5e1; line-height: 1.4;\n}\n.opportunities-extension-service-requests-table th { position: sticky; top: 0; z-index: 1; background: #faf9f8; }\n.opportunities-extension-service-requests-table td[data-field=\"created\"],\n.opportunities-extension-service-requests-table td[data-field=\"lastUpdated\"],\n.opportunities-extension-service-requests-table td[data-field=\"id\"] { white-space: nowrap; font-variant-numeric: tabular-nums; }\n.opportunities-extension-service-request-status {\n display: inline-block; padding: 3px 6px; border-radius: 12px; font-size: 10px; font-weight: 600;\n color: #5f5a55; background: #eceae8;\n}\n.opportunities-extension-service-request-status[data-status=\"OPEN\"] { color: #17693a; background: #e1f1e5; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-service-requests-content,\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-service-requests-table,\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-service-requests-table th,\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-service-requests-table td { color: #f6f4f2; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-service-requests-message { color: #c9c5c1; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-service-requests-message[role=\"alert\"] { color: #ffb4ab; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-service-requests-table th { background: #353331; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-service-requests-table th,\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-service-requests-table td { border-color: #484541; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-service-request-status { color: #dedbd7; background: #484541; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-service-request-status[data-status=\"OPEN\"] { color: #b8e4c6; background: #214d34; }\n@media (prefers-reduced-motion: reduce) {\n .opportunities-extension-service-requests-table .opportunities-extension-account-plans-skeleton-bar { animation: none; }\n}\n.opportunities-extension-service-requests-table .opportunities-extension-sort-button { min-height: 28px; padding: 4px 16px 4px 0; overflow-wrap: anywhere; }\n.opportunities-extension-service-requests-table .opportunities-extension-sort-button::after { right: 0; font-size: 12px; }\n\n/* Scope sizing to Cloud Consumption, not other dialogs sharing its components. */\n[data-consumption-layout=\"compact\"] .opportunities-extension-account-plans-header { padding: 10px 12px; gap: 12px; }\n[data-consumption-layout=\"compact\"] .opportunities-extension-account-plans-header h2 { font-size: 16px; line-height: 22px; }\n[data-consumption-layout=\"compact\"] .opportunities-extension-account-plans-header p { font-size: 12px; line-height: 16px; margin-top: 3px; overflow-wrap: anywhere; }\n[data-consumption-layout=\"compact\"] .opportunities-extension-icon-button { width: 28px; height: 28px; min-width: 28px; min-height: 28px; padding: 4px; }\n[data-consumption-layout=\"compact\"] .opportunities-extension-account-plans-tabs { padding: 4px 12px 0; }\n[data-consumption-layout=\"compact\"] .opportunities-extension-account-plan-tab { min-height: 30px; padding: 4px 8px; font-size: 12px; }\n[data-consumption-layout=\"compact\"] .opportunities-extension-account-plan-panel { padding: 8px 12px; }\n[data-consumption-layout=\"compact\"] .opportunities-extension-account-plan-details { gap: 0 12px; }\n[data-consumption-layout=\"compact\"] .opportunities-extension-account-plan-details > div { grid-template-columns: minmax(85px, 35%) minmax(0, 1fr); min-height: 32px; padding: 4px 0; gap: 6px; }\n[data-consumption-layout=\"compact\"] .opportunities-extension-account-plan-details dt { font-size: 11px; line-height: 16px; }\n[data-consumption-layout=\"compact\"] .opportunities-extension-account-plan-details dd { font-size: 12px; line-height: 16px; }\n[data-consumption-layout=\"compact\"] .opportunities-extension-consumption-trend { margin-top: 8px; padding-top: 6px; }\n[data-consumption-layout=\"compact\"] .opportunities-extension-consumption-periods button { min-height: 28px; padding: 4px 8px; font-size: 12px; }\n[data-consumption-layout=\"compact\"] .opportunities-extension-consumption-navigation { grid-template-columns: 28px minmax(120px, auto) 28px; min-height: 30px; }\n[data-consumption-layout=\"compact\"] .opportunities-extension-consumption-navigation strong { font-size: 12px; }\n[data-consumption-layout=\"compact\"] .opportunities-extension-consumption-navigation-button { width: 28px; height: 28px; }\n[data-consumption-layout=\"compact\"] .opportunities-extension-consumption-visual { grid-template-columns: minmax(0, 1fr) 150px; gap: 8px; }\n[data-consumption-layout=\"compact\"] .opportunities-extension-consumption-svg { height: 100%; max-height: 100%; min-width: 0; }\n[data-consumption-layout=\"compact\"] .opportunities-extension-consumption-legend button { font-size: 11px; padding: 4px; gap: 5px; }\n\n/* Small viewports must scroll rather than clip details or collapse the chart. */\n@media (max-height: 560px), (max-width: 700px) {\n [data-consumption-layout=\"compact\"] .opportunities-extension-account-plans-panels { overflow: auto; }\n [data-consumption-layout=\"compact\"] .opportunities-extension-account-plan-panel { height: auto; min-height: 100%; grid-template-rows: auto minmax(280px, 1fr); }\n}\n@media (max-width: 700px) {\n [data-consumption-layout=\"compact\"] .opportunities-extension-account-plan-details { grid-template-columns: minmax(0, 1fr); }\n [data-consumption-layout=\"compact\"] .opportunities-extension-consumption-visual { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }\n [data-consumption-layout=\"compact\"] .opportunities-extension-consumption-legend { display: flex; flex-wrap: wrap; }\n}\n\n.opportunities-extension-plan-detail-badges { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }\n.opportunities-extension-consumption-trend-header { align-items: center; justify-content: space-between; gap: 12px; }\n.opportunities-extension-consumption-trend-header > .opportunities-extension-plan-detail-badges { min-width: 0; }\n.opportunities-extension-plan-detail-skeleton { width: 64px; height: 20px; }\n.opportunities-extension-projection-badge {\n display: inline-flex; align-items: center; justify-content: center; border: 1px solid transparent;\n padding: 3px 8px; border-radius: 12px; font-size: 11px; font-weight: 600; line-height: 1.3;\n color: #5f5a55; background: #eceae8; white-space: nowrap;\n}\nbutton.opportunities-extension-projection-badge { cursor: pointer; }\n.opportunities-extension-projection-badge[data-status=\"forfeit\"] { color: #a12424; background: #fbe5e5; }\n.opportunities-extension-projection-badge[data-status=\"overage\"] { color: #185a9d; background: #e0edfc; }\n.opportunities-extension-projection-badge:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }\n.opportunities-extension-projection-popover {\n position: fixed; z-index: 8; box-sizing: border-box; padding: 14px; overflow: auto; overscroll-behavior: contain;\n border: 1px solid #b9b4ae; border-radius: 4px; background: #ffffff; color: #312d2a;\n box-shadow: 0 4px 16px #0003; font-size: 12px; line-height: 1.4; overflow-wrap: anywhere;\n}\n.opportunities-extension-projection-popover[hidden] { display: none; }\n.opportunities-extension-projection-popover .opportunities-extension-projection-dismiss {\n display: grid; place-items: center; width: 24px; height: 24px; margin-left: auto; margin-bottom: 8px; padding: 4px; border: 1px solid #b9b4ae;\n border-radius: 4px; background: transparent; color: inherit; cursor: pointer; font-size: 12px;\n}\n.opportunities-extension-projection-dismiss svg { width: 14px; height: 14px; }\n.opportunities-extension-projection-line h3 { margin: 0 0 8px; font-size: 12px; }\n.opportunities-extension-projection-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; margin: 0; }\n.opportunities-extension-projection-fields > div { min-width: 0; }\n.opportunities-extension-projection-fields dt { font-weight: 600; color: #5f5a55; font-size: 11px; }\n.opportunities-extension-projection-fields dd { margin: 2px 0 0; font-variant-numeric: tabular-nums; }\n.opportunities-extension-projection-fields a { color: #006d7a; text-decoration: underline; }\n.opportunities-extension-projection-children { margin-top: 14px; padding-left: 12px; border-left: 2px solid #dedbd7; }\n.opportunities-extension-projection-children > section + section { margin-top: 16px; }\n.opportunities-extension-plan-detail-error { color: #a12424; font-size: 12px; }\n.opportunities-extension-projection-empty { color: #5f5a55; font-size: 12px; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-projection-popover { color: #f1efec; background: #302e2b; border-color: #716b64; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-projection-badge { color: #dedbd7; background: #484541; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-projection-badge[data-status=\"forfeit\"] { color: #ffb9b9; background: #682e32; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-projection-badge[data-status=\"overage\"] { color: #c5dfff; background: #224b76; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-projection-fields dt,\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-projection-empty { color: #cec9c2; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-projection-fields a { color: #76dbea; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-plan-detail-error { color: #ffb9b9; }\n@media (max-width: 480px) { .opportunities-extension-projection-fields { grid-template-columns: minmax(0, 1fr); } }\n@media (max-width: 480px) {\n .opportunities-extension-consumption-trend-header > .opportunities-extension-consumption-periods { grid-template-columns: repeat(2, minmax(0, 1fr)); }\n}\n@media (prefers-reduced-motion: reduce) { .opportunities-extension-plan-detail-skeleton { animation: none; } }\n\n.opportunities-extension-account-plan-details > .opportunities-extension-contract-row {\n align-items: center;\n}\n.opportunities-extension-contract-row > dt,\n.opportunities-extension-contract-row > dd,\n.opportunities-extension-contract-ratecard > span {\n line-height: 20px;\n}\n.opportunities-extension-contract-ratecard {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n gap: 6px 10px;\n}\n.opportunities-extension-ratecard-button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n align-self: center;\n box-sizing: border-box;\n height: 28px;\n margin: 0;\n flex: 0 0 auto;\n padding: 0 8px;\n border: 1px solid #8aaeb9;\n border-radius: 4px;\n background: #fff;\n color: #006b80;\n font: inherit;\n font-size: 12px;\n font-weight: 600;\n line-height: 20px;\n cursor: pointer;\n}\n.opportunities-extension-ratecard-button:hover { background: #e8f4f6; }\n.opportunities-extension-ratecard-overlay {\n position: absolute;\n inset: 0;\n z-index: 8;\n display: flex;\n justify-content: flex-end;\n overflow: hidden;\n overflow: clip;\n background: rgba(0, 0, 0, 0);\n transition: background-color 320ms ease;\n}\n.opportunities-extension-ratecard-overlay[data-open=\"true\"] { background: rgba(0, 0, 0, .32); }\n.opportunities-extension-ratecard-drawer {\n --ratecard-bg: #fff;\n --ratecard-heading: #faf9f8;\n --ratecard-text: #312d2a;\n --ratecard-muted: #615a55;\n --ratecard-border: #dedbd8;\n --ratecard-accent: #00758f;\n --ratecard-skeleton: #eae7e4;\n display: grid;\n grid-template-rows: auto auto auto minmax(0, 1fr);\n width: min(1520px, calc(100% - 48px));\n height: 100%;\n min-width: 0;\n box-sizing: border-box;\n overflow: hidden;\n background: var(--ratecard-bg);\n color: var(--ratecard-text);\n box-shadow: -6px 0 24px rgba(0, 0, 0, .2);\n transform: translateX(100%);\n transition: transform 320ms cubic-bezier(.22, .61, .36, 1);\n}\n.opportunities-extension-ratecard-overlay[data-open=\"true\"] .opportunities-extension-ratecard-drawer { transform: translateX(0); }\n.opportunities-extension-ratecard-header > div { min-width: 0; overflow-wrap: anywhere; }\n.opportunities-extension-ratecard-plan-details { padding: 12px 20px 0; }\n.opportunities-extension-ratecard-toolbar { display: flex; align-items: center; gap: 16px; padding: 12px 20px; }\n.opportunities-extension-ratecard-search {\n width: min(360px, 100%);\n min-width: 0;\n box-sizing: border-box;\n padding: 9px 12px;\n border: 1px solid var(--ratecard-muted);\n border-radius: 4px;\n background: var(--ratecard-bg);\n color: var(--ratecard-text);\n font: inherit;\n font-size: 13px;\n}\n.opportunities-extension-ratecard-search::placeholder { color: var(--ratecard-muted); opacity: 1; }\n.opportunities-extension-ratecard-count { color: var(--ratecard-muted); font-size: 12px; white-space: nowrap; }\n.opportunities-extension-ratecard-viewport { overflow: auto; min-height: 0; min-width: 0; scrollbar-gutter: stable; }\n.opportunities-extension-ratecard-table { width: 100%; min-width: 1100px; table-layout: fixed; border-collapse: separate; border-spacing: 0; font-size: 12px; }\n.opportunities-extension-ratecard-table th, .opportunities-extension-ratecard-table td {\n padding: 11px 10px;\n border-bottom: 1px solid var(--ratecard-border);\n vertical-align: top;\n overflow-wrap: anywhere;\n text-align: left;\n}\n.opportunities-extension-ratecard-table th { position: sticky; top: 0; z-index: 1; background: var(--ratecard-heading); }\n.opportunities-extension-ratecard-sort {\n display: grid;\n grid-template-columns: minmax(0, 1fr) 12px;\n align-items: center;\n gap: 5px;\n width: 100%;\n padding: 0;\n border: 0;\n background: transparent;\n color: inherit;\n font: inherit;\n font-weight: 600;\n text-align: left;\n cursor: pointer;\n}\n.opportunities-extension-ratecard-sort-icon { color: var(--ratecard-accent); text-align: center; }\n.opportunities-extension-ratecard-table .opportunities-extension-ratecard-numeric { text-align: right; font-variant-numeric: tabular-nums; }\n.opportunities-extension-ratecard-table .opportunities-extension-ratecard-notice { padding: 28px 20px; text-align: center; }\n.opportunities-extension-ratecard-notice [role=\"alert\"] { color: #b3261e; }\n.opportunities-extension-ratecard-skeleton { display: block; width: 85%; height: 14px; border-radius: 3px; background: var(--ratecard-skeleton); animation: opportunities-ratecard-pulse 1.1s ease-in-out infinite alternate; }\n.opportunities-extension-ratecard-drawer :focus-visible, .opportunities-extension-ratecard-button:focus-visible { outline: 2px solid #00758f; outline-offset: 2px; }\n.opportunities-extension-ratecard-overlay[data-closing=\"true\"] { pointer-events: none; background: rgba(0, 0, 0, 0); transition-duration: 180ms; }\n.opportunities-extension-ratecard-overlay[data-closing=\"true\"] .opportunities-extension-ratecard-drawer { transform: translateX(100%); transition-duration: 180ms; }\n[data-theme=\"dark\"] .opportunities-extension-ratecard-drawer {\n --ratecard-bg: #292725;\n --ratecard-heading: #35322f;\n --ratecard-text: #f5f3f1;\n --ratecard-muted: #c2bcb6;\n --ratecard-border: #514c47;\n --ratecard-accent: #59d1e5;\n --ratecard-skeleton: #514c47;\n}\n[data-theme=\"dark\"] .opportunities-extension-ratecard-button { color: #59d1e5; border-color: #6298a2; background: #292725; }\n[data-theme=\"dark\"] .opportunities-extension-ratecard-button:hover { background: #313f40; }\n[data-theme=\"dark\"] .opportunities-extension-ratecard-notice [role=\"alert\"] { color: #ffb4ab; }\n[data-theme=\"dark\"] .opportunities-extension-ratecard-drawer :focus-visible, [data-theme=\"dark\"] .opportunities-extension-ratecard-button:focus-visible { outline-color: #59d1e5; }\n@keyframes opportunities-ratecard-pulse { from { opacity: .45; } to { opacity: 1; } }\n@media (max-width: 720px) {\n .opportunities-extension-ratecard-drawer { width: 100%; }\n .opportunities-extension-ratecard-toolbar { flex-wrap: wrap; gap: 8px; }\n}\n@media (prefers-reduced-motion: reduce) {\n .opportunities-extension-ratecard-overlay, .opportunities-extension-ratecard-drawer, .opportunities-extension-ratecard-skeleton,\n .opportunities-extension-ratecard-overlay[data-closing=\"true\"], .opportunities-extension-ratecard-overlay[data-closing=\"true\"] .opportunities-extension-ratecard-drawer { animation: none; transition: none; }\n}\n\n.opportunities-extension-ratecard-toolbar { flex-wrap: wrap; }\n.opportunities-extension-ratecard-order-filter { position: relative; min-width: 0; }\n.opportunities-extension-ratecard-order-filter .opportunities-extension-customer-filter-trigger { min-height: 38px; padding-block: 8px; font-size: 13px; }\n.opportunities-extension-ratecard-order-filter .opportunities-extension-customer-filter-panel { width: min(320px, calc(100vw - 80px)); max-height: 45vh; overflow: auto; }\n\n.opportunities-extension-account-plans-dialog.opportunities-extension-install-base-dialog,\n.opportunities-extension-account-plans-dialog.opportunities-extension-service-requests-dialog {\n grid-template-rows: auto auto minmax(0, 1fr);\n}\n.opportunities-extension-customer-table-toolbar { padding: 12px 16px; border-bottom: 1px solid #dedbd7; }\n.opportunities-extension-customer-table-search {\n box-sizing: border-box;\n width: min(420px, 100%);\n min-width: 0;\n height: 38px;\n padding: 8px 12px;\n border: 1px solid #8f8a85;\n border-radius: 4px;\n background: #fff;\n color: #312d2a;\n font: inherit;\n font-size: 13px;\n}\n.opportunities-extension-customer-table-search::placeholder { color: #5f5a55; opacity: 1; }\n.opportunities-extension-customer-table-search:focus-visible { outline: 2px solid #00758f; outline-offset: 2px; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-customer-table-toolbar { border-color: #484541; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-customer-table-search { background: #353331; color: #f6f4f2; border-color: #8f8a85; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-customer-table-search::placeholder { color: #c9c5c1; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-customer-table-search:focus-visible { outline-color: #59d1e5; }\n\n.opportunities-extension-views { min-height: 0; min-width: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 8px; }\n.opportunities-extension-views > [hidden] { display: none; }\n.opportunities-extension-view-tabs { display: flex; gap: 20px; border-bottom: 1px solid #dedbd7; }\n.opportunities-extension-view-tabs button { border: 0; border-bottom: 3px solid transparent; background: transparent; color: #625d58; padding: 6px 2px 9px; font: 600 13px/20px Arial, sans-serif; cursor: pointer; }\n.opportunities-extension-view-tabs button[aria-selected=\"true\"] { border-bottom-color: #00758f; color: #00657b; }\n.opportunities-extension-view-tabs button:focus-visible { outline: 2px solid #00758f; outline-offset: -2px; }\n.opportunities-extension-view-tabs button { display: inline-flex; align-items: center; gap: 6px; }\n.opportunities-extension-view-tabs button svg { width: 16px; height: 16px; flex: 0 0 16px; }\n.opportunities-extension-calendar {\n --fc-border-color: #dedbd7; --fc-page-bg-color: #fff; --fc-neutral-bg-color: #f5f4f2;\n --fc-neutral-text-color: #625d58; --fc-today-bg-color: #eef7fa;\n --fc-button-bg-color: #fff; --fc-button-text-color: #312d2a; --fc-button-border-color: #b9b4ae;\n --fc-button-hover-bg-color: #e6f3f5; --fc-button-hover-border-color: #00758f;\n --fc-button-active-bg-color: #dceff3; --fc-button-active-border-color: #00758f;\n min-height: 0; min-width: 0; overflow: hidden; display: flex; flex-direction: column; padding: 12px; background: #fff; color: #312d2a;\n border: 1px solid var(--fc-border-color); border-radius: 4px; font: 13px/1.4 Arial, sans-serif;\n}\n.opportunities-calendar-grid { flex: 1 1 0; min-height: 0; min-width: 0; }\n.opportunities-extension-calendar .fc { min-width: 620px; }\n.opportunities-extension-calendar .fc .fc-toolbar { gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }\n.opportunities-extension-calendar .fc .fc-toolbar-title { font-size: 18px; line-height: 26px; letter-spacing: 0; }\n.opportunities-extension-calendar .fc .fc-button { font-size: 13px; line-height: 20px; padding: 5px 10px; border-radius: 4px; box-shadow: none; }\n.opportunities-extension-calendar .fc .fc-button:focus-visible { outline: 2px solid #00758f; outline-offset: 2px; }\n.opportunities-extension-calendar .fc .fc-button svg { width: 16px; height: 16px; margin-right: 6px; vertical-align: -3px; }\n.opportunities-extension-calendar .fc a { color: inherit; text-decoration: none; }\n.opportunities-extension-calendar .fc th { background: var(--fc-neutral-bg-color); font-size: 12px; font-weight: 600; padding: 4px 0; }\n.opportunities-extension-calendar .fc .fc-daygrid-day-number { font-size: 11px; line-height: 18px; padding: 1px 6px; }\n.opportunities-extension-calendar .fc .fc-daygrid-day-events { min-height: 0; margin-bottom: 0; }\n.opportunities-extension-calendar .fc .fc-daygrid-day-bottom { margin: 0; }\n.opportunities-extension-calendar .fc .fc-daygrid-day-frame { min-height: 0; padding-top: 0; }\n/* Event content must not contribute to the table's intrinsic row heights. */\n.opportunities-extension-calendar .fc .fc-daygrid-body tbody { height: 100%; }\n.opportunities-extension-calendar .fc .fc-daygrid-body tr { height: calc(100% / var(--opportunities-calendar-weeks, 5)); }\n.opportunities-extension-calendar .fc .fc-daygrid-day { position: relative; }\n.opportunities-extension-calendar .fc .fc-daygrid-day-frame { position: absolute; inset: 0; }\n.opportunities-extension-calendar .fc .fc-daygrid-week-number { top: 0; left: 0; padding: 3px 6px; background: var(--fc-neutral-bg-color); color: inherit; font: 600 10px/16px Arial, sans-serif; white-space: nowrap; }\n.opportunities-calendar-day-count { position: absolute; top: 2px; left: 6px; min-width: 18px; height: 16px; padding: 0 4px; border-radius: 8px; background: #dceff3; color: #005467; font: 600 10px/16px Arial, sans-serif; text-align: center; }\n.fc-daygrid-week-number ~ .opportunities-calendar-day-count { left: 82px; }\n.opportunities-calendar-day-count[hidden] { display: none; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-calendar-day-count:not([data-empty=\"true\"]) { background: #16454f; color: #b9eaf4; }\n.opportunities-extension-calendar .fc .fc-day-other { background: var(--fc-neutral-bg-color); }\n.opportunities-extension-calendar .fc .fc-daygrid-event { white-space: normal; margin: 3px 4px; border-radius: 4px; cursor: pointer; border-width: 0 0 0 3px; border-style: solid; }\n.opportunities-extension-calendar .fc .fc-event-main { color: inherit; }\n.opportunities-calendar-event-content { min-width: 0; padding: 5px 6px; overflow-wrap: anywhere; }\n.opportunities-calendar-event-content strong { display: block; font-size: 12px; line-height: 16px; font-weight: 600; }\n.opportunities-calendar-event-content span { display: block; margin-top: 3px; font-size: 11px; line-height: 15px; }\n.opportunities-calendar-event-content strong,\n.opportunities-calendar-event-content span,\n.opportunities-calendar-day-item strong,\n.opportunities-calendar-day-item span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.opportunities-extension-calendar .fc .fc-daygrid-more-link { color: #00657b; font-size: 11px; line-height: 16px; padding: 0 5px; }\n.opportunities-calendar-day-list { min-height: 0; overflow-y: auto; padding: 8px 20px 20px; }\n.opportunities-calendar-day-item { display: block; width: 100%; padding: 12px 0; border: 0; border-bottom: 1px solid #dedbd7; background: transparent; color: #00657b; text-align: left; cursor: pointer; overflow-wrap: anywhere; }\n.opportunities-calendar-day-item strong, .opportunities-calendar-day-item span { display: block; font: 600 13px/20px Arial, sans-serif; }\n.opportunities-calendar-day-item span { margin-top: 4px; font-weight: 400; }\n.opportunities-calendar-day-item:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-calendar-day-item { border-bottom-color: #514d48; color: #80d6e8; }\n.opportunities-extension-calendar .fc .opportunities-calendar-stage-SQL { background: #dff1f4; border-color: #00829d; color: #005467; }\n.opportunities-extension-calendar .fc .opportunities-calendar-stage-PIPELINE,\n.opportunities-extension-calendar .fc .opportunities-calendar-stage-OTHER { background: #efeeec; border-color: #706a64; color: #49443f; }\n.opportunities-extension-calendar .fc .opportunities-calendar-stage-UPSIDE { background: #fff0da; border-color: #ba7000; color: #774700; }\n.opportunities-extension-calendar .fc .opportunities-calendar-stage-FORECAST { background: #f0e8f7; border-color: #8262a3; color: #624379; }\n.opportunities-extension-calendar .fc .opportunities-calendar-stage-WON { background: #e2f1e5; border-color: #2f8050; color: #215939; }\n.opportunities-calendar-message { margin: 0 0 12px; font-size: 13px; }\n.opportunities-calendar-message[hidden], .opportunities-calendar-grid[hidden], .opportunities-calendar-undated[hidden] { display: none; }\n.opportunities-calendar-undated { flex: 0 0 auto; max-height: 90px; overflow-y: auto; margin-top: 6px; border-top: 1px solid var(--fc-border-color); padding-top: 4px; }\n.opportunities-calendar-undated summary { cursor: pointer; font-size: 12px; line-height: 18px; }\n.opportunities-calendar-undated h3 { font-size: 13px; margin: 0 0 8px; }\n.opportunities-calendar-undated button { display: block; background: none; border: 0; text-align: left; font: inherit; padding: 6px 0; color: inherit; text-decoration: underline; cursor: pointer; overflow-wrap: anywhere; }\n.opportunities-calendar-detail .opportunities-extension-account-plans-header { align-items: start; gap: 16px; }\n.opportunities-calendar-detail .opportunities-extension-action-form-dialog { display: grid; grid-template-rows: auto minmax(0, 1fr); overflow: hidden; }\n.opportunities-calendar-detail h2 { font-size: 18px; overflow-wrap: anywhere; }\n.opportunities-calendar-detail-content { padding: 20px; overflow-y: auto; }\n.opportunities-calendar-detail-content a { color: #006b82; }\n.opportunities-calendar-detail-badges { display: flex; gap: 8px; margin-top: 18px; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-view-tabs { border-color: #514d48; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-view-tabs button { color: #c7c2bc; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-view-tabs button[aria-selected=\"true\"] { color: #80d6e8; border-bottom-color: #80d6e8; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-calendar {\n --fc-border-color: #514d48; --fc-page-bg-color: #292725; --fc-neutral-bg-color: #33302d;\n --fc-neutral-text-color: #c7c2bc; --fc-today-bg-color: #223b3f;\n --fc-button-bg-color: #292725; --fc-button-text-color: #eeeae6; --fc-button-border-color: #756f68;\n --fc-button-hover-bg-color: #234850; --fc-button-hover-border-color: #80d6e8;\n --fc-button-active-bg-color: #234850; --fc-button-active-border-color: #80d6e8;\n background: #292725; color: #eeeae6;\n}\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-calendar .fc .opportunities-calendar-stage-SQL { background: #16454f; color: #b9eaf4; border-color: #67cde0; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-calendar .fc .opportunities-calendar-stage-PIPELINE,\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-calendar .fc .opportunities-calendar-stage-OTHER { background: #403c38; color: #e4dfd9; border-color: #b8b1a8; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-calendar .fc .opportunities-calendar-stage-UPSIDE { background: #533e1e; color: #ffe0a9; border-color: #dba44f; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-calendar .fc .opportunities-calendar-stage-FORECAST { background: #493657; color: #ead5fc; border-color: #b998d8; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-calendar .fc .opportunities-calendar-stage-WON { background: #244a32; color: #c7edce; border-color: #84c396; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-calendar .fc .fc-daygrid-more-link,\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-calendar-detail-content a { color: #80d6e8; }\n@media (max-width: 700px) {\n .opportunities-extension-body { overflow-y: auto; grid-template-rows: max-content max-content minmax(480px, 1fr); }\n .opportunities-extension-views { min-height: 480px; }\n .opportunities-extension-calendar { padding: 10px; overflow-x: auto; }\n .opportunities-extension-calendar .fc { min-width: 0; }\n .opportunities-extension-calendar .fc .fc-view-harness { min-width: 560px; }\n .opportunities-extension-calendar .fc .fc-toolbar-title { font-size: 16px; }\n .opportunities-extension-calendar .fc .fc-daygrid-day-frame { padding-top: 22px; }\n .opportunities-calendar-day-count { top: 25px; }\n .fc-daygrid-week-number ~ .opportunities-calendar-day-count { left: 6px; }\n}\n\n.oe-time-dialog { --time-bg: #fff; --time-input-bg: #fff; --time-muted: #faf9f8; --time-border: #dedbd7; --time-input-border: #8f8983; --time-accent: #00758f; width: min(1600px, 100%); max-height: calc(100dvh - 24px); display: flex; flex-direction: column; overflow: hidden; font-size: 13px; line-height: 20px; }\n.opportunities-extension-modal[data-theme=\"dark\"] .oe-time-dialog { --time-bg: #292725; --time-input-bg: #211f1d; --time-muted: #35322f; --time-border: #514c47; --time-input-border: #918a82; --time-accent: #80d6e8; }\n.oe-time-modal { grid-template-columns: minmax(0, 1fr); }\n.oe-time-dialog, .oe-time-body { min-width: 0; }\n.oe-time-dialog * { box-sizing: border-box; }\n.oe-time-dialog [hidden] { display: none !important; }\n.oe-time-header { flex-shrink: 0; }\n.oe-time-body { padding: 18px; overflow: auto; min-height: 0; }\n.oe-time-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; }\n.oe-time-navigation { display: flex; align-items: center; gap: 8px; }\n.oe-time-ending { display: grid; gap: 4px; text-align: right; }\n.oe-time-summary { display: grid; grid-template-columns: repeat(4, 1fr); padding: 12px 0; gap: 12px; text-align: center; border-block: 1px solid var(--time-border); margin-bottom: 18px; }\n.oe-time-body button { min-width: 38px; min-height: 38px; display: inline-flex; gap: 8px; align-items: center; justify-content: center; color: inherit; background: transparent; border: 1px solid var(--time-input-border); border-radius: 4px; padding: 7px; cursor: pointer; font: inherit; }\n.oe-time-dialog button:hover:not(:disabled) { background: var(--time-muted); border-color: var(--time-accent); }\n.oe-time-dialog svg { width: 17px; height: 17px; flex-shrink: 0; }\n.oe-time-dialog input, .oe-time-dialog select, .oe-time-dialog textarea { font: inherit; line-height: 20px; color: inherit; background: var(--time-input-bg); border: 1px solid var(--time-input-border); border-radius: 4px; padding: 8px; min-height: 38px; }\n.oe-time-dialog select { height: 38px; }\n.oe-time-dialog :focus-visible { outline: 2px solid var(--time-accent); outline-offset: 2px; }\n.oe-time-dialog :disabled { opacity: .55; cursor: not-allowed; }\n.oe-time-grid { overflow-x: auto; }\n.oe-time-grid table { width: 100%; min-width: 1060px; border-collapse: collapse; table-layout: fixed; }\n.oe-time-grid th { background: var(--time-muted); padding: 10px 5px; font-weight: 600; text-align: center; border-bottom: 1px solid var(--time-border); }\n.oe-time-grid .opportunities-extension-sort-button { min-width: 0; min-height: 28px; padding: 4px 12px 4px 0; border: 0; border-radius: 0; gap: 0; }\n.oe-time-grid .opportunities-extension-sort-button::after { right: 0; font-size: 12px; }\n.oe-time-grid .oe-time-day-label { margin-bottom: 0; }\n.oe-time-grid th:first-child { width: 23%; }\n.oe-time-grid th:nth-child(2), .oe-time-grid th:nth-child(3) { width: 12%; }\n.oe-time-grid th:nth-last-child(-n+3) { width: 46px; }\n.oe-time-grid td { padding: 10px 5px; border-bottom: 1px solid var(--time-border); vertical-align: middle; text-align: center; }\n.oe-time-duplicate-row { outline: 2px solid #b3261e; outline-offset: -2px; animation: oe-time-duplicate-fade 5.5s linear forwards; }\n.opportunities-extension-modal[data-theme=\"dark\"] .oe-time-duplicate-row { --time-duplicate-color: #ffaaa4; }\n@keyframes oe-time-duplicate-fade { 0%, 90.909% { outline-color: var(--time-duplicate-color, #b3261e); } 100% { outline-color: transparent; } }\n@media (prefers-reduced-motion: reduce) { .oe-time-duplicate-row { animation-timing-function: step-end; } }\n.oe-time-grid select { width: 100%; }\n.oe-time-grid input[type=\"number\"] { width: min(100%, 60px); padding: 6px 3px; text-align: center; }\n.oe-time-grid .opportunities-extension-action-combobox input { width: 100%; text-align: left; text-overflow: ellipsis; }\n.oe-time-grid .opportunities-extension-action-options { text-align: left; }\n.oe-time-dialog .opportunities-extension-select-tooltip { position: fixed; z-index: 100; width: min(560px, calc(100vw - 40px)); max-height: min(440px, calc(100dvh - 48px)); overflow: auto; padding: 14px; border: 1px solid var(--time-input-border); border-radius: 4px; background: var(--time-input-bg); color: inherit; box-shadow: 0 4px 16px #0003; text-align: left; }\n.oe-time-sr-details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 18px; margin: 0; }\n.oe-time-sr-details > div { min-width: 0; overflow-wrap: anywhere; }\n.oe-time-sr-details dt { font-size: 11px; opacity: .75; margin-bottom: 2px; }\n.oe-time-sr-details dd { margin: 0; white-space: pre-wrap; }\n.oe-time-sr-details .oe-time-sr-description { grid-column: 1 / -1; }\n.oe-time-day > span { display: block; }\n.oe-time-day .oe-time-day-label { display: inline-flex; align-items: center; gap: 4px; margin-bottom: 9px; }\n.oe-time-day-total { font-size: 10px; background: var(--time-accent); color: var(--time-bg); min-width: 16px; border-radius: 8px; padding: 2px 4px; }\n.oe-time-notes textarea { width: 100%; resize: vertical; }\n.oe-time-notes-box { position: relative; text-align: left; background: var(--time-input-bg); border: 1px solid var(--time-input-border); border-radius: 4px; padding: 14px 12px 42px; }\n.oe-time-notes-count { display: block; font-weight: 600; opacity: .8; margin-bottom: 8px; }\n.oe-time-notes-box textarea { border: 0; min-height: 128px; padding: 0; }\n.oe-time-notes-box .oe-time-notes-collapse { position: absolute; right: 0; bottom: 0; background: var(--time-muted); }\n.oe-time-footer { flex-wrap: wrap; justify-content: flex-start; margin-top: 18px; }\n.oe-time-footer button { padding: 7px 14px; }\n.oe-time-status { padding: 12px 0; }\n.oe-time-loading-status { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }\n.oe-time-skeleton { display: inline-block; vertical-align: middle; border-radius: 4px; background: var(--time-border); color: transparent; animation: oe-time-pulse 1.3s ease-in-out infinite alternate; }\n.oe-time-skeleton-select { display: block; width: 100%; height: 38px; }\n.oe-time-skeleton-control { width: min(100%, 60px); height: 38px; }\n.oe-time-skeleton-heading { width: 65%; height: 20px; margin: 17px 0; }\n.oe-time-skeleton-summary { min-width: 44px; height: 20px; }\n@keyframes oe-time-pulse { from { opacity: .4; } to { opacity: 1; } }\n@media (prefers-reduced-motion: reduce) { .oe-time-skeleton { animation: none; } }\n.oe-time-status[role=\"alert\"] { color: #a12d27; }\n.oe-time-dialog [aria-invalid=\"true\"] { border-color: #b3261e; outline: 1px solid #b3261e; }\n.opportunities-extension-modal[data-theme=\"dark\"] .oe-time-status[role=\"alert\"] { color: #ffd9d5; }\n.opportunities-extension-modal[data-theme=\"dark\"] .oe-time-dialog [aria-invalid=\"true\"] { border-color: #ffaaa4; outline-color: #ffaaa4; }\n@media (max-width: 700px) { .oe-time-modal { padding: 8px; } .oe-time-dialog { max-height: calc(100dvh - 16px); } .oe-time-body { padding: 12px; } .oe-time-summary { grid-template-columns: repeat(2, 1fr); text-align: left; } .oe-time-toolbar { flex-wrap: wrap; } .oe-time-ending { text-align: left; } }\n\n.opportunities-extension-products-table th:last-child { width: 90px; padding-left: 6px; padding-right: 6px; white-space: nowrap; text-align: center; }\n.opportunities-extension-products-table .opportunities-extension-projection-cell { text-align: center; vertical-align: middle; }\n.opportunities-extension-projection-alert { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; padding: 0; color: #976000; width: 30px; height: 30px; flex: 0 0 30px; vertical-align: middle; }\n.opportunities-extension-projection-alert svg { display: block; flex: none; width: 19px; height: 19px; }\n.opportunities-extension-cell-actions > .opportunities-extension-opportunity-projection-alert { width: 20px; height: 20px; flex-basis: 20px; }\n.opportunities-extension-projection-alert:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }\n.opportunities-extension-action-form-dialog.opportunities-extension-projection-dialog { width: min(850px, 100%); display: flex; flex-direction: column; overflow: hidden; }\n.opportunities-extension-projection-dialog > header { flex: 0 0 auto; padding: 18px 20px; }\n.opportunities-extension-projection-dialog .opportunities-extension-action-form-heading { min-width: 0; overflow-wrap: anywhere; }\n.opportunities-extension-projection-body { min-height: 0; overflow: auto; padding: 16px 20px 0; }\n.opportunities-extension-projection-context { display: grid; grid-template-columns: max-content minmax(0, 1fr) max-content minmax(0, 1fr); gap: 8px 12px; margin: 0 0 16px; font-size: 12px; }\n.opportunities-extension-projection-context dt { font-weight: 600; }\n.opportunities-extension-projection-context dd { margin: 0; overflow-wrap: anywhere; }\n.opportunities-extension-projection-summary { font-size: 13px; font-weight: 600; color: #815400; margin: 0 0 12px; }\n.opportunities-extension-projection-notice { font-size: 12px; }\n.opportunities-extension-projection-viewport { overflow-x: auto; }\n.opportunities-extension-projection-table { width: 100%; border-collapse: collapse; font-size: 12px; font-variant-numeric: tabular-nums; }\n.opportunities-extension-projection-table th, .opportunities-extension-projection-table td { padding: 9px 12px; border-bottom: 1px solid #dedbd7; text-align: right; white-space: nowrap; }\n.opportunities-extension-projection-table th:first-child { text-align: left; }\n.opportunities-extension-projection-table thead th { background: #f5f4f2; font-weight: 600; }\n.opportunities-extension-projection-table .opportunities-extension-sort-button { min-height: 28px; padding: 4px 18px 4px 0; justify-content: flex-end; }\n.opportunities-extension-projection-table th:first-child .opportunities-extension-sort-button { justify-content: flex-start; }\n.opportunities-extension-projection-table .opportunities-extension-sort-button::after { right: 0; font-size: 12px; }\n.opportunities-extension-projection-table tbody th { font-weight: 400; }\n.opportunities-extension-projection-table tr[data-divergent=\"true\"] { background: #fff7e5; }\n.opportunities-extension-projection-table tr[data-divergent=\"true\"] td:last-child { color: #815400; font-weight: 700; }\n.opportunities-extension-projection-prorated { display: inline; color: #625d58; font-size: 10px; }\n.opportunities-extension-projection-footer { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0; padding: 14px 20px; font-size: 11px; color: #625d58; }\n.opportunities-extension-projection-update { flex: none; padding: 8px 12px; border: 1px solid #006879; border-radius: 4px; background: #006879; color: #fff; font: inherit; font-size: 12px; cursor: pointer; }\n.opportunities-extension-projection-update:hover:not(:disabled) { background: #005563; }\n.opportunities-extension-projection-update:disabled { opacity: .6; cursor: wait; }\n.opportunities-extension-projection-update:focus-visible { outline: 2px solid #00758f; outline-offset: 2px; }\n.opportunities-extension-projection-confirm { padding: 20px; }\n.opportunities-extension-projection-confirm h2 { margin: 0 0 12px; font-size: 18px; }\n.opportunities-extension-projection-confirm p { margin: 0 0 20px; font-size: 13px; line-height: 1.5; }\n.opportunities-extension-projection-confirm-actions { display: flex; justify-content: flex-end; gap: 8px; }\n.opportunities-extension-projection-cancel { padding: 8px 12px; border: 1px solid #8b8580; border-radius: 4px; background: transparent; color: inherit; font: inherit; font-size: 12px; cursor: pointer; }\n.opportunities-extension-projection-error { color: #b3261e; font-size: 12px; overflow-wrap: anywhere; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-projection-error { color: #ffb4ab; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-projection-alert,\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-projection-summary,\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-projection-table tr[data-divergent=\"true\"] td:last-child { color: #ffd080; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-projection-table thead th { background: #34312e; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-projection-table th,\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-projection-table td { border-color: #504b46; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-projection-table tr[data-divergent=\"true\"] { background: #3e3425; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-projection-prorated,\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-projection-footer { color: #c9c3bc; }\n@media (max-width: 600px) {\n .opportunities-extension-projection-context { grid-template-columns: max-content minmax(0, 1fr); }\n .opportunities-extension-projection-dialog > header { padding: 14px 12px; }\n .opportunities-extension-projection-body { padding: 12px 12px 0; }\n .opportunities-extension-projection-table th, .opportunities-extension-projection-table td { padding: 8px 6px; }\n .opportunities-extension-projection-footer { padding: 12px; }\n}\n\n.oe-org-modal { grid-template-columns: minmax(0, 1fr); }\n.oe-org-dialog { --org-bg: #fff; --org-canvas: #faf9f8; --org-border: #dedbd7; --org-muted: #625d58; --org-accent: #00758f; --org-selected: #e3f1f4; width: min(1500px, 100%); height: min(880px, calc(100dvh - 40px)); max-height: calc(100dvh - 40px); display: flex; flex-direction: column; overflow: hidden; font-size: 13px; color: #312d2a; background: var(--org-bg); }\n.opportunities-extension-modal[data-theme=\"dark\"] .oe-org-dialog { --org-bg: #292725; --org-canvas: #211f1d; --org-border: #625d58; --org-muted: #c9c3bd; --org-accent: #80d6e8; --org-selected: #203f46; color: #f5f4f2; }\n.oe-org-modal [hidden] { display: none !important; }\n.oe-org-dialog * { box-sizing: border-box; letter-spacing: 0; }\n.oe-org-dialog > header, .oe-org-toolbar, .oe-org-footer { flex: none; }\n.oe-org-heading { min-width: 0; overflow-wrap: anywhere; }\n.oe-org-heading p { margin: 5px 0 0; font-size: 12px; color: var(--org-muted); }\n.oe-org-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--org-border); }\n.oe-org-tools { display: flex; align-items: center; gap: 6px; margin-left: auto; }\n.oe-org-count { color: var(--org-muted); font-variant-numeric: tabular-nums; }\n.oe-org-zoom { width: 44px; text-align: center; font-variant-numeric: tabular-nums; }\n.oe-org-modal .oe-org-button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 34px; min-height: 34px; padding: 6px 9px; border: 1px solid var(--org-border, #8f8983); border-radius: 4px; background: transparent; color: inherit; font: inherit; cursor: pointer; }\n.oe-org-modal svg { width: 17px; height: 17px; flex: none; }\n.oe-org-dialog button:hover:not(:disabled) { background: var(--org-selected); }\n.oe-org-dialog :focus-visible { outline: 2px solid var(--org-accent); outline-offset: 2px; }\n.oe-org-modal .oe-org-primary { background: #006879; border-color: #006879; color: #fff; }\n.oe-org-dialog .oe-org-primary:hover:not(:disabled) { background: #005563; }\n.oe-org-dialog :disabled { opacity: .5; cursor: not-allowed; }\n.oe-org-workspace { min-height: 0; min-width: 0; flex: 1; display: flex; overflow: hidden; }\n.oe-org-viewport { position: relative; min-width: 0; min-height: 0; flex: 1; overflow: auto; background: var(--org-canvas); overscroll-behavior: contain; cursor: grab; }\n.oe-org-sizing { position: relative; margin-inline: auto; }\n.oe-org-canvas { position: relative; transform-origin: top left; }\n.oe-org-canvas .oe-org-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }\n.oe-org-lines path { stroke: var(--org-border); stroke-width: 2; fill: none; }\n.oe-org-node { position: absolute; width: 236px; height: 146px; border: 1px solid var(--org-border); border-top: 3px solid var(--org-accent); border-radius: 4px; background: var(--org-bg); display: flex; flex-direction: column; cursor: default; }\n.oe-org-node[data-selected=\"true\"] { outline: 2px solid var(--org-accent); outline-offset: 2px; }\n.oe-org-person { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: center; gap: 6px; text-align: left; padding: 9px 12px; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; border-radius: 0; width: 100%; }\n.oe-org-person strong, .oe-org-person > span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; line-height: 18px; }\n.oe-org-person > span { color: var(--org-muted); font-size: 12px; }\n.oe-org-node-actions { flex: none; display: flex; align-items: center; gap: 4px; padding: 4px 8px; height: 38px; border-top: 1px solid var(--org-border); }\n.oe-org-node-actions .oe-org-button { min-height: 28px; height: 28px; min-width: 28px; padding: 3px; border: 0; }\n.oe-org-node-actions [aria-expanded] { margin-left: auto; font-size: 11px; }\n.oe-org-note-marker { display: inline-flex; color: var(--org-muted); margin-left: auto; }\n.oe-org-editor { flex: 0 0 310px; width: 310px; padding: 16px; border-left: 1px solid var(--org-border); overflow-y: auto; background: var(--org-bg); }\n.oe-org-editor-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 16px; }\n.oe-org-editor h3 { margin: 0; font-size: 15px; }\n.oe-org-form { display: grid; gap: 16px; }\n.oe-org-field { display: grid; gap: 6px; font-size: 12px; font-weight: 600; min-width: 0; }\n.oe-org-dialog input, .oe-org-dialog textarea { min-width: 0; width: 100%; font: inherit; font-weight: 400; line-height: 20px; color: inherit; background: var(--org-bg); border: 1px solid var(--org-muted); border-radius: 3px; padding: 7px 8px; }\n.oe-org-dialog textarea { resize: vertical; min-height: 100px; max-height: 300px; }\n.oe-org-form-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }\n.oe-contact-name { position: relative; }\n.oe-org-dialog .oe-contact-name > input { padding-right: 42px; }\n.oe-org-modal .oe-contact-name > .oe-org-button { position: absolute; right: 2px; top: 2px; min-height: 30px; height: 30px; border: 0; }\n.oe-org-dialog.oe-contact-dialog { width: min(680px, 100%); height: auto; padding: 20px; gap: 20px; overflow-y: auto; }\n.oe-contact-dialog > header { margin: 0; }\n.oe-org-dialog.oe-contact-opportunities { width: min(1200px, 100%); height: auto; padding: 20px; gap: 16px; }\n.oe-contact-opportunities > header { margin: 0; }\n.oe-contact-opportunities-table { overflow: auto; min-height: 0; }\n.oe-contact-opportunities table { width: 100%; border-collapse: collapse; font-size: 12px; }\n.oe-contact-opportunities th, .oe-contact-opportunities td { padding: 12px; text-align: left; border-bottom: 1px solid var(--org-border); }\n.oe-contact-opportunities th { background: var(--org-canvas); white-space: nowrap; }\n.oe-contact-opportunities .opportunities-extension-sort-button { white-space: nowrap; min-width: max-content; min-height: 28px; padding: 4px 18px 4px 0; justify-content: flex-start; text-align: left; }\n.oe-contact-opportunities .opportunities-extension-sort-button::after { right: 0; }\n.oe-contact-opportunities th:nth-child(5), .oe-contact-opportunities td:nth-child(5) { text-align: right; font-variant-numeric: tabular-nums; }\n.oe-contact-opportunities th:nth-child(5) .opportunities-extension-sort-button { padding: 4px 0 4px 18px; justify-content: flex-end; text-align: right; }\n.oe-contact-opportunities th:nth-child(5) .opportunities-extension-sort-button::after { left: 0; right: auto; }\n.oe-contact-opportunities td:nth-child(5) .oe-contact-skeleton { margin-left: auto; }\n.oe-contact-opportunities .opportunities-extension-sort-label { white-space: nowrap; overflow-wrap: normal; word-break: normal; }\n.oe-contact-opportunities table { min-width: 900px; }\n.oe-contact-opportunities a { color: var(--org-accent); }\n.oe-contact-skeleton { display: block; height: 14px; min-width: 24px; border-radius: 4px; background: var(--org-border); animation: oe-time-pulse 1.3s ease-in-out infinite alternate; }\n.oe-contact-skeleton-total { width: 110px; }\n.oe-contact-opportunities table[aria-busy=\"true\"] { table-layout: fixed; }\n.oe-contact-opportunities table[aria-busy=\"true\"] th:nth-child(3) { width: 28%; }\n@media (prefers-reduced-motion: reduce) { .oe-contact-skeleton { animation: none; } }\n.oe-contact-dialog [aria-invalid=\"true\"] { border-color: #b3261e; outline: 1px solid #b3261e; }\n.opportunities-extension-modal[data-theme=\"dark\"] .oe-contact-dialog [aria-invalid=\"true\"] { border-color: #ffaaa4; outline-color: #ffaaa4; }\n.oe-contact-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }\n.oe-contact-phone { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; border: 1px solid var(--org-border); border-radius: 4px; padding: 12px; min-width: 0; margin: 0; }\n.oe-contact-form legend { font-weight: 600; padding: 0 4px; }\n.oe-contact-primary { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 20px; border: 0; padding: 0; margin: 0; }\n.oe-contact-primary label { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; }\n.oe-contact-primary input { width: auto; accent-color: var(--org-accent); }\n@media (max-width: 520px) { .oe-contact-form, .oe-contact-phone { grid-template-columns: minmax(0, 1fr); } }\n.oe-org-dialog .oe-org-danger, .oe-org-error { color: #b3261e; }\n.opportunities-extension-modal[data-theme=\"dark\"] .oe-org-dialog .oe-org-danger, .opportunities-extension-modal[data-theme=\"dark\"] .oe-org-error { color: #ffaaa4; }\n.oe-org-footer { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--org-border); }\n.oe-org-status { margin: 0 auto 0 0; font-size: 12px; overflow-wrap: anywhere; }\n.oe-org-footer .oe-org-button { flex: none; }\n.oe-org-empty { display: grid; place-content: center; justify-items: center; height: 100%; min-height: 180px; gap: 12px; }\n.oe-org-empty > svg { width: 40px; height: 40px; color: var(--org-accent); }\n.oe-org-empty h3 { margin: 0; font-size: 16px; }\n.oe-org-tooltip { position: fixed; z-index: 20; max-width: min(360px, calc(100vw - 24px)); max-height: min(260px, 45dvh); overflow-y: auto; padding: 12px; background: #fff; color: #312d2a; border: 1px solid #8f8983; border-radius: 4px; box-shadow: 0 3px 12px #0002; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12px; line-height: 18px; }\n.opportunities-extension-modal[data-theme=\"dark\"] .oe-org-tooltip { background: #35322f; color: #f5f4f2; }\n.oe-org-tooltip { pointer-events: none; }\n.oe-org-confirm { position: absolute; inset: 0; display: grid; place-items: center; background: #0006; z-index: 30; padding: 16px; }\n.oe-org-confirm-panel { width: min(430px, 100%); background: #fff; color: #312d2a; border: 1px solid #8f8983; border-radius: 6px; padding: 24px; overflow-wrap: anywhere; }\n.oe-org-confirm-panel h3 { margin: 0 0 12px; font-size: 18px; }\n.oe-org-confirm-panel p { font-size: 13px; line-height: 20px; margin: 0 0 24px; }\n.opportunities-extension-modal[data-theme=\"dark\"] .oe-org-confirm-panel { background: #292725; color: #f5f4f2; }\n.oe-org-skeleton { width: 236px; height: 146px; margin: 28px; border-radius: 4px; background: var(--org-border); animation: oe-time-pulse 1.3s ease-in-out infinite alternate; }\n@media (prefers-reduced-motion: reduce) { .oe-org-skeleton { animation: none; } }\n@media (max-width: 760px) {\n .oe-org-modal { padding: 8px; }\n .oe-org-dialog { height: calc(100dvh - 16px); max-height: calc(100dvh - 16px); }\n .oe-org-workspace { flex-direction: column; }\n .oe-org-editor { flex: 0 1 55%; width: 100%; border-left: 0; border-top: 1px solid var(--org-border); }\n .oe-org-viewport { min-height: 140px; }\n .oe-org-toolbar { padding: 8px; gap: 6px; }\n .oe-org-tools { gap: 2px; }\n .oe-org-footer { padding: 8px; }\n}\n\n/* Shared data-table presentation. Calendar grids are intentionally not data tables. */\n.opportunities-extension-modal :is(\n .opportunities-extension-table-surface,\n .opportunities-extension-install-base-content,\n .opportunities-extension-service-requests-content,\n .opportunities-extension-ratecard-viewport,\n .opportunities-extension-projection-viewport,\n .oe-time-grid,\n .oe-contact-opportunities-table\n) {\n box-sizing: border-box;\n min-width: 0;\n border: 1px solid var(--oe-table-heading-border);\n border-radius: 4px;\n overflow: auto;\n}\n/* Unpadded dialogs need an inset on the scrolling frame itself. */\n.opportunities-extension-modal :is(\n .opportunities-extension-install-base-content,\n .opportunities-extension-service-requests-content,\n .opportunities-extension-ratecard-viewport\n) { margin: 16px; }\n/* Other frames already sit inside a padded body: keep a single gutter. */\n.opportunities-extension-modal :is(\n .opportunities-extension-body,\n .opportunities-extension-projection-body,\n .opportunities-extension-products-detail,\n .oe-time-body,\n .oe-org-dialog.oe-contact-opportunities\n) { padding: 16px; }\n.opportunities-extension-modal table.opportunities-extension-products-table {\n border: 1px solid var(--oe-table-heading-border);\n}\n.opportunities-extension-modal {\n --oe-table-heading: #faf9f8;\n --oe-table-text: #312d2a;\n --oe-table-border: #ebe8e5;\n --oe-table-heading-border: #b8b2ad;\n --oe-table-hover: #f5f4f2;\n}\n.opportunities-extension-modal[data-theme=\"dark\"] {\n --oe-table-heading: #333130;\n --oe-table-text: #f6f4f2;\n --oe-table-border: #3f3c39;\n --oe-table-heading-border: #4e4a46;\n --oe-table-hover: #35322f;\n}\n.opportunities-extension-modal table[data-table-layout=\"standard\"]:not(.fc-scrollgrid) {\n width: 100%; border-collapse: collapse; border-spacing: 0; table-layout: auto;\n color: var(--oe-table-text); font-size: 12px; line-height: 1.35;\n}\n.opportunities-extension-modal table[data-table-layout=\"standard\"] > thead > tr > th {\n padding: 10px 12px; height: 44px; vertical-align: middle; text-align: left;\n white-space: nowrap; overflow-wrap: normal; word-break: normal;\n font-size: 12px; font-weight: 700; color: var(--oe-table-text);\n background: var(--oe-table-heading); border-bottom: 1px solid var(--oe-table-heading-border);\n}\n.opportunities-extension-modal table[data-table-layout=\"standard\"] > tbody > tr > td {\n padding: 10px 12px; vertical-align: middle; text-align: left;\n border-bottom: 1px solid var(--oe-table-border);\n}\n.opportunities-extension-modal table[data-table-layout=\"standard\"] > tbody > tr:hover { background: var(--oe-table-hover); }\n.opportunities-extension-modal table[data-table-layout=\"standard\"] > thead > tr > th .opportunities-extension-sort-button,\n.opportunities-extension-modal table[data-table-layout=\"standard\"] .opportunities-extension-ratecard-sort {\n display: flex; align-items: center; justify-content: flex-start; gap: 8px;\n width: 100%; min-width: max-content; min-height: 28px; padding: 4px 18px 4px 0;\n border: 0; border-radius: 0; background: transparent; color: inherit;\n text-align: left; white-space: nowrap; overflow-wrap: normal; font-weight: 700;\n}\n.opportunities-extension-modal table[data-table-layout=\"standard\"] .opportunities-extension-sort-label { white-space: nowrap; overflow-wrap: normal; word-break: normal; }\n.opportunities-extension-modal table[data-table-layout=\"standard\"] > thead > tr > th .opportunities-extension-sort-button::after { position: absolute; right: 0; left: auto; font-size: 12px; }\n.opportunities-extension-modal table[data-table-layout=\"standard\"] .opportunities-extension-ratecard-sort-icon { margin-left: auto; }\n/* Currency columns keep their heading and value on the same right edge. */\n.opportunities-extension-modal table[data-table-layout=\"standard\"] :is(th, td)[data-align=\"money\"] { text-align: right; font-variant-numeric: tabular-nums; }\n.opportunities-extension-modal table[data-table-layout=\"standard\"] > thead > tr > th[data-align=\"money\"] .opportunities-extension-sort-button,\n.opportunities-extension-modal table[data-table-layout=\"standard\"] th[data-align=\"money\"] .opportunities-extension-ratecard-sort { justify-content: flex-end; text-align: right; padding: 4px 0 4px 18px; }\n.opportunities-extension-modal table[data-table-layout=\"standard\"] > thead > tr > th[data-align=\"money\"] .opportunities-extension-sort-button::after { left: 0; right: auto; }\n.opportunities-extension-modal table[data-table-layout=\"standard\"] th[data-align=\"money\"] .opportunities-extension-ratecard-sort-icon { order: -1; margin-left: 0; margin-right: auto; }\n.opportunities-extension-modal table[data-table-layout=\"standard\"] td[data-align=\"money\"] > span[class*=\"skeleton\"] { margin-left: auto; }\n/* Preserve room for Overview badges and the compact daily entry controls. */\n.opportunities-extension-modal table.opportunities-extension-table > tbody > tr > td:is([data-column=\"name\"], [data-column=\"customer\"]) { padding-bottom: 38px; vertical-align: top; }\n.opportunities-extension-modal .oe-time-grid table[data-table-layout=\"standard\"] > :is(thead, tbody) > tr > :is(th, td) { padding-left: 5px; padding-right: 5px; }\n.opportunities-extension-modal .oe-time-grid table[data-table-layout=\"standard\"] { table-layout: fixed; }\n.opportunities-extension-modal table[data-table-layout=\"standard\"] > tbody > tr > th[scope=\"row\"] { padding: 10px 12px; text-align: left; background: var(--oe-table-heading); border-bottom: 1px solid var(--oe-table-border); }\n/* Rate Card must fit its drawer; headings may wrap at spaces, never mid-word. */\n.opportunities-extension-modal table.opportunities-extension-ratecard-table[data-table-layout=\"standard\"] {\n min-width: 0;\n table-layout: fixed;\n}\n.opportunities-extension-modal table.opportunities-extension-ratecard-table[data-table-layout=\"standard\"] > :is(thead, tbody) > tr > :is(th, td) {\n padding-inline: 6px;\n}\n.opportunities-extension-modal table.opportunities-extension-ratecard-table[data-table-layout=\"standard\"] > thead > tr > th,\n.opportunities-extension-modal table.opportunities-extension-ratecard-table[data-table-layout=\"standard\"] > thead > tr > th .opportunities-extension-ratecard-sort {\n white-space: normal;\n overflow-wrap: normal;\n word-break: normal;\n hyphens: none;\n min-width: 0;\n}\n.opportunities-extension-modal table.opportunities-extension-ratecard-table[data-table-layout=\"standard\"] > thead > tr > th .opportunities-extension-ratecard-sort {\n padding: 4px 0;\n gap: 4px;\n}\n.opportunities-extension-modal .opportunities-extension-ratecard-sort > span:first-child { min-width: 0; }\n.opportunities-extension-modal .opportunities-extension-ratecard-sort-icon { flex: 0 0 12px; }\n\n/* Modal titles follow the customer Service Requests heading. Keep section and\n calendar headings independent from dialog typography. */\n.opportunities-extension-modal :is(\n .opportunities-extension-header,\n .opportunities-extension-account-plans-header,\n .opportunities-extension-preferences-header\n) {\n padding: 16px;\n gap: 16px;\n align-items: flex-start;\n}\n/* These headers live in panels that already supply the outer inset. */\n.opportunities-extension-modal :is(.oe-org-dialog.oe-contact-dialog,\n .oe-org-confirm-panel, .opportunities-extension-projection-confirm,\n .opportunities-extension-debug-panel) { padding: 16px; }\n.opportunities-extension-modal :is(.oe-org-editor-header,\n .opportunities-extension-debug-panel-header) {\n padding: 0;\n gap: 16px;\n align-items: flex-start;\n}\n.opportunities-extension-modal :is(\n .opportunities-extension-account-plans-header,\n .opportunities-extension-preferences-header,\n .opportunities-extension-debug-panel-header\n) p {\n margin: 5px 0 0;\n font-family: \"Oracle Sans\", Arial, Helvetica, sans-serif;\n font-size: 13px;\n font-weight: 400;\n line-height: 1.35;\n letter-spacing: normal;\n overflow-wrap: anywhere;\n}\n/* Search controls share the 16px inset of their table frames. */\n.opportunities-extension-modal :is(.opportunities-extension-customer-table-toolbar,\n .opportunities-extension-ratecard-toolbar,\n .opportunities-extension-ratecard-plan-details) { padding-inline: 16px; }\n.opportunities-extension-modal .opportunities-extension-customer-table-toolbar {\n padding-block: 12px;\n}\n.opportunities-extension-modal .opportunities-extension-customer-table-search {\n width: min(420px, 100%);\n height: 38px;\n padding: 8px 12px;\n font-size: 13px;\n line-height: 20px;\n}\n.opportunities-extension-modal :is(\n .opportunities-extension-header,\n .opportunities-extension-account-plans-header,\n .opportunities-extension-preferences-header,\n .opportunities-extension-debug-panel-header,\n .oe-org-editor-header\n) :is(h1, h2, h3),\n.opportunities-extension-modal .opportunities-extension-projection-confirm h2,\n.opportunities-extension-modal .oe-org-confirm-panel h3 {\n margin: 0;\n font-family: \"Oracle Sans\", Arial, Helvetica, sans-serif;\n font-size: 20px;\n font-weight: 700;\n line-height: 24px;\n letter-spacing: normal;\n color: #312d2a;\n min-width: 0;\n overflow-wrap: anywhere;\n}\n.opportunities-extension-modal[data-theme=\"dark\"] :is(\n .opportunities-extension-header,\n .opportunities-extension-account-plans-header,\n .opportunities-extension-preferences-header,\n .opportunities-extension-debug-panel-header,\n .oe-org-editor-header\n) :is(h1, h2, h3),\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-projection-confirm h2,\n.opportunities-extension-modal[data-theme=\"dark\"] .oe-org-confirm-panel h3 {\n color: #f6f4f2;\n}\n"; +const redwoodStyles = "\n .opportunities-extension-scroll-lock {\n overflow: hidden !important;\n }\n\n .opportunities-extension-modal,\n .opportunities-extension-modal * {\n box-sizing: border-box;\n font-family: \"Oracle Sans\", Arial, Helvetica, sans-serif;\n }\n\n .opportunities-extension-modal {\n position: fixed;\n inset: 0;\n z-index: 2147483647;\n background: #f5f4f2;\n color: #000000;\n }\n\n .opportunities-extension-modal[hidden] {\n display: none !important;\n }\n\n .opportunities-extension-shell {\n height: 100vh;\n min-height: 0;\n display: grid;\n grid-template-rows: auto minmax(0, 1fr);\n background: #f5f4f2;\n }\n\n .opportunities-extension-header {\n position: relative;\n display: flex;\n align-items: flex-start;\n justify-content: space-between;\n gap: 24px;\n padding: 28px 40px 22px;\n border-bottom: 1px solid #dedbd7;\n background:\n linear-gradient(90deg, #8f624a 0 11%, #c74634 11% 23%, #6f5a7f 23% 36%, #00758f 36% 51%, #d4b06a 51% 63%, transparent 63% 100%) top left / 100% 6px no-repeat,\n #ffffff;\n }\n\n .opportunities-extension-header::before {\n position: absolute;\n left: 40px;\n bottom: -1px;\n width: 64px;\n height: 3px;\n background: #00758f;\n content: \"\";\n }\n\n .opportunities-extension-header h1 {\n margin: 0;\n color: #000000;\n font-size: 24px;\n font-weight: 700;\n line-height: 1.2;\n letter-spacing: 0;\n }\n\n .opportunities-extension-header p {\n margin: 0;\n color: #5f5a55;\n font-size: 14px;\n line-height: 1.4;\n }\n\n .opportunities-extension-subtitle-row {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: 8px;\n margin-top: 6px;\n }\n\n .opportunities-extension-auth-badge {\n display: inline-flex;\n align-items: center;\n min-height: 22px;\n padding: 2px 8px;\n border-radius: 999px;\n color: #ffffff;\n font-size: 12px;\n font-weight: 700;\n line-height: 1.2;\n }\n\n .opportunities-extension-auth-badge-authenticated {\n background: #3f6f17;\n }\n\n .opportunities-extension-auth-badge-unauthenticated {\n background: #c5331f;\n }\n\n .opportunities-extension-auth-badge-pending {\n background: #6f5a7f;\n }\n\n .opportunities-extension-products-progress {\n display: inline-flex;\n align-items: center;\n min-height: 22px;\n padding: 2px 8px;\n border-radius: 999px;\n background: #e8f4f6;\n color: #006d7a;\n font-size: 12px;\n font-weight: 700;\n line-height: 1.2;\n }\n\n .opportunities-extension-products-progress[hidden] {\n display: none !important;\n }\n\n .opportunities-extension-products-cache-timestamp {\n display: inline-flex;\n align-items: center;\n min-height: 22px;\n padding: 2px 8px;\n border-radius: 999px;\n background: #f0eeeb;\n color: #5f5a55;\n font-size: 11px;\n font-weight: 600;\n line-height: 1.2;\n }\n\n .opportunities-extension-products-cache-timestamp[hidden] {\n display: none !important;\n }\n\n .opportunities-extension-products-progress[data-state=\"running\"]::before {\n width: 12px;\n height: 12px;\n margin-right: 6px;\n border: 2px solid currentColor;\n border-right-color: transparent;\n border-radius: 50%;\n content: \"\";\n animation: opportunities-extension-spin .8s linear infinite;\n }\n\n .opportunities-extension-products-progress[data-state=\"complete\"] {\n background: #e2f2e5;\n color: #356d19;\n }\n\n .opportunities-extension-products-progress[data-state=\"complete-with-errors\"],\n .opportunities-extension-products-progress[data-state=\"error\"] {\n background: #f9e3e1;\n color: #a52b1c;\n }\n\n @keyframes opportunities-extension-spin {\n to { transform: rotate(360deg); }\n }\n\n .opportunities-extension-icon-button {\n width: 36px;\n height: 36px;\n flex: 0 0 36px;\n border: 1px solid transparent;\n border-radius: 4px;\n background: transparent;\n color: #312d2a;\n font-size: 18px;\n font-weight: 600;\n line-height: 1;\n cursor: pointer;\n }\n\n .opportunities-extension-header-actions {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n }\n\n .opportunities-extension-icon-button svg {\n width: 18px;\n height: 18px;\n vertical-align: middle;\n }\n\n .opportunities-extension-icon-button .opportunities-extension-settings-icon {\n width: 20px;\n height: 20px;\n }\n\n .opportunities-extension-icon-button:hover,\n .opportunities-extension-icon-button:focus {\n border-color: #b8b2ad;\n background: #f5f4f2;\n outline: none;\n }\n\n .opportunities-extension-body {\n display: grid;\n min-height: 0;\n grid-template-rows: auto auto minmax(0, 1fr);\n gap: 16px;\n padding: 22px 40px 36px;\n background: #f5f4f2;\n overflow: hidden;\n }\n\n .opportunities-extension-form {\n display: flex;\n align-items: end;\n flex-wrap: wrap;\n gap: 24px;\n min-height: 82px;\n max-width: none;\n margin: 0;\n padding: 14px 16px;\n border: 1px solid #dedbd7;\n border-radius: 4px;\n background: #ffffff;\n }\n\n .opportunities-extension-field {\n display: grid;\n max-width: max-content;\n min-width: 270px;\n width: max-content;\n gap: 6px;\n color: #312d2a;\n font-size: 13px;\n font-weight: 600;\n line-height: 1.3;\n }\n\n .opportunities-extension-stage-dashboard {\n display: grid;\n grid-template-columns: repeat(6, minmax(0, 1fr));\n gap: 12px;\n }\n\n .opportunities-extension-stage-dashboard-card {\n display: grid;\n gap: 6px;\n min-width: 0;\n padding: 12px 16px;\n border: 1px solid #dedbd7;\n border-top: 3px solid #5f5a55;\n border-radius: 4px;\n background: #ffffff;\n }\n\n .opportunities-extension-stage-dashboard-card span {\n color: #5f5a55;\n font-size: 11px;\n font-weight: 700;\n line-height: 1.2;\n }\n\n .opportunities-extension-stage-dashboard-value {\n overflow: hidden;\n color: #312d2a;\n font-size: 22px;\n font-weight: 700;\n line-height: 1.2;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n .opportunities-extension-stage-dashboard-card[data-stage=\"SQL\"] {\n border-top-color: #008aa6;\n }\n\n .opportunities-extension-total-dashboard-card {\n border-top-color: #312d2a;\n }\n\n .opportunities-extension-stage-dashboard-card[data-stage=\"PIPELINE\"] {\n border-top-color: #6f6863;\n }\n\n .opportunities-extension-stage-dashboard-card[data-stage=\"UPSIDE\"] {\n border-top-color: #c87b00;\n }\n\n .opportunities-extension-stage-dashboard-card[data-stage=\"FORECAST\"] {\n border-top-color: #755b8b;\n }\n\n .opportunities-extension-stage-dashboard-card[data-stage=\"WON\"] {\n border-top-color: #4b7f22;\n }\n\n .opportunities-extension-stage-filter {\n display: grid;\n grid-template-rows: auto 44px;\n gap: 6px;\n min-width: 0;\n }\n\n .opportunities-extension-stage-filter-label {\n color: #312d2a;\n font-size: 13px;\n font-weight: 600;\n line-height: 1.3;\n }\n\n .opportunities-extension-stage-filter-controls {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: 8px;\n }\n\n .opportunities-extension-stage-filter-button {\n min-height: 36px;\n padding: 6px 12px;\n border: 1px solid currentColor;\n border-radius: 18px;\n background: #ffffff;\n color: #5f5a55;\n font-size: 12px;\n font-weight: 700;\n letter-spacing: 0;\n line-height: 1.2;\n cursor: pointer;\n }\n\n .opportunities-extension-stage-filter-button[data-stage=\"SQL\"] {\n color: #006b84;\n }\n\n .opportunities-extension-stage-filter-button[data-stage=\"PIPELINE\"] {\n color: #5f5a55;\n }\n\n .opportunities-extension-stage-filter-button[data-stage=\"UPSIDE\"] {\n color: #945400;\n }\n\n .opportunities-extension-stage-filter-button[data-stage=\"FORECAST\"] {\n color: #624e74;\n }\n\n .opportunities-extension-stage-filter-button[data-stage=\"WON\"] {\n color: #3f6f17;\n }\n\n .opportunities-extension-stage-filter-button[aria-pressed=\"true\"][data-stage=\"SQL\"] {\n border-color: #006b84;\n background: #006b84;\n color: #ffffff;\n }\n\n .opportunities-extension-stage-filter-button[aria-pressed=\"true\"][data-stage=\"PIPELINE\"] {\n border-color: #5f5a55;\n background: #5f5a55;\n color: #ffffff;\n }\n\n .opportunities-extension-stage-filter-button[aria-pressed=\"true\"][data-stage=\"UPSIDE\"] {\n border-color: #945400;\n background: #945400;\n color: #ffffff;\n }\n\n .opportunities-extension-stage-filter-button[aria-pressed=\"true\"][data-stage=\"FORECAST\"] {\n border-color: #624e74;\n background: #624e74;\n color: #ffffff;\n }\n\n .opportunities-extension-stage-filter-button[aria-pressed=\"true\"][data-stage=\"WON\"] {\n border-color: #3f6f17;\n background: #3f6f17;\n color: #ffffff;\n }\n\n .opportunities-extension-stage-filter-button:focus-visible {\n outline: 2px solid #00758f;\n outline-offset: 2px;\n }\n\n .opportunities-extension-status-filter {\n display: grid;\n grid-template-rows: auto 44px;\n gap: 6px;\n min-width: 0;\n }\n\n .opportunities-extension-status-filter-label {\n color: #312d2a;\n font-size: 13px;\n font-weight: 600;\n line-height: 1.3;\n }\n\n .opportunities-extension-status-filter-controls {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: 8px;\n }\n\n .opportunities-extension-status-filter-button {\n min-height: 36px;\n padding: 6px 12px;\n border: 1px solid currentColor;\n border-radius: 18px;\n background: #ffffff;\n font-size: 12px;\n font-weight: 700;\n letter-spacing: 0;\n line-height: 1.2;\n cursor: pointer;\n }\n\n .opportunities-extension-status-filter-button[data-status=\"OPEN\"] {\n color: #197a3d;\n }\n\n .opportunities-extension-status-filter-button[data-status=\"CLOSED\"] {\n color: #4b5563;\n }\n\n .opportunities-extension-status-filter-button[data-status=\"LOST\"] {\n color: #b13b34;\n }\n\n .opportunities-extension-status-filter-button[data-status=\"WON\"] {\n color: #1f5f99;\n }\n\n .opportunities-extension-status-filter-button[aria-pressed=\"true\"][data-status=\"OPEN\"] {\n border-color: #197a3d;\n background: #197a3d;\n color: #ffffff;\n }\n\n .opportunities-extension-status-filter-button[aria-pressed=\"true\"][data-status=\"CLOSED\"] {\n border-color: #4b5563;\n background: #4b5563;\n color: #ffffff;\n }\n\n .opportunities-extension-status-filter-button[aria-pressed=\"true\"][data-status=\"LOST\"] {\n border-color: #b13b34;\n background: #b13b34;\n color: #ffffff;\n }\n\n .opportunities-extension-status-filter-button[aria-pressed=\"true\"][data-status=\"WON\"] {\n border-color: #1f5f99;\n background: #1f5f99;\n color: #ffffff;\n }\n\n .opportunities-extension-status-filter-button:focus-visible {\n outline: 2px solid #00758f;\n outline-offset: 2px;\n }\n\n .opportunities-extension-customer-filter {\n position: relative;\n display: grid;\n grid-template-rows: auto 44px;\n gap: 6px;\n min-width: 220px;\n }\n\n .opportunities-extension-customer-filter-label {\n color: #312d2a;\n font-size: 13px;\n font-weight: 600;\n line-height: 1.3;\n }\n\n .opportunities-extension-customer-filter-trigger {\n position: relative;\n min-width: 220px;\n min-height: 44px;\n padding: 10px 38px 10px 12px;\n border: 1px solid #b8b2ad;\n border-radius: 3px;\n background: #ffffff;\n color: #312d2a;\n font-size: 14px;\n line-height: 1.3;\n text-align: left;\n cursor: pointer;\n }\n\n .opportunities-extension-customer-filter-trigger::after {\n position: absolute;\n top: 50%;\n right: 16px;\n width: 0;\n height: 0;\n border-top: 6px solid #312d2a;\n border-right: 5px solid transparent;\n border-left: 5px solid transparent;\n content: \"\";\n pointer-events: none;\n transform: translateY(-50%);\n }\n\n .opportunities-extension-customer-filter-trigger:disabled {\n cursor: not-allowed;\n background: #f5f4f2;\n color: #7d7772;\n }\n\n .opportunities-extension-customer-filter-trigger:focus-visible {\n border-color: #312d2a;\n box-shadow: 0 0 0 1px #312d2a;\n outline: none;\n }\n\n .opportunities-extension-customer-filter-panel {\n position: absolute;\n top: calc(100% + 8px);\n left: 0;\n z-index: 4;\n display: grid;\n width: min(360px, calc(100vw - 80px));\n gap: 10px;\n padding: 12px;\n border: 1px solid #8f8a85;\n border-radius: 4px;\n background: #ffffff;\n box-shadow: 0 4px 12px rgba(0, 0, 0, .18);\n }\n\n .opportunities-extension-customer-filter-panel[hidden] {\n display: none !important;\n }\n\n .opportunities-extension-customer-filter-search {\n width: 100%;\n min-height: 40px;\n padding: 8px 10px;\n border: 1px solid #b8b2ad;\n border-radius: 3px;\n background: #ffffff;\n color: #312d2a;\n font-size: 14px;\n }\n\n .opportunities-extension-customer-filter-search:focus {\n border-color: #312d2a;\n box-shadow: 0 0 0 1px #312d2a;\n outline: none;\n }\n\n .opportunities-extension-customer-filter-select-all,\n .opportunities-extension-customer-filter-option {\n display: flex;\n align-items: center;\n gap: 8px;\n color: #312d2a;\n font-size: 13px;\n line-height: 1.35;\n }\n\n .opportunities-extension-customer-filter-select-all {\n min-height: 32px;\n padding-bottom: 8px;\n border-bottom: 1px solid #dedbd7;\n font-weight: 700;\n }\n\n .opportunities-extension-customer-filter-panel input[type=\"checkbox\"] {\n width: 16px;\n height: 16px;\n flex: 0 0 16px;\n accent-color: #00758f;\n }\n\n .opportunities-extension-customer-filter-list {\n display: block;\n max-height: 250px;\n overflow: auto;\n }\n\n .opportunities-extension-customer-filter-option {\n display: grid;\n grid-template-columns: 16px minmax(0, 1fr);\n align-items: start;\n min-height: 0;\n height: auto !important;\n padding: 8px 4px;\n cursor: pointer;\n }\n\n .opportunities-extension-customer-filter-option input[type=\"checkbox\"] {\n margin-top: 1px;\n }\n\n .opportunities-extension-customer-filter-option span {\n display: block;\n min-width: 0;\n line-height: 18px;\n overflow-wrap: anywhere;\n white-space: normal;\n }\n\n .opportunities-extension-customer-filter-option:hover {\n background: #f5f4f2;\n }\n\n .opportunities-extension-customer-filter-empty {\n margin: 4px 0;\n color: #5f5a55;\n font-size: 13px;\n }\n\n .opportunities-extension-table-search-field {\n display: grid;\n grid-template-rows: auto 44px;\n gap: 6px;\n width: 260px;\n color: #312d2a;\n font-size: 13px;\n font-weight: 600;\n line-height: 1.3;\n }\n\n .opportunities-extension-table-search-field input {\n width: 100%;\n min-height: 44px;\n padding: 10px 12px;\n border: 1px solid #b8b2ad;\n border-radius: 3px;\n background: #ffffff;\n color: #312d2a;\n font-size: 14px;\n line-height: 1.3;\n }\n\n .opportunities-extension-table-search-field input:focus {\n border-color: #312d2a;\n box-shadow: 0 0 0 1px #312d2a;\n outline: none;\n }\n\n .opportunities-extension-select-wrap {\n position: relative;\n display: block;\n width: 270px;\n max-width: 100%;\n }\n\n .opportunities-extension-select-wrap::after {\n position: absolute;\n top: 50%;\n right: 16px;\n width: 0;\n height: 0;\n border-left: 5px solid transparent;\n border-right: 5px solid transparent;\n border-top: 6px solid #000000;\n content: \"\";\n pointer-events: none;\n transform: translateY(-50%);\n }\n\n .opportunities-extension-field select {\n width: 100%;\n min-width: 0;\n max-width: 100%;\n min-height: 44px;\n box-sizing: border-box;\n appearance: none;\n border: 1px solid #b8b2ad;\n border-radius: 3px;\n background: #ffffff;\n color: #000000;\n font-size: 14px;\n line-height: 1.3;\n padding: 11px 44px 11px 12px;\n }\n\n .opportunities-extension-field select:focus {\n border-color: #312d2a;\n box-shadow: 0 0 0 1px #312d2a;\n outline: none;\n }\n\n .opportunities-extension-table-surface {\n min-height: 0;\n height: 100%;\n border: 1px solid #dedbd7;\n border-radius: 4px;\n background: #ffffff;\n overflow-x: auto;\n overflow-y: auto;\n }\n\n .opportunities-extension-table {\n width: 100%;\n min-width: 0;\n border-collapse: collapse;\n table-layout: fixed;\n color: #312d2a;\n font-size: 13px;\n line-height: 1.35;\n }\n\n .opportunities-extension-table thead {\n background: #faf9f8;\n }\n\n .opportunities-extension-table th {\n position: sticky;\n top: 0;\n z-index: 1;\n height: 44px;\n border-bottom: 1px solid #b8b2ad;\n background: #faf9f8;\n color: #312d2a;\n font-size: 12px;\n font-weight: 700;\n text-align: left;\n white-space: nowrap;\n }\n\n .opportunities-extension-table td {\n min-height: 48px;\n padding: 12px 16px;\n border-bottom: 1px solid #ebe8e5;\n vertical-align: middle;\n overflow-wrap: anywhere;\n }\n\n .opportunities-extension-table th:nth-child(1) {\n width: 16%;\n }\n\n .opportunities-extension-table th:nth-child(2) {\n width: 8%;\n }\n\n .opportunities-extension-table th:nth-child(3) {\n width: 18%;\n }\n\n .opportunities-extension-table th:nth-child(4) {\n width: 11%;\n }\n\n .opportunities-extension-table th:nth-child(5) {\n width: 8%;\n }\n\n .opportunities-extension-table th:nth-child(6) {\n width: 8%;\n }\n\n .opportunities-extension-table th:nth-child(7) {\n width: 7%;\n }\n\n .opportunities-extension-table th:nth-child(8) {\n width: 6%;\n }\n\n .opportunities-extension-table th:nth-child(9) {\n width: 7%;\n }\n\n .opportunities-extension-table th:nth-child(10) {\n width: 7%;\n }\n\n .opportunities-extension-table th:nth-child(11) {\n width: 4%;\n }\n\n .opportunities-extension-table td:nth-child(2),\n .opportunities-extension-table td:nth-child(5),\n .opportunities-extension-table td:nth-child(6),\n .opportunities-extension-table td:nth-child(8) {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n .opportunities-extension-table td:nth-child(9) {\n padding-right: 6px;\n padding-left: 6px;\n white-space: nowrap;\n overflow: visible;\n }\n\n .opportunities-extension-table td:nth-child(7) {\n padding-right: 6px;\n padding-left: 6px;\n white-space: nowrap;\n overflow: visible;\n }\n\n .opportunities-extension-table td:nth-child(10) {\n padding-right: 6px;\n padding-left: 6px;\n font-size: 12px;\n white-space: nowrap;\n }\n\n .opportunities-extension-table td:nth-child(11) {\n padding-right: 6px;\n padding-left: 6px;\n text-align: center;\n white-space: nowrap;\n }\n\n .opportunities-extension-table tbody tr:hover {\n background: #f7f6f4;\n }\n\n .opportunities-extension-table tbody tr:last-child td {\n border-bottom: 0;\n }\n\n .opportunities-extension-table a {\n color: #006b84;\n text-decoration: underline;\n text-decoration-thickness: 1px;\n text-underline-offset: 2px;\n }\n\n .opportunities-extension-table a:hover {\n color: #004f63;\n }\n\n .opportunities-extension-opty-number-content {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n max-width: 100%;\n }\n\n .opportunities-extension-name-content {\n display: flex;\n align-items: center;\n gap: 8px;\n min-width: 0;\n }\n\n .opportunities-extension-name-content > a {\n min-width: 0;\n }\n\n .opportunities-extension-actions-content {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 4px;\n white-space: nowrap;\n }\n\n .opportunities-extension-products-count {\n display: inline-grid;\n width: auto;\n min-width: 20px;\n height: 20px;\n place-items: center;\n flex: 0 0 auto;\n box-sizing: border-box;\n padding: 0 3px;\n border: 1px solid #7ca7b2;\n border-radius: 999px;\n background: #e8f4f6;\n color: #006d7a;\n font-size: 10px;\n font-weight: 700;\n line-height: 1;\n text-align: center;\n vertical-align: middle;\n cursor: pointer;\n }\n\n .opportunities-extension-products-count:hover,\n .opportunities-extension-products-count:focus-visible,\n .opportunities-extension-products-count[aria-expanded=\"true\"] {\n border-color: #00758f;\n background: #00758f;\n color: #ffffff;\n outline: none;\n }\n\n .opportunities-extension-products-count-error {\n border-color: #d8887e;\n background: #f9e3e1;\n color: #a52b1c;\n }\n\n .opportunities-extension-products-detail-row:hover {\n background: transparent !important;\n }\n\n .opportunities-extension-products-detail-cell {\n padding: 0 !important;\n }\n\n .opportunities-extension-products-detail {\n padding: 14px 20px 18px;\n border-bottom: 1px solid #c9c5c1;\n background: #f0eeeb;\n }\n\n .opportunities-extension-products-detail-heading {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 12px;\n margin-bottom: 10px;\n color: #312d2a;\n }\n\n .opportunities-extension-products-detail-heading strong {\n font-size: 13px;\n }\n\n .opportunities-extension-products-detail-heading span {\n color: #5f5a55;\n font-size: 11px;\n font-weight: 600;\n text-transform: uppercase;\n }\n\n .opportunities-extension-products-table {\n width: 100%;\n table-layout: fixed;\n border-collapse: collapse;\n border: 1px solid #dedbd7;\n background: #ffffff;\n font-size: 12px;\n }\n\n .opportunities-extension-products-table th,\n .opportunities-extension-products-table td {\n position: static;\n height: auto;\n padding: 8px 10px;\n border-bottom: 1px solid #ebe8e5;\n background: transparent;\n overflow-wrap: anywhere;\n vertical-align: middle;\n white-space: normal;\n }\n\n .opportunities-extension-products-table th {\n background: #faf9f8;\n font-size: 11px;\n }\n\n .opportunities-extension-products-table th:nth-child(1) { width: 16%; }\n .opportunities-extension-products-table th:nth-child(2) { width: 16%; }\n .opportunities-extension-products-table th:nth-child(3) { width: 8%; }\n .opportunities-extension-products-table th:nth-child(4) { width: 10%; }\n .opportunities-extension-products-table th:nth-child(5) { width: 8%; }\n .opportunities-extension-products-table th:nth-child(6) { width: 8%; }\n .opportunities-extension-products-table th:nth-child(7) { width: 7%; }\n .opportunities-extension-products-table th:nth-child(8) { width: 10%; }\n .opportunities-extension-products-table th:nth-child(9) { width: 12%; }\n .opportunities-extension-products-table th:nth-child(10) { width: 5%; }\n\n .opportunities-extension-products-empty {\n margin: 0;\n padding: 10px 0;\n color: #5f5a55;\n font-size: 13px;\n }\n\n .opportunities-extension-copy-button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex: 0 0 auto;\n width: 24px;\n height: 24px;\n padding: 3px;\n border: 0;\n border-radius: 3px;\n background: transparent;\n color: #00758f;\n cursor: pointer;\n }\n\n .opportunities-extension-copy-button svg {\n width: 16px;\n height: 16px;\n fill: currentColor;\n }\n\n .opportunities-extension-copy-button:hover,\n .opportunities-extension-copy-button:focus-visible {\n background: #e8f4f6;\n color: #004f63;\n outline: none;\n }\n\n .opportunities-extension-action-button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 32px;\n height: 32px;\n padding: 5px;\n border: 1px solid transparent;\n border-radius: 4px;\n background: transparent;\n color: #00758f;\n cursor: pointer;\n }\n\n .opportunities-extension-action-button svg {\n width: 21px;\n height: 21px;\n }\n\n .opportunities-extension-action-button:hover,\n .opportunities-extension-action-button:focus-visible {\n border-color: #7ca7b2;\n background: #e8f4f6;\n color: #004f63;\n outline: none;\n }\n\n .opportunities-extension-action-button:disabled {\n cursor: wait;\n opacity: .72;\n }\n\n .opportunities-extension-action-button-loading svg {\n animation: opportunities-extension-pulse 1s ease-in-out infinite;\n }\n\n @keyframes opportunities-extension-pulse {\n 50% { opacity: .35; }\n }\n\n .opportunities-extension-copy-toast {\n position: fixed;\n right: 28px;\n bottom: 28px;\n z-index: 3;\n max-width: min(360px, calc(100vw - 56px));\n padding: 12px 16px;\n border-radius: 4px;\n background: #2f6f18;\n box-shadow: 0 4px 12px rgba(0, 0, 0, .18);\n color: #ffffff;\n font-size: 13px;\n font-weight: 700;\n }\n\n .opportunities-extension-copy-toast-error {\n background: #a52b1c;\n }\n\n .opportunities-extension-copy-toast[hidden] {\n display: none !important;\n }\n\n .opportunities-extension-stage-badge {\n display: inline-flex;\n align-items: center;\n min-height: 24px;\n padding: 3px 8px;\n border-radius: 12px;\n background: #ebe8e5;\n color: #312d2a;\n font-size: 11px;\n font-weight: 700;\n line-height: 1.2;\n white-space: nowrap;\n }\n\n .opportunities-extension-stage-badge[data-stage=\"SQL\"] {\n background: #d9f0f5;\n color: #006b84;\n }\n\n .opportunities-extension-stage-badge[data-stage=\"PIPELINE\"] {\n background: #ebe8e5;\n color: #5f5a55;\n }\n\n .opportunities-extension-stage-badge[data-stage=\"UPSIDE\"] {\n background: #fff0d8;\n color: #945400;\n }\n\n .opportunities-extension-stage-badge[data-stage=\"FORECAST\"] {\n background: #eee8f5;\n color: #624e74;\n }\n\n .opportunities-extension-stage-badge[data-stage=\"WON\"] {\n background: #e5f1d9;\n color: #3f6f17;\n }\n\n .opportunities-extension-status-badge {\n display: inline-flex;\n align-items: center;\n min-height: 24px;\n padding: 3px 8px;\n border-radius: 12px;\n background: #ebe8e5;\n color: #312d2a;\n font-size: 11px;\n font-weight: 700;\n line-height: 1.2;\n white-space: nowrap;\n }\n\n .opportunities-extension-status-badge[data-status=\"OPEN\"] {\n background: #e2f2e5;\n color: #197a3d;\n }\n\n .opportunities-extension-status-badge[data-status=\"CLOSED\"] {\n background: #e5e7eb;\n color: #4b5563;\n }\n\n .opportunities-extension-status-badge[data-status=\"LOST\"] {\n background: #f9e3e1;\n color: #b13b34;\n }\n\n .opportunities-extension-status-badge[data-status=\"WON\"] {\n background: #e3edf8;\n color: #1f5f99;\n }\n\n .opportunities-extension-sort-button {\n position: relative;\n display: inline-flex;\n align-items: center;\n width: 100%;\n min-height: 44px;\n padding: 8px 42px 8px 16px;\n border: 0;\n background: transparent;\n color: inherit;\n font: inherit;\n font-weight: inherit;\n letter-spacing: 0;\n line-height: 1.2;\n text-align: left;\n white-space: normal;\n cursor: pointer;\n }\n\n .opportunities-extension-table-header-label {\n display: inline-flex;\n align-items: center;\n min-height: 44px;\n padding: 8px 6px;\n }\n\n .opportunities-extension-sort-button::after {\n position: absolute;\n right: 15px;\n color: #5f5a55;\n content: \"↕\";\n font-size: 16px;\n font-weight: 400;\n }\n\n .opportunities-extension-sort-button[data-sort-direction=\"ascending\"]::after {\n color: #00758f;\n content: \"↑\";\n }\n\n .opportunities-extension-sort-button[data-sort-direction=\"descending\"]::after {\n color: #00758f;\n content: \"↓\";\n }\n\n .opportunities-extension-sort-button:hover {\n background: #f0eeeb;\n }\n\n .opportunities-extension-sort-button:focus-visible {\n outline: 2px solid #00758f;\n outline-offset: -2px;\n }\n\n .opportunities-extension-table-status {\n height: 152px;\n color: #5f5a55;\n font-size: 14px;\n text-align: center;\n }\n\n .opportunities-extension-visually-hidden {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border: 0;\n }\n\n .opportunities-extension-preferences-modal {\n position: absolute;\n inset: 0;\n z-index: 3;\n display: grid;\n place-items: center;\n padding: 24px;\n background: rgba(0, 0, 0, .42);\n }\n\n .opportunities-extension-preferences-modal[hidden] {\n display: none !important;\n }\n\n .opportunities-extension-account-plans-modal {\n position: absolute;\n inset: 0;\n z-index: 4;\n display: grid;\n place-items: center;\n padding: 12px;\n background: rgba(0, 0, 0, .42);\n }\n\n .opportunities-extension-account-plans-modal[hidden] {\n display: none !important;\n }\n\n .opportunities-extension-account-plans-dialog {\n display: grid;\n width: min(1180px, 100%);\n height: min(760px, calc(100vh - 24px));\n min-width: 0;\n grid-template-rows: auto minmax(0, 1fr);\n grid-template-columns: minmax(0, 1fr);\n overflow: hidden;\n border: 1px solid #8f8a85;\n border-radius: 4px;\n background: #ffffff;\n box-shadow: 0 8px 24px rgba(0, 0, 0, .24);\n color: #312d2a;\n }\n\n .opportunities-extension-account-plans-header {\n display: flex;\n align-items: flex-start;\n justify-content: space-between;\n gap: 16px;\n padding: 14px 20px;\n border-bottom: 1px solid #dedbd7;\n }\n\n .opportunities-extension-account-plans-header h2 {\n margin: 0;\n font-size: 20px;\n line-height: 1.2;\n }\n\n .opportunities-extension-account-plans-header p {\n margin: 5px 0 0;\n color: #5f5a55;\n font-size: 13px;\n line-height: 1.35;\n }\n\n .opportunities-extension-account-plans-content {\n display: grid;\n min-width: 0;\n grid-template-rows: auto minmax(0, 1fr);\n grid-template-columns: minmax(0, 1fr);\n min-height: 0;\n overflow: hidden;\n }\n\n .opportunities-extension-account-plans-content > .opportunities-extension-account-plans-skeleton {\n grid-row: 1 / -1;\n }\n\n .opportunities-extension-account-plans-tabs-navigation {\n position: relative;\n min-width: 0;\n border-bottom: 1px solid #dedbd7;\n }\n\n .opportunities-extension-account-plans-tabs-navigation .opportunities-extension-account-plans-tab-navigation-button[hidden] {\n display: none;\n }\n\n .opportunities-extension-account-plans-tabs {\n display: flex;\n min-width: 0;\n gap: 4px;\n overflow-x: auto;\n padding: 8px 20px 0;\n scrollbar-width: none;\n }\n\n .opportunities-extension-account-plans-tabs::-webkit-scrollbar {\n display: none;\n }\n\n .opportunities-extension-account-plans-tab-navigation-button {\n display: grid;\n position: absolute;\n z-index: 1;\n top: 50%;\n width: 32px;\n height: 32px;\n place-items: center;\n padding: 0;\n border: 1px solid #8f8a85;\n border-radius: 4px;\n background: #ffffff;\n color: #312d2a;\n box-shadow: 0 2px 6px rgba(0, 0, 0, .16);\n transform: translateY(-50%);\n cursor: pointer;\n }\n\n .opportunities-extension-account-plans-tab-navigation-button:first-child {\n left: 8px;\n }\n\n .opportunities-extension-account-plans-tab-navigation-button:last-child {\n right: 8px;\n }\n\n .opportunities-extension-account-plans-tab-navigation-button:hover:not(:disabled) {\n border-color: #00758f;\n background: #f0eeeb;\n color: #005e73;\n }\n\n .opportunities-extension-account-plans-tab-navigation-button:disabled {\n border-color: #dedbd7;\n color: #b8b2ad;\n cursor: default;\n }\n\n .opportunities-extension-account-plans-tab-navigation-button:focus-visible {\n outline: 2px solid #00758f;\n outline-offset: 2px;\n }\n\n .opportunities-extension-account-plans-tab-navigation-button svg {\n width: 18px;\n height: 18px;\n }\n\n .opportunities-extension-account-plans-panels {\n min-width: 0;\n min-height: 0;\n overflow: hidden;\n }\n\n .opportunities-extension-account-plan-tab {\n min-height: 38px;\n flex: 0 0 auto;\n padding: 7px 12px;\n border: 0;\n border-bottom: 3px solid transparent;\n background: transparent;\n color: #5f5a55;\n font-size: 13px;\n font-weight: 600;\n cursor: pointer;\n }\n\n .opportunities-extension-account-plan-tab:hover {\n background: #f0eeeb;\n color: #312d2a;\n }\n\n .opportunities-extension-account-plan-tab[aria-selected=\"true\"] {\n border-bottom-color: #00758f;\n color: #006d7a;\n }\n\n .opportunities-extension-account-plan-tab:focus-visible {\n outline: 2px solid #00758f;\n outline-offset: -2px;\n }\n\n .opportunities-extension-account-plan-panel {\n display: grid;\n height: 100%;\n min-height: 0;\n grid-template-rows: auto minmax(0, 1fr);\n box-sizing: border-box;\n padding: 16px 20px;\n }\n\n .opportunities-extension-account-plan-panel[hidden] {\n display: none !important;\n }\n\n .opportunities-extension-account-plan-details {\n display: grid;\n grid-template-columns: repeat(3, minmax(0, 1fr));\n gap: 0 24px;\n margin: 0;\n }\n\n .opportunities-extension-account-plan-details > div {\n display: grid;\n grid-template-columns: minmax(104px, 38%) minmax(0, 1fr);\n gap: 10px;\n min-height: 42px;\n align-items: center;\n padding: 7px 0;\n border-bottom: 1px solid #ebe8e5;\n }\n\n .opportunities-extension-account-plan-details dt {\n color: #5f5a55;\n font-size: 12px;\n font-weight: 700;\n }\n\n .opportunities-extension-account-plan-details dd {\n min-width: 0;\n margin: 0;\n color: #312d2a;\n font-size: 13px;\n overflow-wrap: anywhere;\n }\n\n .opportunities-extension-consumption-trend {\n display: grid;\n min-height: 0;\n grid-template-rows: auto minmax(0, 1fr);\n margin-top: 14px;\n padding-top: 12px;\n border-top: 1px solid #dedbd7;\n }\n\n .opportunities-extension-consumption-trend-header {\n display: flex;\n align-items: center;\n justify-content: flex-end;\n gap: 24px;\n }\n\n .opportunities-extension-consumption-periods {\n display: flex;\n align-items: center;\n gap: 4px;\n }\n\n .opportunities-extension-consumption-periods button {\n min-height: 38px;\n padding: 7px 14px;\n border: 1px solid transparent;\n border-radius: 4px;\n background: transparent;\n color: #312d2a;\n font-size: 13px;\n font-weight: 600;\n line-height: 1.2;\n cursor: pointer;\n }\n\n .opportunities-extension-consumption-periods button:hover {\n background: #f0eeeb;\n }\n\n .opportunities-extension-consumption-periods button[aria-pressed=\"true\"] {\n border-color: #00758f;\n background: #e7f6f8;\n color: #005e73;\n }\n\n .opportunities-extension-consumption-periods button:focus-visible,\n .opportunities-extension-consumption-navigation-button:focus-visible {\n outline: 2px solid #00758f;\n outline-offset: 2px;\n }\n\n .opportunities-extension-consumption-chart {\n display: grid;\n min-height: 0;\n grid-template-rows: auto minmax(0, 1fr);\n margin-top: 4px;\n }\n\n .opportunities-extension-consumption-navigation {\n display: grid;\n grid-template-columns: 36px minmax(130px, auto) 36px;\n align-items: center;\n justify-content: center;\n gap: 8px;\n min-height: 40px;\n margin-bottom: 2px;\n }\n\n .opportunities-extension-consumption-navigation strong {\n color: #312d2a;\n font-size: 13px;\n text-align: center;\n }\n\n .opportunities-extension-consumption-navigation-button {\n display: grid;\n width: 36px;\n height: 36px;\n place-items: center;\n padding: 0;\n border: 1px solid #8f8a85;\n border-radius: 4px;\n background: #ffffff;\n color: #312d2a;\n cursor: pointer;\n }\n\n .opportunities-extension-consumption-navigation-button:hover:not(:disabled) {\n border-color: #00758f;\n background: #f0eeeb;\n color: #005e73;\n }\n\n .opportunities-extension-consumption-navigation-button:disabled {\n border-color: #dedbd7;\n color: #b8b2ad;\n cursor: default;\n }\n\n .opportunities-extension-consumption-navigation-button svg {\n width: 18px;\n height: 18px;\n }\n\n .opportunities-extension-consumption-figure {\n position: relative;\n min-width: 0;\n min-height: 0;\n margin: 0;\n scrollbar-width: none;\n }\n\n .opportunities-extension-consumption-figure::-webkit-scrollbar {\n display: none;\n }\n\n .opportunities-extension-consumption-visual {\n display: grid;\n height: 100%;\n min-height: 0;\n grid-template-columns: minmax(0, 1fr) 176px;\n align-items: center;\n gap: 16px;\n }\n\n .opportunities-extension-consumption-svg {\n display: block;\n width: 100%;\n height: 300px;\n min-height: 0;\n overflow: visible;\n }\n\n .opportunities-extension-consumption-svg .consumption-grid-line {\n stroke: #dedbd7;\n stroke-width: 1;\n shape-rendering: crispEdges;\n }\n\n .opportunities-extension-consumption-svg .consumption-axis-label,\n .opportunities-extension-consumption-svg .consumption-x-label {\n fill: #5f5a55;\n font-family: Arial, sans-serif;\n font-size: 12px;\n }\n\n .opportunities-extension-consumption-svg .consumption-value-label {\n fill: #312d2a;\n font-family: Arial, sans-serif;\n font-size: 12px;\n font-weight: 700;\n }\n\n .opportunities-extension-consumption-svg .consumption-bar-funded {\n fill: #b77888;\n }\n\n .opportunities-extension-consumption-svg .consumption-bar-overage {\n fill: #de7907;\n }\n\n .opportunities-extension-consumption-svg .consumption-average-line {\n stroke: #de7907;\n stroke-width: 1.5;\n stroke-dasharray: 6 6;\n }\n\n .opportunities-extension-consumption-svg .consumption-bar-group {\n cursor: default;\n outline: none;\n }\n\n .opportunities-extension-consumption-svg .consumption-bar-group rect {\n transition: filter .16s ease, opacity .16s ease, stroke .16s ease;\n }\n\n .opportunities-extension-consumption-svg .consumption-bar-group:hover rect,\n .opportunities-extension-consumption-svg .consumption-bar-group:focus rect {\n filter: brightness(1.06);\n stroke: #312d2a;\n stroke-width: 1.5;\n }\n\n .opportunities-extension-consumption-svg .consumption-animated-label {\n opacity: 0;\n animation: opportunities-extension-consumption-label-in .24s ease-out forwards;\n }\n\n .opportunities-extension-consumption-svg .consumption-animated-average {\n opacity: 0;\n animation: opportunities-extension-consumption-average-in .35s .32s ease-out forwards;\n }\n\n @keyframes opportunities-extension-consumption-label-in {\n from { opacity: 0; transform: translateY(4px); }\n to { opacity: 1; transform: translateY(0); }\n }\n\n @keyframes opportunities-extension-consumption-average-in {\n from { opacity: 0; }\n to { opacity: 1; }\n }\n\n .opportunities-extension-consumption-legend {\n display: grid;\n align-content: center;\n gap: 4px;\n }\n\n .opportunities-extension-consumption-legend button {\n display: grid;\n min-width: 0;\n grid-template-columns: 16px minmax(0, 1fr);\n align-items: center;\n gap: 8px;\n padding: 6px 4px;\n border: 0;\n border-radius: 4px;\n background: transparent;\n color: #312d2a;\n font-size: 12px;\n line-height: 1.25;\n text-align: left;\n cursor: pointer;\n }\n\n .opportunities-extension-consumption-legend button:hover {\n background: #f0eeeb;\n }\n\n .opportunities-extension-consumption-legend button:focus-visible {\n outline: 2px solid #00758f;\n outline-offset: 1px;\n }\n\n .opportunities-extension-consumption-legend button[aria-pressed=\"false\"] {\n color: #77726d;\n opacity: .55;\n }\n\n .opportunities-extension-consumption-legend-swatch {\n display: block;\n width: 12px;\n height: 12px;\n justify-self: center;\n }\n\n .opportunities-extension-consumption-legend-funded {\n background: #b77888;\n }\n\n .opportunities-extension-consumption-legend-overage {\n background: #de7907;\n }\n\n .opportunities-extension-consumption-legend-average {\n height: 0;\n border-top: 2px dashed #de7907;\n }\n\n .opportunities-extension-consumption-tooltip {\n position: absolute;\n z-index: 2;\n display: grid;\n min-width: 190px;\n max-width: 260px;\n gap: 4px;\n padding: 10px 12px;\n border: 1px solid #8f8a85;\n border-radius: 4px;\n background: #ffffff;\n box-shadow: 0 4px 12px rgba(0, 0, 0, .2);\n color: #312d2a;\n font-size: 12px;\n line-height: 1.3;\n pointer-events: none;\n }\n\n .opportunities-extension-consumption-tooltip[hidden] {\n display: none !important;\n }\n\n .opportunities-extension-consumption-tooltip strong {\n margin-bottom: 2px;\n font-size: 13px;\n }\n\n .opportunities-extension-consumption-chart-skeleton {\n height: 100%;\n min-height: 0;\n padding: 34px 62px 24px;\n box-sizing: border-box;\n }\n\n .opportunities-extension-consumption-chart-skeleton-plot {\n display: flex;\n height: 100%;\n min-height: 220px;\n align-items: flex-end;\n justify-content: space-around;\n gap: 12px;\n padding: 0 14px;\n border-bottom: 1px solid #dedbd7;\n border-left: 1px solid #dedbd7;\n }\n\n .opportunities-extension-consumption-chart-skeleton-plot span {\n width: min(38px, 6%);\n border-radius: 2px 2px 0 0;\n background: #dedbd7;\n animation: opportunities-extension-skeleton-pulse 1.15s ease-in-out infinite alternate;\n }\n\n .opportunities-extension-consumption-chart-empty,\n .opportunities-extension-consumption-chart-error {\n display: grid;\n min-height: 220px;\n place-items: center;\n margin: 0;\n color: #5f5a55;\n font-size: 14px;\n text-align: center;\n }\n\n .opportunities-extension-consumption-chart-error {\n color: #9f2d20;\n }\n\n .opportunities-extension-account-plan-status-indicator {\n display: inline-block;\n width: 10px;\n height: 10px;\n border-radius: 50%;\n background: #9b9691;\n box-shadow: 0 0 0 3px #efedeb;\n vertical-align: middle;\n }\n\n .opportunities-extension-account-plan-status-indicator[data-active=\"true\"] {\n background: #3f6f17;\n box-shadow: 0 0 0 3px #e2f2e5;\n }\n\n .opportunities-extension-account-plan-tab .opportunities-extension-account-plan-status-indicator {\n margin-right: 8px;\n }\n\n .opportunities-extension-account-plans-skeleton-tabs {\n display: flex;\n min-height: 46px;\n align-items: center;\n padding: 0 20px;\n border-bottom: 1px solid #dedbd7;\n }\n\n .opportunities-extension-account-plans-skeleton {\n display: grid;\n height: 100%;\n min-height: 0;\n grid-template-rows: auto minmax(0, 1fr);\n overflow: hidden;\n }\n\n .opportunities-extension-account-plans-skeleton-panel {\n padding: 16px 20px;\n }\n\n .opportunities-extension-account-plans-skeleton-tab {\n display: inline-flex;\n align-items: center;\n gap: 9px;\n min-height: 38px;\n padding: 0 12px;\n border-bottom: 3px solid #00758f;\n }\n\n .opportunities-extension-account-plans-skeleton-status {\n display: block;\n width: 10px;\n height: 10px;\n flex: 0 0 auto;\n border-radius: 50%;\n background: #dedbd7;\n box-shadow: 0 0 0 3px #efedeb;\n animation: opportunities-extension-skeleton-pulse 1.15s ease-in-out infinite alternate;\n }\n\n .opportunities-extension-account-plans-skeleton-details {\n display: grid;\n grid-template-columns: repeat(3, minmax(0, 1fr));\n gap: 0 24px;\n padding: 0;\n }\n\n .opportunities-extension-account-plans-skeleton-details > div {\n display: grid;\n grid-template-columns: minmax(104px, 38%) minmax(0, 1fr);\n align-items: center;\n gap: 10px;\n min-height: 42px;\n padding: 7px 0;\n border-bottom: 1px solid #ebe8e5;\n }\n\n .opportunities-extension-account-plans-skeleton-bar {\n display: block;\n height: 12px;\n border-radius: 3px;\n background: #dedbd7;\n animation: opportunities-extension-skeleton-pulse 1.15s ease-in-out infinite alternate;\n }\n\n .opportunities-extension-account-plans-skeleton-tabs .opportunities-extension-account-plans-skeleton-bar {\n height: 14px;\n }\n\n .opportunities-extension-account-plans-skeleton-label {\n width: 74%;\n height: 10px;\n }\n\n .opportunities-extension-account-plans-skeleton-trend {\n display: grid;\n min-height: 0;\n grid-template-rows: auto auto minmax(0, 1fr);\n margin: 14px 0 0;\n padding-top: 12px;\n border-top: 1px solid #dedbd7;\n }\n\n .opportunities-extension-account-plans-skeleton-trend-header {\n display: flex;\n justify-content: flex-end;\n min-height: 38px;\n }\n\n .opportunities-extension-account-plans-skeleton-periods {\n display: flex;\n align-items: center;\n gap: 16px;\n }\n\n .opportunities-extension-account-plans-skeleton-periods .opportunities-extension-account-plans-skeleton-bar {\n height: 12px;\n }\n\n .opportunities-extension-account-plans-skeleton-period-active {\n height: 38px !important;\n border: 1px solid #8cc8d3;\n background: #e7f6f8;\n }\n\n .opportunities-extension-account-plans-skeleton-navigation {\n display: grid;\n grid-template-columns: 32px 124px 32px;\n align-items: center;\n justify-content: center;\n gap: 8px;\n min-height: 54px;\n }\n\n .opportunities-extension-account-plans-skeleton-navigation .opportunities-extension-account-plans-skeleton-bar {\n justify-self: center;\n }\n\n .opportunities-extension-account-plans-skeleton-chart {\n display: grid;\n min-height: 0;\n grid-template-columns: minmax(0, 1fr) 150px;\n align-items: center;\n gap: 28px;\n padding: 12px 14px 0 62px;\n }\n\n .opportunities-extension-account-plans-skeleton-plot {\n display: flex;\n position: relative;\n height: 300px;\n min-height: 0;\n box-sizing: border-box;\n align-items: flex-end;\n justify-content: space-around;\n gap: 12px;\n padding: 0 14px 64px;\n background: repeating-linear-gradient(to bottom, transparent 0, transparent 58px, #ebe8e5 58px, #ebe8e5 59px) left top / 100% 236px no-repeat;\n }\n\n .opportunities-extension-account-plans-skeleton-plot::before,\n .opportunities-extension-account-plans-skeleton-plot::after {\n position: absolute;\n display: block;\n content: \"\";\n background: #dedbd7;\n }\n\n .opportunities-extension-account-plans-skeleton-plot::before {\n top: 0;\n bottom: 64px;\n left: 0;\n width: 1px;\n }\n\n .opportunities-extension-account-plans-skeleton-plot::after {\n right: 0;\n bottom: 64px;\n left: 0;\n height: 1px;\n }\n\n .opportunities-extension-account-plans-skeleton-plot .opportunities-extension-account-plans-skeleton-bar {\n width: min(38px, 7%);\n flex: 0 1 38px;\n border-radius: 2px 2px 0 0;\n }\n\n .opportunities-extension-account-plans-skeleton-legend {\n display: grid;\n align-content: center;\n gap: 18px;\n min-height: 0;\n }\n\n .opportunities-extension-account-plans-skeleton-legend .opportunities-extension-account-plans-skeleton-bar {\n height: 11px;\n }\n\n @keyframes opportunities-extension-skeleton-pulse {\n from { opacity: .48; }\n to { opacity: 1; }\n }\n\n @media (prefers-reduced-motion: reduce) {\n .opportunities-extension-account-plans-skeleton-bar,\n .opportunities-extension-consumption-chart-skeleton-plot span,\n .opportunities-extension-consumption-svg .consumption-animated-label,\n .opportunities-extension-consumption-svg .consumption-animated-average {\n animation: none;\n opacity: 1;\n }\n }\n\n .opportunities-extension-account-plans-empty,\n .opportunities-extension-account-plans-error {\n margin: 0;\n padding: 28px 20px;\n color: #5f5a55;\n font-size: 14px;\n }\n\n .opportunities-extension-account-plans-error {\n color: #9f2d20;\n }\n\n .opportunities-extension-preferences-dialog {\n display: grid;\n width: min(680px, 100%);\n max-height: min(720px, calc(100vh - 48px));\n grid-template-rows: auto minmax(0, 1fr) auto;\n overflow: hidden;\n border: 1px solid #8f8a85;\n border-radius: 4px;\n background: #ffffff;\n box-shadow: 0 8px 24px rgba(0, 0, 0, .24);\n color: #312d2a;\n }\n\n .opportunities-extension-preferences-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 16px;\n padding: 18px 20px;\n border-bottom: 1px solid #dedbd7;\n }\n\n .opportunities-extension-preferences-header h2 {\n margin: 0;\n font-size: 20px;\n font-weight: 700;\n line-height: 1.2;\n }\n\n .opportunities-extension-preferences-content {\n min-height: 0;\n overflow: auto;\n padding: 20px;\n }\n\n .opportunities-extension-preferences-fieldset {\n min-width: 0;\n margin: 0;\n padding: 0;\n border: 0;\n }\n\n .opportunities-extension-preferences-fieldset legend {\n margin-bottom: 12px;\n padding: 0;\n color: #312d2a;\n font-size: 15px;\n font-weight: 700;\n line-height: 1.3;\n }\n\n .opportunities-extension-preferences-options {\n display: grid;\n grid-template-columns: repeat(2, minmax(0, 1fr));\n gap: 4px 20px;\n }\n\n .opportunities-extension-preferences-option {\n display: flex;\n align-items: flex-start;\n gap: 10px;\n min-width: 0;\n padding: 9px 8px;\n border-radius: 4px;\n color: #312d2a;\n font-size: 14px;\n line-height: 1.35;\n cursor: pointer;\n }\n\n .opportunities-extension-preferences-option:hover {\n background: #f0eeeb;\n }\n\n .opportunities-extension-preferences-option input {\n width: 18px;\n height: 18px;\n flex: 0 0 18px;\n margin: 0;\n accent-color: #00758f;\n cursor: pointer;\n }\n\n .opportunities-extension-preferences-cache-field {\n display: grid;\n width: min(280px, 100%);\n gap: 6px;\n margin-top: 24px;\n color: #312d2a;\n font-size: 14px;\n font-weight: 700;\n }\n\n .opportunities-extension-preferences-cache-field select {\n width: 100%;\n height: 40px;\n padding: 0 36px 0 12px;\n border: 1px solid #8f8a85;\n border-radius: 4px;\n background: #ffffff;\n color: #312d2a;\n font-size: 14px;\n font-weight: 400;\n }\n\n .opportunities-extension-preferences-cache-field select:focus {\n border-color: #00758f;\n outline: 2px solid #bde7ee;\n outline-offset: 0;\n }\n\n .opportunities-extension-preferences-footer {\n display: flex;\n justify-content: flex-end;\n padding: 14px 20px;\n border-top: 1px solid #dedbd7;\n }\n\n .opportunities-extension-button {\n min-width: 88px;\n min-height: 36px;\n padding: 7px 16px;\n border: 1px solid transparent;\n border-radius: 4px;\n font-size: 14px;\n font-weight: 600;\n line-height: 1.2;\n cursor: pointer;\n }\n\n .opportunities-extension-button-primary {\n border-color: #00758f;\n background: #00758f;\n color: #ffffff;\n }\n\n .opportunities-extension-button-primary:hover,\n .opportunities-extension-button-primary:focus-visible {\n border-color: #005e73;\n background: #005e73;\n outline: none;\n }\n\n .opportunities-extension-debug-panel {\n position: fixed;\n right: 24px;\n bottom: 24px;\n z-index: 1;\n width: min(640px, calc(100vw - 48px));\n max-height: min(560px, calc(100vh - 120px));\n overflow: auto;\n border: 1px solid #8f8a85;\n border-radius: 4px;\n background: #ffffff;\n box-shadow: 0 2px 8px rgba(0, 0, 0, .16);\n padding: 16px;\n color: #000000;\n }\n\n .opportunities-extension-debug-panel[hidden] {\n display: none !important;\n }\n\n .opportunities-extension-debug-panel h2 {\n margin: 0;\n font-size: 18px;\n font-weight: 700;\n line-height: 1.25;\n }\n\n .opportunities-extension-debug-panel p {\n margin: 4px 0 0;\n color: #5f5a55;\n font-size: 13px;\n }\n\n .opportunities-extension-debug-panel-header {\n display: flex;\n align-items: flex-start;\n justify-content: space-between;\n gap: 12px;\n margin-bottom: 12px;\n }\n\n .opportunities-extension-debug-visibility-button {\n width: 34px;\n height: 34px;\n flex: 0 0 34px;\n color: #312d2a;\n }\n\n .opportunities-extension-debug-visibility-button svg {\n width: 20px;\n height: 20px;\n }\n\n .opportunities-extension-debug-list {\n display: grid;\n gap: 10px;\n }\n\n .opportunities-extension-debug-item {\n border: 1px solid #dedbd7;\n border-left-width: 4px;\n border-radius: 4px;\n background: #faf9f8;\n }\n\n .opportunities-extension-debug-item[open] {\n background: #ffffff;\n }\n\n .opportunities-extension-debug-item-success {\n border-left-color: #3f6f17;\n }\n\n .opportunities-extension-debug-item-success .opportunities-extension-debug-status {\n background: #e2f2e5;\n color: #356d19;\n }\n\n .opportunities-extension-debug-item-failed {\n border-left-color: #c5331f;\n }\n\n .opportunities-extension-debug-item-failed .opportunities-extension-debug-status {\n background: #f9e3e1;\n color: #a52b1c;\n }\n\n .opportunities-extension-debug-item-pending {\n border-left-color: #6f5a7f;\n }\n\n .opportunities-extension-debug-item-pending .opportunities-extension-debug-status {\n background: #eee8f2;\n color: #6f5a7f;\n }\n\n .opportunities-extension-debug-heading {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 12px;\n min-height: 42px;\n padding: 9px 12px 9px 10px;\n cursor: pointer;\n list-style: none;\n }\n\n .opportunities-extension-debug-heading::-webkit-details-marker {\n display: none;\n }\n\n .opportunities-extension-debug-heading::before {\n content: \"⌄\";\n width: 14px;\n color: #5f5a55;\n font-size: 16px;\n line-height: 1;\n transform: rotate(-90deg);\n transition: transform .15s ease;\n }\n\n .opportunities-extension-debug-item[open] .opportunities-extension-debug-heading::before {\n transform: rotate(0deg);\n }\n\n .opportunities-extension-debug-summary-meta {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n margin-left: auto;\n }\n\n .opportunities-extension-debug-http-status,\n .opportunities-extension-debug-status {\n display: inline-flex;\n align-items: center;\n min-height: 22px;\n padding: 0 8px;\n border-radius: 999px;\n font-size: 11px;\n font-weight: 700;\n line-height: 1;\n text-transform: uppercase;\n }\n\n .opportunities-extension-debug-http-status {\n background: #e8f4f6;\n color: #006d7a;\n }\n\n .opportunities-extension-debug-status {\n background: #ebe8e5;\n color: #5f5a55;\n }\n\n .opportunities-extension-debug-heading strong {\n font-size: 13px;\n }\n\n .opportunities-extension-debug-item pre {\n margin: 0;\n padding: 8px 12px 12px;\n color: #312d2a;\n font-family: Consolas, \"Courier New\", monospace;\n font-size: 12px;\n line-height: 1.45;\n white-space: pre-wrap;\n word-break: break-word;\n }\n\n .opportunities-extension-debug-empty {\n padding: 14px;\n border: 1px dashed #b8b2ad;\n border-radius: 4px;\n color: #5f5a55;\n font-size: 13px;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] {\n background: #1f1f1f;\n color: #f6f4f2;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-shell,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-body {\n background: #1f1f1f;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-header {\n border-bottom-color: #4e4a46;\n background:\n linear-gradient(90deg, #a8795d 0 11%, #dd5a47 11% 23%, #876e9b 23% 36%, #00a6be 36% 51%, #dfbd76 51% 63%, transparent 63% 100%) top left / 100% 6px no-repeat,\n #292827;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-header h1,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-stage-dashboard-value,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-table,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-field,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-stage-filter-label,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-status-filter-label,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-customer-filter-label,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-table-search-field {\n color: #f6f4f2;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-header p,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plans-header p,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-stage-dashboard-card span,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-customer-filter-empty,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-products-detail-heading span,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-products-empty,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plans-empty,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plan-details dt,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-debug-panel p,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-debug-empty {\n color: #c9c5c1;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plans-error {\n color: #ffb4a8;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-chart-error {\n color: #ffb4a8;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plans-skeleton-bar {\n background: #5b5753;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plans-skeleton-status {\n background: #5b5753;\n box-shadow: 0 0 0 3px #3b3937;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plans-skeleton-period-active {\n border-color: #3f7580;\n background: #23474e;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-chart-skeleton-plot span {\n background: #5b5753;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plan-status-indicator {\n background: #8f8a85;\n box-shadow: 0 0 0 3px #3b3937;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plan-status-indicator[data-active=\"true\"] {\n background: #7fb05b;\n box-shadow: 0 0 0 3px #314527;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-form,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-stage-dashboard-card,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-table-surface,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-customer-filter-panel,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-preferences-dialog,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plans-dialog,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-products-table,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-debug-panel,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-debug-item[open] {\n border-color: #4e4a46;\n background: #292827;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-customer-filter-trigger,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-customer-filter-search,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-table-search-field input,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-field select,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-preferences-cache-field select,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-stage-filter-button,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-status-filter-button {\n border-color: #6a6560;\n background: #333130;\n color: #f6f4f2;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-customer-filter-trigger::after {\n border-top-color: #f6f4f2;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-select-wrap::after {\n border-top-color: #f6f4f2;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-customer-filter-trigger:disabled {\n background: #292827;\n color: #918b86;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-customer-filter-search::placeholder,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-table-search-field input::placeholder {\n color: #b5b0ab;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-customer-filter-select-all,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-customer-filter-option,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-preferences-header h2,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plans-header h2,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-preferences-fieldset legend,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-preferences-option,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-preferences-cache-field,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-products-detail-heading,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plan-details dd,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-debug-heading,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-debug-item pre,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-debug-panel h2 {\n color: #f6f4f2;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-navigation strong {\n color: #f6f4f2;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-chart-empty {\n color: #c9c5c1;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-customer-filter-select-all,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-table th {\n border-bottom-color: #4e4a46;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-preferences-header,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-preferences-footer,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plans-header,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plans-tabs-navigation,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plans-tabs,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plan-details > div,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plans-skeleton-tabs,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plans-skeleton-details > div {\n border-color: #4e4a46;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-trend,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-chart-skeleton-plot,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plans-skeleton-trend,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plans-skeleton-plot {\n border-color: #4e4a46;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plans-skeleton-plot {\n background: repeating-linear-gradient(to bottom, transparent 0, transparent 58px, #4e4a46 58px, #4e4a46 59px) left top / 100% 236px no-repeat;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plans-skeleton-plot::before,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plans-skeleton-plot::after {\n background: #4e4a46;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plan-tab {\n color: #c9c5c1;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plan-tab:hover {\n background: #3b3937;\n color: #f6f4f2;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plan-tab[aria-selected=\"true\"] {\n border-bottom-color: #43c4d5;\n color: #91e4ed;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-periods button {\n color: #f6f4f2;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-periods button:hover {\n background: #3b3937;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-periods button[aria-pressed=\"true\"] {\n border-color: #43c4d5;\n background: #173e43;\n color: #91e4ed;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-navigation-button,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plans-tab-navigation-button {\n border-color: #6a6560;\n background: #333130;\n color: #f6f4f2;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-navigation-button:hover:not(:disabled),\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plans-tab-navigation-button:hover:not(:disabled) {\n border-color: #43c4d5;\n background: #3b3937;\n color: #91e4ed;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-navigation-button:disabled,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plans-tab-navigation-button:disabled {\n border-color: #4e4a46;\n color: #746f6a;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-svg .consumption-grid-line {\n stroke: #4e4a46;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-svg .consumption-axis-label,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-svg .consumption-x-label {\n fill: #c9c5c1;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-svg .consumption-value-label {\n fill: #f6f4f2;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-svg .consumption-bar-funded {\n fill: #ca8798;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-svg .consumption-bar-overage {\n fill: #f09a32;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-svg .consumption-average-line {\n stroke: #f09a32;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-svg .consumption-bar-group:hover rect,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-svg .consumption-bar-group:focus rect {\n stroke: #f6f4f2;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-legend button {\n color: #f6f4f2;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-legend button:hover {\n background: #3b3937;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-legend button[aria-pressed=\"false\"] {\n color: #a8a39e;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-legend-funded {\n background: #ca8798;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-legend-overage {\n background: #f09a32;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-legend-average {\n border-top-color: #f09a32;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-tooltip {\n border-color: #6a6560;\n background: #333130;\n color: #f6f4f2;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-preferences-option:hover {\n background: #3b3937;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-preferences-option input {\n accent-color: #43c4d5;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-button-primary {\n border-color: #00a6be;\n background: #008aa6;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-button-primary:hover,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-button-primary:focus-visible {\n border-color: #43c4d5;\n background: #006d7a;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-customer-filter-option:hover,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-table tbody tr:hover,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-sort-button:hover,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-icon-button:hover,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-icon-button:focus {\n background: #3b3937;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-table thead,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-table th,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-products-table th {\n background: #333130;\n color: #f6f4f2;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-table td {\n border-bottom-color: #3f3c39;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-products-detail {\n border-bottom-color: #4e4a46;\n background: #252423;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-products-table th,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-products-table td {\n border-bottom-color: #3f3c39;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-products-count {\n border-color: #2f9bae;\n background: #1d4e55;\n color: #91e4ed;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-products-count:hover,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-products-count:focus-visible,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-products-count[aria-expanded=\"true\"] {\n border-color: #43c4d5;\n background: #008aa6;\n color: #ffffff;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-products-progress[data-state=\"running\"] {\n background: #1d4e55;\n color: #91e4ed;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-products-progress[data-state=\"complete\"] {\n background: #244f2e;\n color: #a8dfb7;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-products-progress[data-state=\"complete-with-errors\"],\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-products-progress[data-state=\"error\"],\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-products-count-error {\n border-color: #b13b34;\n background: #5f2926;\n color: #ffb4ad;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-products-cache-timestamp {\n background: #3b3937;\n color: #c9c5c1;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-table a,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-copy-button,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-action-button {\n color: #43c4d5;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-table a:hover,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-copy-button:hover,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-copy-button:focus-visible,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-action-button:hover,\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-action-button:focus-visible {\n background: #1d4e55;\n color: #91e4ed;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-stage-filter-button[data-stage=\"SQL\"] {\n color: #43c4d5;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-stage-filter-button[data-stage=\"PIPELINE\"] {\n color: #d1cbc6;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-stage-filter-button[data-stage=\"UPSIDE\"] {\n color: #ffbf62;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-stage-filter-button[data-stage=\"FORECAST\"] {\n color: #d2b7e9;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-stage-filter-button[data-stage=\"WON\"] {\n color: #9bd46a;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-stage-dashboard-card[data-stage=\"SQL\"] {\n border-top-color: #43c4d5;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-total-dashboard-card {\n border-top-color: #f6f4f2;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-stage-dashboard-card[data-stage=\"PIPELINE\"] {\n border-top-color: #c0b9b3;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-stage-dashboard-card[data-stage=\"UPSIDE\"] {\n border-top-color: #ffb84d;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-stage-dashboard-card[data-stage=\"FORECAST\"] {\n border-top-color: #cba7e7;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-stage-dashboard-card[data-stage=\"WON\"] {\n border-top-color: #92cf5b;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-stage-filter-button[aria-pressed=\"true\"][data-stage=\"SQL\"] {\n border-color: #008aa6;\n background: #008aa6;\n color: #ffffff;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-stage-filter-button[aria-pressed=\"true\"][data-stage=\"PIPELINE\"] {\n border-color: #6f6863;\n background: #6f6863;\n color: #ffffff;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-stage-filter-button[aria-pressed=\"true\"][data-stage=\"UPSIDE\"] {\n border-color: #b96e00;\n background: #b96e00;\n color: #ffffff;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-stage-filter-button[aria-pressed=\"true\"][data-stage=\"FORECAST\"] {\n border-color: #755b8b;\n background: #755b8b;\n color: #ffffff;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-stage-filter-button[aria-pressed=\"true\"][data-stage=\"WON\"] {\n border-color: #4b7f22;\n background: #4b7f22;\n color: #ffffff;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-status-filter-button[data-status=\"OPEN\"] {\n color: #69c985;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-status-filter-button[data-status=\"CLOSED\"] {\n color: #c3cad3;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-status-filter-button[data-status=\"LOST\"] {\n color: #ff9d94;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-status-filter-button[data-status=\"WON\"] {\n color: #83bfff;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-status-filter-button[aria-pressed=\"true\"][data-status=\"OPEN\"] {\n border-color: #197a3d;\n background: #197a3d;\n color: #ffffff;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-status-filter-button[aria-pressed=\"true\"][data-status=\"CLOSED\"] {\n border-color: #4b5563;\n background: #4b5563;\n color: #ffffff;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-status-filter-button[aria-pressed=\"true\"][data-status=\"LOST\"] {\n border-color: #b13b34;\n background: #b13b34;\n color: #ffffff;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-status-filter-button[aria-pressed=\"true\"][data-status=\"WON\"] {\n border-color: #1f5f99;\n background: #1f5f99;\n color: #ffffff;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-debug-item {\n border-color: #4e4a46;\n background: #252423;\n }\n\n .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-icon-button {\n color: #f6f4f2;\n }\n\n @media (min-width: 1201px) and (max-width: 1450px) {\n .opportunities-extension-table th:nth-child(1) {\n width: 16%;\n }\n\n .opportunities-extension-table th:nth-child(3) {\n width: 18%;\n }\n\n .opportunities-extension-table th:nth-child(4) {\n width: 12%;\n }\n\n .opportunities-extension-table th:nth-child(6) {\n width: 7%;\n }\n\n .opportunities-extension-table th:nth-child(7) {\n width: 8%;\n }\n\n .opportunities-extension-table th:nth-child(10) {\n width: 10%;\n }\n }\n\n @media (max-width: 1200px) {\n .opportunities-extension-table {\n min-width: 1180px;\n }\n\n .opportunities-extension-table th:nth-child(1) {\n width: 15%;\n }\n\n .opportunities-extension-table th:nth-child(3) {\n width: 17%;\n }\n\n .opportunities-extension-table th:nth-child(4) {\n width: 13%;\n }\n\n .opportunities-extension-table th:nth-child(6) {\n width: 6%;\n }\n\n .opportunities-extension-table th:nth-child(7) {\n width: 9%;\n }\n\n .opportunities-extension-table th:nth-child(10) {\n width: 11%;\n }\n }\n\n @media (max-width: 700px) {\n .opportunities-extension-header {\n padding: 24px 20px 18px;\n }\n\n .opportunities-extension-header::before {\n left: 20px;\n }\n\n .opportunities-extension-header h1 {\n font-size: 22px;\n }\n\n .opportunities-extension-header p {\n font-size: 14px;\n }\n\n .opportunities-extension-body {\n padding: 16px 20px 24px;\n }\n\n .opportunities-extension-form {\n align-items: stretch;\n flex-wrap: wrap;\n gap: 14px;\n min-height: auto;\n padding: 12px;\n }\n\n .opportunities-extension-field {\n max-width: none;\n width: 100%;\n }\n\n .opportunities-extension-customer-filter {\n width: 100%;\n }\n\n .opportunities-extension-customer-filter-trigger {\n width: 100%;\n }\n\n .opportunities-extension-customer-filter-panel {\n width: min(360px, calc(100vw - 64px));\n }\n\n .opportunities-extension-table-search-field {\n width: 100%;\n }\n\n .opportunities-extension-stage-dashboard {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n\n .opportunities-extension-stage-dashboard-value {\n font-size: 18px;\n }\n\n .opportunities-extension-preferences-modal {\n padding: 12px;\n }\n\n .opportunities-extension-account-plans-modal {\n padding: 12px;\n }\n\n .opportunities-extension-preferences-dialog {\n max-height: calc(100vh - 24px);\n }\n\n .opportunities-extension-account-plans-dialog {\n height: calc(100vh - 24px);\n }\n\n .opportunities-extension-account-plan-panel {\n padding: 12px 14px;\n }\n\n .opportunities-extension-account-plan-details {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n gap: 0 14px;\n }\n\n .opportunities-extension-account-plan-details > div {\n grid-template-columns: 1fr;\n align-content: center;\n gap: 3px;\n min-height: 54px;\n padding: 5px 0;\n }\n\n .opportunities-extension-account-plans-skeleton-details {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n gap: 0 14px;\n padding: 0;\n }\n\n .opportunities-extension-account-plans-skeleton-details > div {\n grid-template-columns: 1fr;\n align-content: center;\n gap: 5px;\n min-height: 54px;\n padding: 5px 0;\n }\n\n .opportunities-extension-account-plans-skeleton-trend {\n margin: 14px 0 0;\n }\n\n .opportunities-extension-account-plans-skeleton-periods {\n display: grid;\n grid-template-columns: repeat(4, minmax(0, 1fr));\n align-items: center;\n gap: 6px;\n }\n\n .opportunities-extension-account-plans-skeleton-periods .opportunities-extension-account-plans-skeleton-bar {\n width: 100% !important;\n }\n\n .opportunities-extension-account-plans-skeleton-chart {\n grid-template-columns: minmax(0, 1fr);\n gap: 12px;\n padding: 12px 8px 0 34px;\n }\n\n .opportunities-extension-account-plans-skeleton-legend {\n display: flex;\n min-height: 24px;\n align-items: center;\n justify-content: center;\n gap: 12px;\n }\n\n .opportunities-extension-consumption-trend-header {\n align-items: stretch;\n }\n\n .opportunities-extension-consumption-periods {\n display: grid;\n grid-template-columns: repeat(4, minmax(0, 1fr));\n gap: 3px;\n }\n\n .opportunities-extension-consumption-periods button {\n min-width: 0;\n padding: 7px 4px;\n font-size: 12px;\n }\n\n .opportunities-extension-consumption-chart {\n min-height: 0;\n }\n\n .opportunities-extension-consumption-svg {\n width: 760px;\n height: 245px;\n }\n\n .opportunities-extension-consumption-visual {\n width: 920px;\n grid-template-columns: 760px 144px;\n gap: 12px;\n }\n\n .opportunities-extension-consumption-figure {\n overflow-x: auto;\n overscroll-behavior-inline: contain;\n }\n\n .opportunities-extension-consumption-chart-skeleton {\n min-height: 0;\n padding: 24px 18px 18px;\n }\n\n .opportunities-extension-consumption-chart-skeleton-plot {\n min-height: 180px;\n gap: 4px;\n padding: 0 6px;\n }\n\n .opportunities-extension-preferences-options {\n grid-template-columns: 1fr;\n }\n\n .opportunities-extension-stage-filter-controls {\n gap: 6px;\n }\n\n .opportunities-extension-status-filter-controls {\n gap: 6px;\n }\n\n .opportunities-extension-table-surface {\n min-width: 0;\n min-height: calc(100vh - 230px);\n }\n\n .opportunities-extension-debug-panel {\n right: 12px;\n bottom: 12px;\n width: calc(100vw - 24px);\n max-height: calc(100vh - 96px);\n }\n }\n \n/* Full-page diagnostics, scoped to the extension and its current theme. */\n.opportunities-extension-modal .opportunities-extension-debug-panel {\n --debug-surface: #fff;\n --debug-code: #f5f6f7;\n --debug-text: #312d2a;\n --debug-muted: #5f5a55;\n --debug-border: #dedbd7;\n --debug-success: #22613b;\n --debug-success-bg: #e1f1e5;\n --debug-failed: #a12721;\n --debug-failed-bg: #fce8e6;\n --debug-pending: #805000;\n --debug-pending-bg: #fff1ce;\n --debug-info: #075e87;\n --debug-info-bg: #e5f1fa;\n --debug-key: #075e87;\n --debug-string: #22613b;\n --debug-number: #865000;\n --debug-literal: #73429b;\n position: fixed;\n inset: 0;\n z-index: 2147483647;\n display: grid;\n grid-template-rows: auto auto minmax(0, 1fr);\n width: auto;\n height: auto;\n max-height: none;\n min-width: 0;\n box-sizing: border-box;\n overflow: hidden;\n margin: 0;\n padding: 20px;\n border: 0;\n border-radius: 0;\n background: var(--debug-surface);\n color: var(--debug-text);\n color-scheme: light;\n}\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-debug-panel {\n --debug-surface: #292827;\n --debug-code: #222120;\n --debug-text: #f6f4f2;\n --debug-muted: #c9c5c1;\n --debug-border: #514c47;\n --debug-success: #a9e3bd;\n --debug-success-bg: #214d34;\n --debug-failed: #ffb4ab;\n --debug-failed-bg: #582c2a;\n --debug-pending: #ffe099;\n --debug-pending-bg: #59441e;\n --debug-info: #a8d9ff;\n --debug-info-bg: #233f52;\n --debug-key: #8ed6f0;\n --debug-string: #a9e3bd;\n --debug-number: #ffe099;\n --debug-literal: #d6b7f1;\n color: #f6f4f2;\n color-scheme: dark;\n}\n.opportunities-extension-debug-actions { display: flex; gap: 8px; flex: 0 0 auto; }\n.opportunities-extension-modal .opportunities-extension-debug-panel .opportunities-extension-debug-list {\n overflow: auto;\n min-height: 0;\n min-width: 0;\n align-content: start;\n scrollbar-gutter: stable;\n padding: 2px 8px 12px 2px;\n}\n.opportunities-extension-modal .opportunities-extension-debug-panel .opportunities-extension-debug-item {\n --debug-state: var(--debug-info);\n --debug-state-bg: var(--debug-info-bg);\n border-color: var(--debug-border);\n border-left-color: var(--debug-state);\n background: var(--debug-surface);\n min-width: 0;\n}\n.opportunities-extension-modal .opportunities-extension-debug-panel .opportunities-extension-debug-item-success { --debug-state: var(--debug-success); --debug-state-bg: var(--debug-success-bg); }\n.opportunities-extension-modal .opportunities-extension-debug-panel .opportunities-extension-debug-item-failed { --debug-state: var(--debug-failed); --debug-state-bg: var(--debug-failed-bg); }\n.opportunities-extension-modal .opportunities-extension-debug-panel .opportunities-extension-debug-item-pending { --debug-state: var(--debug-pending); --debug-state-bg: var(--debug-pending-bg); }\n.opportunities-extension-modal .opportunities-extension-debug-panel .opportunities-extension-debug-status {\n color: var(--debug-state);\n background: var(--debug-state-bg);\n}\n.opportunities-extension-modal .opportunities-extension-debug-panel .opportunities-extension-debug-http-status,\n.opportunities-extension-debug-method {\n color: var(--debug-info);\n background: var(--debug-info-bg);\n}\n.opportunities-extension-debug-method {\n display: inline-flex;\n align-items: center;\n min-height: 22px;\n padding: 0 8px;\n border-radius: 4px;\n font: 700 11px/1.2 Consolas, monospace;\n}\n.opportunities-extension-debug-method[data-method=\"POST\"] { color: var(--debug-literal); background: var(--debug-code); }\n.opportunities-extension-modal .opportunities-extension-debug-panel .opportunities-extension-debug-http-status[data-http-class=\"2\"] { color: var(--debug-success); background: var(--debug-success-bg); }\n.opportunities-extension-modal .opportunities-extension-debug-panel .opportunities-extension-debug-http-status[data-http-class=\"4\"],\n.opportunities-extension-modal .opportunities-extension-debug-panel .opportunities-extension-debug-http-status[data-http-class=\"5\"] { color: var(--debug-failed); background: var(--debug-failed-bg); }\n.opportunities-extension-modal .opportunities-extension-debug-panel .opportunities-extension-debug-http-status[data-http-class=\"pending\"] { color: var(--debug-pending); background: var(--debug-pending-bg); }\n.opportunities-extension-debug-details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding: 0 14px 16px; }\n.opportunities-extension-debug-block { min-width: 0; border-left: 2px solid var(--debug-info); padding-left: 10px; }\n.opportunities-extension-debug-block[data-direction=\"response\"] { border-left-color: var(--debug-success); }\n.opportunities-extension-modal .opportunities-extension-debug-block h3 { margin: 0 0 8px; color: var(--debug-info); font-size: 12px; }\n.opportunities-extension-modal .opportunities-extension-debug-block[data-direction=\"response\"] h3 { color: var(--debug-success); }\n.opportunities-extension-modal .opportunities-extension-debug-panel .opportunities-extension-debug-item pre {\n min-width: 0;\n margin: 0;\n padding: 12px;\n max-height: 380px;\n overflow: auto;\n white-space: pre-wrap;\n overflow-wrap: anywhere;\n color: var(--debug-text);\n background: var(--debug-code);\n line-height: 1.6;\n tab-size: 2;\n}\n.opportunities-extension-debug-json-key { color: var(--debug-key); }\n.opportunities-extension-debug-json-string { color: var(--debug-string); }\n.opportunities-extension-debug-json-number { color: var(--debug-number); }\n.opportunities-extension-debug-json-literal { color: var(--debug-literal); }\n@media (max-width: 760px) {\n .opportunities-extension-modal .opportunities-extension-debug-panel { padding: 12px; }\n .opportunities-extension-debug-details { grid-template-columns: minmax(0, 1fr); }\n}\n.opportunities-extension-debug-tabs {\n display: flex;\n flex-wrap: wrap;\n gap: 4px;\n margin-bottom: 12px;\n padding-bottom: 8px;\n border-bottom: 1px solid #dedbd7;\n}\n\n.opportunities-extension-debug-tabs button {\n max-width: 100%;\n min-height: 32px;\n padding: 6px 8px;\n border: 0;\n border-bottom: 2px solid transparent;\n border-radius: 0;\n background: transparent;\n color: inherit;\n font: inherit;\n font-size: 12px;\n line-height: 1.35;\n overflow-wrap: anywhere;\n cursor: pointer;\n}\n\n.opportunities-extension-debug-tabs button:hover {\n background: #f5f4f2;\n}\n\n.opportunities-extension-debug-tabs button[aria-selected=\"true\"] {\n border-bottom-color: #00758f;\n background: #e8f4f6;\n color: #006b84;\n font-weight: 700;\n}\n\n.opportunities-extension-debug-tabs button:focus-visible,\n.opportunities-extension-debug-list[role=\"tabpanel\"]:focus-visible {\n outline: 2px solid #00758f;\n outline-offset: -2px;\n}\n\n.opportunities-extension-debug-time {\n font-size: 11px;\n font-variant-numeric: tabular-nums;\n white-space: nowrap;\n}\n\n.opportunities-extension-debug-heading {\n flex-wrap: wrap;\n}\n\n.opportunities-extension-debug-heading strong {\n flex: 1 1 180px;\n min-width: 0;\n overflow-wrap: anywhere;\n}\n\n.opportunities-extension-debug-summary-meta {\n flex-wrap: wrap;\n justify-content: flex-end;\n}\n\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-debug-tabs button {\n color: #f6f4f2;\n}\n\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-debug-heading::before {\n color: #c9c5c1;\n}\n\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-debug-tabs {\n border-bottom-color: #514c47;\n}\n\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-debug-tabs button:hover {\n background: #383633;\n}\n\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-debug-tabs button[aria-selected=\"true\"] {\n background: #173f48;\n border-bottom-color: #8cc8d3;\n color: #bde7ee;\n}\n\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-debug-tabs button:focus-visible,\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-debug-list[role=\"tabpanel\"]:focus-visible {\n outline-color: #8cc8d3;\n}\n.opportunities-extension-debug-duration {\n color: #55514d;\n font-size: 11px;\n font-variant-numeric: tabular-nums;\n white-space: nowrap;\n}\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-debug-duration { color: #d6d2ce; }\n\n/* Compact filters use available CSS width, including Windows display scaling. */\n.opportunities-extension-products-progress,\n.opportunities-extension-auth-badge { opacity: 1; transition: opacity 300ms ease; }\n.opportunities-extension-products-progress[data-fading=\"true\"],\n.opportunities-extension-auth-badge[data-fading=\"true\"] { opacity: 0; }\n.opportunities-extension-auth-badge[hidden] { display: none; }\n@media (prefers-reduced-motion: reduce) {\n .opportunities-extension-products-progress,\n .opportunities-extension-auth-badge { transition: none; }\n}\n.opportunities-extension-crm-sr-badge {\n border: 1px solid #408254;\n color: #185b30;\n background: #e1f1e5;\n}\n.opportunities-extension-crm-sr-badge[data-state=\"missing\"] { color: #9f201b; background: #fde8e7; border-color: #c74640; }\n.opportunities-extension-crm-sr-badge[data-state=\"error\"] { color: #785000; background: #fff0cd; border-color: #987021; }\n.opportunities-extension-wl-actions-badge[data-state=\"loading\"] { color: #5f5a55; background: #eceae8; border-color: #8f8a85; }\n.opportunities-extension-crm-sr-badge:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-crm-sr-badge { color: #b8e4c6; background: #214d34; border-color: #6eac82; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-crm-sr-badge[data-state=\"missing\"] { color: #ffd9d5; background: #542824; border-color: #ef938b; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-crm-sr-badge[data-state=\"error\"] { color: #ffe0a3; background: #584219; border-color: #c99b4b; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-wl-actions-badge[data-state=\"loading\"] { color: #dedbd7; background: #484541; border-color: #8f8a85; }\n\n.opportunities-extension-form {\n display: grid;\n grid-template-columns: repeat(4, minmax(0, 1fr)) max-content max-content;\n align-items: end;\n gap: 12px;\n min-height: 0;\n padding: 12px;\n}\n\n.opportunities-extension-form > *,\n.opportunities-extension-badge-filters > section {\n min-width: 0;\n width: 100%;\n max-width: none;\n grid-template-rows: auto 32px;\n gap: 4px;\n font-size: 12px;\n}\n\n.opportunities-extension-form > * > span:first-child,\n.opportunities-extension-badge-filters > section > span:first-child {\n font-size: 12px;\n line-height: 16px;\n}\n\n.opportunities-extension-form .opportunities-extension-select-wrap {\n width: 100%;\n}\n\n.opportunities-extension-form .opportunities-extension-field select,\n.opportunities-extension-form .opportunities-extension-customer-filter-trigger,\n.opportunities-extension-form .opportunities-extension-table-search-field input {\n box-sizing: border-box;\n width: 100%;\n min-width: 0;\n height: 32px;\n min-height: 32px;\n padding: 4px 8px;\n font-size: 12px;\n line-height: 20px;\n}\n\n.opportunities-extension-form .opportunities-extension-field select,\n.opportunities-extension-form .opportunities-extension-customer-filter-trigger {\n padding-right: 26px;\n}\n\n.opportunities-extension-form .opportunities-extension-select-wrap::after,\n.opportunities-extension-form .opportunities-extension-customer-filter-trigger::after {\n right: 10px;\n border-left-width: 4px;\n border-right-width: 4px;\n border-top-width: 5px;\n}\n\n.opportunities-extension-form .opportunities-extension-stage-filter-controls,\n.opportunities-extension-form .opportunities-extension-status-filter-controls {\n flex-wrap: nowrap;\n gap: 4px;\n}\n\n.opportunities-extension-form .opportunities-extension-stage-filter-button,\n.opportunities-extension-form .opportunities-extension-status-filter-button,\n.opportunities-extension-form .opportunities-extension-activity-filter-button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n height: 28px;\n min-height: 28px;\n padding: 4px 7px;\n border: 1px solid currentColor;\n border-radius: 18px;\n font-family: inherit;\n font-size: 11px;\n font-weight: 700;\n letter-spacing: 0;\n line-height: 18px;\n white-space: nowrap;\n}\n\n.opportunities-extension-cell-actions > .opportunities-extension-products-count,\n.opportunities-extension-cell-actions > .opportunities-extension-products-ramp,\n.opportunities-extension-cell-actions > .opportunities-extension-crm-sr-badge {\n display: inline-flex;\n align-items: center;\n justify-content: flex-start;\n box-sizing: border-box;\n flex: 0 0 auto;\n gap: 4px;\n height: 20px;\n min-height: 20px;\n margin: 0;\n padding: 0 6px;\n border-width: 1px;\n border-style: solid;\n border-radius: 8px;\n font-family: inherit;\n font-size: 10px;\n font-style: normal;\n font-weight: 600;\n line-height: 16px;\n letter-spacing: 0;\n text-align: center;\n vertical-align: middle;\n white-space: nowrap;\n}\n\n.opportunities-extension-cell-actions .opportunities-extension-badge-icon,\n.opportunities-extension-activity-filter-button .opportunities-extension-badge-icon {\n display: block;\n order: -1;\n flex: 0 0 16px;\n width: 16px;\n height: 16px;\n margin: 0;\n padding: 0;\n border: 0;\n color: inherit;\n fill: none;\n stroke: currentColor;\n stroke-width: 2.25;\n stroke-linecap: round;\n stroke-linejoin: round;\n pointer-events: none;\n}\n\n@media (max-width: 1150px) {\n .opportunities-extension-form {\n grid-template-columns: repeat(4, minmax(0, 1fr));\n }\n .opportunities-extension-badge-filters > .opportunities-extension-status-filter,\n .opportunities-extension-badge-filters > .opportunities-extension-stage-filter {\n grid-column: span 2;\n }\n}\n\n@media (max-width: 700px) {\n .opportunities-extension-form {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n .opportunities-extension-form .opportunities-extension-stage-filter-controls,\n .opportunities-extension-form .opportunities-extension-status-filter-controls {\n flex-wrap: wrap;\n }\n .opportunities-extension-badge-filters > .opportunities-extension-status-filter,\n .opportunities-extension-badge-filters > .opportunities-extension-stage-filter {\n grid-template-rows: auto auto;\n }\n}\n\n@media (max-width: 420px) {\n .opportunities-extension-form { grid-template-columns: minmax(0, 1fr); }\n .opportunities-extension-badge-filters > .opportunities-extension-status-filter,\n .opportunities-extension-badge-filters > .opportunities-extension-stage-filter { grid-column: auto; }\n}\n\n.opportunities-extension-badge-filters { display: contents; }\n.opportunities-extension-activity-filter { display: grid; }\n.opportunities-extension-activity-filter[hidden] { display: none; }\n.opportunities-extension-activity-filter-controls { display: flex; align-items: center; flex-wrap: nowrap; gap: 4px; }\n/* Flexible fields share the space left by the four compact badge groups. */\n.opportunities-extension-form[data-activity-filters=\"true\"] {\n grid-template-columns: repeat(4, minmax(0, 1fr)) repeat(4, max-content);\n column-gap: 8px;\n}\n.opportunities-extension-activity-filter-button {\n min-width: 32px;\n gap: 4px;\n color: #185b30;\n background: #fff;\n cursor: pointer;\n}\n.opportunities-extension-activity-filter-button[data-value=\"missing\"] { color: #9f201b; }\n.opportunities-extension-activity-filter-button[data-value=\"under4\"] { color: #005f7d; }\n.opportunities-extension-activity-filter-button[aria-pressed=\"true\"] { color: #fff; background: #25653a; border-color: #25653a; }\n.opportunities-extension-activity-filter-button[aria-pressed=\"true\"][data-value=\"missing\"] { background: #a12d27; border-color: #a12d27; }\n.opportunities-extension-activity-filter-button[aria-pressed=\"true\"][data-value=\"under4\"] { background: #006b86; border-color: #006b86; }\n.opportunities-extension-activity-filter-button:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-activity-filter { color: #eeeae6; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-activity-filter-button { color: #b8e4c6; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-activity-filter-button:not([aria-pressed=\"true\"]) { background: #333130; border-color: #6a6560; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-activity-filter-button[data-value=\"missing\"] { color: #ffd9d5; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-activity-filter-button[data-value=\"under4\"] { color: #b5e9fc; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-activity-filter-button[aria-pressed=\"true\"] { border-color: currentColor; }\n@media (max-width: 1350px) {\n .opportunities-extension-form[data-activity-filters=\"true\"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }\n .opportunities-extension-form[data-activity-filters=\"true\"] .opportunities-extension-badge-filters {\n display: flex;\n grid-column: 1 / -1;\n flex-wrap: wrap;\n align-items: start;\n gap: 12px 20px;\n }\n .opportunities-extension-form[data-activity-filters=\"true\"] .opportunities-extension-badge-filters > section {\n width: auto;\n max-width: 100%;\n grid-template-rows: auto auto;\n }\n}\n@media (max-width: 700px) {\n .opportunities-extension-form[data-activity-filters=\"true\"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }\n .opportunities-extension-activity-filter-controls { flex-wrap: wrap; }\n}\n@media (max-width: 420px) {\n .opportunities-extension-form[data-activity-filters=\"true\"] { grid-template-columns: minmax(0, 1fr); }\n}\n\n.opportunities-extension-add-action {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n flex: 0 0 16px;\n width: 16px;\n height: 16px;\n padding: 0;\n margin: 0 0 0 2px;\n border: 0;\n border-radius: 3px;\n background: transparent;\n color: inherit;\n font: inherit;\n cursor: pointer;\n}\n.opportunities-extension-add-action:hover { background: rgba(127, 127, 127, .2); }\n.opportunities-extension-add-action:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }\n.opportunities-extension-action-form-modal {\n position: absolute;\n inset: 0;\n z-index: 5;\n display: grid;\n place-items: center;\n padding: 12px;\n background: rgba(0, 0, 0, .42);\n}\n.opportunities-extension-action-form-dialog {\n box-sizing: border-box;\n width: min(560px, 100%);\n max-height: calc(100vh - 24px);\n overflow-y: auto;\n background: #fff;\n color: #312d2a;\n border: 1px solid #b9b4ae;\n border-radius: 6px;\n box-shadow: 0 12px 36px rgba(0, 0, 0, .25);\n}\n.opportunities-extension-action-form {\n display: grid;\n grid-template-columns: repeat(2, minmax(0, 1fr));\n gap: 14px;\n padding: 18px;\n}\n.opportunities-extension-action-form-heading { min-width: 0; overflow-wrap: anywhere; }\n.opportunities-extension-action-form-context {\n display: grid;\n grid-template-columns: max-content minmax(0, 1fr);\n gap: 6px 12px;\n margin: 12px 0 0;\n font-size: 12px;\n line-height: 18px;\n}\n.opportunities-extension-action-form-context dt { font-weight: 600; }\n.opportunities-extension-action-form-context dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }\n.opportunities-extension-action-form-field { display: grid; gap: 6px; min-width: 0; font-size: 13px; }\n.opportunities-extension-action-form-field[hidden] { display: none; }\n.opportunities-extension-action-form-status { margin: 0; font-size: 13px; overflow-wrap: anywhere; }\n.opportunities-extension-action-form-status[role=\"alert\"] { color: #a12d27; }\n.opportunities-extension-action-form-wide,\n.opportunities-extension-action-form-footer { grid-column: 1 / -1; }\n.opportunities-extension-action-form-field input,\n.opportunities-extension-action-form-field select,\n.opportunities-extension-action-form-field textarea {\n box-sizing: border-box;\n min-width: 0;\n width: 100%;\n border: 1px solid #8f8983;\n border-radius: 4px;\n padding: 8px;\n font: inherit;\n line-height: 20px;\n color: inherit;\n background: #fff;\n}\n.opportunities-extension-action-form-field textarea { resize: vertical; min-height: 96px; }\n.opportunities-extension-action-form-field select { height: 38px; }\n.opportunities-extension-action-form-field select[hidden] { display: none; }\n.opportunities-extension-sr-form-dialog { width: min(900px, 100%); }\n.opportunities-extension-sr-form-dialog > .opportunities-extension-account-plans-header { padding: 20px 24px; }\n.opportunities-extension-sr-form-dialog > .opportunities-extension-action-form { gap: 20px 24px; padding: 24px; align-items: start; }\n.opportunities-extension-sr-form-dialog .opportunities-extension-action-form-field { gap: 8px; }\n.opportunities-extension-sr-form-dialog textarea { min-height: 112px; }\n.opportunities-extension-sr-form-dialog .opportunities-extension-sr-service-option { padding: 12px 0; gap: 10px; }\n.opportunities-extension-sr-form-dialog .opportunities-extension-sr-service-abstract { font-size: 13px; line-height: 20px; }\n@media (min-width: 1000px) {\n .opportunities-extension-sr-form-dialog { width: min(1120px, 100%); }\n .opportunities-extension-sr-form-dialog > .opportunities-extension-action-form { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 24px; }\n .opportunities-extension-sr-services { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; align-items: start; }\n .opportunities-extension-sr-services .opportunities-extension-sr-service-option { margin: 0; border-top: 1px solid #aaa6a040; }\n .opportunities-extension-sr-services .opportunities-extension-sr-service-option:nth-child(-n+2) { border-top: 0; }\n}\n@media (max-width: 600px) {\n .opportunities-extension-sr-form-dialog > .opportunities-extension-account-plans-header { padding: 16px; }\n .opportunities-extension-sr-form-dialog > .opportunities-extension-action-form { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 16px; }\n}\n.opportunities-extension-sr-lookup { min-width: 0; padding: 0; margin: 0; border: 0; font-size: 13px; }\n.opportunities-extension-sr-lookup legend { padding: 0 0 8px; font-weight: 600; }\n.opportunities-extension-sr-lookup[aria-busy=\"true\"] > p { opacity: .65; }\n.opportunities-extension-sr-service-option { display: flex; align-items: flex-start; gap: 8px; padding: 9px 0; cursor: pointer; }\n.opportunities-extension-sr-service-option + .opportunities-extension-sr-service-option { border-top: 1px solid #aaa6a040; }\n.opportunities-extension-sr-service-option input { flex: 0 0 16px; width: 16px; height: 16px; margin: 2px 0 0; accent-color: #00758f; }\n.opportunities-extension-sr-service-option > span { min-width: 0; overflow-wrap: anywhere; }\n.opportunities-extension-sr-service-name { display: block; font-weight: 600; line-height: 20px; }\n.opportunities-extension-sr-service-abstract { display: block; margin-top: 3px; color: #625d58; font-size: 12px; line-height: 18px; white-space: pre-wrap; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-sr-service-abstract { color: #c7c2bc; }\n.opportunities-extension-sr-lookup-retry { color: inherit; background: transparent; border: 1px solid #8f8983; border-radius: 4px; padding: 5px 10px; cursor: pointer; }\n.opportunities-extension-sr-lookup-retry[hidden] { display: none; }\n.opportunities-extension-action-form [aria-invalid=\"true\"] { border-color: #b3261e; outline: 1px solid #b3261e; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-action-form [aria-invalid=\"true\"] { border-color: #ffaaa4; outline-color: #ffaaa4; }\n.opportunities-extension-modal .opportunities-extension-copy-toast { z-index: 20; }\n.opportunities-extension-action-combobox { position: relative; min-width: 0; }\n.opportunities-extension-action-combobox input { height: 38px; }\n.opportunities-extension-action-options {\n position: absolute;\n z-index: 10;\n top: calc(100% + 4px);\n left: 0;\n right: 0;\n box-sizing: border-box;\n max-height: 180px;\n overflow-y: auto;\n overscroll-behavior: contain;\n border: 1px solid #8f8983;\n border-radius: 4px;\n box-shadow: 0 4px 12px rgba(0, 0, 0, .2);\n background: #fff;\n color: #292725;\n}\n.opportunities-extension-action-options[data-placement=\"above\"] { top: auto; bottom: calc(100% + 4px); }\n.opportunities-extension-action-options[hidden] { display: none; }\n.opportunities-extension-action-option { padding: 8px; line-height: 20px; overflow-wrap: anywhere; cursor: pointer; }\n.opportunities-extension-action-option:hover,\n.opportunities-extension-action-option[aria-selected=\"true\"] { background: #e3f2f5; color: #005b70; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-action-options { background: #211f1d; color: #eeeae6; border-color: #918a82; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-action-option:hover,\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-action-option[aria-selected=\"true\"] { background: #174955; color: #c9f4ff; }\n.opportunities-extension-action-form[data-state=\"loading\"] .opportunities-extension-action-combobox input:disabled { animation: opportunities-action-options-loading 1s ease-in-out infinite alternate; }\n.opportunities-extension-action-form[data-state=\"loading\"] .opportunities-extension-action-form-field > :disabled {\n animation: opportunities-action-options-loading 1s ease-in-out infinite alternate;\n}\n@keyframes opportunities-action-options-loading { from { opacity: .45; } to { opacity: .85; } }\n@media (prefers-reduced-motion: reduce) {\n .opportunities-extension-action-form[data-state=\"loading\"] .opportunities-extension-action-form-field > :disabled,\n .opportunities-extension-action-form[data-state=\"loading\"] .opportunities-extension-action-combobox input:disabled { animation: none; }\n}\n.opportunities-extension-action-form-footer { display: flex; justify-content: flex-end; gap: 8px; }\n.opportunities-extension-action-form-footer button {\n border: 1px solid #8f8983;\n border-radius: 4px;\n padding: 7px 14px;\n font: inherit;\n font-size: 13px;\n background: transparent;\n color: inherit;\n cursor: pointer;\n}\n.opportunities-extension-action-form-footer button:disabled { opacity: .55; cursor: not-allowed; }\n.opportunities-extension-action-form :focus-visible { outline: 2px solid #00758f; outline-offset: 2px; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-action-form-dialog {\n color-scheme: dark;\n background: #292725;\n color: #eeeae6;\n border-color: #756f68;\n}\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-action-form-field input,\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-action-form-field select,\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-action-form-field textarea { background: #211f1d; border-color: #918a82; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-action-form-status[role=\"alert\"] { color: #ffd9d5; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-action-form :focus-visible { outline-color: #80d6e8; }\n@media (max-width: 420px) {\n .opportunities-extension-action-form { grid-template-columns: minmax(0, 1fr); }\n}\n\n/* Keep layout rules on the outer table, never on expanded product tables. */\n.opportunities-extension-table[data-opportunities-layout=\"inline-actions\"] {\n width: 100%;\n min-width: 1168px;\n table-layout: fixed;\n}\n\n.opportunities-extension-table-skeleton-row { height: 76px; }\n.opportunities-extension-table-skeleton-text { width: 85%; max-width: 100%; }\n.opportunities-extension-table-skeleton-row:nth-of-type(even) .opportunities-extension-table-skeleton-text { width: 70%; }\n.opportunities-extension-table-skeleton-badge { flex: 0 1 30px; width: 30px; min-width: 0; height: 16px; }\n.opportunities-extension-table-skeleton-row > td[data-column=\"customer\"] .opportunities-extension-table-skeleton-badge { flex-basis: 18px; width: 18px; }\n.opportunities-extension-table-skeleton-row > td[data-column=\"status\"] .opportunities-extension-table-skeleton-text,\n.opportunities-extension-table-skeleton-row > td[data-column=\"stage\"] .opportunities-extension-table-skeleton-text { height: 20px; max-width: 66px; border-radius: 8px; }\n\n/* Fixed table layout shares leftover width only between the two auto columns. */\n.opportunities-extension-table > thead > tr > th[data-column=\"name\"] { width: auto; }\n.opportunities-extension-table > thead > tr > th[data-column=\"customer\"] { width: auto; }\n.opportunities-extension-table > thead > tr > th[data-column=\"owner\"] { width: 132px; }\n.opportunities-extension-table > thead > tr > th[data-column=\"optyNumber\"] { width: 106px; }\n.opportunities-extension-table > thead > tr > th[data-column=\"revenue\"] { width: 124px; }\n.opportunities-extension-table > thead > tr > th[data-column=\"closeDate\"] { width: 100px; }\n.opportunities-extension-table > thead > tr > th[data-column=\"status\"] { width: 114px; }\n.opportunities-extension-table > thead > tr > th[data-column=\"winProbability\"] { width: 110px; }\n.opportunities-extension-table > thead > tr > th[data-column=\"stage\"] { width: 94px; }\n.opportunities-extension-table > thead > tr > th[data-column=\"lastUpdateDate\"] { width: 136px; }\n\n.opportunities-extension-table > tbody > tr > td[data-column] {\n padding: 10px 8px;\n overflow: visible;\n text-overflow: clip;\n white-space: normal;\n font-variant-numeric: tabular-nums;\n}\n\n.opportunities-extension-table > tbody > tr > td[data-column=\"name\"],\n.opportunities-extension-table > tbody > tr > td[data-column=\"customer\"] {\n position: relative;\n padding-right: 16px;\n padding-left: 12px;\n padding-bottom: 38px;\n vertical-align: top;\n}\n\n.opportunities-extension-table > tbody > tr > td[data-column=\"owner\"] {\n padding-right: 16px;\n}\n\n.opportunities-extension-table > tbody > tr > td[data-column=\"closeDate\"],\n.opportunities-extension-table > tbody > tr > td[data-column=\"lastUpdateDate\"],\n.opportunities-extension-table > tbody > tr > td[data-column=\"status\"],\n.opportunities-extension-table > tbody > tr > td[data-column=\"stage\"],\n.opportunities-extension-table > tbody > tr > td[data-column=\"winProbability\"] {\n white-space: nowrap;\n}\n\n.opportunities-extension-cell-content {\n display: block;\n min-width: 0;\n min-height: 2.7em;\n line-height: 1.35;\n}\n\n.opportunities-extension-cell-content > :first-child {\n display: block;\n min-width: 0;\n overflow-wrap: anywhere;\n}\n\n.opportunities-extension-cell-actions {\n position: absolute;\n left: 12px;\n right: 16px;\n bottom: 10px;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n gap: 6px;\n height: 24px;\n}\n\n.opportunities-extension-cell-actions .opportunities-extension-action-button {\n flex: 0 0 24px;\n width: 24px;\n height: 24px;\n padding: 2px;\n}\n\n.opportunities-extension-table > tbody > tr > td[data-column=\"customer\"] .opportunities-extension-cell-actions {\n min-width: 114px;\n}\n\n.opportunities-extension-cell-actions .opportunities-extension-action-button svg {\n width: 18px;\n height: 18px;\n}\n\n.opportunities-extension-cell-actions button:focus-visible {\n outline: 2px solid currentColor;\n outline-offset: 2px;\n}\n\n.opportunities-extension-products-ramp {\n min-width: 0;\n max-width: 100%;\n border: 1px solid #bba5cf;\n background: #f0e8f7;\n color: #63358a;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-products-ramp {\n background: #43334f;\n color: #ead5fc;\n border-color: #9372ac;\n}\n\n.opportunities-extension-products-ramp[data-missing=\"true\"] {\n background: #fde8e7;\n color: #9f201b;\n border-color: #c74640;\n}\n\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-products-ramp[data-missing=\"true\"] {\n background: #542824;\n color: #ffd9d5;\n border-color: #ef938b;\n}\n\n.opportunities-extension-table > thead > tr > th[data-column] .opportunities-extension-sort-button {\n display: grid;\n grid-template-columns: minmax(0, 1fr) 12px;\n gap: 6px;\n padding: 10px 8px;\n align-items: center;\n}\n\n.opportunities-extension-table > thead > tr > th[data-column=\"name\"] .opportunities-extension-sort-button,\n.opportunities-extension-table > thead > tr > th[data-column=\"customer\"] .opportunities-extension-sort-button {\n padding-left: 12px;\n padding-right: 16px;\n}\n\n.opportunities-extension-sort-label {\n min-width: 0;\n white-space: normal;\n overflow-wrap: anywhere;\n}\n\n.opportunities-extension-table > thead > tr > th[data-column] .opportunities-extension-sort-button::after {\n position: static;\n justify-self: end;\n}\n.opportunities-extension-crm-sr-badge[type=\"button\"] { cursor: pointer; font-family: inherit; }\n.opportunities-extension-sr-popover {\n position: fixed; z-index: 8; box-sizing: border-box; overflow: auto;\n padding: 12px; border: 1px solid #b9b5b0; border-radius: 6px;\n background: #fff; color: #302e2b; box-shadow: 0 6px 24px #0003;\n font: 12px/1.5 Arial, sans-serif; text-align: left; overflow-wrap: anywhere;\n}\n.opportunities-extension-sr-popover section { padding: 8px 0; }\n.opportunities-extension-sr-popover section + section { border-top: 1px solid #dedbd7; }\n.opportunities-extension-sr-number { display: flex; align-items: center; gap: 8px; padding-right: 30px; font-weight: 600; }\n.opportunities-extension-sr-popover a { color: #00677d; text-decoration: underline; }\n.opportunities-extension-sr-details { white-space: pre-wrap; margin-top: 6px; }\n.opportunities-extension-sr-children { margin: 10px 0 0 8px; padding-left: 10px; border-left: 2px solid #8c969a; overflow-wrap: anywhere; }\n.opportunities-extension-sr-children[aria-busy=\"true\"] { min-height: 28px; animation: opportunities-action-options-loading 1s ease-in-out infinite alternate; }\n.opportunities-extension-sr-children[role=\"alert\"] { color: #a12d27; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-sr-children[role=\"alert\"] { color: #ffd9d5; }\n@media (prefers-reduced-motion: reduce) { .opportunities-extension-sr-children[aria-busy=\"true\"] { animation: none; } }\n.opportunities-extension-sr-dismiss {\n position: absolute; top: 6px; right: 6px; width: 28px; height: 28px;\n display: grid; place-items: center; padding: 4px; border: 0;\n background: transparent; color: inherit; cursor: pointer;\n}\n.opportunities-extension-sr-dismiss svg { width: 16px; height: 16px; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-sr-popover { background: #292827; color: #f1efec; border-color: #77716b; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-sr-popover section + section { border-color: #5f5953; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-sr-popover a { color: #7ddced; }\n.opportunities-extension-title-row {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n gap: 8px 16px;\n min-width: 0;\n flex: 1;\n}\n.opportunities-extension-title-row h1 {\n display: block;\n margin: 0;\n padding: 0;\n line-height: 1;\n}\n.opportunities-extension-title-row .opportunities-extension-subtitle-row {\n display: flex;\n align-items: center;\n align-self: center;\n flex-wrap: wrap;\n gap: 8px;\n margin: 0;\n padding: 0;\n min-width: 0;\n}\n.opportunities-extension-title-row .opportunities-extension-subtitle-row > span {\n box-sizing: border-box;\n margin: 0;\n min-height: 22px;\n line-height: 16px;\n}\n.opportunities-extension-title-row + .opportunities-extension-header-actions { flex-shrink: 0; }\n.opportunities-extension-refresh-all:disabled { opacity: .65; cursor: wait; }\n.opportunities-extension-refresh-all:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }\n.opportunities-extension-refresh-all[aria-busy=\"true\"] svg { animation: opportunities-refresh-spin 1s linear infinite; }\n@keyframes opportunities-refresh-spin { to { transform: rotate(360deg); } }\n@media (prefers-reduced-motion: reduce) {\n .opportunities-extension-refresh-all[aria-busy=\"true\"] svg { animation: none; }\n}\n.opportunities-extension-option-description { display: block; font-size: 12px; line-height: 1.4; margin-top: 4px; white-space: normal; overflow-wrap: anywhere; opacity: .85; }\n.opportunities-extension-action-form-dialog.opportunities-extension-internal-sr-dialog { width: min(760px, 100%); }\n.opportunities-extension-session-retry {\n margin-left: 8px; padding: 2px 6px; border: 1px solid currentColor;\n border-radius: 4px; background: transparent; color: inherit; font: inherit; cursor: pointer;\n}\n.opportunities-extension-session-retry:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }\n.opportunities-extension-session-retry:disabled { opacity: .6; cursor: wait; }\n\n.opportunities-extension-account-plans-dialog.opportunities-extension-install-base-dialog {\n width: min(1700px, 100%);\n}\n.opportunities-extension-install-base-dialog .opportunities-extension-account-plans-header {\n padding: 10px 12px;\n gap: 12px;\n}\n.opportunities-extension-install-base-dialog .opportunities-extension-account-plans-header h2 {\n font-size: 16px;\n line-height: 22px;\n}\n.opportunities-extension-install-base-dialog .opportunities-extension-account-plans-header p {\n font-size: 12px;\n line-height: 16px;\n margin-top: 3px;\n overflow-wrap: anywhere;\n}\n.opportunities-extension-install-base-dialog .opportunities-extension-icon-button {\n width: 28px;\n height: 28px;\n min-width: 28px;\n min-height: 28px;\n padding: 4px;\n}\n.opportunities-extension-install-base-dialog .opportunities-extension-customer-table-toolbar {\n padding: 8px 12px;\n}\n.opportunities-extension-install-base-dialog .opportunities-extension-customer-table-search {\n width: min(320px, 100%);\n height: 32px;\n padding: 4px 8px;\n font-size: 12px;\n line-height: 20px;\n}\n.opportunities-extension-install-base-content {\n min-width: 0;\n min-height: 0;\n overflow: auto;\n scrollbar-gutter: stable;\n}\n.opportunities-extension-install-base-message { margin: 10px 12px; font-size: 12px; line-height: 16px; }\n.opportunities-extension-install-base-table {\n width: 100%; min-width: 1120px; table-layout: fixed; border-collapse: collapse; font-size: 11px;\n}\n.opportunities-extension-install-base-table col { width: 7%; }\n.opportunities-extension-install-base-table .install-base-col-productGroupName { width: 13%; }\n.opportunities-extension-install-base-table .install-base-col-productName { width: 13%; }\n.opportunities-extension-install-base-table .install-base-col-quantity { width: 5%; }\n.opportunities-extension-install-base-table .install-base-col-quantityType { width: 8%; }\n.opportunities-extension-install-base-table th,\n.opportunities-extension-install-base-table td {\n padding: 8px 6px; text-align: left; vertical-align: middle; overflow-wrap: anywhere;\n border-bottom: 1px solid #e8e5e1; line-height: 1.4;\n}\n.opportunities-extension-install-base-table th { position: sticky; top: 0; z-index: 1; background: #faf9f8; }\n.opportunities-extension-install-base-table td[data-format=\"amount\"],\n.opportunities-extension-install-base-table td[data-format=\"quantity\"] { text-align: right; font-variant-numeric: tabular-nums; }\n.opportunities-extension-install-base-table td[data-format=\"date\"] { white-space: nowrap; }\n.opportunities-extension-install-base-status {\n display: inline-block; padding: 2px 5px; border-radius: 12px; font-size: 10px; font-weight: 600;\n color: #5f5a55; background: #eceae8; white-space: nowrap;\n}\n.opportunities-extension-install-base-status[data-status=\"ACTIVE\"] { color: #17693a; background: #e1f1e5; }\n.opportunities-extension-install-base-status[data-status=\"UNSUPPORTED\"] { color: #855300; background: #fff0d6; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-install-base-content,\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-install-base-table,\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-install-base-table th,\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-install-base-table td { color: #f6f4f2; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-install-base-message { color: #c9c5c1; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-install-base-message[role=\"alert\"] { color: #ffb4ab; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-install-base-table th { background: #353331; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-install-base-table th,\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-install-base-table td { border-color: #484541; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-install-base-status { color: #dedbd7; background: #484541; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-install-base-status[data-status=\"ACTIVE\"] { color: #b8e4c6; background: #214d34; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-install-base-status[data-status=\"UNSUPPORTED\"] { color: #ffdfa2; background: #614418; }\n@media (prefers-reduced-motion: reduce) {\n .opportunities-extension-install-base-table .opportunities-extension-account-plans-skeleton-bar { animation: none; }\n}\n.opportunities-extension-install-base-table .opportunities-extension-sort-button { min-height: 28px; padding: 4px 16px 4px 0; overflow-wrap: anywhere; }\n.opportunities-extension-install-base-table .opportunities-extension-sort-button::after { right: 0; font-size: 12px; }\n\n.opportunities-extension-account-plans-dialog.opportunities-extension-service-requests-dialog { width: min(1700px, 100%); }\n.opportunities-extension-service-requests-content { min-width: 0; min-height: 0; overflow: auto; scrollbar-gutter: stable; }\n.opportunities-extension-service-requests-message { margin: 16px; font-size: 13px; }\n.opportunities-extension-service-requests-table {\n width: 100%; min-width: 1200px; table-layout: fixed; border-collapse: collapse; font-size: 12px;\n}\n.opportunities-extension-service-requests-table col { width: 7%; }\n.opportunities-extension-service-requests-table .service-requests-col-name { width: 17%; }\n.opportunities-extension-service-requests-table .service-requests-col-id { width: 10%; }\n.opportunities-extension-service-requests-table .service-requests-col-severity { width: 5%; }\n.opportunities-extension-service-requests-table .service-requests-col-subStatus { width: 14%; }\n.opportunities-extension-service-requests-table .service-requests-col-productName { width: 12%; }\n.opportunities-extension-service-requests-table th,\n.opportunities-extension-service-requests-table td {\n padding: 12px 8px; text-align: left; vertical-align: middle; overflow-wrap: anywhere;\n border-bottom: 1px solid #e8e5e1; line-height: 1.4;\n}\n.opportunities-extension-service-requests-table th { position: sticky; top: 0; z-index: 1; background: #faf9f8; }\n.opportunities-extension-service-requests-table td[data-field=\"created\"],\n.opportunities-extension-service-requests-table td[data-field=\"lastUpdated\"],\n.opportunities-extension-service-requests-table td[data-field=\"id\"] { white-space: nowrap; font-variant-numeric: tabular-nums; }\n.opportunities-extension-service-request-status {\n display: inline-block; padding: 3px 6px; border-radius: 12px; font-size: 10px; font-weight: 600;\n color: #5f5a55; background: #eceae8;\n}\n.opportunities-extension-service-request-status[data-status=\"OPEN\"] { color: #17693a; background: #e1f1e5; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-service-requests-content,\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-service-requests-table,\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-service-requests-table th,\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-service-requests-table td { color: #f6f4f2; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-service-requests-message { color: #c9c5c1; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-service-requests-message[role=\"alert\"] { color: #ffb4ab; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-service-requests-table th { background: #353331; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-service-requests-table th,\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-service-requests-table td { border-color: #484541; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-service-request-status { color: #dedbd7; background: #484541; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-service-request-status[data-status=\"OPEN\"] { color: #b8e4c6; background: #214d34; }\n@media (prefers-reduced-motion: reduce) {\n .opportunities-extension-service-requests-table .opportunities-extension-account-plans-skeleton-bar { animation: none; }\n}\n.opportunities-extension-service-requests-table .opportunities-extension-sort-button { min-height: 28px; padding: 4px 16px 4px 0; overflow-wrap: anywhere; }\n.opportunities-extension-service-requests-table .opportunities-extension-sort-button::after { right: 0; font-size: 12px; }\n\n/* Scope sizing to Cloud Consumption, not other dialogs sharing its components. */\n[data-consumption-layout=\"compact\"] .opportunities-extension-account-plans-header { padding: 10px 12px; gap: 12px; }\n[data-consumption-layout=\"compact\"] .opportunities-extension-account-plans-header h2 { font-size: 16px; line-height: 22px; }\n[data-consumption-layout=\"compact\"] .opportunities-extension-account-plans-header p { font-size: 12px; line-height: 16px; margin-top: 3px; overflow-wrap: anywhere; }\n[data-consumption-layout=\"compact\"] .opportunities-extension-icon-button { width: 28px; height: 28px; min-width: 28px; min-height: 28px; padding: 4px; }\n[data-consumption-layout=\"compact\"] .opportunities-extension-account-plans-tabs { padding: 4px 12px 0; }\n[data-consumption-layout=\"compact\"] .opportunities-extension-account-plan-tab { min-height: 30px; padding: 4px 8px; font-size: 12px; }\n[data-consumption-layout=\"compact\"] .opportunities-extension-account-plan-panel { padding: 8px 12px; }\n[data-consumption-layout=\"compact\"] .opportunities-extension-account-plan-details { gap: 0 12px; }\n[data-consumption-layout=\"compact\"] .opportunities-extension-account-plan-details > div { grid-template-columns: minmax(85px, 35%) minmax(0, 1fr); min-height: 32px; padding: 4px 0; gap: 6px; }\n[data-consumption-layout=\"compact\"] .opportunities-extension-account-plan-details dt { font-size: 11px; line-height: 16px; }\n[data-consumption-layout=\"compact\"] .opportunities-extension-account-plan-details dd { font-size: 12px; line-height: 16px; }\n[data-consumption-layout=\"compact\"] .opportunities-extension-consumption-trend { margin-top: 8px; padding-top: 6px; }\n[data-consumption-layout=\"compact\"] .opportunities-extension-consumption-periods button { min-height: 28px; padding: 4px 8px; font-size: 12px; }\n[data-consumption-layout=\"compact\"] .opportunities-extension-consumption-navigation { grid-template-columns: 28px minmax(120px, auto) 28px; min-height: 30px; }\n[data-consumption-layout=\"compact\"] .opportunities-extension-consumption-navigation strong { font-size: 12px; }\n[data-consumption-layout=\"compact\"] .opportunities-extension-consumption-navigation-button { width: 28px; height: 28px; }\n[data-consumption-layout=\"compact\"] .opportunities-extension-consumption-visual { grid-template-columns: minmax(0, 1fr) 150px; gap: 8px; }\n[data-consumption-layout=\"compact\"] .opportunities-extension-consumption-svg { height: 100%; max-height: 100%; min-width: 0; }\n[data-consumption-layout=\"compact\"] .opportunities-extension-consumption-legend button { font-size: 11px; padding: 4px; gap: 5px; }\n\n/* Small viewports must scroll rather than clip details or collapse the chart. */\n@media (max-height: 560px), (max-width: 700px) {\n [data-consumption-layout=\"compact\"] .opportunities-extension-account-plans-panels { overflow: auto; }\n [data-consumption-layout=\"compact\"] .opportunities-extension-account-plan-panel { height: auto; min-height: 100%; grid-template-rows: auto minmax(280px, 1fr); }\n}\n@media (max-width: 700px) {\n [data-consumption-layout=\"compact\"] .opportunities-extension-account-plan-details { grid-template-columns: minmax(0, 1fr); }\n [data-consumption-layout=\"compact\"] .opportunities-extension-consumption-visual { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }\n [data-consumption-layout=\"compact\"] .opportunities-extension-consumption-legend { display: flex; flex-wrap: wrap; }\n}\n\n.opportunities-extension-plan-detail-badges { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }\n.opportunities-extension-consumption-trend-header { align-items: center; justify-content: space-between; gap: 12px; }\n.opportunities-extension-consumption-trend-header > .opportunities-extension-plan-detail-badges { min-width: 0; }\n.opportunities-extension-plan-detail-skeleton { width: 64px; height: 20px; }\n.opportunities-extension-projection-badge {\n display: inline-flex; align-items: center; justify-content: center; border: 1px solid transparent;\n padding: 3px 8px; border-radius: 12px; font-size: 11px; font-weight: 600; line-height: 1.3;\n color: #5f5a55; background: #eceae8; white-space: nowrap;\n}\nbutton.opportunities-extension-projection-badge { cursor: pointer; }\n.opportunities-extension-projection-badge[data-status=\"forfeit\"] { color: #a12424; background: #fbe5e5; }\n.opportunities-extension-projection-badge[data-status=\"overage\"] { color: #185a9d; background: #e0edfc; }\n.opportunities-extension-projection-badge:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }\n.opportunities-extension-projection-popover {\n position: fixed; z-index: 8; box-sizing: border-box; padding: 14px; overflow: auto; overscroll-behavior: contain;\n border: 1px solid #b9b4ae; border-radius: 4px; background: #ffffff; color: #312d2a;\n box-shadow: 0 4px 16px #0003; font-size: 12px; line-height: 1.4; overflow-wrap: anywhere;\n}\n.opportunities-extension-projection-popover[hidden] { display: none; }\n.opportunities-extension-projection-popover .opportunities-extension-projection-dismiss {\n display: grid; place-items: center; width: 24px; height: 24px; margin-left: auto; margin-bottom: 8px; padding: 4px; border: 1px solid #b9b4ae;\n border-radius: 4px; background: transparent; color: inherit; cursor: pointer; font-size: 12px;\n}\n.opportunities-extension-projection-dismiss svg { width: 14px; height: 14px; }\n.opportunities-extension-projection-line h3 { margin: 0 0 8px; font-size: 12px; }\n.opportunities-extension-projection-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; margin: 0; }\n.opportunities-extension-projection-fields > div { min-width: 0; }\n.opportunities-extension-projection-fields dt { font-weight: 600; color: #5f5a55; font-size: 11px; }\n.opportunities-extension-projection-fields dd { margin: 2px 0 0; font-variant-numeric: tabular-nums; }\n.opportunities-extension-projection-fields a { color: #006d7a; text-decoration: underline; }\n.opportunities-extension-projection-children { margin-top: 14px; padding-left: 12px; border-left: 2px solid #dedbd7; }\n.opportunities-extension-projection-children > section + section { margin-top: 16px; }\n.opportunities-extension-plan-detail-error { color: #a12424; font-size: 12px; }\n.opportunities-extension-projection-empty { color: #5f5a55; font-size: 12px; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-projection-popover { color: #f1efec; background: #302e2b; border-color: #716b64; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-projection-badge { color: #dedbd7; background: #484541; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-projection-badge[data-status=\"forfeit\"] { color: #ffb9b9; background: #682e32; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-projection-badge[data-status=\"overage\"] { color: #c5dfff; background: #224b76; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-projection-fields dt,\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-projection-empty { color: #cec9c2; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-projection-fields a { color: #76dbea; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-plan-detail-error { color: #ffb9b9; }\n@media (max-width: 480px) { .opportunities-extension-projection-fields { grid-template-columns: minmax(0, 1fr); } }\n@media (max-width: 480px) {\n .opportunities-extension-consumption-trend-header > .opportunities-extension-consumption-periods { grid-template-columns: repeat(2, minmax(0, 1fr)); }\n}\n@media (prefers-reduced-motion: reduce) { .opportunities-extension-plan-detail-skeleton { animation: none; } }\n\n.opportunities-extension-account-plan-details > .opportunities-extension-contract-row {\n align-items: center;\n}\n.opportunities-extension-contract-row > dt,\n.opportunities-extension-contract-row > dd,\n.opportunities-extension-contract-ratecard > span {\n line-height: 20px;\n}\n.opportunities-extension-contract-ratecard {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n gap: 6px 10px;\n}\n.opportunities-extension-ratecard-button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n align-self: center;\n box-sizing: border-box;\n height: 28px;\n margin: 0;\n flex: 0 0 auto;\n padding: 0 8px;\n border: 1px solid #8aaeb9;\n border-radius: 4px;\n background: #fff;\n color: #006b80;\n font: inherit;\n font-size: 12px;\n font-weight: 600;\n line-height: 20px;\n cursor: pointer;\n}\n.opportunities-extension-ratecard-button:hover { background: #e8f4f6; }\n.opportunities-extension-ratecard-overlay {\n position: absolute;\n inset: 0;\n z-index: 8;\n display: flex;\n justify-content: flex-end;\n overflow: hidden;\n overflow: clip;\n background: rgba(0, 0, 0, 0);\n transition: background-color 320ms ease;\n}\n.opportunities-extension-ratecard-overlay[data-open=\"true\"] { background: rgba(0, 0, 0, .32); }\n.opportunities-extension-ratecard-drawer {\n --ratecard-bg: #fff;\n --ratecard-heading: #faf9f8;\n --ratecard-text: #312d2a;\n --ratecard-muted: #615a55;\n --ratecard-border: #dedbd8;\n --ratecard-accent: #00758f;\n --ratecard-skeleton: #eae7e4;\n display: grid;\n grid-template-rows: auto auto auto minmax(0, 1fr);\n width: min(1520px, calc(100% - 48px));\n height: 100%;\n min-width: 0;\n box-sizing: border-box;\n overflow: hidden;\n background: var(--ratecard-bg);\n color: var(--ratecard-text);\n box-shadow: -6px 0 24px rgba(0, 0, 0, .2);\n transform: translateX(100%);\n transition: transform 320ms cubic-bezier(.22, .61, .36, 1);\n}\n.opportunities-extension-ratecard-overlay[data-open=\"true\"] .opportunities-extension-ratecard-drawer { transform: translateX(0); }\n.opportunities-extension-ratecard-header > div { min-width: 0; overflow-wrap: anywhere; }\n.opportunities-extension-ratecard-plan-details { padding: 12px 20px 0; }\n.opportunities-extension-ratecard-toolbar { display: flex; align-items: center; gap: 16px; padding: 12px 20px; }\n.opportunities-extension-ratecard-search {\n width: min(360px, 100%);\n min-width: 0;\n box-sizing: border-box;\n padding: 9px 12px;\n border: 1px solid var(--ratecard-muted);\n border-radius: 4px;\n background: var(--ratecard-bg);\n color: var(--ratecard-text);\n font: inherit;\n font-size: 13px;\n}\n.opportunities-extension-ratecard-search::placeholder { color: var(--ratecard-muted); opacity: 1; }\n.opportunities-extension-ratecard-count { color: var(--ratecard-muted); font-size: 12px; white-space: nowrap; }\n.opportunities-extension-ratecard-viewport { overflow: auto; min-height: 0; min-width: 0; scrollbar-gutter: stable; }\n.opportunities-extension-ratecard-table { width: 100%; min-width: 1100px; table-layout: fixed; border-collapse: separate; border-spacing: 0; font-size: 12px; }\n.opportunities-extension-ratecard-table th, .opportunities-extension-ratecard-table td {\n padding: 11px 10px;\n border-bottom: 1px solid var(--ratecard-border);\n vertical-align: top;\n overflow-wrap: anywhere;\n text-align: left;\n}\n.opportunities-extension-ratecard-table th { position: sticky; top: 0; z-index: 1; background: var(--ratecard-heading); }\n.opportunities-extension-ratecard-sort {\n display: grid;\n grid-template-columns: minmax(0, 1fr) 12px;\n align-items: center;\n gap: 5px;\n width: 100%;\n padding: 0;\n border: 0;\n background: transparent;\n color: inherit;\n font: inherit;\n font-weight: 600;\n text-align: left;\n cursor: pointer;\n}\n.opportunities-extension-ratecard-sort-icon { color: var(--ratecard-accent); text-align: center; }\n.opportunities-extension-ratecard-table .opportunities-extension-ratecard-numeric { text-align: right; font-variant-numeric: tabular-nums; }\n.opportunities-extension-ratecard-table .opportunities-extension-ratecard-notice { padding: 28px 20px; text-align: center; }\n.opportunities-extension-ratecard-notice [role=\"alert\"] { color: #b3261e; }\n.opportunities-extension-ratecard-skeleton { display: block; width: 85%; height: 14px; border-radius: 3px; background: var(--ratecard-skeleton); animation: opportunities-ratecard-pulse 1.1s ease-in-out infinite alternate; }\n.opportunities-extension-ratecard-drawer :focus-visible, .opportunities-extension-ratecard-button:focus-visible { outline: 2px solid #00758f; outline-offset: 2px; }\n.opportunities-extension-ratecard-overlay[data-closing=\"true\"] { pointer-events: none; background: rgba(0, 0, 0, 0); transition-duration: 180ms; }\n.opportunities-extension-ratecard-overlay[data-closing=\"true\"] .opportunities-extension-ratecard-drawer { transform: translateX(100%); transition-duration: 180ms; }\n[data-theme=\"dark\"] .opportunities-extension-ratecard-drawer {\n --ratecard-bg: #292725;\n --ratecard-heading: #35322f;\n --ratecard-text: #f5f3f1;\n --ratecard-muted: #c2bcb6;\n --ratecard-border: #514c47;\n --ratecard-accent: #59d1e5;\n --ratecard-skeleton: #514c47;\n}\n[data-theme=\"dark\"] .opportunities-extension-ratecard-button { color: #59d1e5; border-color: #6298a2; background: #292725; }\n[data-theme=\"dark\"] .opportunities-extension-ratecard-button:hover { background: #313f40; }\n[data-theme=\"dark\"] .opportunities-extension-ratecard-notice [role=\"alert\"] { color: #ffb4ab; }\n[data-theme=\"dark\"] .opportunities-extension-ratecard-drawer :focus-visible, [data-theme=\"dark\"] .opportunities-extension-ratecard-button:focus-visible { outline-color: #59d1e5; }\n@keyframes opportunities-ratecard-pulse { from { opacity: .45; } to { opacity: 1; } }\n@media (max-width: 720px) {\n .opportunities-extension-ratecard-drawer { width: 100%; }\n .opportunities-extension-ratecard-toolbar { flex-wrap: wrap; gap: 8px; }\n}\n@media (prefers-reduced-motion: reduce) {\n .opportunities-extension-ratecard-overlay, .opportunities-extension-ratecard-drawer, .opportunities-extension-ratecard-skeleton,\n .opportunities-extension-ratecard-overlay[data-closing=\"true\"], .opportunities-extension-ratecard-overlay[data-closing=\"true\"] .opportunities-extension-ratecard-drawer { animation: none; transition: none; }\n}\n\n.opportunities-extension-ratecard-toolbar { flex-wrap: wrap; }\n.opportunities-extension-ratecard-order-filter { position: relative; min-width: 0; }\n.opportunities-extension-ratecard-order-filter .opportunities-extension-customer-filter-trigger { min-height: 38px; padding-block: 8px; font-size: 13px; }\n.opportunities-extension-ratecard-order-filter .opportunities-extension-customer-filter-panel { width: min(320px, calc(100vw - 80px)); max-height: 45vh; overflow: auto; }\n\n.opportunities-extension-account-plans-dialog.opportunities-extension-install-base-dialog,\n.opportunities-extension-account-plans-dialog.opportunities-extension-service-requests-dialog {\n grid-template-rows: auto auto minmax(0, 1fr);\n}\n.opportunities-extension-customer-table-toolbar { padding: 12px 16px; border-bottom: 1px solid #dedbd7; }\n.opportunities-extension-customer-table-search {\n box-sizing: border-box;\n width: min(420px, 100%);\n min-width: 0;\n height: 38px;\n padding: 8px 12px;\n border: 1px solid #8f8a85;\n border-radius: 4px;\n background: #fff;\n color: #312d2a;\n font: inherit;\n font-size: 13px;\n}\n.opportunities-extension-customer-table-search::placeholder { color: #5f5a55; opacity: 1; }\n.opportunities-extension-customer-table-search:focus-visible { outline: 2px solid #00758f; outline-offset: 2px; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-customer-table-toolbar { border-color: #484541; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-customer-table-search { background: #353331; color: #f6f4f2; border-color: #8f8a85; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-customer-table-search::placeholder { color: #c9c5c1; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-customer-table-search:focus-visible { outline-color: #59d1e5; }\n\n.opportunities-extension-views { min-height: 0; min-width: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 8px; }\n.opportunities-extension-views > [hidden] { display: none; }\n.opportunities-extension-view-tabs { display: flex; gap: 20px; border-bottom: 1px solid #dedbd7; }\n.opportunities-extension-view-tabs button { border: 0; border-bottom: 3px solid transparent; background: transparent; color: #625d58; padding: 6px 2px 9px; font: 600 13px/20px Arial, sans-serif; cursor: pointer; }\n.opportunities-extension-view-tabs button[aria-selected=\"true\"] { border-bottom-color: #00758f; color: #00657b; }\n.opportunities-extension-view-tabs button:focus-visible { outline: 2px solid #00758f; outline-offset: -2px; }\n.opportunities-extension-view-tabs button { display: inline-flex; align-items: center; gap: 6px; }\n.opportunities-extension-view-tabs button svg { width: 16px; height: 16px; flex: 0 0 16px; }\n.opportunities-extension-calendar {\n --fc-border-color: #dedbd7; --fc-page-bg-color: #fff; --fc-neutral-bg-color: #f5f4f2;\n --fc-neutral-text-color: #625d58; --fc-today-bg-color: #eef7fa;\n --fc-button-bg-color: #fff; --fc-button-text-color: #312d2a; --fc-button-border-color: #b9b4ae;\n --fc-button-hover-bg-color: #e6f3f5; --fc-button-hover-border-color: #00758f;\n --fc-button-active-bg-color: #dceff3; --fc-button-active-border-color: #00758f;\n min-height: 0; min-width: 0; overflow: hidden; display: flex; flex-direction: column; padding: 12px; background: #fff; color: #312d2a;\n border: 1px solid var(--fc-border-color); border-radius: 4px; font: 13px/1.4 Arial, sans-serif;\n}\n.opportunities-calendar-grid { flex: 1 1 0; min-height: 0; min-width: 0; }\n.opportunities-calendar-day-cards { position: absolute; inset: 27px 0 0; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; padding-bottom: 4px; }\n.opportunities-calendar-day-card { display: block; width: calc(100% - 8px); padding: 0; text-align: left; font: inherit; }\n.opportunities-calendar-day-card:focus-visible { outline: 2px solid #00758f; outline-offset: -2px; }\n/* A single vertical sequence of months, with a separate scroll area per day. */\n.opportunities-extension-calendar .fc .fc-multimonth { overflow-y: auto; overflow-x: hidden; }\n.opportunities-extension-calendar .fc .fc-multimonth-month { width: 100%; }\n.opportunities-extension-calendar .fc .fc-multimonth-daygrid-table { height: auto !important; }\n.opportunities-extension-calendar .fc .fc-multimonth .fc-daygrid-body tbody { height: auto; }\n.opportunities-extension-calendar .fc .fc-multimonth .fc-daygrid-body tr { height: var(--calendar-week-height, 190px); }\n.opportunities-extension-calendar .fc .fc-multimonth .fc-daygrid-day-frame { position: relative; height: var(--calendar-week-height, 190px); min-height: var(--calendar-week-height, 190px); }\n.opportunities-extension-calendar .fc .fc-multimonth .fc-daygrid-day-events {\n position: absolute; inset: 27px 0 0; overflow-y: auto; overflow-x: hidden;\n margin: 0; padding-bottom: 4px; scrollbar-width: thin;\n}\n.opportunities-extension-calendar .fc .fc-multimonth .fc-daygrid-event-harness { position: relative !important; top: auto !important; left: auto !important; right: auto !important; }\n.opportunities-extension-calendar .fc .fc-multimonth .fc-daygrid-day-bg { pointer-events: none; }\n.opportunities-extension-calendar .fc { min-width: 620px; }\n.opportunities-extension-calendar .fc .fc-toolbar { gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }\n.opportunities-extension-calendar .fc .fc-toolbar-title { font-size: 18px; line-height: 26px; letter-spacing: 0; }\n.opportunities-extension-calendar .fc .fc-button { font-size: 13px; line-height: 20px; padding: 5px 10px; border-radius: 4px; box-shadow: none; }\n.opportunities-extension-calendar .fc .fc-button:focus-visible { outline: 2px solid #00758f; outline-offset: 2px; }\n.opportunities-extension-calendar .fc .fc-button svg { width: 16px; height: 16px; margin-right: 6px; vertical-align: -3px; }\n.opportunities-extension-calendar .fc a { color: inherit; text-decoration: none; }\n.opportunities-extension-calendar .fc th { background: var(--fc-neutral-bg-color); font-size: 12px; font-weight: 600; padding: 4px 0; }\n.opportunities-extension-calendar .fc .fc-daygrid-day-number { font-size: 11px; line-height: 18px; padding: 1px 6px; }\n.opportunities-extension-calendar .fc .fc-daygrid-day-events { min-height: 0; margin-bottom: 0; }\n.opportunities-extension-calendar .fc .fc-daygrid-day-bottom { margin: 0; }\n.opportunities-extension-calendar .fc .fc-daygrid-day-frame { min-height: 0; padding-top: 0; }\n/* Event content must not contribute to the table's intrinsic row heights. */\n.opportunities-extension-calendar .fc .fc-daygrid-body tbody { height: 100%; }\n.opportunities-extension-calendar .fc .fc-daygrid-body tr { height: calc(100% / var(--opportunities-calendar-weeks, 5)); }\n.opportunities-extension-calendar .fc .fc-daygrid-day { position: relative; }\n.opportunities-extension-calendar .fc .fc-daygrid-day-frame { position: absolute; inset: 0; }\n.opportunities-extension-calendar .fc .fc-daygrid-week-number { top: 0; left: 0; padding: 3px 6px; background: var(--fc-neutral-bg-color); color: inherit; font: 600 10px/16px Arial, sans-serif; white-space: nowrap; }\n.opportunities-calendar-day-count { position: absolute; top: 2px; left: 6px; min-width: 18px; height: 16px; padding: 0 4px; border-radius: 8px; background: #dceff3; color: #005467; font: 600 10px/16px Arial, sans-serif; text-align: center; }\n.fc-daygrid-week-number ~ .opportunities-calendar-day-count { left: 82px; }\n.opportunities-calendar-day-count[hidden] { display: none; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-calendar-day-count:not([data-empty=\"true\"]) { background: #16454f; color: #b9eaf4; }\n.opportunities-extension-calendar .fc .fc-day-other { background: var(--fc-neutral-bg-color); }\n.opportunities-extension-calendar .fc .fc-daygrid-event { white-space: normal; margin: 3px 4px; border-radius: 4px; cursor: pointer; border-width: 0 0 0 3px; border-style: solid; }\n.opportunities-extension-calendar .fc .fc-event-main { color: inherit; }\n.opportunities-calendar-event-content { min-width: 0; padding: 5px 6px; overflow-wrap: anywhere; }\n.opportunities-calendar-event-content strong { display: block; font-size: 12px; line-height: 16px; font-weight: 600; }\n.opportunities-calendar-event-content span { display: block; margin-top: 3px; font-size: 11px; line-height: 15px; }\n.opportunities-calendar-event-content strong,\n.opportunities-calendar-event-content span,\n.opportunities-calendar-day-item strong,\n.opportunities-calendar-day-item span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.opportunities-extension-calendar .fc .fc-daygrid-more-link { color: #00657b; font-size: 11px; line-height: 16px; padding: 0 5px; }\n.opportunities-calendar-day-list { min-height: 0; overflow-y: auto; padding: 8px 20px 20px; }\n.opportunities-calendar-day-item { display: block; width: 100%; padding: 12px 0; border: 0; border-bottom: 1px solid #dedbd7; background: transparent; color: #00657b; text-align: left; cursor: pointer; overflow-wrap: anywhere; }\n.opportunities-calendar-day-item strong, .opportunities-calendar-day-item span { display: block; font: 600 13px/20px Arial, sans-serif; }\n.opportunities-calendar-day-item span { margin-top: 4px; font-weight: 400; }\n.opportunities-calendar-day-item:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-calendar-day-item { border-bottom-color: #514d48; color: #80d6e8; }\n.opportunities-extension-calendar .fc .opportunities-calendar-stage-SQL { background: #dff1f4; border-color: #00829d; color: #005467; }\n.opportunities-extension-calendar .fc .opportunities-calendar-stage-PIPELINE,\n.opportunities-extension-calendar .fc .opportunities-calendar-stage-OTHER { background: #efeeec; border-color: #706a64; color: #49443f; }\n.opportunities-extension-calendar .fc .opportunities-calendar-stage-UPSIDE { background: #fff0da; border-color: #ba7000; color: #774700; }\n.opportunities-extension-calendar .fc .opportunities-calendar-stage-FORECAST { background: #f0e8f7; border-color: #8262a3; color: #624379; }\n.opportunities-extension-calendar .fc .opportunities-calendar-stage-WON { background: #e2f1e5; border-color: #2f8050; color: #215939; }\n.opportunities-calendar-message { margin: 0 0 12px; font-size: 13px; }\n.opportunities-calendar-message[hidden], .opportunities-calendar-grid[hidden], .opportunities-calendar-undated[hidden] { display: none; }\n.opportunities-calendar-undated { flex: 0 0 auto; max-height: 90px; overflow-y: auto; margin-top: 6px; border-top: 1px solid var(--fc-border-color); padding-top: 4px; }\n.opportunities-calendar-undated summary { cursor: pointer; font-size: 12px; line-height: 18px; }\n.opportunities-calendar-undated h3 { font-size: 13px; margin: 0 0 8px; }\n.opportunities-calendar-undated button { display: block; background: none; border: 0; text-align: left; font: inherit; padding: 6px 0; color: inherit; text-decoration: underline; cursor: pointer; overflow-wrap: anywhere; }\n.opportunities-calendar-detail .opportunities-extension-account-plans-header { align-items: start; gap: 16px; }\n.opportunities-calendar-detail .opportunities-extension-action-form-dialog { display: grid; grid-template-rows: auto minmax(0, 1fr); overflow: hidden; }\n.opportunities-calendar-detail h2 { font-size: 18px; overflow-wrap: anywhere; }\n.opportunities-calendar-detail-content { padding: 20px; overflow-y: auto; }\n.opportunities-calendar-detail-content a { color: #006b82; }\n.opportunities-calendar-detail-badges { display: flex; gap: 8px; margin-top: 18px; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-view-tabs { border-color: #514d48; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-view-tabs button { color: #c7c2bc; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-view-tabs button[aria-selected=\"true\"] { color: #80d6e8; border-bottom-color: #80d6e8; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-calendar {\n --fc-border-color: #514d48; --fc-page-bg-color: #292725; --fc-neutral-bg-color: #33302d;\n --fc-neutral-text-color: #c7c2bc; --fc-today-bg-color: #223b3f;\n --fc-button-bg-color: #292725; --fc-button-text-color: #eeeae6; --fc-button-border-color: #756f68;\n --fc-button-hover-bg-color: #234850; --fc-button-hover-border-color: #80d6e8;\n --fc-button-active-bg-color: #234850; --fc-button-active-border-color: #80d6e8;\n background: #292725; color: #eeeae6;\n}\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-calendar .fc .opportunities-calendar-stage-SQL { background: #16454f; color: #b9eaf4; border-color: #67cde0; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-calendar .fc .opportunities-calendar-stage-PIPELINE,\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-calendar .fc .opportunities-calendar-stage-OTHER { background: #403c38; color: #e4dfd9; border-color: #b8b1a8; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-calendar .fc .opportunities-calendar-stage-UPSIDE { background: #533e1e; color: #ffe0a9; border-color: #dba44f; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-calendar .fc .opportunities-calendar-stage-FORECAST { background: #493657; color: #ead5fc; border-color: #b998d8; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-calendar .fc .opportunities-calendar-stage-WON { background: #244a32; color: #c7edce; border-color: #84c396; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-calendar .fc .fc-daygrid-more-link,\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-calendar-detail-content a { color: #80d6e8; }\n@media (max-width: 700px) {\n .opportunities-extension-body { overflow-y: auto; grid-template-rows: max-content max-content minmax(480px, 1fr); }\n .opportunities-extension-views { min-height: 480px; }\n .opportunities-extension-calendar { padding: 10px; overflow-x: auto; }\n .opportunities-extension-calendar .fc { min-width: 0; }\n .opportunities-extension-calendar .fc .fc-view-harness { min-width: 560px; }\n .opportunities-extension-calendar .fc .fc-toolbar-title { font-size: 16px; }\n .opportunities-extension-calendar .fc .fc-daygrid-day-frame { padding-top: 22px; }\n .opportunities-calendar-day-count { top: 25px; }\n .fc-daygrid-week-number ~ .opportunities-calendar-day-count { left: 6px; }\n}\n.opportunities-view-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--oe-table-heading-border); flex-wrap: wrap; }\n.opportunities-view-bar .opportunities-extension-view-tabs { border-bottom: 0; }\n.opportunities-product-type-filters { display: flex; gap: 8px; margin-left: auto; padding: 4px 0; }\n.opportunities-product-type-filter { border: 1px solid #8f8a85; border-radius: 12px; padding: 3px 9px; background: transparent; color: inherit; font: 600 12px/16px Arial, sans-serif; cursor: pointer; }\n.opportunities-product-type-filter[aria-pressed=\"true\"][data-type=\"Booking\"] { color: #714016; background: #fff0df; border-color: #c58b50; }\n.opportunities-product-type-filter[aria-pressed=\"true\"][data-type=\"Workload\"] { color: #63358a; background: #f0e8f7; border-color: #bba5cf; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-product-type-filter[aria-pressed=\"true\"][data-type=\"Booking\"] { color: #ffdbb5; background: #4b321e; border-color: #c99760; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-product-type-filter[aria-pressed=\"true\"][data-type=\"Workload\"] { color: #ead5fc; background: #43334f; border-color: #9372ac; }\n.opportunities-product-type-filter:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }\n\n.oe-time-dialog { --time-bg: #fff; --time-input-bg: #fff; --time-muted: #faf9f8; --time-border: #dedbd7; --time-input-border: #8f8983; --time-accent: #00758f; width: min(1600px, 100%); max-height: calc(100dvh - 24px); display: flex; flex-direction: column; overflow: hidden; font-size: 13px; line-height: 20px; }\n.opportunities-extension-modal[data-theme=\"dark\"] .oe-time-dialog { --time-bg: #292725; --time-input-bg: #211f1d; --time-muted: #35322f; --time-border: #514c47; --time-input-border: #918a82; --time-accent: #80d6e8; }\n.oe-time-modal { grid-template-columns: minmax(0, 1fr); }\n.oe-time-dialog, .oe-time-body { min-width: 0; }\n.oe-time-dialog * { box-sizing: border-box; }\n.oe-time-dialog [hidden] { display: none !important; }\n.oe-time-header { flex-shrink: 0; }\n.oe-time-body { padding: 18px; overflow: auto; min-height: 0; }\n.oe-time-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; }\n.oe-time-navigation { display: flex; align-items: center; gap: 8px; }\n.oe-time-ending { display: grid; gap: 4px; text-align: right; }\n.oe-time-summary { display: grid; grid-template-columns: repeat(4, 1fr); padding: 12px 0; gap: 12px; text-align: center; border-block: 1px solid var(--time-border); margin-bottom: 18px; }\n.oe-time-body button { min-width: 38px; min-height: 38px; display: inline-flex; gap: 8px; align-items: center; justify-content: center; color: inherit; background: transparent; border: 1px solid var(--time-input-border); border-radius: 4px; padding: 7px; cursor: pointer; font: inherit; }\n.oe-time-dialog button:hover:not(:disabled) { background: var(--time-muted); border-color: var(--time-accent); }\n.oe-time-dialog svg { width: 17px; height: 17px; flex-shrink: 0; }\n.oe-time-dialog input, .oe-time-dialog select, .oe-time-dialog textarea { font: inherit; line-height: 20px; color: inherit; background: var(--time-input-bg); border: 1px solid var(--time-input-border); border-radius: 4px; padding: 8px; min-height: 38px; }\n.oe-time-dialog select { height: 38px; }\n.oe-time-dialog :focus-visible { outline: 2px solid var(--time-accent); outline-offset: 2px; }\n.oe-time-dialog :disabled { opacity: .55; cursor: not-allowed; }\n.oe-time-grid { overflow-x: auto; }\n.oe-time-grid table { width: 100%; min-width: 1060px; border-collapse: collapse; table-layout: fixed; }\n.oe-time-grid th { background: var(--time-muted); padding: 10px 5px; font-weight: 600; text-align: center; border-bottom: 1px solid var(--time-border); }\n.oe-time-grid .opportunities-extension-sort-button { min-width: 0; min-height: 28px; padding: 4px 12px 4px 0; border: 0; border-radius: 0; gap: 0; }\n.oe-time-grid .opportunities-extension-sort-button::after { right: 0; font-size: 12px; }\n.oe-time-grid .oe-time-day-label { margin-bottom: 0; }\n.oe-time-grid th:first-child { width: 23%; }\n.oe-time-grid th:nth-child(2), .oe-time-grid th:nth-child(3) { width: 12%; }\n.oe-time-grid th:nth-last-child(-n+3) { width: 46px; }\n.oe-time-grid td { padding: 10px 5px; border-bottom: 1px solid var(--time-border); vertical-align: middle; text-align: center; }\n.oe-time-duplicate-row { outline: 2px solid #b3261e; outline-offset: -2px; animation: oe-time-duplicate-fade 5.5s linear forwards; }\n.opportunities-extension-modal[data-theme=\"dark\"] .oe-time-duplicate-row { --time-duplicate-color: #ffaaa4; }\n@keyframes oe-time-duplicate-fade { 0%, 90.909% { outline-color: var(--time-duplicate-color, #b3261e); } 100% { outline-color: transparent; } }\n@media (prefers-reduced-motion: reduce) { .oe-time-duplicate-row { animation-timing-function: step-end; } }\n.oe-time-grid select { width: 100%; }\n.oe-time-grid input[type=\"number\"] { width: min(100%, 60px); padding: 6px 3px; text-align: center; }\n.oe-time-grid .opportunities-extension-action-combobox input { width: 100%; text-align: left; text-overflow: ellipsis; }\n.oe-time-grid .opportunities-extension-action-options { text-align: left; }\n.oe-time-dialog .opportunities-extension-select-tooltip { position: fixed; z-index: 100; width: min(560px, calc(100vw - 40px)); max-height: min(440px, calc(100dvh - 48px)); overflow: auto; padding: 14px; border: 1px solid var(--time-input-border); border-radius: 4px; background: var(--time-input-bg); color: inherit; box-shadow: 0 4px 16px #0003; text-align: left; }\n.oe-time-sr-details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 18px; margin: 0; }\n.oe-time-sr-details > div { min-width: 0; overflow-wrap: anywhere; }\n.oe-time-sr-details dt { font-size: 11px; opacity: .75; margin-bottom: 2px; }\n.oe-time-sr-details dd { margin: 0; white-space: pre-wrap; }\n.oe-time-sr-details .oe-time-sr-description { grid-column: 1 / -1; }\n.oe-time-day > span { display: block; }\n.oe-time-day .oe-time-day-label { display: inline-flex; align-items: center; gap: 4px; margin-bottom: 9px; }\n.oe-time-day-total { font-size: 10px; background: var(--time-accent); color: var(--time-bg); min-width: 16px; border-radius: 8px; padding: 2px 4px; }\n.oe-time-notes textarea { width: 100%; resize: vertical; }\n.oe-time-notes-box { position: relative; text-align: left; background: var(--time-input-bg); border: 1px solid var(--time-input-border); border-radius: 4px; padding: 14px 12px 42px; }\n.oe-time-notes-count { display: block; font-weight: 600; opacity: .8; margin-bottom: 8px; }\n.oe-time-notes-box textarea { border: 0; min-height: 128px; padding: 0; }\n.oe-time-notes-box .oe-time-notes-collapse { position: absolute; right: 0; bottom: 0; background: var(--time-muted); }\n.oe-time-footer { flex-wrap: wrap; justify-content: flex-start; margin-top: 18px; }\n.oe-time-footer button { padding: 7px 14px; }\n.oe-time-status { padding: 12px 0; }\n.oe-time-loading-status { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }\n.oe-time-skeleton { display: inline-block; vertical-align: middle; border-radius: 4px; background: var(--time-border); color: transparent; animation: oe-time-pulse 1.3s ease-in-out infinite alternate; }\n.oe-time-skeleton-select { display: block; width: 100%; height: 38px; }\n.oe-time-skeleton-control { width: min(100%, 60px); height: 38px; }\n.oe-time-skeleton-heading { width: 65%; height: 20px; margin: 17px 0; }\n.oe-time-skeleton-summary { min-width: 44px; height: 20px; }\n@keyframes oe-time-pulse { from { opacity: .4; } to { opacity: 1; } }\n@media (prefers-reduced-motion: reduce) { .oe-time-skeleton { animation: none; } }\n.oe-time-status[role=\"alert\"] { color: #a12d27; }\n.oe-time-dialog [aria-invalid=\"true\"] { border-color: #b3261e; outline: 1px solid #b3261e; }\n.opportunities-extension-modal[data-theme=\"dark\"] .oe-time-status[role=\"alert\"] { color: #ffd9d5; }\n.opportunities-extension-modal[data-theme=\"dark\"] .oe-time-dialog [aria-invalid=\"true\"] { border-color: #ffaaa4; outline-color: #ffaaa4; }\n@media (max-width: 700px) { .oe-time-modal { padding: 8px; } .oe-time-dialog { max-height: calc(100dvh - 16px); } .oe-time-body { padding: 12px; } .oe-time-summary { grid-template-columns: repeat(2, 1fr); text-align: left; } .oe-time-toolbar { flex-wrap: wrap; } .oe-time-ending { text-align: left; } }\n\n.opportunities-extension-products-table th:last-child { width: 90px; padding-left: 6px; padding-right: 6px; white-space: nowrap; text-align: center; }\n.opportunities-extension-products-table .opportunities-extension-projection-cell { text-align: center; vertical-align: middle; }\n.opportunities-extension-projection-alert { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; padding: 0; color: #976000; width: 30px; height: 30px; flex: 0 0 30px; vertical-align: middle; }\n.opportunities-extension-projection-alert svg { display: block; flex: none; width: 19px; height: 19px; }\n.opportunities-extension-cell-actions > .opportunities-extension-opportunity-projection-alert { width: 20px; height: 20px; flex-basis: 20px; }\n.opportunities-extension-projection-alert:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }\n.opportunities-extension-modal .opportunities-extension-projection-alert:disabled { color: #8f8a85; opacity: .55; cursor: not-allowed; background: transparent; }\n.opportunities-extension-products-ramp { cursor: pointer; font-family: inherit; }\n.opportunities-extension-products-ramp[data-booking=\"true\"] { cursor: default; color: #714016; background: #fff0df; border-color: #c58b50; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-products-ramp[data-booking=\"true\"] { color: #ffdbb5; background: #4b321e; border-color: #c99760; }\n.opportunities-extension-products-ramp:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }\n.opportunities-extension-projection-product { max-width: 100%; margin: 0 0 16px; padding: 8px; font: inherit; color: inherit; background: inherit; }\n.opportunities-extension-action-form-dialog.opportunities-extension-projection-dialog { width: min(850px, 100%); display: flex; flex-direction: column; overflow: hidden; }\n.opportunities-extension-projection-dialog > header { flex: 0 0 auto; padding: 18px 20px; }\n.opportunities-extension-projection-dialog .opportunities-extension-action-form-heading { min-width: 0; overflow-wrap: anywhere; }\n.opportunities-extension-projection-body { min-height: 0; overflow: auto; padding: 16px 20px 0; }\n.opportunities-extension-projection-context { display: grid; grid-template-columns: max-content minmax(0, 1fr) max-content minmax(0, 1fr); gap: 8px 12px; margin: 0 0 16px; font-size: 12px; }\n.opportunities-extension-projection-context dt { font-weight: 600; }\n.opportunities-extension-projection-context dd { margin: 0; overflow-wrap: anywhere; }\n.opportunities-extension-projection-summary { font-size: 13px; font-weight: 600; color: #815400; margin: 0 0 12px; }\n.opportunities-extension-projection-notice { font-size: 12px; }\n.opportunities-extension-projection-viewport { overflow-x: auto; }\n.opportunities-extension-projection-table { width: 100%; border-collapse: collapse; font-size: 12px; font-variant-numeric: tabular-nums; }\n.opportunities-extension-projection-table th, .opportunities-extension-projection-table td { padding: 9px 12px; border-bottom: 1px solid #dedbd7; text-align: right; white-space: nowrap; }\n.opportunities-extension-projection-table th:first-child { text-align: left; }\n.opportunities-extension-projection-table thead th { background: #f5f4f2; font-weight: 600; }\n.opportunities-extension-projection-table .opportunities-extension-sort-button { min-height: 28px; padding: 4px 18px 4px 0; justify-content: flex-end; }\n.opportunities-extension-projection-table th:first-child .opportunities-extension-sort-button { justify-content: flex-start; }\n.opportunities-extension-projection-table .opportunities-extension-sort-button::after { right: 0; font-size: 12px; }\n.opportunities-extension-projection-table tbody th { font-weight: 400; }\n.opportunities-extension-projection-table tr[data-divergent=\"true\"] { background: #fff7e5; }\n.opportunities-extension-projection-table tr[data-divergent=\"true\"] td:last-child { color: #815400; font-weight: 700; }\n.opportunities-extension-projection-prorated { display: inline; color: #625d58; font-size: 10px; }\n.opportunities-extension-projection-footer { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0; padding: 14px 20px; font-size: 11px; color: #625d58; }\n.opportunities-extension-projection-update { flex: none; padding: 8px 12px; border: 1px solid #006879; border-radius: 4px; background: #006879; color: #fff; font: inherit; font-size: 12px; cursor: pointer; }\n.opportunities-extension-projection-update:hover:not(:disabled) { background: #005563; }\n.opportunities-extension-projection-update:disabled { opacity: .6; cursor: wait; }\n.opportunities-extension-projection-update:focus-visible { outline: 2px solid #00758f; outline-offset: 2px; }\n.opportunities-extension-projection-confirm { padding: 20px; }\n.opportunities-extension-projection-confirm h2 { margin: 0 0 12px; font-size: 18px; }\n.opportunities-extension-projection-confirm p { margin: 0 0 20px; font-size: 13px; line-height: 1.5; }\n.opportunities-extension-projection-confirm-actions { display: flex; justify-content: flex-end; gap: 8px; }\n.opportunities-extension-projection-cancel { padding: 8px 12px; border: 1px solid #8b8580; border-radius: 4px; background: transparent; color: inherit; font: inherit; font-size: 12px; cursor: pointer; }\n.opportunities-extension-projection-error { color: #b3261e; font-size: 12px; overflow-wrap: anywhere; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-projection-error { color: #ffb4ab; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-projection-alert,\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-projection-summary,\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-projection-table tr[data-divergent=\"true\"] td:last-child { color: #ffd080; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-projection-table thead th { background: #34312e; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-projection-table th,\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-projection-table td { border-color: #504b46; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-projection-table tr[data-divergent=\"true\"] { background: #3e3425; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-projection-prorated,\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-projection-footer { color: #c9c3bc; }\n@media (max-width: 600px) {\n .opportunities-extension-projection-context { grid-template-columns: max-content minmax(0, 1fr); }\n .opportunities-extension-projection-dialog > header { padding: 14px 12px; }\n .opportunities-extension-projection-body { padding: 12px 12px 0; }\n .opportunities-extension-projection-table th, .opportunities-extension-projection-table td { padding: 8px 6px; }\n .opportunities-extension-projection-footer { padding: 12px; }\n}\n\n.oe-org-modal { grid-template-columns: minmax(0, 1fr); }\n.oe-org-dialog { --org-bg: #fff; --org-canvas: #faf9f8; --org-border: #dedbd7; --org-muted: #625d58; --org-accent: #00758f; --org-selected: #e3f1f4; width: min(1500px, 100%); height: min(880px, calc(100dvh - 40px)); max-height: calc(100dvh - 40px); display: flex; flex-direction: column; overflow: hidden; font-size: 13px; color: #312d2a; background: var(--org-bg); }\n.opportunities-extension-modal[data-theme=\"dark\"] .oe-org-dialog { --org-bg: #292725; --org-canvas: #211f1d; --org-border: #625d58; --org-muted: #c9c3bd; --org-accent: #80d6e8; --org-selected: #203f46; color: #f5f4f2; }\n.oe-org-modal [hidden] { display: none !important; }\n.oe-org-dialog * { box-sizing: border-box; letter-spacing: 0; }\n.oe-org-dialog > header, .oe-org-toolbar, .oe-org-footer { flex: none; }\n.oe-org-heading { min-width: 0; overflow-wrap: anywhere; }\n.oe-org-heading p { margin: 5px 0 0; font-size: 12px; color: var(--org-muted); }\n.oe-org-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--org-border); }\n.oe-org-tools { display: flex; align-items: center; gap: 6px; margin-left: auto; }\n.oe-org-count { color: var(--org-muted); font-variant-numeric: tabular-nums; }\n.oe-org-zoom { width: 44px; text-align: center; font-variant-numeric: tabular-nums; }\n.oe-org-modal .oe-org-button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 34px; min-height: 34px; padding: 6px 9px; border: 1px solid var(--org-border, #8f8983); border-radius: 4px; background: transparent; color: inherit; font: inherit; cursor: pointer; }\n.oe-org-modal svg { width: 17px; height: 17px; flex: none; }\n.oe-org-dialog button:hover:not(:disabled) { background: var(--org-selected); }\n.oe-org-dialog :focus-visible { outline: 2px solid var(--org-accent); outline-offset: 2px; }\n.oe-org-modal .oe-org-primary { background: #006879; border-color: #006879; color: #fff; }\n.oe-org-dialog .oe-org-primary:hover:not(:disabled) { background: #005563; }\n.oe-org-dialog :disabled { opacity: .5; cursor: not-allowed; }\n.oe-org-workspace { min-height: 0; min-width: 0; flex: 1; display: flex; overflow: hidden; }\n.oe-org-viewport { position: relative; min-width: 0; min-height: 0; flex: 1; overflow: auto; background: var(--org-canvas); overscroll-behavior: contain; cursor: grab; }\n.oe-org-sizing { position: relative; margin-inline: auto; }\n.oe-org-canvas { position: relative; transform-origin: top left; }\n.oe-org-canvas .oe-org-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }\n.oe-org-lines path { stroke: var(--org-border); stroke-width: 2; fill: none; }\n.oe-org-node { position: absolute; width: 236px; height: 146px; border: 1px solid var(--org-border); border-top: 3px solid var(--org-accent); border-radius: 4px; background: var(--org-bg); display: flex; flex-direction: column; cursor: default; }\n.oe-org-node[data-selected=\"true\"] { outline: 2px solid var(--org-accent); outline-offset: 2px; }\n.oe-org-person { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: center; gap: 6px; text-align: left; padding: 9px 12px; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; border-radius: 0; width: 100%; }\n.oe-org-person strong, .oe-org-person > span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; line-height: 18px; }\n.oe-org-person > span { color: var(--org-muted); font-size: 12px; }\n.oe-org-node-actions { flex: none; display: flex; align-items: center; gap: 4px; padding: 4px 8px; height: 38px; border-top: 1px solid var(--org-border); }\n.oe-org-node-actions .oe-org-button { min-height: 28px; height: 28px; min-width: 28px; padding: 3px; border: 0; }\n.oe-org-node-actions [aria-expanded] { margin-left: auto; font-size: 11px; }\n.oe-org-note-marker { display: inline-flex; color: var(--org-muted); margin-left: auto; }\n.oe-org-editor { flex: 0 0 310px; width: 310px; padding: 16px; border-left: 1px solid var(--org-border); overflow-y: auto; background: var(--org-bg); }\n.oe-org-editor-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 16px; }\n.oe-org-editor h3 { margin: 0; font-size: 15px; }\n.oe-org-form { display: grid; gap: 16px; }\n.oe-org-field { display: grid; gap: 6px; font-size: 12px; font-weight: 600; min-width: 0; }\n.oe-org-dialog input, .oe-org-dialog textarea { min-width: 0; width: 100%; font: inherit; font-weight: 400; line-height: 20px; color: inherit; background: var(--org-bg); border: 1px solid var(--org-muted); border-radius: 3px; padding: 7px 8px; }\n.oe-org-dialog textarea { resize: vertical; min-height: 100px; max-height: 300px; }\n.oe-org-form-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }\n.oe-contact-name { position: relative; }\n.oe-org-dialog .oe-contact-name > input { padding-right: 42px; }\n.oe-org-modal .oe-contact-name > .oe-org-button { position: absolute; right: 2px; top: 2px; min-height: 30px; height: 30px; border: 0; }\n.oe-org-dialog.oe-contact-dialog { width: min(680px, 100%); height: auto; padding: 20px; gap: 20px; overflow-y: auto; }\n.oe-contact-dialog > header { margin: 0; }\n.oe-org-dialog.oe-contact-opportunities { width: min(1200px, 100%); height: auto; padding: 20px; gap: 16px; }\n.oe-contact-opportunities > header { margin: 0; }\n.oe-contact-opportunities-table { overflow: auto; min-height: 0; }\n.oe-contact-opportunities table { width: 100%; border-collapse: collapse; font-size: 12px; }\n.oe-contact-opportunities th, .oe-contact-opportunities td { padding: 12px; text-align: left; border-bottom: 1px solid var(--org-border); }\n.oe-contact-opportunities th { background: var(--org-canvas); white-space: nowrap; }\n.oe-contact-opportunities .opportunities-extension-sort-button { white-space: nowrap; min-width: max-content; min-height: 28px; padding: 4px 18px 4px 0; justify-content: flex-start; text-align: left; }\n.oe-contact-opportunities .opportunities-extension-sort-button::after { right: 0; }\n.oe-contact-opportunities th:nth-child(5), .oe-contact-opportunities td:nth-child(5) { text-align: right; font-variant-numeric: tabular-nums; }\n.oe-contact-opportunities th:nth-child(5) .opportunities-extension-sort-button { padding: 4px 0 4px 18px; justify-content: flex-end; text-align: right; }\n.oe-contact-opportunities th:nth-child(5) .opportunities-extension-sort-button::after { left: 0; right: auto; }\n.oe-contact-opportunities td:nth-child(5) .oe-contact-skeleton { margin-left: auto; }\n.oe-contact-opportunities .opportunities-extension-sort-label { white-space: nowrap; overflow-wrap: normal; word-break: normal; }\n.oe-contact-opportunities table { min-width: 900px; }\n.oe-contact-opportunities a { color: var(--org-accent); }\n.oe-contact-skeleton { display: block; height: 14px; min-width: 24px; border-radius: 4px; background: var(--org-border); animation: oe-time-pulse 1.3s ease-in-out infinite alternate; }\n.oe-contact-skeleton-total { width: 110px; }\n.oe-contact-opportunities table[aria-busy=\"true\"] { table-layout: fixed; }\n.oe-contact-opportunities table[aria-busy=\"true\"] th:nth-child(3) { width: 28%; }\n@media (prefers-reduced-motion: reduce) { .oe-contact-skeleton { animation: none; } }\n.oe-contact-dialog [aria-invalid=\"true\"] { border-color: #b3261e; outline: 1px solid #b3261e; }\n.opportunities-extension-modal[data-theme=\"dark\"] .oe-contact-dialog [aria-invalid=\"true\"] { border-color: #ffaaa4; outline-color: #ffaaa4; }\n.oe-contact-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }\n.oe-contact-phone { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; border: 1px solid var(--org-border); border-radius: 4px; padding: 12px; min-width: 0; margin: 0; }\n.oe-contact-form legend { font-weight: 600; padding: 0 4px; }\n.oe-contact-primary { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 20px; border: 0; padding: 0; margin: 0; }\n.oe-contact-primary label { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; }\n.oe-contact-primary input { width: auto; accent-color: var(--org-accent); }\n@media (max-width: 520px) { .oe-contact-form, .oe-contact-phone { grid-template-columns: minmax(0, 1fr); } }\n.oe-org-dialog .oe-org-danger, .oe-org-error { color: #b3261e; }\n.opportunities-extension-modal[data-theme=\"dark\"] .oe-org-dialog .oe-org-danger, .opportunities-extension-modal[data-theme=\"dark\"] .oe-org-error { color: #ffaaa4; }\n.oe-org-footer { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--org-border); }\n.oe-org-status { margin: 0 auto 0 0; font-size: 12px; overflow-wrap: anywhere; }\n.oe-org-footer .oe-org-button { flex: none; }\n.oe-org-empty { display: grid; place-content: center; justify-items: center; height: 100%; min-height: 180px; gap: 12px; }\n.oe-org-empty > svg { width: 40px; height: 40px; color: var(--org-accent); }\n.oe-org-empty h3 { margin: 0; font-size: 16px; }\n.oe-org-tooltip { position: fixed; z-index: 20; max-width: min(360px, calc(100vw - 24px)); max-height: min(260px, 45dvh); overflow-y: auto; padding: 12px; background: #fff; color: #312d2a; border: 1px solid #8f8983; border-radius: 4px; box-shadow: 0 3px 12px #0002; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12px; line-height: 18px; }\n.opportunities-extension-modal[data-theme=\"dark\"] .oe-org-tooltip { background: #35322f; color: #f5f4f2; }\n.oe-org-tooltip { pointer-events: none; }\n.oe-org-confirm { position: absolute; inset: 0; display: grid; place-items: center; background: #0006; z-index: 30; padding: 16px; }\n.oe-org-confirm-panel { width: min(430px, 100%); background: #fff; color: #312d2a; border: 1px solid #8f8983; border-radius: 6px; padding: 24px; overflow-wrap: anywhere; }\n.oe-org-confirm-panel h3 { margin: 0 0 12px; font-size: 18px; }\n.oe-org-confirm-panel p { font-size: 13px; line-height: 20px; margin: 0 0 24px; }\n.opportunities-extension-modal[data-theme=\"dark\"] .oe-org-confirm-panel { background: #292725; color: #f5f4f2; }\n.oe-org-skeleton { width: 236px; height: 146px; margin: 28px; border-radius: 4px; background: var(--org-border); animation: oe-time-pulse 1.3s ease-in-out infinite alternate; }\n@media (prefers-reduced-motion: reduce) { .oe-org-skeleton { animation: none; } }\n@media (max-width: 760px) {\n .oe-org-modal { padding: 8px; }\n .oe-org-dialog { height: calc(100dvh - 16px); max-height: calc(100dvh - 16px); }\n .oe-org-workspace { flex-direction: column; }\n .oe-org-editor { flex: 0 1 55%; width: 100%; border-left: 0; border-top: 1px solid var(--org-border); }\n .oe-org-viewport { min-height: 140px; }\n .oe-org-toolbar { padding: 8px; gap: 6px; }\n .oe-org-tools { gap: 2px; }\n .oe-org-footer { padding: 8px; }\n}\n\n/* Shared data-table presentation. Calendar grids are intentionally not data tables. */\n.opportunities-extension-modal :is(\n .opportunities-extension-table-surface,\n .opportunities-extension-install-base-content,\n .opportunities-extension-service-requests-content,\n .opportunities-extension-ratecard-viewport,\n .opportunities-extension-projection-viewport,\n .oe-time-grid,\n .oe-contact-opportunities-table\n) {\n box-sizing: border-box;\n min-width: 0;\n border: 1px solid var(--oe-table-heading-border);\n border-radius: 4px;\n overflow: auto;\n}\n/* Unpadded dialogs need an inset on the scrolling frame itself. */\n.opportunities-extension-modal :is(\n .opportunities-extension-install-base-content,\n .opportunities-extension-service-requests-content,\n .opportunities-extension-ratecard-viewport\n) { margin: 16px; }\n/* Other frames already sit inside a padded body: keep a single gutter. */\n.opportunities-extension-modal :is(\n .opportunities-extension-body,\n .opportunities-extension-projection-body,\n .opportunities-extension-products-detail,\n .oe-time-body,\n .oe-org-dialog.oe-contact-opportunities\n) { padding: 16px; }\n.opportunities-extension-modal table.opportunities-extension-products-table {\n border: 1px solid var(--oe-table-heading-border);\n}\n.opportunities-extension-modal {\n --oe-table-heading: #faf9f8;\n --oe-table-text: #312d2a;\n --oe-table-border: #ebe8e5;\n --oe-table-heading-border: #b8b2ad;\n --oe-table-hover: #f5f4f2;\n}\n.opportunities-extension-modal[data-theme=\"dark\"] {\n --oe-table-heading: #333130;\n --oe-table-text: #f6f4f2;\n --oe-table-border: #3f3c39;\n --oe-table-heading-border: #4e4a46;\n --oe-table-hover: #35322f;\n}\n.opportunities-extension-modal table[data-table-layout=\"standard\"]:not(.fc-scrollgrid) {\n width: 100%; border-collapse: collapse; border-spacing: 0; table-layout: auto;\n color: var(--oe-table-text); font-size: 12px; line-height: 1.35;\n}\n.opportunities-extension-modal table[data-table-layout=\"standard\"] > thead > tr > th {\n padding: 10px 12px; height: 44px; vertical-align: middle; text-align: left;\n white-space: nowrap; overflow-wrap: normal; word-break: normal;\n font-size: 12px; font-weight: 700; color: var(--oe-table-text);\n background: var(--oe-table-heading); border-bottom: 1px solid var(--oe-table-heading-border);\n}\n.opportunities-extension-modal table[data-table-layout=\"standard\"] > tbody > tr > td {\n padding: 10px 12px; vertical-align: middle; text-align: left;\n border-bottom: 1px solid var(--oe-table-border);\n}\n.opportunities-extension-modal table[data-table-layout=\"standard\"] > tbody > tr:hover { background: var(--oe-table-hover); }\n.opportunities-extension-modal table[data-table-layout=\"standard\"] > thead > tr > th .opportunities-extension-sort-button,\n.opportunities-extension-modal table[data-table-layout=\"standard\"] .opportunities-extension-ratecard-sort {\n display: flex; align-items: center; justify-content: flex-start; gap: 8px;\n width: 100%; min-width: max-content; min-height: 28px; padding: 4px 18px 4px 0;\n border: 0; border-radius: 0; background: transparent; color: inherit;\n text-align: left; white-space: nowrap; overflow-wrap: normal; font-weight: 700;\n}\n.opportunities-extension-modal table[data-table-layout=\"standard\"] .opportunities-extension-sort-label { white-space: nowrap; overflow-wrap: normal; word-break: normal; }\n.opportunities-extension-modal table[data-table-layout=\"standard\"] > thead > tr > th .opportunities-extension-sort-button::after { position: absolute; right: 0; left: auto; font-size: 12px; }\n.opportunities-extension-modal table[data-table-layout=\"standard\"] .opportunities-extension-ratecard-sort-icon { margin-left: auto; }\n/* Currency columns keep their heading and value on the same right edge. */\n.opportunities-extension-modal table[data-table-layout=\"standard\"] :is(th, td)[data-align=\"money\"] { text-align: right; font-variant-numeric: tabular-nums; }\n.opportunities-extension-modal table[data-table-layout=\"standard\"] > thead > tr > th[data-align=\"money\"] .opportunities-extension-sort-button,\n.opportunities-extension-modal table[data-table-layout=\"standard\"] th[data-align=\"money\"] .opportunities-extension-ratecard-sort { justify-content: flex-end; text-align: right; padding: 4px 0 4px 18px; }\n.opportunities-extension-modal table[data-table-layout=\"standard\"] > thead > tr > th[data-align=\"money\"] .opportunities-extension-sort-button::after { left: 0; right: auto; }\n.opportunities-extension-modal table[data-table-layout=\"standard\"] th[data-align=\"money\"] .opportunities-extension-ratecard-sort-icon { order: -1; margin-left: 0; margin-right: auto; }\n.opportunities-extension-modal table[data-table-layout=\"standard\"] td[data-align=\"money\"] > span[class*=\"skeleton\"] { margin-left: auto; }\n/* Preserve room for Overview badges and the compact daily entry controls. */\n.opportunities-extension-modal table.opportunities-extension-table > tbody > tr > td:is([data-column=\"name\"], [data-column=\"customer\"]) { padding-bottom: 38px; vertical-align: top; }\n.opportunities-extension-modal .oe-time-grid table[data-table-layout=\"standard\"] > :is(thead, tbody) > tr > :is(th, td) { padding-left: 5px; padding-right: 5px; }\n.opportunities-extension-modal .oe-time-grid table[data-table-layout=\"standard\"] { table-layout: fixed; }\n.opportunities-extension-modal table[data-table-layout=\"standard\"] > tbody > tr > th[scope=\"row\"] { padding: 10px 12px; text-align: left; background: var(--oe-table-heading); border-bottom: 1px solid var(--oe-table-border); }\n/* Rate Card must fit its drawer; headings may wrap at spaces, never mid-word. */\n/* Overview reserves nearly half its width for the two primary descriptions. */\n.opportunities-extension-modal table.opportunities-extension-table[data-table-layout=\"standard\"] { table-layout: fixed; }\n.opportunities-extension-modal .opportunities-extension-table > thead > tr > th[data-column=\"name\"] { width: 24%; }\n.opportunities-extension-modal .opportunities-extension-table > thead > tr > th[data-column=\"customer\"] { width: 24%; }\n.opportunities-extension-modal .opportunities-extension-table > thead > tr > th[data-column=\"optyNumber\"] { width: 7%; }\n.opportunities-extension-modal .opportunities-extension-table > thead > tr > th[data-column=\"owner\"] { width: 7%; }\n.opportunities-extension-modal .opportunities-extension-table > thead > tr > th[data-column=\"revenue\"] { width: 8%; }\n.opportunities-extension-modal .opportunities-extension-table > thead > tr > th[data-column=\"closeDate\"] { width: 7%; }\n.opportunities-extension-modal .opportunities-extension-table > thead > tr > th[data-column=\"status\"] { width: 5%; }\n.opportunities-extension-modal .opportunities-extension-table > thead > tr > th[data-column=\"winProbability\"] { width: 4%; }\n.opportunities-extension-modal .opportunities-extension-table > thead > tr > th[data-column=\"stage\"] { width: 6%; }\n.opportunities-extension-modal .opportunities-extension-table > thead > tr > th[data-column=\"lastUpdateDate\"] { width: 8%; }\n.opportunities-extension-modal table.opportunities-extension-table[data-table-layout=\"standard\"] > :is(thead, tbody) > tr > :is(th, td) { padding-inline: 6px; }\n.opportunities-extension-modal table.opportunities-extension-table[data-table-layout=\"standard\"] > thead > tr > th .opportunities-extension-sort-button { min-width: 0; gap: 4px; }\n.opportunities-extension-modal table.opportunities-extension-table[data-table-layout=\"standard\"] .opportunities-extension-sort-label { overflow: hidden; text-overflow: ellipsis; }\n\n.opportunities-extension-modal table.opportunities-extension-ratecard-table[data-table-layout=\"standard\"] {\n min-width: 0;\n table-layout: fixed;\n}\n.opportunities-extension-modal table.opportunities-extension-ratecard-table[data-table-layout=\"standard\"] > :is(thead, tbody) > tr > :is(th, td) {\n padding-inline: 6px;\n}\n.opportunities-extension-modal table.opportunities-extension-ratecard-table[data-table-layout=\"standard\"] > thead > tr > th,\n.opportunities-extension-modal table.opportunities-extension-ratecard-table[data-table-layout=\"standard\"] > thead > tr > th .opportunities-extension-ratecard-sort {\n white-space: normal;\n overflow-wrap: normal;\n word-break: normal;\n hyphens: none;\n min-width: 0;\n}\n.opportunities-extension-modal table.opportunities-extension-ratecard-table[data-table-layout=\"standard\"] > thead > tr > th .opportunities-extension-ratecard-sort {\n padding: 4px 0;\n gap: 4px;\n}\n.opportunities-extension-modal .opportunities-extension-ratecard-sort > span:first-child { min-width: 0; }\n.opportunities-extension-modal .opportunities-extension-ratecard-sort-icon { flex: 0 0 12px; }\n\n/* Modal titles follow the customer Service Requests heading. Keep section and\n calendar headings independent from dialog typography. */\n.opportunities-extension-modal :is(\n .opportunities-extension-header,\n .opportunities-extension-account-plans-header,\n .opportunities-extension-preferences-header\n) {\n padding: 16px;\n gap: 16px;\n align-items: flex-start;\n}\n/* These headers live in panels that already supply the outer inset. */\n.opportunities-extension-modal :is(.oe-org-dialog.oe-contact-dialog,\n .oe-org-confirm-panel, .opportunities-extension-projection-confirm,\n .opportunities-extension-debug-panel) { padding: 16px; }\n.opportunities-extension-modal :is(.oe-org-editor-header,\n .opportunities-extension-debug-panel-header) {\n padding: 0;\n gap: 16px;\n align-items: flex-start;\n}\n.opportunities-extension-modal :is(\n .opportunities-extension-account-plans-header,\n .opportunities-extension-preferences-header,\n .opportunities-extension-debug-panel-header\n) p {\n margin: 5px 0 0;\n font-family: \"Oracle Sans\", Arial, Helvetica, sans-serif;\n font-size: 13px;\n font-weight: 400;\n line-height: 1.35;\n letter-spacing: normal;\n overflow-wrap: anywhere;\n}\n/* Search controls share the 16px inset of their table frames. */\n.opportunities-extension-modal :is(.opportunities-extension-customer-table-toolbar,\n .opportunities-extension-ratecard-toolbar,\n .opportunities-extension-ratecard-plan-details) { padding-inline: 16px; }\n.opportunities-extension-modal .opportunities-extension-customer-table-toolbar {\n padding-block: 12px;\n}\n.opportunities-extension-modal .opportunities-extension-customer-table-search {\n width: min(420px, 100%);\n height: 38px;\n padding: 8px 12px;\n font-size: 13px;\n line-height: 20px;\n}\n.opportunities-extension-modal :is(\n .opportunities-extension-header,\n .opportunities-extension-account-plans-header,\n .opportunities-extension-preferences-header,\n .opportunities-extension-debug-panel-header,\n .oe-org-editor-header\n) :is(h1, h2, h3),\n.opportunities-extension-modal .opportunities-extension-projection-confirm h2,\n.opportunities-extension-modal .oe-org-confirm-panel h3 {\n margin: 0;\n font-family: \"Oracle Sans\", Arial, Helvetica, sans-serif;\n font-size: 20px;\n font-weight: 700;\n line-height: 24px;\n letter-spacing: normal;\n color: #312d2a;\n min-width: 0;\n overflow-wrap: anywhere;\n}\n.opportunities-extension-modal[data-theme=\"dark\"] :is(\n .opportunities-extension-header,\n .opportunities-extension-account-plans-header,\n .opportunities-extension-preferences-header,\n .opportunities-extension-debug-panel-header,\n .oe-org-editor-header\n) :is(h1, h2, h3),\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-projection-confirm h2,\n.opportunities-extension-modal[data-theme=\"dark\"] .oe-org-confirm-panel h3 {\n color: #f6f4f2;\n}\n"; function loadOpportunityCalendarLibrary() { /* MIT License @@ -332,7 +332,7 @@ function createOrgChartView({ environment, tableSorting, model, loadLayout, icon person = entry.nodes.find(node => node.id === person.id) || person; const overlay = el("div", "oe-org-confirm"), panel = el("section", "opportunities-extension-action-form-dialog oe-org-dialog oe-contact-opportunities"); panel.setAttribute("role", "dialog"); panel.setAttribute("aria-modal", "true"); panel.setAttribute("aria-labelledby", "oe-contact-opportunities-title"); - const header = el("header", "oe-org-editor-header"), title = el("h3", "", "Opportunities — " + person.name); title.id = "oe-contact-opportunities-title"; + const header = el("header", "oe-org-editor-header"), title = el("h3", "", "Opportunities | " + person.name); title.id = "oe-contact-opportunities-title"; let closed = false, offset = 0, partyNumber = person.PartyNumber; const current = () => !closed && active === entry; function finish() { closed = true; overlay.remove(); entry.confirmation = null; entry.contactCleanup = null; dialog.inert = false; trigger.focus(); } @@ -1726,19 +1726,11 @@ function createAuthSessionState({ AUTH_STATUS } = {}) { }; } -// Source: src/auth/sales-common-state.js -/** @returns {{salesCommonToken: null | {access_token: string, expiresAt: number}, salesCommonTokenRequest: null | Promise}} */ -function createAuthSalesCommonState() { - return { - salesCommonToken: null, - salesCommonTokenRequest: null - }; -} - // Source: src/features/opportunities/query-state.js function createOpportunitiesQueryState() { return { - periodRequestVersion: 0 + periodRequestVersion: 0, + dateRange: null }; } @@ -1758,6 +1750,7 @@ function createOpportunitiesTableState() { // Source: src/features/opportunities/filter-state.js function createOpportunitiesFilterState({ STAGE_OPTIONS, STATUS_OPTIONS } = {}) { return { + selectedProductTypes: new Set(["Booking", "Workload"]), selectedStages: new Set(STAGE_OPTIONS), selectedStatuses: new Set(STATUS_OPTIONS), selectedCustomerKeys: new Set(), @@ -1871,13 +1864,6 @@ function createProductsContentState() { }; } -// Source: src/features/ai-summary/state.js -function createAiSummaryState() { - return { - aiSummariesByOptyNumber: new Map() - }; -} - // Source: src/features/consumption/plans-state.js function createConsumptionPlansState() { return { @@ -1902,11 +1888,92 @@ function createOpportunitiesDashboardState({ STAGE_OPTIONS } = {}) { } // Source: src/features/debug/state.js -function createDebugState() { - return { +function createDebugState(environment = {}) { + let storage; + let tabId; + try { + storage = environment.localStorage; + const session = environment.window?.sessionStorage; + tabId = session?.getItem("opportunities-extension-debug-tab"); + if (!tabId) { + tabId = environment.crypto?.randomUUID?.() || `${Date.now()}-${Math.random().toString(36).slice(2)}`; + session?.setItem("opportunities-extension-debug-tab", tabId); + } + } catch { storage = null; } + const prefix = `opportunities-extension-debug:${tabId || "memory"}:`; + let timer = null; + const pending = new Map(); + const state = { requestLog: [], - debugSecretsVisible: false + debugSecretsVisible: false, + storageError: "", + generation: 0, + persist, + flush, + reload, + reset }; + function persist(entry) { + if (!state.requestLog.includes(entry)) return; + pending.set(entry.id, entry); + try { + if (timer === null && environment.setTimeout) timer = environment.setTimeout(flush, 100); + else if (!environment.setTimeout) flush(); + } catch { + // Debug persistence must never interrupt the request being recorded. + timer = null; + flush(); + } + } + function flush() { + if (timer !== null) environment.clearTimeout?.(timer); + timer = null; + if (!storage) { pending.clear(); return; } + try { + // Write only changed records, never stringify all response bodies per request. + for (const [id, entry] of pending) storage.setItem(`${prefix}${id}`, JSON.stringify(entry)); + storage.setItem(`${prefix}index`, JSON.stringify({ version: 1, count: state.requestLog.length })); + state.storageError = ""; + } catch { + state.storageError = "Local storage is unavailable or full. Requests remain available in memory for this session."; + } + pending.clear(); + } + function reload() { + flush(); + if (!storage || state.storageError) return; + try { + const index = JSON.parse(storage.getItem(`${prefix}index`) || "null"); + if (!index || index.version !== 1 || index.count !== state.requestLog.length) return; + const records = state.requestLog.map(entry => { + const saved = JSON.parse(storage.getItem(`${prefix}${entry.id}`) || "null"); + if (!saved || saved.id !== entry.id) throw new Error("Incomplete debug record"); + return { ...saved, startedAt: new Date(saved.startedAt), completedAt: saved.completedAt ? new Date(saved.completedAt) : null }; + }); + // Preserve the handles held by requests which are still in flight. + records.forEach((record, i) => Object.assign(state.requestLog[i], record)); + } catch { state.storageError = "Saved debug data could not be read. Showing this session's requests from memory."; } + } + function reset() { + if (timer !== null) environment.clearTimeout?.(timer); + timer = null; + pending.clear(); + state.requestLog = []; + state.debugSecretsVisible = false; + state.storageError = ""; + state.generation++; + try { + if (!storage) return; + const keys = []; + for (let i = 0; i < storage.length; i++) { + const key = storage.key(i); + if (key?.startsWith(prefix)) keys.push(key); + } + keys.forEach(key => storage.removeItem(key)); + storage.setItem(`${prefix}index`, JSON.stringify({ version: 1, count: 0 })); + } catch { state.storageError = "Local storage is unavailable. Requests will be kept in memory for this session."; } + } + return state; } // Source: src/features/opportunities/columns.js @@ -1919,7 +1986,7 @@ function createOpportunitiesColumns({ formatOracleResponseDate, formatRevenue, f { key: "revenue", label: "Amount", value: (item) => getNestedValue(item, ["PrimaryRevenue", "RevnAmount"]), display: formatRevenue }, { key: "closeDate", label: "Close Date", value: (item) => item.EffectiveDate, display: (item) => formatOracleResponseDate(item.EffectiveDate) }, { key: "status", label: "Status", value: (item) => item.StatusCode, display: (item) => item.StatusCode }, - { key: "winProbability", label: "Win Probability", value: (item) => getNestedValue(item, ["PrimaryRevenue", "WinProb"]), display: formatWinProbability }, + { key: "winProbability", label: "Prob.", value: (item) => getNestedValue(item, ["PrimaryRevenue", "WinProb"]), display: formatWinProbability }, { key: "stage", label: "Stage", value: (item) => item.ForecastGroup_c, display: (item) => item.ForecastGroup_c }, { key: "lastUpdateDate", label: "Last Update Date", value: (item) => item.LastUpdateDate, display: (item) => formatOracleResponseDate(item.LastUpdateDate, true) } ]; @@ -2183,6 +2250,8 @@ function createContentModal({ } function openOpportunitiesModal() { ensureExtensionStyles(); + const oldDebug = document.getElementById(DEBUG_PANEL_ID); + if (oldDebug) { oldDebug.hidden = true; oldDebug.textContent = ""; } debugState.debugSecretsVisible = false; const existingModal = document.getElementById(MODAL_ID); @@ -2203,7 +2272,6 @@ function createContentModal({ const overlay = document.createElement("div"); overlay.setAttribute("lang", "en"); - debugState.requestLog = []; authSessionState.tokenRelayRequest = null; authSessionState.consumerTokenServiceRequest = null; authSessionState.accessToken = ""; @@ -2927,6 +2995,7 @@ function createAuthContentSession({ return token; }) .catch((error) => { + authSessionState.tokenRelayRequest = null; authSessionState.accessToken = ""; authSessionState.principal = ""; authSessionState.authStatus = AUTH_STATUS.unauthenticated; @@ -3001,41 +3070,6 @@ function createCurrentUser({ sendRuntimeMessage, appendBackgroundRequestLog, mes return { ensure, allowsCrmActivities: () => allowed, getUserId: () => userId }; } -// Source: src/auth/sales-common.js -function createAuthSalesCommon({ - TOKEN_RELAY_URL, - authSalesCommonState, - requestTokenRelay -}) { - function requestTokenRelaySalesCommon() { - if (authSalesCommonState.salesCommonToken && Date.now() < authSalesCommonState.salesCommonToken.expiresAt) { - return Promise.resolve(authSalesCommonState.salesCommonToken.access_token); - } - if (authSalesCommonState.salesCommonTokenRequest) { - return authSalesCommonState.salesCommonTokenRequest; - } - authSalesCommonState.salesCommonTokenRequest = requestTokenRelay({ - name: "requestTokenRelaySalesCommon", - url: `${TOKEN_RELAY_URL}?scopesfq=urn%3Aopc%3Aresource%3Afusion%3Aeeho%3Asales-common%2F`, - includeExpiry: true - }).then((token) => { - authSalesCommonState.salesCommonToken = token; - return token.access_token; - }).finally(() => { - authSalesCommonState.salesCommonTokenRequest = null; - }); - return authSalesCommonState.salesCommonTokenRequest; - } - - function invalidateSalesCommonToken(rejectedToken) { - if (authSalesCommonState.salesCommonToken && authSalesCommonState.salesCommonToken.access_token === rejectedToken) { - authSalesCommonState.salesCommonToken = null; - } - } - - return { requestTokenRelaySalesCommon, invalidateSalesCommonToken }; -} - // Source: src/auth/token-relay.js function createAuthTokenRelay({ TOKEN_RELAY_URL, @@ -3073,17 +3107,27 @@ function createAuthTokenRelay({ } const requestEntry = createTokenRelayRequestEntry(xsrfTokenSource, refreshResult, name, url); + const controller = environment.AbortController ? new environment.AbortController() : null; + let timeoutId; + const timeout = new Promise((_, reject) => { + if (!environment.setTimeout) return; + timeoutId = environment.setTimeout(() => { + reject(new Error("Token relay timed out after 30 seconds. Please try again.")); + controller?.abort(); + }, 30000); + }); try { - const response = await fetch(url, { + const response = await Promise.race([fetch(url, { method: "GET", credentials: "include", + ...(controller ? { signal: controller.signal } : {}), headers: { "x-xsrf-token": xsrfTokenSource.token } - }); + }), timeout]); - const responseBody = await readResponseBodyForDebug(response); + const responseBody = await Promise.race([readResponseBodyForDebug(response), timeout]); if (!response.ok) { logRequestSuccess(requestEntry, response, responseBody); @@ -3102,8 +3146,9 @@ function createAuthTokenRelay({ let responseData; try { - responseData = await response.json(); + responseData = await Promise.race([response.json(), timeout]); } catch (error) { + if (controller?.signal.aborted) throw error; logRequestSuccess(requestEntry, response, responseBody); if (!refreshAttempted) { @@ -3148,6 +3193,8 @@ function createAuthTokenRelay({ } catch (error) { logRequestFailure(requestEntry, error.message || "Request failed."); throw error; + } finally { + if (timeoutId !== undefined) environment.clearTimeout?.(timeoutId); } } } @@ -3389,6 +3436,7 @@ function createOpportunitiesController({ }) { async function requestOpportunitiesForPeriod(period) { const dateRange = getFiscalPeriodRange(period, new Date()); + opportunitiesQueryState.dateRange = dateRange; const requestVersion = ++opportunitiesQueryState.periodRequestVersion; resetWorkloadActions(); resetWorkloads(); @@ -3533,6 +3581,7 @@ function createFusionOpportunities({ maskToken, getOpportunityTypeValues, readResponseBodyForDebug, + resetDebugRequests = () => {}, environment }) { const { fetch } = environment; @@ -3560,6 +3609,8 @@ function createFusionOpportunities({ if (!isCurrentPeriodRequest(requestVersion)) return null; const payload = createOpportunitiesQueryPayload(dateRange, offset, savedSearchNumber); const requestBody = JSON.stringify(payload); + // One history per query, preserving all pages of the same result set. + if (page === 1) resetDebugRequests(); const requestEntry = logRequestStart({ name: "requestOpportunities", method: "POST", @@ -3928,7 +3979,7 @@ function createProductActivities({ productsContentState, opportunitiesQueryState // Source: src/features/opportunities/refresh-all.js function createRefreshAll({ messageTypes, sendRuntimeMessage, activityCache, resetRelatedData, opportunitiesQueryState, productsContentState, consumptionPlansState, consumptionTrendState, - aiSummaryState, reload, onFailure, notify, createRefreshIcon, environment }) { + reload, onFailure, notify, createRefreshIcon, environment }) { let pending = null; function refresh(period) { if (pending) return pending; @@ -3941,7 +3992,6 @@ function createRefreshAll({ messageTypes, sendRuntimeMessage, activityCache, res consumptionTrendState.consumptionTrendCache = new Map(); consumptionTrendState.consumptionTrendWindowOffsets = new Map(); consumptionTrendState.consumptionTrendSeriesFilters = new Map(); - aiSummaryState.aiSummariesByOptyNumber = new Map(); resetRelatedData(); pending = (async () => { await activityCache.invalidate(); @@ -4046,7 +4096,7 @@ function createActivityCache({ authSessionState, preferencesState, environment } } // Source: src/features/opportunities/activity-progress.js -function createActivityProgress({ MODAL_ID, environment }) { +function createActivityProgress({ MODAL_ID, environment, retrySession = () => {} }) { const { document, setTimeout, clearTimeout, matchMedia } = environment; const entries = new Map(); function update(key, state, completed = 0, total = null) { @@ -4077,6 +4127,15 @@ function createActivityProgress({ MODAL_ID, environment }) { : state === "complete" ? `${label} ready ${completed}` : `${label} ${count}`; if (key === "session") entry.badge.textContent = state === "complete" ? "SR session ready" : state === "error" ? "SR session unavailable" : "SR session loading"; entry.badge.title = key === "session" ? "Service Request session initialization" : key === "sr" ? "CRM service request records loaded" : "Product workloads checked for Actions in the selected Reference, regardless of display filters"; + if (key === "session" && state === "error") { + const retry = document.createElement("button"); + retry.type = "button"; + retry.className = "opportunities-extension-session-retry"; + retry.textContent = "Retry"; + retry.setAttribute("aria-label", "Retry Service Request session initialization"); + retry.addEventListener("click", () => { retry.disabled = true; retrySession(); }); + entry.badge.append(retry); + } if (state === "complete") entry.timer = setTimeout(() => { entry.badge.setAttribute("data-fading", "true"); const reduced = typeof matchMedia === "function" && matchMedia("(prefers-reduced-motion: reduce)").matches; @@ -5200,25 +5259,33 @@ function createInternalSrSession({ query, environment, sessionUrl, sessionLabel // Source: src/features/opportunities/sr-session-preparation.js function createSrSessionPreparation({ ensureCurrentUser, allowsCrmActivities, sendRequest, reportProgress, appendLog, onReady = async () => {} }) { let pending = null; + let failed = false; function ensure() { if (pending) return pending; pending = (async () => { + failed = false; try { - await ensureCurrentUser(); - if (!allowsCrmActivities()) return; reportProgress("running"); - const result = await sendRequest(); + // Navigation establishes SR cookies independently of the SPA identity. + // Consume user-dependent data only once both preparations have finished. + const [, result] = await Promise.all([ensureCurrentUser(), sendRequest()]); appendLog(result?.debugRequests || []); if (!result?.ok) throw new Error(result?.error || "Session initialization failed."); + if (!allowsCrmActivities()) { reportProgress("idle"); return; } reportProgress("complete"); await onReady(); } catch { + failed = true; reportProgress("error"); } })(); return pending; } - return { ensure }; + function retry() { + if (failed) pending = null; + return ensure(); + } + return { ensure, retry }; } // Source: src/features/opportunities/workload-actions.js @@ -5949,16 +6016,16 @@ function createOpportunitiesTable({ const productsResult = item.OptyNumber && productsContentState.opptyProductsByNumber.get(String(item.OptyNumber)); if (productsResult) { productActions.append(createProductsCountButton(item.OptyNumber, productsResult)); - const rampBadge = createProductsRampBadge(productsResult); + const rampBadge = createProductsRampBadge(productsResult, item); if (rampBadge) productActions.append(rampBadge); } + const projectionIndicator = createProjectionIndicator(productsResult, item, + productsContentState.expandedProductOptyNumbers.has(String(item.OptyNumber))); + if (projectionIndicator) productActions.append(projectionIndicator); const srBadge = createCrmServiceRequestBadge(item.OptyNumber); if (srBadge) productActions.append(srBadge); const actionsBadge = createWorkloadActionsBadge(item.OptyNumber); if (actionsBadge) productActions.append(actionsBadge); - const projectionIndicator = createProjectionIndicator(productsResult, item, - productsContentState.expandedProductOptyNumbers.has(String(item.OptyNumber))); - if (projectionIndicator) productActions.append(projectionIndicator); nameCellContent.append(opportunityLink, productActions); cell.append(nameCellContent); } else if (column.key === "optyNumber" && item.OptyNumber) { @@ -6016,9 +6083,10 @@ function createOpportunitiesTable({ } // Source: src/features/opportunities/calendar.js -function createOpportunityCalendar({ environment, loadLibrary, getState, getItems, getVersion, +function createOpportunityCalendar({ environment, loadLibrary, getState, getItems, getVersion, getRange, formatRevenue, formatDate, getOwnerName, createDetailLink, createCopyButton, createCloseIcon, - createStageBadge, createStatusBadge, opportunityUrl, modalId, closeSrPopover, createViewIcon }) { + createStageBadge, createStatusBadge, opportunityUrl, modalId, closeSrPopover, createViewIcon, + productTypeSelection, onProductTypeChange }) { const { document } = environment; let elements = null; let calendar = null; @@ -6028,34 +6096,49 @@ function createOpportunityCalendar({ environment, loadLibrary, getState, getItem let details = null; let lastEvents = ""; let dayCounts = new Map(); + let dayEvents = new Map(); const dayBadges = new Map(); let resizeObserver = null; let layoutFrame = null; - let eventLimit = 2; - function visibleEventLimit(height, weeks, headerHeight) { - return Math.max(0, Math.min(2, Math.floor((height / Math.max(1, weeks) - headerHeight - 26) / 48))); - } + let positionToday = false; function scheduleLayout() { - for (const [name, icon] of [["today", "today"], ["dayGridMonth", "calendar"], ["dayGridWeek", "week"]]) { - const button = elements?.calendarHost.querySelector?.(`.fc-${name}-button`); - if (button && !button.querySelector("svg")) button.prepend(createViewIcon(icon)); - } const win = environment.window; if (!win?.requestAnimationFrame || layoutFrame !== null) return; layoutFrame = win.requestAnimationFrame(() => { layoutFrame = null; - if (!calendar || selectedView !== "calendar" || !elements.calendarHost.clientHeight) return; - calendar.updateSize(); - const frame = elements.calendarHost.querySelector(".fc-daygrid-day-frame"); - const events = frame?.querySelector(".fc-daygrid-day-events"); - if (!frame || !events) return; - const scroller = frame.closest(".fc-scroller"); - const weeks = elements.calendarHost.querySelectorAll(".fc-daygrid-body tr").length; - if (!scroller || !weeks) return; - elements.calendarHost.style.setProperty("--opportunities-calendar-weeks", String(weeks)); - const headerHeight = events.getBoundingClientRect().top - frame.getBoundingClientRect().top; - const limit = visibleEventLimit(scroller.clientHeight, weeks, headerHeight); - if (limit !== eventLimit) { eventLimit = limit; calendar.setOption("dayMaxEvents", limit); } + if (calendar && selectedView === "calendar") { + calendar.updateSize(); + if (positionToday && !elements.calendarHost.hidden) { + const scroller = elements.calendarHost.querySelector(".fc-multimonth"); + if (!scroller?.clientHeight) return; + const today = dateKey(new Date()); + const range = getRange(); + const cell = range && today >= range.startCloseDate.slice(0, 10) && today < range.endCloseDate.slice(0, 10) + ? elements.calendarHost.querySelector(`[data-date="${today}"]:not(.fc-day-other)`) + : null; + if (cell) { + const first = new Date(`${today}T12:00:00`); + first.setDate(first.getDate() - first.getDay() - 7); + const last = new Date(first); + last.setDate(last.getDate() + 20); + const start = dateKey(first), end = dateKey(last); + // A week crossing a month boundary has two rendered rows. Include both. + const rows = [...scroller.querySelectorAll(".fc-daygrid-body tr")].filter(row => + [...row.querySelectorAll("[data-date]:not(.fc-day-other)")].some(day => { + const date = day.getAttribute("data-date"); + return date >= start && date <= end; + })); + const headings = [...new Set(rows.map(row => row.closest(".fc-multimonth-month")?.querySelector(".fc-multimonth-header")))].filter(Boolean); + const headerSpace = headings.reduce((sum, header) => sum + header.getBoundingClientRect().height, 0); + const height = Math.max(48, Math.floor((scroller.clientHeight - headerSpace - 20) / Math.max(1, rows.length))); + elements.calendarHost.style.setProperty("--calendar-week-height", `${height}px`); + const target = rows[0] || cell; + const inset = (headings[0]?.getBoundingClientRect().height || 0) + 8; + scroller.scrollTop += target.getBoundingClientRect().top - scroller.getBoundingClientRect().top - inset; + } else scroller.scrollTop = 0; + positionToday = false; + } + } }); } function dateKey(date) { @@ -6082,6 +6165,21 @@ function createOpportunityCalendar({ environment, loadLibrary, getState, getItem badge.setAttribute("aria-label", badge.title); badge.setAttribute("data-empty", String(count === 0)); } + function renderDayCards(container, key) { + container.textContent = ""; + for (const event of dayEvents.get(key) || []) { + const item = event.extendedProps.item; + const button = node("button", `opportunities-calendar-day-card fc-daygrid-event ${event.classNames.join(" ")}`); + button.type = "button"; + const card = node("div", "opportunities-calendar-event-content"); + const summary = `${item.OptyNumber || "-"} | ${item.ForecastGroup_c || "N/A"} | ${formatRevenue(item)}`; + card.append(node("strong", "", event.title), node("span", "", summary)); + button.title = `${event.title}\n${summary}`; + button.append(card); + button.addEventListener("click", () => showDetails(item, button)); + container.append(button); + } + } function node(tag, className, text) { const el = document.createElement(tag); el.className = className; @@ -6163,29 +6261,10 @@ function createOpportunityCalendar({ environment, loadLibrary, getState, getItem content.append(identity, summary, badges); showDialog(item.Name || item.OptyNumber || "Opportunity", content, item.OptyNumber ? [link, copy] : [], trigger); } - function showDayOpportunities({ date, allSegs, jsEvent }) { - jsEvent.preventDefault(); - const trigger = jsEvent.currentTarget || elements?.tabs.calendar; - const content = node("div", "opportunities-calendar-day-list"); - const controls = []; - const events = new Map(allSegs.map(({ event }) => [event.id, event])); - for (const event of events.values()) { - const item = event.extendedProps.item; - const button = node("button", "opportunities-calendar-day-item"); button.type = "button"; - const summary = `${item.OptyNumber || "-"} | ${item.ForecastGroup_c || "N/A"} | ${formatRevenue(item)}`; - button.append(node("strong", "", event.title), node("span", "", summary)); - button.title = `${event.title}\n${summary}`; - button.addEventListener("click", () => showDetails(item, trigger)); - controls.push(button); content.append(button); - } - showDialog(`${formatDate(date.toISOString().slice(0, 10))} | ${events.size} ${events.size === 1 ? "opportunity" : "opportunities"}`, content, controls, trigger); - // A truthy non-string result prevents FullCalendar from opening its measured popover. - return true; - } function mount(body, tableSurface) { resizeObserver?.disconnect(); if (layoutFrame !== null) environment.window?.cancelAnimationFrame(layoutFrame); - layoutFrame = null; eventLimit = 2; + layoutFrame = null; calendar?.destroy(); calendar = null; lastEvents = ""; anchoredVersion = null; selectedView = "overview"; dayBadges.clear(); dayCounts.clear(); closeDetails(false); @@ -6212,7 +6291,26 @@ function createOpportunityCalendar({ environment, loadLibrary, getState, getItem }); tabs[key] = tab; tablist.append(tab); } - workspace.append(tablist, tableSurface, surface); body.append(workspace); + const viewbar = node("div", "opportunities-view-bar"); + viewbar.append(tablist); + if (productTypeSelection) { + const filters = node("div", "opportunities-product-type-filters"); + filters.setAttribute("role", "group"); filters.setAttribute("aria-label", "Opportunity type"); + for (const type of ["Booking", "Workload"]) { + const button = node("button", "opportunities-product-type-filter", type); + button.type = "button"; + button.setAttribute("data-type", type); + button.setAttribute("aria-pressed", String(productTypeSelection.has(type))); + button.addEventListener("click", () => { + if (productTypeSelection.has(type)) productTypeSelection.delete(type); else productTypeSelection.add(type); + button.setAttribute("aria-pressed", String(productTypeSelection.has(type))); + onProductTypeChange(); + }); + filters.append(button); + } + viewbar.append(filters); + } + workspace.append(viewbar, tableSurface, surface); body.append(workspace); elements = { workspace, tableSurface, surface, message, calendarHost, undated, tabs }; if (environment.window?.ResizeObserver) { resizeObserver = new environment.window.ResizeObserver(scheduleLayout); @@ -6222,6 +6320,7 @@ function createOpportunityCalendar({ environment, loadLibrary, getState, getItem } function selectView(view) { if (!elements || !["overview", "calendar"].includes(view)) return; + if (view === "calendar" && selectedView !== "calendar") positionToday = true; closeDetails(false); closeSrPopover(); selectedView = view; elements.tableSurface.hidden = view !== "overview"; elements.surface.hidden = view !== "calendar"; for (const [key, tab] of Object.entries(elements.tabs)) { @@ -6235,41 +6334,57 @@ function createOpportunityCalendar({ environment, loadLibrary, getState, getItem if (!elements || selectedView !== "calendar") return; const { surface, message, calendarHost, undated } = elements; surface.setAttribute("aria-busy", String(state.status === "loading")); - if (["loading", "error", "empty", "idle"].includes(state.status)) { + if (["loading", "error", "idle"].includes(state.status)) { message.textContent = state.message || (state.status === "loading" ? "Loading opportunities..." : "No opportunities found."); message.hidden = false; calendarHost.hidden = true; undated.hidden = true; closeDetails(false); return; } message.textContent = items.length ? "" : "No opportunities found."; message.hidden = !!items.length; calendarHost.hidden = false; - const events = eventsFor(items); + const range = getRange(); + if (!range) { calendarHost.hidden = true; return; } + const start = range.startCloseDate.slice(0, 10); + const end = range.endCloseDate.slice(0, 10); + const visibleRange = { start, end }; // Fiscal ranges end at the next period's start (exclusive). + const events = eventsFor(items).filter(event => event.start >= start && event.start < end); dayCounts = new Map(); - for (const event of events) dayCounts.set(event.start, (dayCounts.get(event.start) || 0) + 1); - for (const { badge, key } of dayBadges.values()) updateDayBadge(badge, key); - const anchor = initialDate(state.items); + dayEvents = new Map(); + for (const event of events) { + dayCounts.set(event.start, (dayCounts.get(event.start) || 0) + 1); + if (!dayEvents.has(event.start)) dayEvents.set(event.start, []); + dayEvents.get(event.start).push(event); + } + for (const { badge, key, cards } of dayBadges.values()) { updateDayBadge(badge, key); renderDayCards(cards, key); } + const anchor = start; if (!calendar) { try { library ||= loadLibrary(); calendar = new library.Calendar(calendarHost, { - initialView: "dayGridMonth", initialDate: anchor, height: "100%", expandRows: true, fixedWeekCount: false, + initialView: "referenceMonths", initialDate: anchor, height: "100%", fixedWeekCount: false, + views: { referenceMonths: { type: "multiMonth", visibleRange, dayMaxEvents: false, dayMaxEventRows: false } }, + visibleRange, validRange: visibleRange, showNonCurrentDates: false, + multiMonthMaxColumns: 1, multiMonthMinWidth: 0, + multiMonthTitleFormat: { month: "long", year: "numeric" }, datesSet: scheduleLayout, locale: "en", firstDay: 0, editable: false, selectable: false, eventInteractive: true, - headerToolbar: { left: "prev,next today", center: "title", right: "dayGridMonth,dayGridWeek" }, - buttonText: { today: "Today", month: "Month", week: "Week" }, - buttonHints: { prev: "Previous", next: "Next", today: "Today", dayGridMonth: "Month", dayGridWeek: "Week" }, - dayMaxEvents: 2, moreLinkText: count => `... +${count}`, displayEventTime: false, - moreLinkHint: count => `View ${count} more ${count === 1 ? "opportunity" : "opportunities"}`, - moreLinkClick: showDayOpportunities, + headerToolbar: false, + dayMaxEvents: false, dayMaxEventRows: false, displayEventTime: false, weekNumbers: true, weekNumberContent: ({ date }) => ({ domNodes: [node("span", "opportunities-calendar-fiscal-week", fiscalWeekLabel(date))] }), dayCellDidMount: ({ el, date }) => { const badge = node("span", "opportunities-calendar-day-count"); const key = dateKey(date); updateDayBadge(badge, key); - el.querySelector(".fc-daygrid-day-frame").append(badge); - dayBadges.set(el, { badge, key }); + const cards = node("div", "opportunities-calendar-day-cards"); + cards.tabIndex = 0; + cards.setAttribute("role", "region"); + cards.setAttribute("aria-label", `Opportunities for ${formatDate(key)}`); + renderDayCards(cards, key); + el.querySelector(".fc-daygrid-day-frame").append(badge, cards); + dayBadges.set(el, { badge, key, cards }); }, - dayCellWillUnmount: ({ el }) => { dayBadges.get(el)?.badge.remove(); dayBadges.delete(el); }, - eventOrder: "title", eventDisplay: "block", events, + dayCellWillUnmount: ({ el }) => { dayBadges.get(el)?.badge.remove(); dayBadges.get(el)?.cards.remove(); dayBadges.delete(el); }, + // MultiMonth imposes its own event limit. Render all cards in our scrollable day region. + eventOrder: "title", eventDisplay: "none", events, eventContent: ({ event }) => { const item = event.extendedProps.item; const card = node("div", "opportunities-calendar-event-content"); @@ -6292,7 +6407,15 @@ function createOpportunityCalendar({ environment, loadLibrary, getState, getItem } const signature = JSON.stringify(events); calendar.batchRendering(() => { - if (anchoredVersion !== getVersion()) { calendar.gotoDate(anchor); anchoredVersion = getVersion(); closeDetails(false); } + if (anchoredVersion !== getVersion()) { + positionToday = true; + calendar.setOption("views", { referenceMonths: { type: "multiMonth", visibleRange, dayMaxEvents: false, dayMaxEventRows: false } }); + calendar.setOption("visibleRange", visibleRange); + calendar.setOption("validRange", visibleRange); + calendar.gotoDate(anchor); anchoredVersion = getVersion(); closeDetails(false); + const scroller = calendarHost.querySelector?.(".fc-multimonth"); + if (scroller) scroller.scrollTop = 0; + } if (signature !== lastEvents) { calendar.removeAllEvents(); calendar.addEventSource(events); lastEvents = signature; closeDetails(false); } }); const missing = items.filter(item => !closeDate(item.EffectiveDate)); @@ -6306,7 +6429,7 @@ function createOpportunityCalendar({ environment, loadLibrary, getState, getItem } scheduleLayout(); } - return { mount, render, selectView, closeDetails, closeDate, eventsFor, initialDate, fiscalWeekLabel, visibleEventLimit }; + return { mount, render, selectView, closeDetails, closeDate, eventsFor, initialDate, fiscalWeekLabel }; } // Source: src/features/opportunities/dashboard.js @@ -6458,6 +6581,7 @@ function createOpportunitiesFilters({ saveFilterPreferences, stringifySearchValue, matchesActivities, + matchesProductType = () => true, environment }) { const { document } = environment; @@ -6778,7 +6902,8 @@ function createOpportunitiesFilters({ && (allCustomers || opportunitiesFilterState.selectedCustomerKeys.has(getCustomerKey(item))) && (allOwners || opportunitiesFilterState.selectedOwnerKeys.has(getOwnerKey(item))) && matchesTableSearch(item, normalizedSearch) - && matchesActivities(item); + && matchesActivities(item) + && matchesProductType(item); }); const column = OPPORTUNITIES_COLUMNS.find((candidate) => candidate.key === opportunitiesTableState.opportunitiesTableState.sortKey); @@ -7726,27 +7851,45 @@ function createProductWorkloads({ productsContentState, opportunitiesQueryState, function createProductsDetails({ OPPORTUNITIES_COLUMNS, setBadgeContent, - createAiSummaryAlert, createProjectionIndicator, + openProjection, formatOracleResponseDate, productsContentState, renderOpportunitiesTable, - requestGenerateAiSummary, environment }) { const { document } = environment; - function createProductsRampBadge(productsResult) { - const values = (Array.isArray(productsResult.items) ? productsResult.items : []) + function isBooking(products) { + return Boolean(products?.length) && products.every(item => !String(item?.WorkloadName_c ?? "").trim() || String(item.WorkloadName_c).trim() === "-"); + } + function createProductsRampBadge(productsResult, opportunity) { + const products = Array.isArray(productsResult.items) ? productsResult.items : []; + if (isBooking(products)) { + const badge = document.createElement("span"); + badge.className = "opportunities-extension-products-ramp"; + badge.setAttribute("data-booking", "true"); + badge.textContent = "Booking"; + badge.title = "Booking: no product has a Workload assigned."; + badge.setAttribute("aria-label", badge.title); + return badge; + } + const values = products .map(item => item && item.RampMonths_c) .map(value => value === null || value === undefined || String(value).trim() === "" ? "N/A" : String(value).trim()) .filter((value, index, items) => value !== "N/A" || items.indexOf(value) === index); if (!values.length) return null; - const badge = document.createElement("span"); + const badge = document.createElement("button"); + badge.type = "button"; badge.className = "opportunities-extension-products-ramp"; badge.setAttribute("data-missing", String(values.includes("N/A"))); setBadgeContent(badge, "ramp", values.join(" | ")); badge.title = `Ramp Months: ${values.join(", ")}`; badge.setAttribute("aria-label", badge.title); + badge.setAttribute("aria-haspopup", "dialog"); + badge.addEventListener("click", event => { + event.preventDefault(); event.stopPropagation(); + openProjection(productsResult.items, opportunity, badge); + }); return badge; } @@ -7754,7 +7897,6 @@ function createProductsDetails({ const number = String(optyNumber); if (productsContentState.expandedProductOptyNumbers.has(number)) return; productsContentState.expandedProductOptyNumbers.add(number); - requestGenerateAiSummary(number); renderOpportunitiesTable(); } @@ -7811,7 +7953,6 @@ function createProductsDetails({ summary.textContent = productsResult && productsResult.fromCache ? "Cached" : "Updated"; heading.append(title, summary); panel.append(heading); - panel.append(createAiSummaryAlert(optyNumber)); if (productsResult && productsResult.error) { const error = document.createElement("p"); @@ -7906,7 +8047,7 @@ function createProductsDetails({ return Number.isFinite(number) ? `${number}%` : "-"; } - return { expandProducts, createProductsRampBadge, createProductsCountButton, createProductsDetailRow, formatProductNumber, formatProductAmount, formatProductWinProbability }; + return { isBooking, expandProducts, createProductsRampBadge, createProductsCountButton, createProductsDetailRow, formatProductNumber, formatProductAmount, formatProductWinProbability }; } // Source: src/features/products/ramp-projection.js @@ -8045,6 +8186,15 @@ function createRampProjectionView({ MODAL_ID, compare, createAlertIcon, createCl } function createIndicator(product, opportunity) { const result = compare(product); + if (!product?.workload) { + const disabled = node("button", "opportunities-extension-icon-button opportunities-extension-projection-alert"); + disabled.type = "button"; + disabled.disabled = true; + disabled.title = "No Workload is available for this product."; + disabled.setAttribute("aria-label", disabled.title); + disabled.append(createAlertIcon()); + return disabled; + } if (result.status !== "divergent") { const text = node("span", "opportunities-extension-projection-status", result.status === "matched" ? "OK" : "-"); text.title = result.status === "matched" ? "Monthly forecast matches the ramp calculation." : result.reason; @@ -8081,10 +8231,10 @@ function createRampProjectionView({ MODAL_ID, compare, createAlertIcon, createCl }); return indicator; } - function open(product, opportunity, trigger) { + function open(product, opportunity, trigger, products = []) { const host = document.getElementById(MODAL_ID); const result = compare(product); - if (!host || host.hidden || result.status !== "divergent") return; + if (!host || host.hidden || !product) return; close(false); const modal = node("section", "opportunities-extension-action-form-modal opportunities-extension-projection-modal"); modal.setAttribute("role", "dialog"); @@ -8104,12 +8254,25 @@ function createRampProjectionView({ MODAL_ID, compare, createAlertIcon, createCl dismiss.addEventListener("click", () => close()); header.append(heading, dismiss); const body = node("div", "opportunities-extension-projection-body"); + let productSelect = null; + if (products.length > 1) { + const label = node("label", "", "Product "); + productSelect = node("select", "opportunities-extension-projection-product"); + productSelect.setAttribute("aria-label", "Product"); + products.forEach((item, index) => { + const option = node("option", "", `${item.ProdGroupName || "Product"} | ${item.WorkloadName_c || item.RevnId || index + 1}`); + option.value = String(index); option.selected = item === product; + productSelect.append(option); + }); + productSelect.addEventListener("change", () => open(products[Number(productSelect.value)], opportunity, trigger, products)); + label.append(productSelect); body.append(label); + } const details = node("dl", "opportunities-extension-projection-context"); const currency = product.RevnAmountCurcyCode || "USD"; for (const [label, value] of [ ["Customer", opportunity.CustomerAccount?.PartyUniqueName || "-"], ["Product", product.ProdGroupName || "-"], - ["Annual value", formatAmount(result.annual, currency)], ["Ramp months", String(result.ramp)], - ["Consumption start", formatDate(result.start)], ["First month", `${result.firstMonthDays}/${result.firstMonthTotalDays} days`] + ["Annual value", result.annual == null ? "-" : formatAmount(result.annual, currency)], ["Ramp months", String(result.ramp ?? "-")], + ["Consumption start", result.start ? formatDate(result.start) : "-"], ["First month", result.firstMonthDays == null ? "-" : `${result.firstMonthDays}/${result.firstMonthTotalDays} days`] ]) details.append(node("dt", "", label), node("dd", "", value)); body.append(details); const summary = node("p", "opportunities-extension-projection-summary", `${result.divergentCount} month${result.divergentCount === 1 ? "" : "s"} with a difference`); @@ -8154,6 +8317,7 @@ function createRampProjectionView({ MODAL_ID, compare, createAlertIcon, createCl body.append(errorMessage); const footer = node("footer", "opportunities-extension-projection-footer"); const updateButton = node("button", "opportunities-extension-projection-update", "Update estimates"); + updateButton.disabled = result.status !== "divergent"; updateButton.type = "button"; footer.append(node("span", "", "Difference = forecast - calculated."), updateButton); dialog.append(header, body, footer); @@ -8238,7 +8402,7 @@ function createRampProjectionView({ MODAL_ID, compare, createAlertIcon, createCl modal.addEventListener("keydown", event => { if (event.key === "Escape") { event.preventDefault(); event.stopPropagation(); close(); } if (event.key === "Tab") { - const controls = [dismiss, viewport, ...table.querySelectorAll("button"), updateButton].filter(control => !control.disabled); + const controls = [dismiss, productSelect, viewport, ...table.querySelectorAll("button"), updateButton].filter(control => control && !control.disabled); const index = controls.indexOf(document.activeElement); if (index < 0 || (event.shiftKey ? index === 0 : index === controls.length - 1)) { event.preventDefault(); controls[event.shiftKey ? controls.length - 1 : 0].focus(); @@ -8250,111 +8414,6 @@ function createRampProjectionView({ MODAL_ID, compare, createAlertIcon, createCl return { createIndicator, createOpportunityIndicator, open, close }; } -// Source: src/features/ai-summary/content.js -function createAiSummaryContent({ - aiSummaryState, - invalidateSalesCommonToken, - logRequestFailure, - logRequestStart, - logRequestSuccess, - readResponseBodyForDebug, - requestTokenRelaySalesCommon, - environment -}) { - const { document, fetch } = environment; - function requestGenerateAiSummary(optyNumber) { - const key = String(optyNumber); - const existing = aiSummaryState.aiSummariesByOptyNumber.get(key); - if (existing && existing.status === "loading") { - return existing.promise; - } - - const state = { status: "loading", summaryText: "", error: "", promise: null }; - aiSummaryState.aiSummariesByOptyNumber.set(key, state); - state.promise = (async () => { - let entry; - try { - let token = await requestTokenRelaySalesCommon(); - if (!token) { - throw new Error("Authentication is required to generate the summary."); - } - const path = "/api/sales-common/gen-ai/v1/summarizations/generate"; - const url = `https://eeho.fa.us2.oraclecloud.com${path}`; - const payload = { path, promptCode: "cx.sales.generate_opportunity_summary", object: "opportunities", puid: key }; - let response; - for (let attempt = 0; attempt < 2; attempt += 1) { - const headers = { Accept: "application/json", Authorization: `Bearer ${token}`, "Content-Type": "application/json" }; - entry = logRequestStart({ - name: "requestGenerateAiSummary", method: "POST", url, headers, - body: JSON.stringify(payload, null, 2), metadata: { optyNumber: key, attempt: attempt + 1 } - }); - response = await fetch(url, { - method: "POST", credentials: "include", headers, body: JSON.stringify(payload) - }); - logRequestSuccess(entry, response, await readResponseBodyForDebug(response)); - if (response.status !== 401 && response.status !== 403) { - break; - } - // A late failure for an old token must not discard a newly refreshed token. - invalidateSalesCommonToken(token); - if (attempt === 0) { - token = await requestTokenRelaySalesCommon(); - } - } - if (!response.ok) { - throw new Error(`requestGenerateAiSummary failed with status ${response.status}.`); - } - let data; - try { - data = await response.json(); - } catch (error) { - throw new Error("requestGenerateAiSummary returned an invalid JSON response."); - } - if (!data || typeof data.summaryText !== "string" || !data.summaryText.trim()) { - throw new Error("requestGenerateAiSummary returned an empty summary."); - } - state.summaryText = data.summaryText; - state.status = "ready"; - } catch (error) { - state.status = "error"; - state.error = error.message || "Unable to generate the AI summary."; - if (entry) { - logRequestFailure(entry, state.error); - } - } finally { - // Update only visible summaries, without reopening rows or rebuilding the table. - document.querySelectorAll(".opportunities-extension-ai-summary").forEach((alert) => { - if (alert.dataset.optyNumber === key) { - alert.replaceWith(createAiSummaryAlert(key)); - } - }); - } - })(); - return state.promise; - } - - function createAiSummaryAlert(optyNumber) { - const state = aiSummaryState.aiSummariesByOptyNumber.get(optyNumber); - const alert = document.createElement("div"); - alert.className = "opportunities-extension-ai-summary"; - alert.dataset.optyNumber = optyNumber; - alert.setAttribute("role", "status"); - alert.setAttribute("aria-live", "polite"); - alert.setAttribute("aria-busy", String(!state || state.status === "loading")); - const title = document.createElement("strong"); - title.textContent = "Summary generated by AI"; - const description = document.createElement("p"); - description.textContent = !state || state.status === "loading" - ? "Generating summary..." - : state.status === "error" ? state.error : state.summaryText; - alert.classList.toggle("opportunities-extension-ai-summary-error", Boolean(state && state.status === "error")); - alert.append(title, description); - return alert; - } - - return { requestGenerateAiSummary, createAiSummaryAlert }; -} - // Source: src/features/consumption/plans-action.js function createConsumptionPlansAction({ messageTypes, @@ -10667,11 +10726,13 @@ function createDebugContentLog({ }; debugState.requestLog.push(entry); + debugState.persist(entry); renderDebugPanel(); return entry; } function logRequestSuccess(entry, response, responseBody) { + if (!debugState.requestLog.includes(entry)) return; entry.status = response.ok ? "success" : "failed"; entry.completedAt = new Date(); entry.durationMs = entry.completedAt.getTime() - entry.startedAt.getTime(); @@ -10680,14 +10741,17 @@ function createDebugContentLog({ entry.responseHeaders = headersToObject(response.headers); entry.responseBody = responseBody.value; entry.responseBodyTruncated = responseBody.truncated; + debugState.persist(entry); renderDebugPanel(); } function logRequestFailure(entry, errorMessage) { + if (!debugState.requestLog.includes(entry)) return; entry.status = "failed"; entry.completedAt = new Date(); entry.durationMs = entry.completedAt.getTime() - entry.startedAt.getTime(); entry.error = errorMessage; + debugState.persist(entry); renderDebugPanel(); } @@ -10722,6 +10786,7 @@ function createDebugContentLog({ }; if (existing) Object.assign(existing, normalized); else debugState.requestLog.push(normalized); + debugState.persist(existing || normalized); }); renderDebugPanel(); } @@ -10857,12 +10922,13 @@ function createDebugContentView({ const categories = [ ["all", "All"], ["authentication", "Authentication"], ["opportunities", "Opportunities"], ["contacts", "Contacts"], ["products", "Products"], - ["ai", "AI"], ["consumption", "Consumption"], ["installBase", "Installed Base"], + ["consumption", "Consumption"], ["installBase", "Installed Base"], ["serviceRequests", "Service Requests"], ["actions", "Actions"], ["other", "Other"] ]; let selectedCategory = "all"; const expandedIds = new Set(); let returnFocus = null; + let generation = -1; function getRequestCategory(entry) { if (/^request(?:CurrentUser|TokenRelay|ConsumerTokenService|CustomerTokenService)/.test(entry.name)) return "authentication"; @@ -10870,7 +10936,6 @@ function createDebugContentView({ if (["requestQueryAccountContact", "requestPersistContact"].includes(entry.name)) return "contacts"; if (entry.name === "requestOpptyProducts") return "products"; if (["requestWlActions", "requestActionTeamMembers", "requestActionFindLookup", "requestMgmtAction"].includes(entry.name)) return "actions"; - if (entry.name === "requestGenerateAiSummary") return "ai"; if (entry.name === "requestInstallBase") return "installBase"; if (["requestSRInfo", "requestLookupTypePlatform", "requestInternalSrServices", "requestPostInternalServiceRequest"].includes(entry.name)) return "serviceRequests"; if (["requestCustomerServiceRequest", "resquestCrmServiceRequest", "requestInternalServiceRequest", "requestSrLookupPrimaryPillar", "requestSrLookupLanguage", "requestSrLookupTechPlatform", "requestSrLookupOpportunityBusiness", "requestResourceUser", "requestSrCatalog", "requestSrTokenCatalog", "requestPostServiceRequest"].includes(entry.name)) return "serviceRequests"; @@ -10899,6 +10964,7 @@ function createDebugContentView({ closeDebugPanel(); return; } + debugState.reload(); returnFocus = document.activeElement; // Escape nested stacking contexts and inert containers created by child modals. modal.append(panel); @@ -10912,6 +10978,8 @@ function createDebugContentView({ const panel = document.getElementById(DEBUG_PANEL_ID); if (!panel) return; panel.hidden = true; + panel.textContent = ""; + panel.onkeydown = null; if (returnFocus?.isConnected) returnFocus.focus({ preventScroll: true }); returnFocus = null; } @@ -10923,6 +10991,7 @@ function createDebugContentView({ return; } + if (generation !== debugState.generation) { expandedIds.clear(); selectedCategory = "all"; generation = debugState.generation; } for (const item of panel.querySelectorAll("details[data-request-id]")) { const id = item.getAttribute("data-request-id"); if (item.open) expandedIds.add(id); @@ -10947,7 +11016,8 @@ function createDebugContentView({ title.textContent = "Debug Requests"; const summary = document.createElement("p"); - summary.textContent = `${debugState.requestLog.length} request${debugState.requestLog.length === 1 ? "" : "s"} since modal opened.`; + summary.textContent = `${debugState.requestLog.length} request${debugState.requestLog.length === 1 ? "" : "s"} in the current query history.`; + if (debugState.storageError) summary.textContent += ` ${debugState.storageError}`; const running = debugState.requestLog.filter(entry => entry.status === "pending").length; if (running) summary.textContent += ` ${running} running.`; heading.append(title, summary); @@ -11083,6 +11153,9 @@ function createDebugContentView({ heading.append(name, summaryMeta); + item.append(heading); + const renderDetails = () => { + if (!item.open || item.children.length > 1) return; const lines = [ `${entry.method} ${entry.url}`, `Started: ${formatDebugTime(entry.startedAt)}`, @@ -11101,7 +11174,17 @@ function createDebugContentView({ appendDebugBlock(details, "Response Headers", formatHeaderBlock(entry.responseHeaders)); appendDebugBlock(details, "Response Body", formatDebugBody(entry.responseBody, entry.name)); - item.append(heading, details); + item.append(details); + + }; + item.addEventListener("toggle", () => { + if (item.open) { expandedIds.add(String(entry.id)); renderDetails(); } + else { + expandedIds.delete(String(entry.id)); + item.querySelector(".opportunities-extension-debug-details")?.remove(); + } + }); + renderDetails(); list.append(item); }); @@ -11227,7 +11310,7 @@ function createContentApplication(overrides = {}) { navigator: globalThis.navigator, crypto: globalThis.crypto, get localStorage() { return globalThis.localStorage; }, - fetch: globalThis.fetch, + fetch: globalThis.fetch && ((...args) => globalThis.fetch.call(undefined, ...args)), browser: globalThis.browser, chrome: globalThis.chrome, MutationObserver: globalThis.MutationObserver, @@ -11235,8 +11318,9 @@ function createContentApplication(overrides = {}) { requestAnimationFrame: globalThis.requestAnimationFrame, performance: globalThis.performance, cancelAnimationFrame: globalThis.cancelAnimationFrame, - setTimeout: globalThis.setTimeout, - clearTimeout: globalThis.clearTimeout, + setTimeout: globalThis.setTimeout && ((...args) => globalThis.setTimeout.call(undefined, ...args)), + clearTimeout: globalThis.clearTimeout && ((...args) => globalThis.clearTimeout.call(undefined, ...args)), + AbortController: globalThis.AbortController, matchMedia: globalThis.matchMedia, ...overrides }; @@ -11250,7 +11334,6 @@ function createContentApplication(overrides = {}) { const contracts = createContentContracts(); const searchableSelect = createSearchableSelect({ environment }); const authSessionState = createAuthSessionState(contracts); - const authSalesCommonState = createAuthSalesCommonState(); const opportunitiesQueryState = createOpportunitiesQueryState(); const tableSorting = createTableSorting({ environment }); const orgChartIcons = createOrgChartIcons({ environment }); @@ -11279,11 +11362,10 @@ function createContentApplication(overrides = {}) { const preferencesState = createPreferencesState(contracts); const activityCache = createActivityCache({ authSessionState, preferencesState, environment }); const productsContentState = createProductsContentState(); - const aiSummaryState = createAiSummaryState(); const consumptionPlansState = createConsumptionPlansState(); const consumptionTrendState = createConsumptionTrendState(); const opportunitiesDashboardState = createOpportunitiesDashboardState(contracts); - const debugState = createDebugState(); + const debugState = createDebugState(environment); const columns = createOpportunitiesColumns({ formatOracleResponseDate: (...args) => opportunitiesFormatters.formatOracleResponseDate(...args), formatRevenue: (...args) => opportunitiesFormatters.formatRevenue(...args), @@ -11449,11 +11531,6 @@ function createContentApplication(overrides = {}) { sendRuntimeMessage: (...args) => platformContentMessages.sendRuntimeMessage(...args), updateAuthBadge: (...args) => contentModal.updateAuthBadge(...args) }); - const authSalesCommon = createAuthSalesCommon({ - TOKEN_RELAY_URL: contracts.TOKEN_RELAY_URL, - authSalesCommonState, - requestTokenRelay: (...args) => authTokenRelay.requestTokenRelay(...args) - }); const authTokenRelay = createAuthTokenRelay({ authSessionState, TOKEN_RELAY_URL: contracts.TOKEN_RELAY_URL, @@ -11501,6 +11578,7 @@ function createContentApplication(overrides = {}) { setOpportunitiesTableState: (...args) => opportunitiesTable.setOpportunitiesTableState(...args) }); const fusionOpportunities = createFusionOpportunities({ + resetDebugRequests: () => debugState.reset(), OPPORTUNITIES_PAGE_LIMIT: contracts.OPPORTUNITIES_PAGE_LIMIT, OPPORTUNITIES_QUERY_URL: contracts.OPPORTUNITIES_QUERY_URL, isCurrentPeriodRequest: (...args) => opportunitiesController.isCurrentPeriodRequest(...args), @@ -11592,11 +11670,14 @@ function createContentApplication(overrides = {}) { isCurrentPeriodRequest: (...args) => opportunitiesController.isCurrentPeriodRequest(...args), environment }); const opportunityCalendar = createOpportunityCalendar({ + productTypeSelection: opportunitiesFilterState.selectedProductTypes, + onProductTypeChange: () => opportunitiesTable.renderOpportunitiesTable(), createViewIcon: view => contentIcons.createViewIcon(view), environment, loadLibrary: () => loadOpportunityCalendarLibrary(), getState: () => opportunitiesTableState.opportunitiesTableState, getItems: () => opportunitiesFilters.getSortedOpportunities(), getVersion: () => opportunitiesQueryState.periodRequestVersion, + getRange: () => opportunitiesQueryState.dateRange, formatRevenue: item => opportunitiesFormatters.formatRevenue(item), formatDate: value => opportunitiesFormatters.formatOracleResponseDate(value), getOwnerName: item => opportunitiesFormatters.getOwnerName(item), @@ -11651,6 +11732,13 @@ function createContentApplication(overrides = {}) { environment }); const opportunitiesFilters = createOpportunitiesFilters({ + matchesProductType: item => { + const selected = opportunitiesFilterState.selectedProductTypes; + if (selected.size === 2) return true; + const result = productsContentState.opptyProductsByNumber.get(String(item.OptyNumber)); + if (!result || result.error) return false; + return selected.has(productsDetails.isBooking(result.items) ? "Booking" : "Workload"); + }, matchesActivities: item => activityFilters.matches(item), CUSTOMER_FILTER_BUTTON_ID: contracts.CUSTOMER_FILTER_BUTTON_ID, CUSTOMER_FILTER_LIST_ID: contracts.CUSTOMER_FILTER_LIST_ID, @@ -11718,7 +11806,7 @@ function createContentApplication(overrides = {}) { const refreshAll = createRefreshAll({ createRefreshIcon: () => contentIcons.createRefreshIcon(), messageTypes, activityCache, opportunitiesQueryState, productsContentState, - consumptionPlansState, consumptionTrendState, aiSummaryState, environment, + consumptionPlansState, consumptionTrendState, environment, sendRuntimeMessage: (...args) => platformContentMessages.sendRuntimeMessage(...args), reload: (...args) => opportunitiesController.requestOpportunitiesForPeriod(...args), onFailure: error => opportunitiesTable.setOpportunitiesTableState({ status: "error", message: error.message || "Unable to refresh cached data." }), @@ -11739,7 +11827,8 @@ function createContentApplication(overrides = {}) { opportunitiesTable.setOpportunitiesTableState({ status: "loading", message: "Refreshing data..." }); } }); - const activityProgress = createActivityProgress({ MODAL_ID: contracts.MODAL_ID, environment }); + const activityProgress = createActivityProgress({ MODAL_ID: contracts.MODAL_ID, environment, + retrySession: () => srSessionPreparation.retry() }); const srSessionPreparation = createSrSessionPreparation({ async onReady() { const result = await platformContentMessages.sendRuntimeMessage({ type: messageTypes.requestResourceUser, emailAddress: currentUser.getUserId() }); @@ -11833,13 +11922,12 @@ function createContentApplication(overrides = {}) { }); const productsDetails = createProductsDetails({ createProjectionIndicator: (...args) => rampProjectionView.createIndicator(...args), + openProjection: (products, opportunity, trigger) => rampProjectionView.open(products[0], opportunity, trigger, products), setBadgeContent: (...args) => opportunityBadgeContent.setContent(...args), OPPORTUNITIES_COLUMNS: columns, - createAiSummaryAlert: (...args) => aiSummaryContent.createAiSummaryAlert(...args), formatOracleResponseDate: (...args) => opportunitiesFormatters.formatOracleResponseDate(...args), productsContentState, renderOpportunitiesTable: (...args) => opportunitiesTable.renderOpportunitiesTable(...args), - requestGenerateAiSummary: (...args) => aiSummaryContent.requestGenerateAiSummary(...args), environment }); const rampProjection = createRampProjection(); @@ -11867,16 +11955,6 @@ function createContentApplication(overrides = {}) { formatDate: value => opportunitiesFormatters.formatOracleResponseDate(value), environment }); - const aiSummaryContent = createAiSummaryContent({ - aiSummaryState, - invalidateSalesCommonToken: (...args) => authSalesCommon.invalidateSalesCommonToken(...args), - logRequestFailure: (...args) => debugContentLog.logRequestFailure(...args), - logRequestStart: (...args) => debugContentLog.logRequestStart(...args), - logRequestSuccess: (...args) => debugContentLog.logRequestSuccess(...args), - readResponseBodyForDebug: (...args) => debugContentLog.readResponseBodyForDebug(...args), - requestTokenRelaySalesCommon: (...args) => authSalesCommon.requestTokenRelaySalesCommon(...args), - environment - }); const customerTableSearch = createCustomerTableSearch({ environment }); const installBaseView = createInstallBaseView({ tableSorting, @@ -12032,13 +12110,11 @@ function createContentApplication(overrides = {}) { opportunityWorkloadActions, fusionCrmServiceRequests, opportunityCrmServiceRequests, authSessionState, - authSalesCommonState, opportunitiesQueryState, opportunitiesTableState, opportunitiesFilterState, preferencesState, productsContentState, - aiSummaryState, consumptionPlansState, consumptionTrendState, opportunitiesDashboardState, @@ -12050,7 +12126,6 @@ function createContentApplication(overrides = {}) { contentStyles, authContentSession, currentUser, - authSalesCommon, authTokenRelay, authXsrfContent, platformContentMessages, @@ -12075,7 +12150,6 @@ function createContentApplication(overrides = {}) { rampProjection, workloadForecastUpdate, rampProjectionView, - aiSummaryContent, consumptionPlansAction, installBaseAction, installBaseView, diff --git a/scripts/sources.cjs b/scripts/sources.cjs index 508a3a0..b9577a8 100644 --- a/scripts/sources.cjs +++ b/scripts/sources.cjs @@ -13,14 +13,12 @@ module.exports = { "src/shared/debug-body.js", "src/content/contracts.js", "src/auth/session-state.js", - "src/auth/sales-common-state.js", "src/features/opportunities/query-state.js", "src/features/opportunities/table-state.js", "src/features/opportunities/filter-state.js", "src/features/preferences/state.js", "src/features/preferences/request-cache.js", "src/features/products/content-state.js", - "src/features/ai-summary/state.js", "src/features/consumption/plans-state.js", "src/features/consumption/trend-state.js", "src/features/opportunities/dashboard-state.js", @@ -35,7 +33,6 @@ module.exports = { "src/content/styles.js", "src/auth/content-session.js", "src/auth/current-user.js", - "src/auth/sales-common.js", "src/auth/token-relay.js", "src/auth/xsrf-content.js", "src/platform/content-messages.js", @@ -72,7 +69,6 @@ module.exports = { "src/features/products/ramp-projection.js", "src/features/products/forecast-update.js", "src/features/products/ramp-projection-view.js", - "src/features/ai-summary/content.js", "src/features/consumption/plans-action.js", "src/features/install-base/action.js", "src/features/install-base/view.js", diff --git a/src/auth/content-session.js b/src/auth/content-session.js index 4b6958a..5823865 100644 --- a/src/auth/content-session.js +++ b/src/auth/content-session.js @@ -19,6 +19,7 @@ function createAuthContentSession({ return token; }) .catch((error) => { + authSessionState.tokenRelayRequest = null; authSessionState.accessToken = ""; authSessionState.principal = ""; authSessionState.authStatus = AUTH_STATUS.unauthenticated; diff --git a/src/auth/sales-common-state.js b/src/auth/sales-common-state.js deleted file mode 100644 index c6551e5..0000000 --- a/src/auth/sales-common-state.js +++ /dev/null @@ -1,7 +0,0 @@ -/** @returns {{salesCommonToken: null | {access_token: string, expiresAt: number}, salesCommonTokenRequest: null | Promise}} */ -function createAuthSalesCommonState() { - return { - salesCommonToken: null, - salesCommonTokenRequest: null - }; -} diff --git a/src/auth/sales-common.js b/src/auth/sales-common.js deleted file mode 100644 index 721f15d..0000000 --- a/src/auth/sales-common.js +++ /dev/null @@ -1,33 +0,0 @@ -function createAuthSalesCommon({ - TOKEN_RELAY_URL, - authSalesCommonState, - requestTokenRelay -}) { - function requestTokenRelaySalesCommon() { - if (authSalesCommonState.salesCommonToken && Date.now() < authSalesCommonState.salesCommonToken.expiresAt) { - return Promise.resolve(authSalesCommonState.salesCommonToken.access_token); - } - if (authSalesCommonState.salesCommonTokenRequest) { - return authSalesCommonState.salesCommonTokenRequest; - } - authSalesCommonState.salesCommonTokenRequest = requestTokenRelay({ - name: "requestTokenRelaySalesCommon", - url: `${TOKEN_RELAY_URL}?scopesfq=urn%3Aopc%3Aresource%3Afusion%3Aeeho%3Asales-common%2F`, - includeExpiry: true - }).then((token) => { - authSalesCommonState.salesCommonToken = token; - return token.access_token; - }).finally(() => { - authSalesCommonState.salesCommonTokenRequest = null; - }); - return authSalesCommonState.salesCommonTokenRequest; - } - - function invalidateSalesCommonToken(rejectedToken) { - if (authSalesCommonState.salesCommonToken && authSalesCommonState.salesCommonToken.access_token === rejectedToken) { - authSalesCommonState.salesCommonToken = null; - } - } - - return { requestTokenRelaySalesCommon, invalidateSalesCommonToken }; -} diff --git a/src/auth/token-relay.js b/src/auth/token-relay.js index 6e0b55a..522f595 100644 --- a/src/auth/token-relay.js +++ b/src/auth/token-relay.js @@ -34,17 +34,27 @@ function createAuthTokenRelay({ } const requestEntry = createTokenRelayRequestEntry(xsrfTokenSource, refreshResult, name, url); + const controller = environment.AbortController ? new environment.AbortController() : null; + let timeoutId; + const timeout = new Promise((_, reject) => { + if (!environment.setTimeout) return; + timeoutId = environment.setTimeout(() => { + reject(new Error("Token relay timed out after 30 seconds. Please try again.")); + controller?.abort(); + }, 30000); + }); try { - const response = await fetch(url, { + const response = await Promise.race([fetch(url, { method: "GET", credentials: "include", + ...(controller ? { signal: controller.signal } : {}), headers: { "x-xsrf-token": xsrfTokenSource.token } - }); + }), timeout]); - const responseBody = await readResponseBodyForDebug(response); + const responseBody = await Promise.race([readResponseBodyForDebug(response), timeout]); if (!response.ok) { logRequestSuccess(requestEntry, response, responseBody); @@ -63,8 +73,9 @@ function createAuthTokenRelay({ let responseData; try { - responseData = await response.json(); + responseData = await Promise.race([response.json(), timeout]); } catch (error) { + if (controller?.signal.aborted) throw error; logRequestSuccess(requestEntry, response, responseBody); if (!refreshAttempted) { @@ -109,6 +120,8 @@ function createAuthTokenRelay({ } catch (error) { logRequestFailure(requestEntry, error.message || "Request failed."); throw error; + } finally { + if (timeoutId !== undefined) environment.clearTimeout?.(timeoutId); } } } diff --git a/src/background/application.js b/src/background/application.js index 2381349..e5f9d2f 100644 --- a/src/background/application.js +++ b/src/background/application.js @@ -17,6 +17,7 @@ function createBackgroundApplication(overrides = {}) { getHttp: () => httpBackgroundJson }); const spaCurrentUser = createSpaCurrentUser({ + sessionStorage: (environment.browser || environment.chrome)?.storage?.session, fetchJson: (...args) => httpBackgroundJson.fetchJson(...args), fetchInTab: (tab, logs) => spaPageClient.requestIdentity(tab, logs), openSessionTab: sender => authConsumerSession.openConsumerTokenSessionTab(sender), diff --git a/src/content/application.js b/src/content/application.js index ad3a691..f20e304 100644 --- a/src/content/application.js +++ b/src/content/application.js @@ -5,7 +5,7 @@ function createContentApplication(overrides = {}) { navigator: globalThis.navigator, crypto: globalThis.crypto, get localStorage() { return globalThis.localStorage; }, - fetch: globalThis.fetch, + fetch: globalThis.fetch && ((...args) => globalThis.fetch.call(undefined, ...args)), browser: globalThis.browser, chrome: globalThis.chrome, MutationObserver: globalThis.MutationObserver, @@ -13,8 +13,9 @@ function createContentApplication(overrides = {}) { requestAnimationFrame: globalThis.requestAnimationFrame, performance: globalThis.performance, cancelAnimationFrame: globalThis.cancelAnimationFrame, - setTimeout: globalThis.setTimeout, - clearTimeout: globalThis.clearTimeout, + setTimeout: globalThis.setTimeout && ((...args) => globalThis.setTimeout.call(undefined, ...args)), + clearTimeout: globalThis.clearTimeout && ((...args) => globalThis.clearTimeout.call(undefined, ...args)), + AbortController: globalThis.AbortController, matchMedia: globalThis.matchMedia, ...overrides }; @@ -28,7 +29,6 @@ function createContentApplication(overrides = {}) { const contracts = createContentContracts(); const searchableSelect = createSearchableSelect({ environment }); const authSessionState = createAuthSessionState(contracts); - const authSalesCommonState = createAuthSalesCommonState(); const opportunitiesQueryState = createOpportunitiesQueryState(); const tableSorting = createTableSorting({ environment }); const orgChartIcons = createOrgChartIcons({ environment }); @@ -57,11 +57,10 @@ function createContentApplication(overrides = {}) { const preferencesState = createPreferencesState(contracts); const activityCache = createActivityCache({ authSessionState, preferencesState, environment }); const productsContentState = createProductsContentState(); - const aiSummaryState = createAiSummaryState(); const consumptionPlansState = createConsumptionPlansState(); const consumptionTrendState = createConsumptionTrendState(); const opportunitiesDashboardState = createOpportunitiesDashboardState(contracts); - const debugState = createDebugState(); + const debugState = createDebugState(environment); const columns = createOpportunitiesColumns({ formatOracleResponseDate: (...args) => opportunitiesFormatters.formatOracleResponseDate(...args), formatRevenue: (...args) => opportunitiesFormatters.formatRevenue(...args), @@ -227,11 +226,6 @@ function createContentApplication(overrides = {}) { sendRuntimeMessage: (...args) => platformContentMessages.sendRuntimeMessage(...args), updateAuthBadge: (...args) => contentModal.updateAuthBadge(...args) }); - const authSalesCommon = createAuthSalesCommon({ - TOKEN_RELAY_URL: contracts.TOKEN_RELAY_URL, - authSalesCommonState, - requestTokenRelay: (...args) => authTokenRelay.requestTokenRelay(...args) - }); const authTokenRelay = createAuthTokenRelay({ authSessionState, TOKEN_RELAY_URL: contracts.TOKEN_RELAY_URL, @@ -279,6 +273,7 @@ function createContentApplication(overrides = {}) { setOpportunitiesTableState: (...args) => opportunitiesTable.setOpportunitiesTableState(...args) }); const fusionOpportunities = createFusionOpportunities({ + resetDebugRequests: () => debugState.reset(), OPPORTUNITIES_PAGE_LIMIT: contracts.OPPORTUNITIES_PAGE_LIMIT, OPPORTUNITIES_QUERY_URL: contracts.OPPORTUNITIES_QUERY_URL, isCurrentPeriodRequest: (...args) => opportunitiesController.isCurrentPeriodRequest(...args), @@ -370,11 +365,14 @@ function createContentApplication(overrides = {}) { isCurrentPeriodRequest: (...args) => opportunitiesController.isCurrentPeriodRequest(...args), environment }); const opportunityCalendar = createOpportunityCalendar({ + productTypeSelection: opportunitiesFilterState.selectedProductTypes, + onProductTypeChange: () => opportunitiesTable.renderOpportunitiesTable(), createViewIcon: view => contentIcons.createViewIcon(view), environment, loadLibrary: () => loadOpportunityCalendarLibrary(), getState: () => opportunitiesTableState.opportunitiesTableState, getItems: () => opportunitiesFilters.getSortedOpportunities(), getVersion: () => opportunitiesQueryState.periodRequestVersion, + getRange: () => opportunitiesQueryState.dateRange, formatRevenue: item => opportunitiesFormatters.formatRevenue(item), formatDate: value => opportunitiesFormatters.formatOracleResponseDate(value), getOwnerName: item => opportunitiesFormatters.getOwnerName(item), @@ -429,6 +427,13 @@ function createContentApplication(overrides = {}) { environment }); const opportunitiesFilters = createOpportunitiesFilters({ + matchesProductType: item => { + const selected = opportunitiesFilterState.selectedProductTypes; + if (selected.size === 2) return true; + const result = productsContentState.opptyProductsByNumber.get(String(item.OptyNumber)); + if (!result || result.error) return false; + return selected.has(productsDetails.isBooking(result.items) ? "Booking" : "Workload"); + }, matchesActivities: item => activityFilters.matches(item), CUSTOMER_FILTER_BUTTON_ID: contracts.CUSTOMER_FILTER_BUTTON_ID, CUSTOMER_FILTER_LIST_ID: contracts.CUSTOMER_FILTER_LIST_ID, @@ -496,7 +501,7 @@ function createContentApplication(overrides = {}) { const refreshAll = createRefreshAll({ createRefreshIcon: () => contentIcons.createRefreshIcon(), messageTypes, activityCache, opportunitiesQueryState, productsContentState, - consumptionPlansState, consumptionTrendState, aiSummaryState, environment, + consumptionPlansState, consumptionTrendState, environment, sendRuntimeMessage: (...args) => platformContentMessages.sendRuntimeMessage(...args), reload: (...args) => opportunitiesController.requestOpportunitiesForPeriod(...args), onFailure: error => opportunitiesTable.setOpportunitiesTableState({ status: "error", message: error.message || "Unable to refresh cached data." }), @@ -517,7 +522,8 @@ function createContentApplication(overrides = {}) { opportunitiesTable.setOpportunitiesTableState({ status: "loading", message: "Refreshing data..." }); } }); - const activityProgress = createActivityProgress({ MODAL_ID: contracts.MODAL_ID, environment }); + const activityProgress = createActivityProgress({ MODAL_ID: contracts.MODAL_ID, environment, + retrySession: () => srSessionPreparation.retry() }); const srSessionPreparation = createSrSessionPreparation({ async onReady() { const result = await platformContentMessages.sendRuntimeMessage({ type: messageTypes.requestResourceUser, emailAddress: currentUser.getUserId() }); @@ -611,13 +617,12 @@ function createContentApplication(overrides = {}) { }); const productsDetails = createProductsDetails({ createProjectionIndicator: (...args) => rampProjectionView.createIndicator(...args), + openProjection: (products, opportunity, trigger) => rampProjectionView.open(products[0], opportunity, trigger, products), setBadgeContent: (...args) => opportunityBadgeContent.setContent(...args), OPPORTUNITIES_COLUMNS: columns, - createAiSummaryAlert: (...args) => aiSummaryContent.createAiSummaryAlert(...args), formatOracleResponseDate: (...args) => opportunitiesFormatters.formatOracleResponseDate(...args), productsContentState, renderOpportunitiesTable: (...args) => opportunitiesTable.renderOpportunitiesTable(...args), - requestGenerateAiSummary: (...args) => aiSummaryContent.requestGenerateAiSummary(...args), environment }); const rampProjection = createRampProjection(); @@ -645,16 +650,6 @@ function createContentApplication(overrides = {}) { formatDate: value => opportunitiesFormatters.formatOracleResponseDate(value), environment }); - const aiSummaryContent = createAiSummaryContent({ - aiSummaryState, - invalidateSalesCommonToken: (...args) => authSalesCommon.invalidateSalesCommonToken(...args), - logRequestFailure: (...args) => debugContentLog.logRequestFailure(...args), - logRequestStart: (...args) => debugContentLog.logRequestStart(...args), - logRequestSuccess: (...args) => debugContentLog.logRequestSuccess(...args), - readResponseBodyForDebug: (...args) => debugContentLog.readResponseBodyForDebug(...args), - requestTokenRelaySalesCommon: (...args) => authSalesCommon.requestTokenRelaySalesCommon(...args), - environment - }); const customerTableSearch = createCustomerTableSearch({ environment }); const installBaseView = createInstallBaseView({ tableSorting, @@ -810,13 +805,11 @@ function createContentApplication(overrides = {}) { opportunityWorkloadActions, fusionCrmServiceRequests, opportunityCrmServiceRequests, authSessionState, - authSalesCommonState, opportunitiesQueryState, opportunitiesTableState, opportunitiesFilterState, preferencesState, productsContentState, - aiSummaryState, consumptionPlansState, consumptionTrendState, opportunitiesDashboardState, @@ -828,7 +821,6 @@ function createContentApplication(overrides = {}) { contentStyles, authContentSession, currentUser, - authSalesCommon, authTokenRelay, authXsrfContent, platformContentMessages, @@ -853,7 +845,6 @@ function createContentApplication(overrides = {}) { rampProjection, workloadForecastUpdate, rampProjectionView, - aiSummaryContent, consumptionPlansAction, installBaseAction, installBaseView, diff --git a/src/content/modal.js b/src/content/modal.js index 49b5aa0..ec9ac0c 100644 --- a/src/content/modal.js +++ b/src/content/modal.js @@ -81,6 +81,8 @@ function createContentModal({ } function openOpportunitiesModal() { ensureExtensionStyles(); + const oldDebug = document.getElementById(DEBUG_PANEL_ID); + if (oldDebug) { oldDebug.hidden = true; oldDebug.textContent = ""; } debugState.debugSecretsVisible = false; const existingModal = document.getElementById(MODAL_ID); @@ -101,7 +103,6 @@ function createContentModal({ const overlay = document.createElement("div"); overlay.setAttribute("lang", "en"); - debugState.requestLog = []; authSessionState.tokenRelayRequest = null; authSessionState.consumerTokenServiceRequest = null; authSessionState.accessToken = ""; diff --git a/src/content/styles/redwood.css b/src/content/styles/redwood.css index b5b967e..fff14e8 100644 --- a/src/content/styles/redwood.css +++ b/src/content/styles/redwood.css @@ -918,51 +918,6 @@ color: #312d2a; } - .opportunities-extension-ai-summary { - box-sizing: border-box; - width: 100%; - min-width: 0; - margin: 0 0 12px; - padding: 12px 16px; - border: 1px solid #dedbd7; - border-radius: 6px; - background: #ffffff; - color: #312d2a; - font-size: 13px; - line-height: 1.5; - text-align: left; - white-space: normal; - overflow-wrap: anywhere; - } - - .opportunities-extension-ai-summary strong { - display: block; - font-size: 13px; - font-weight: 600; - } - - .opportunities-extension-ai-summary p { - margin: 4px 0 0; - font: inherit; - white-space: pre-wrap; - } - - .opportunities-extension-ai-summary-error { - color: #b42318; - border-color: #d9928b; - } - - .opportunities-extension-modal[data-theme="dark"] .opportunities-extension-ai-summary { - background: #292827; - color: #f6f4f2; - border-color: #5f5a55; - } - - .opportunities-extension-modal[data-theme="dark"] .opportunities-extension-ai-summary-error { - color: #ffb4ab; - border-color: #a45c55; - } - .opportunities-extension-products-detail-heading strong { font-size: 13px; } diff --git a/src/content/styles/tables.css b/src/content/styles/tables.css index 51eef14..08901c3 100644 --- a/src/content/styles/tables.css +++ b/src/content/styles/tables.css @@ -83,6 +83,22 @@ .opportunities-extension-modal .oe-time-grid table[data-table-layout="standard"] { table-layout: fixed; } .opportunities-extension-modal table[data-table-layout="standard"] > tbody > tr > th[scope="row"] { padding: 10px 12px; text-align: left; background: var(--oe-table-heading); border-bottom: 1px solid var(--oe-table-border); } /* Rate Card must fit its drawer; headings may wrap at spaces, never mid-word. */ +/* Overview reserves nearly half its width for the two primary descriptions. */ +.opportunities-extension-modal table.opportunities-extension-table[data-table-layout="standard"] { table-layout: fixed; } +.opportunities-extension-modal .opportunities-extension-table > thead > tr > th[data-column="name"] { width: 24%; } +.opportunities-extension-modal .opportunities-extension-table > thead > tr > th[data-column="customer"] { width: 24%; } +.opportunities-extension-modal .opportunities-extension-table > thead > tr > th[data-column="optyNumber"] { width: 7%; } +.opportunities-extension-modal .opportunities-extension-table > thead > tr > th[data-column="owner"] { width: 7%; } +.opportunities-extension-modal .opportunities-extension-table > thead > tr > th[data-column="revenue"] { width: 8%; } +.opportunities-extension-modal .opportunities-extension-table > thead > tr > th[data-column="closeDate"] { width: 7%; } +.opportunities-extension-modal .opportunities-extension-table > thead > tr > th[data-column="status"] { width: 5%; } +.opportunities-extension-modal .opportunities-extension-table > thead > tr > th[data-column="winProbability"] { width: 4%; } +.opportunities-extension-modal .opportunities-extension-table > thead > tr > th[data-column="stage"] { width: 6%; } +.opportunities-extension-modal .opportunities-extension-table > thead > tr > th[data-column="lastUpdateDate"] { width: 8%; } +.opportunities-extension-modal table.opportunities-extension-table[data-table-layout="standard"] > :is(thead, tbody) > tr > :is(th, td) { padding-inline: 6px; } +.opportunities-extension-modal table.opportunities-extension-table[data-table-layout="standard"] > thead > tr > th .opportunities-extension-sort-button { min-width: 0; gap: 4px; } +.opportunities-extension-modal table.opportunities-extension-table[data-table-layout="standard"] .opportunities-extension-sort-label { overflow: hidden; text-overflow: ellipsis; } + .opportunities-extension-modal table.opportunities-extension-ratecard-table[data-table-layout="standard"] { min-width: 0; table-layout: fixed; diff --git a/src/features/ai-summary/content.js b/src/features/ai-summary/content.js deleted file mode 100644 index ee26033..0000000 --- a/src/features/ai-summary/content.js +++ /dev/null @@ -1,103 +0,0 @@ -function createAiSummaryContent({ - aiSummaryState, - invalidateSalesCommonToken, - logRequestFailure, - logRequestStart, - logRequestSuccess, - readResponseBodyForDebug, - requestTokenRelaySalesCommon, - environment -}) { - const { document, fetch } = environment; - function requestGenerateAiSummary(optyNumber) { - const key = String(optyNumber); - const existing = aiSummaryState.aiSummariesByOptyNumber.get(key); - if (existing && existing.status === "loading") { - return existing.promise; - } - - const state = { status: "loading", summaryText: "", error: "", promise: null }; - aiSummaryState.aiSummariesByOptyNumber.set(key, state); - state.promise = (async () => { - let entry; - try { - let token = await requestTokenRelaySalesCommon(); - if (!token) { - throw new Error("Authentication is required to generate the summary."); - } - const path = "/api/sales-common/gen-ai/v1/summarizations/generate"; - const url = `https://eeho.fa.us2.oraclecloud.com${path}`; - const payload = { path, promptCode: "cx.sales.generate_opportunity_summary", object: "opportunities", puid: key }; - let response; - for (let attempt = 0; attempt < 2; attempt += 1) { - const headers = { Accept: "application/json", Authorization: `Bearer ${token}`, "Content-Type": "application/json" }; - entry = logRequestStart({ - name: "requestGenerateAiSummary", method: "POST", url, headers, - body: JSON.stringify(payload, null, 2), metadata: { optyNumber: key, attempt: attempt + 1 } - }); - response = await fetch(url, { - method: "POST", credentials: "include", headers, body: JSON.stringify(payload) - }); - logRequestSuccess(entry, response, await readResponseBodyForDebug(response)); - if (response.status !== 401 && response.status !== 403) { - break; - } - // A late failure for an old token must not discard a newly refreshed token. - invalidateSalesCommonToken(token); - if (attempt === 0) { - token = await requestTokenRelaySalesCommon(); - } - } - if (!response.ok) { - throw new Error(`requestGenerateAiSummary failed with status ${response.status}.`); - } - let data; - try { - data = await response.json(); - } catch (error) { - throw new Error("requestGenerateAiSummary returned an invalid JSON response."); - } - if (!data || typeof data.summaryText !== "string" || !data.summaryText.trim()) { - throw new Error("requestGenerateAiSummary returned an empty summary."); - } - state.summaryText = data.summaryText; - state.status = "ready"; - } catch (error) { - state.status = "error"; - state.error = error.message || "Unable to generate the AI summary."; - if (entry) { - logRequestFailure(entry, state.error); - } - } finally { - // Update only visible summaries, without reopening rows or rebuilding the table. - document.querySelectorAll(".opportunities-extension-ai-summary").forEach((alert) => { - if (alert.dataset.optyNumber === key) { - alert.replaceWith(createAiSummaryAlert(key)); - } - }); - } - })(); - return state.promise; - } - - function createAiSummaryAlert(optyNumber) { - const state = aiSummaryState.aiSummariesByOptyNumber.get(optyNumber); - const alert = document.createElement("div"); - alert.className = "opportunities-extension-ai-summary"; - alert.dataset.optyNumber = optyNumber; - alert.setAttribute("role", "status"); - alert.setAttribute("aria-live", "polite"); - alert.setAttribute("aria-busy", String(!state || state.status === "loading")); - const title = document.createElement("strong"); - title.textContent = "Summary generated by AI"; - const description = document.createElement("p"); - description.textContent = !state || state.status === "loading" - ? "Generating summary..." - : state.status === "error" ? state.error : state.summaryText; - alert.classList.toggle("opportunities-extension-ai-summary-error", Boolean(state && state.status === "error")); - alert.append(title, description); - return alert; - } - - return { requestGenerateAiSummary, createAiSummaryAlert }; -} diff --git a/src/features/ai-summary/state.js b/src/features/ai-summary/state.js deleted file mode 100644 index eedec2c..0000000 --- a/src/features/ai-summary/state.js +++ /dev/null @@ -1,5 +0,0 @@ -function createAiSummaryState() { - return { - aiSummariesByOptyNumber: new Map() - }; -} diff --git a/src/features/debug/content-log.js b/src/features/debug/content-log.js index 8d221dc..b0da071 100644 --- a/src/features/debug/content-log.js +++ b/src/features/debug/content-log.js @@ -26,11 +26,13 @@ function createDebugContentLog({ }; debugState.requestLog.push(entry); + debugState.persist(entry); renderDebugPanel(); return entry; } function logRequestSuccess(entry, response, responseBody) { + if (!debugState.requestLog.includes(entry)) return; entry.status = response.ok ? "success" : "failed"; entry.completedAt = new Date(); entry.durationMs = entry.completedAt.getTime() - entry.startedAt.getTime(); @@ -39,14 +41,17 @@ function createDebugContentLog({ entry.responseHeaders = headersToObject(response.headers); entry.responseBody = responseBody.value; entry.responseBodyTruncated = responseBody.truncated; + debugState.persist(entry); renderDebugPanel(); } function logRequestFailure(entry, errorMessage) { + if (!debugState.requestLog.includes(entry)) return; entry.status = "failed"; entry.completedAt = new Date(); entry.durationMs = entry.completedAt.getTime() - entry.startedAt.getTime(); entry.error = errorMessage; + debugState.persist(entry); renderDebugPanel(); } @@ -81,6 +86,7 @@ function createDebugContentLog({ }; if (existing) Object.assign(existing, normalized); else debugState.requestLog.push(normalized); + debugState.persist(existing || normalized); }); renderDebugPanel(); } diff --git a/src/features/debug/content-view.js b/src/features/debug/content-view.js index 474b2b7..c14db94 100644 --- a/src/features/debug/content-view.js +++ b/src/features/debug/content-view.js @@ -12,12 +12,13 @@ function createDebugContentView({ const categories = [ ["all", "All"], ["authentication", "Authentication"], ["opportunities", "Opportunities"], ["contacts", "Contacts"], ["products", "Products"], - ["ai", "AI"], ["consumption", "Consumption"], ["installBase", "Installed Base"], + ["consumption", "Consumption"], ["installBase", "Installed Base"], ["serviceRequests", "Service Requests"], ["actions", "Actions"], ["other", "Other"] ]; let selectedCategory = "all"; const expandedIds = new Set(); let returnFocus = null; + let generation = -1; function getRequestCategory(entry) { if (/^request(?:CurrentUser|TokenRelay|ConsumerTokenService|CustomerTokenService)/.test(entry.name)) return "authentication"; @@ -25,7 +26,6 @@ function createDebugContentView({ if (["requestQueryAccountContact", "requestPersistContact"].includes(entry.name)) return "contacts"; if (entry.name === "requestOpptyProducts") return "products"; if (["requestWlActions", "requestActionTeamMembers", "requestActionFindLookup", "requestMgmtAction"].includes(entry.name)) return "actions"; - if (entry.name === "requestGenerateAiSummary") return "ai"; if (entry.name === "requestInstallBase") return "installBase"; if (["requestSRInfo", "requestLookupTypePlatform", "requestInternalSrServices", "requestPostInternalServiceRequest"].includes(entry.name)) return "serviceRequests"; if (["requestCustomerServiceRequest", "resquestCrmServiceRequest", "requestInternalServiceRequest", "requestSrLookupPrimaryPillar", "requestSrLookupLanguage", "requestSrLookupTechPlatform", "requestSrLookupOpportunityBusiness", "requestResourceUser", "requestSrCatalog", "requestSrTokenCatalog", "requestPostServiceRequest"].includes(entry.name)) return "serviceRequests"; @@ -54,6 +54,7 @@ function createDebugContentView({ closeDebugPanel(); return; } + debugState.reload(); returnFocus = document.activeElement; // Escape nested stacking contexts and inert containers created by child modals. modal.append(panel); @@ -67,6 +68,8 @@ function createDebugContentView({ const panel = document.getElementById(DEBUG_PANEL_ID); if (!panel) return; panel.hidden = true; + panel.textContent = ""; + panel.onkeydown = null; if (returnFocus?.isConnected) returnFocus.focus({ preventScroll: true }); returnFocus = null; } @@ -78,6 +81,7 @@ function createDebugContentView({ return; } + if (generation !== debugState.generation) { expandedIds.clear(); selectedCategory = "all"; generation = debugState.generation; } for (const item of panel.querySelectorAll("details[data-request-id]")) { const id = item.getAttribute("data-request-id"); if (item.open) expandedIds.add(id); @@ -102,7 +106,8 @@ function createDebugContentView({ title.textContent = "Debug Requests"; const summary = document.createElement("p"); - summary.textContent = `${debugState.requestLog.length} request${debugState.requestLog.length === 1 ? "" : "s"} since modal opened.`; + summary.textContent = `${debugState.requestLog.length} request${debugState.requestLog.length === 1 ? "" : "s"} in the current query history.`; + if (debugState.storageError) summary.textContent += ` ${debugState.storageError}`; const running = debugState.requestLog.filter(entry => entry.status === "pending").length; if (running) summary.textContent += ` ${running} running.`; heading.append(title, summary); @@ -238,6 +243,9 @@ function createDebugContentView({ heading.append(name, summaryMeta); + item.append(heading); + const renderDetails = () => { + if (!item.open || item.children.length > 1) return; const lines = [ `${entry.method} ${entry.url}`, `Started: ${formatDebugTime(entry.startedAt)}`, @@ -256,7 +264,17 @@ function createDebugContentView({ appendDebugBlock(details, "Response Headers", formatHeaderBlock(entry.responseHeaders)); appendDebugBlock(details, "Response Body", formatDebugBody(entry.responseBody, entry.name)); - item.append(heading, details); + item.append(details); + + }; + item.addEventListener("toggle", () => { + if (item.open) { expandedIds.add(String(entry.id)); renderDetails(); } + else { + expandedIds.delete(String(entry.id)); + item.querySelector(".opportunities-extension-debug-details")?.remove(); + } + }); + renderDetails(); list.append(item); }); diff --git a/src/features/debug/state.js b/src/features/debug/state.js index 50ed41b..68127fe 100644 --- a/src/features/debug/state.js +++ b/src/features/debug/state.js @@ -1,6 +1,87 @@ -function createDebugState() { - return { +function createDebugState(environment = {}) { + let storage; + let tabId; + try { + storage = environment.localStorage; + const session = environment.window?.sessionStorage; + tabId = session?.getItem("opportunities-extension-debug-tab"); + if (!tabId) { + tabId = environment.crypto?.randomUUID?.() || `${Date.now()}-${Math.random().toString(36).slice(2)}`; + session?.setItem("opportunities-extension-debug-tab", tabId); + } + } catch { storage = null; } + const prefix = `opportunities-extension-debug:${tabId || "memory"}:`; + let timer = null; + const pending = new Map(); + const state = { requestLog: [], - debugSecretsVisible: false + debugSecretsVisible: false, + storageError: "", + generation: 0, + persist, + flush, + reload, + reset }; + function persist(entry) { + if (!state.requestLog.includes(entry)) return; + pending.set(entry.id, entry); + try { + if (timer === null && environment.setTimeout) timer = environment.setTimeout(flush, 100); + else if (!environment.setTimeout) flush(); + } catch { + // Debug persistence must never interrupt the request being recorded. + timer = null; + flush(); + } + } + function flush() { + if (timer !== null) environment.clearTimeout?.(timer); + timer = null; + if (!storage) { pending.clear(); return; } + try { + // Write only changed records, never stringify all response bodies per request. + for (const [id, entry] of pending) storage.setItem(`${prefix}${id}`, JSON.stringify(entry)); + storage.setItem(`${prefix}index`, JSON.stringify({ version: 1, count: state.requestLog.length })); + state.storageError = ""; + } catch { + state.storageError = "Local storage is unavailable or full. Requests remain available in memory for this session."; + } + pending.clear(); + } + function reload() { + flush(); + if (!storage || state.storageError) return; + try { + const index = JSON.parse(storage.getItem(`${prefix}index`) || "null"); + if (!index || index.version !== 1 || index.count !== state.requestLog.length) return; + const records = state.requestLog.map(entry => { + const saved = JSON.parse(storage.getItem(`${prefix}${entry.id}`) || "null"); + if (!saved || saved.id !== entry.id) throw new Error("Incomplete debug record"); + return { ...saved, startedAt: new Date(saved.startedAt), completedAt: saved.completedAt ? new Date(saved.completedAt) : null }; + }); + // Preserve the handles held by requests which are still in flight. + records.forEach((record, i) => Object.assign(state.requestLog[i], record)); + } catch { state.storageError = "Saved debug data could not be read. Showing this session's requests from memory."; } + } + function reset() { + if (timer !== null) environment.clearTimeout?.(timer); + timer = null; + pending.clear(); + state.requestLog = []; + state.debugSecretsVisible = false; + state.storageError = ""; + state.generation++; + try { + if (!storage) return; + const keys = []; + for (let i = 0; i < storage.length; i++) { + const key = storage.key(i); + if (key?.startsWith(prefix)) keys.push(key); + } + keys.forEach(key => storage.removeItem(key)); + storage.setItem(`${prefix}index`, JSON.stringify({ version: 1, count: 0 })); + } catch { state.storageError = "Local storage is unavailable. Requests will be kept in memory for this session."; } + } + return state; } diff --git a/src/features/opportunities/activity-progress.js b/src/features/opportunities/activity-progress.js index db7eb4d..ced3719 100644 --- a/src/features/opportunities/activity-progress.js +++ b/src/features/opportunities/activity-progress.js @@ -1,4 +1,4 @@ -function createActivityProgress({ MODAL_ID, environment }) { +function createActivityProgress({ MODAL_ID, environment, retrySession = () => {} }) { const { document, setTimeout, clearTimeout, matchMedia } = environment; const entries = new Map(); function update(key, state, completed = 0, total = null) { @@ -29,6 +29,15 @@ function createActivityProgress({ MODAL_ID, environment }) { : state === "complete" ? `${label} ready ${completed}` : `${label} ${count}`; if (key === "session") entry.badge.textContent = state === "complete" ? "SR session ready" : state === "error" ? "SR session unavailable" : "SR session loading"; entry.badge.title = key === "session" ? "Service Request session initialization" : key === "sr" ? "CRM service request records loaded" : "Product workloads checked for Actions in the selected Reference, regardless of display filters"; + if (key === "session" && state === "error") { + const retry = document.createElement("button"); + retry.type = "button"; + retry.className = "opportunities-extension-session-retry"; + retry.textContent = "Retry"; + retry.setAttribute("aria-label", "Retry Service Request session initialization"); + retry.addEventListener("click", () => { retry.disabled = true; retrySession(); }); + entry.badge.append(retry); + } if (state === "complete") entry.timer = setTimeout(() => { entry.badge.setAttribute("data-fading", "true"); const reduced = typeof matchMedia === "function" && matchMedia("(prefers-reduced-motion: reduce)").matches; diff --git a/src/features/opportunities/calendar.css b/src/features/opportunities/calendar.css index d397fba..ac92275 100644 --- a/src/features/opportunities/calendar.css +++ b/src/features/opportunities/calendar.css @@ -16,6 +16,22 @@ border: 1px solid var(--fc-border-color); border-radius: 4px; font: 13px/1.4 Arial, sans-serif; } .opportunities-calendar-grid { flex: 1 1 0; min-height: 0; min-width: 0; } +.opportunities-calendar-day-cards { position: absolute; inset: 27px 0 0; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; padding-bottom: 4px; } +.opportunities-calendar-day-card { display: block; width: calc(100% - 8px); padding: 0; text-align: left; font: inherit; } +.opportunities-calendar-day-card:focus-visible { outline: 2px solid #00758f; outline-offset: -2px; } +/* A single vertical sequence of months, with a separate scroll area per day. */ +.opportunities-extension-calendar .fc .fc-multimonth { overflow-y: auto; overflow-x: hidden; } +.opportunities-extension-calendar .fc .fc-multimonth-month { width: 100%; } +.opportunities-extension-calendar .fc .fc-multimonth-daygrid-table { height: auto !important; } +.opportunities-extension-calendar .fc .fc-multimonth .fc-daygrid-body tbody { height: auto; } +.opportunities-extension-calendar .fc .fc-multimonth .fc-daygrid-body tr { height: var(--calendar-week-height, 190px); } +.opportunities-extension-calendar .fc .fc-multimonth .fc-daygrid-day-frame { position: relative; height: var(--calendar-week-height, 190px); min-height: var(--calendar-week-height, 190px); } +.opportunities-extension-calendar .fc .fc-multimonth .fc-daygrid-day-events { + position: absolute; inset: 27px 0 0; overflow-y: auto; overflow-x: hidden; + margin: 0; padding-bottom: 4px; scrollbar-width: thin; +} +.opportunities-extension-calendar .fc .fc-multimonth .fc-daygrid-event-harness { position: relative !important; top: auto !important; left: auto !important; right: auto !important; } +.opportunities-extension-calendar .fc .fc-multimonth .fc-daygrid-day-bg { pointer-events: none; } .opportunities-extension-calendar .fc { min-width: 620px; } .opportunities-extension-calendar .fc .fc-toolbar { gap: 12px; flex-wrap: wrap; margin-bottom: 16px; } .opportunities-extension-calendar .fc .fc-toolbar-title { font-size: 18px; line-height: 26px; letter-spacing: 0; } @@ -103,3 +119,12 @@ .opportunities-calendar-day-count { top: 25px; } .fc-daygrid-week-number ~ .opportunities-calendar-day-count { left: 6px; } } +.opportunities-view-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--oe-table-heading-border); flex-wrap: wrap; } +.opportunities-view-bar .opportunities-extension-view-tabs { border-bottom: 0; } +.opportunities-product-type-filters { display: flex; gap: 8px; margin-left: auto; padding: 4px 0; } +.opportunities-product-type-filter { border: 1px solid #8f8a85; border-radius: 12px; padding: 3px 9px; background: transparent; color: inherit; font: 600 12px/16px Arial, sans-serif; cursor: pointer; } +.opportunities-product-type-filter[aria-pressed="true"][data-type="Booking"] { color: #714016; background: #fff0df; border-color: #c58b50; } +.opportunities-product-type-filter[aria-pressed="true"][data-type="Workload"] { color: #63358a; background: #f0e8f7; border-color: #bba5cf; } +.opportunities-extension-modal[data-theme="dark"] .opportunities-product-type-filter[aria-pressed="true"][data-type="Booking"] { color: #ffdbb5; background: #4b321e; border-color: #c99760; } +.opportunities-extension-modal[data-theme="dark"] .opportunities-product-type-filter[aria-pressed="true"][data-type="Workload"] { color: #ead5fc; background: #43334f; border-color: #9372ac; } +.opportunities-product-type-filter:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; } diff --git a/src/features/opportunities/calendar.js b/src/features/opportunities/calendar.js index cba9bc0..e110c17 100644 --- a/src/features/opportunities/calendar.js +++ b/src/features/opportunities/calendar.js @@ -1,6 +1,7 @@ -function createOpportunityCalendar({ environment, loadLibrary, getState, getItems, getVersion, +function createOpportunityCalendar({ environment, loadLibrary, getState, getItems, getVersion, getRange, formatRevenue, formatDate, getOwnerName, createDetailLink, createCopyButton, createCloseIcon, - createStageBadge, createStatusBadge, opportunityUrl, modalId, closeSrPopover, createViewIcon }) { + createStageBadge, createStatusBadge, opportunityUrl, modalId, closeSrPopover, createViewIcon, + productTypeSelection, onProductTypeChange }) { const { document } = environment; let elements = null; let calendar = null; @@ -10,34 +11,49 @@ function createOpportunityCalendar({ environment, loadLibrary, getState, getItem let details = null; let lastEvents = ""; let dayCounts = new Map(); + let dayEvents = new Map(); const dayBadges = new Map(); let resizeObserver = null; let layoutFrame = null; - let eventLimit = 2; - function visibleEventLimit(height, weeks, headerHeight) { - return Math.max(0, Math.min(2, Math.floor((height / Math.max(1, weeks) - headerHeight - 26) / 48))); - } + let positionToday = false; function scheduleLayout() { - for (const [name, icon] of [["today", "today"], ["dayGridMonth", "calendar"], ["dayGridWeek", "week"]]) { - const button = elements?.calendarHost.querySelector?.(`.fc-${name}-button`); - if (button && !button.querySelector("svg")) button.prepend(createViewIcon(icon)); - } const win = environment.window; if (!win?.requestAnimationFrame || layoutFrame !== null) return; layoutFrame = win.requestAnimationFrame(() => { layoutFrame = null; - if (!calendar || selectedView !== "calendar" || !elements.calendarHost.clientHeight) return; - calendar.updateSize(); - const frame = elements.calendarHost.querySelector(".fc-daygrid-day-frame"); - const events = frame?.querySelector(".fc-daygrid-day-events"); - if (!frame || !events) return; - const scroller = frame.closest(".fc-scroller"); - const weeks = elements.calendarHost.querySelectorAll(".fc-daygrid-body tr").length; - if (!scroller || !weeks) return; - elements.calendarHost.style.setProperty("--opportunities-calendar-weeks", String(weeks)); - const headerHeight = events.getBoundingClientRect().top - frame.getBoundingClientRect().top; - const limit = visibleEventLimit(scroller.clientHeight, weeks, headerHeight); - if (limit !== eventLimit) { eventLimit = limit; calendar.setOption("dayMaxEvents", limit); } + if (calendar && selectedView === "calendar") { + calendar.updateSize(); + if (positionToday && !elements.calendarHost.hidden) { + const scroller = elements.calendarHost.querySelector(".fc-multimonth"); + if (!scroller?.clientHeight) return; + const today = dateKey(new Date()); + const range = getRange(); + const cell = range && today >= range.startCloseDate.slice(0, 10) && today < range.endCloseDate.slice(0, 10) + ? elements.calendarHost.querySelector(`[data-date="${today}"]:not(.fc-day-other)`) + : null; + if (cell) { + const first = new Date(`${today}T12:00:00`); + first.setDate(first.getDate() - first.getDay() - 7); + const last = new Date(first); + last.setDate(last.getDate() + 20); + const start = dateKey(first), end = dateKey(last); + // A week crossing a month boundary has two rendered rows. Include both. + const rows = [...scroller.querySelectorAll(".fc-daygrid-body tr")].filter(row => + [...row.querySelectorAll("[data-date]:not(.fc-day-other)")].some(day => { + const date = day.getAttribute("data-date"); + return date >= start && date <= end; + })); + const headings = [...new Set(rows.map(row => row.closest(".fc-multimonth-month")?.querySelector(".fc-multimonth-header")))].filter(Boolean); + const headerSpace = headings.reduce((sum, header) => sum + header.getBoundingClientRect().height, 0); + const height = Math.max(48, Math.floor((scroller.clientHeight - headerSpace - 20) / Math.max(1, rows.length))); + elements.calendarHost.style.setProperty("--calendar-week-height", `${height}px`); + const target = rows[0] || cell; + const inset = (headings[0]?.getBoundingClientRect().height || 0) + 8; + scroller.scrollTop += target.getBoundingClientRect().top - scroller.getBoundingClientRect().top - inset; + } else scroller.scrollTop = 0; + positionToday = false; + } + } }); } function dateKey(date) { @@ -64,6 +80,21 @@ function createOpportunityCalendar({ environment, loadLibrary, getState, getItem badge.setAttribute("aria-label", badge.title); badge.setAttribute("data-empty", String(count === 0)); } + function renderDayCards(container, key) { + container.textContent = ""; + for (const event of dayEvents.get(key) || []) { + const item = event.extendedProps.item; + const button = node("button", `opportunities-calendar-day-card fc-daygrid-event ${event.classNames.join(" ")}`); + button.type = "button"; + const card = node("div", "opportunities-calendar-event-content"); + const summary = `${item.OptyNumber || "-"} | ${item.ForecastGroup_c || "N/A"} | ${formatRevenue(item)}`; + card.append(node("strong", "", event.title), node("span", "", summary)); + button.title = `${event.title}\n${summary}`; + button.append(card); + button.addEventListener("click", () => showDetails(item, button)); + container.append(button); + } + } function node(tag, className, text) { const el = document.createElement(tag); el.className = className; @@ -145,29 +176,10 @@ function createOpportunityCalendar({ environment, loadLibrary, getState, getItem content.append(identity, summary, badges); showDialog(item.Name || item.OptyNumber || "Opportunity", content, item.OptyNumber ? [link, copy] : [], trigger); } - function showDayOpportunities({ date, allSegs, jsEvent }) { - jsEvent.preventDefault(); - const trigger = jsEvent.currentTarget || elements?.tabs.calendar; - const content = node("div", "opportunities-calendar-day-list"); - const controls = []; - const events = new Map(allSegs.map(({ event }) => [event.id, event])); - for (const event of events.values()) { - const item = event.extendedProps.item; - const button = node("button", "opportunities-calendar-day-item"); button.type = "button"; - const summary = `${item.OptyNumber || "-"} | ${item.ForecastGroup_c || "N/A"} | ${formatRevenue(item)}`; - button.append(node("strong", "", event.title), node("span", "", summary)); - button.title = `${event.title}\n${summary}`; - button.addEventListener("click", () => showDetails(item, trigger)); - controls.push(button); content.append(button); - } - showDialog(`${formatDate(date.toISOString().slice(0, 10))} | ${events.size} ${events.size === 1 ? "opportunity" : "opportunities"}`, content, controls, trigger); - // A truthy non-string result prevents FullCalendar from opening its measured popover. - return true; - } function mount(body, tableSurface) { resizeObserver?.disconnect(); if (layoutFrame !== null) environment.window?.cancelAnimationFrame(layoutFrame); - layoutFrame = null; eventLimit = 2; + layoutFrame = null; calendar?.destroy(); calendar = null; lastEvents = ""; anchoredVersion = null; selectedView = "overview"; dayBadges.clear(); dayCounts.clear(); closeDetails(false); @@ -194,7 +206,26 @@ function createOpportunityCalendar({ environment, loadLibrary, getState, getItem }); tabs[key] = tab; tablist.append(tab); } - workspace.append(tablist, tableSurface, surface); body.append(workspace); + const viewbar = node("div", "opportunities-view-bar"); + viewbar.append(tablist); + if (productTypeSelection) { + const filters = node("div", "opportunities-product-type-filters"); + filters.setAttribute("role", "group"); filters.setAttribute("aria-label", "Opportunity type"); + for (const type of ["Booking", "Workload"]) { + const button = node("button", "opportunities-product-type-filter", type); + button.type = "button"; + button.setAttribute("data-type", type); + button.setAttribute("aria-pressed", String(productTypeSelection.has(type))); + button.addEventListener("click", () => { + if (productTypeSelection.has(type)) productTypeSelection.delete(type); else productTypeSelection.add(type); + button.setAttribute("aria-pressed", String(productTypeSelection.has(type))); + onProductTypeChange(); + }); + filters.append(button); + } + viewbar.append(filters); + } + workspace.append(viewbar, tableSurface, surface); body.append(workspace); elements = { workspace, tableSurface, surface, message, calendarHost, undated, tabs }; if (environment.window?.ResizeObserver) { resizeObserver = new environment.window.ResizeObserver(scheduleLayout); @@ -204,6 +235,7 @@ function createOpportunityCalendar({ environment, loadLibrary, getState, getItem } function selectView(view) { if (!elements || !["overview", "calendar"].includes(view)) return; + if (view === "calendar" && selectedView !== "calendar") positionToday = true; closeDetails(false); closeSrPopover(); selectedView = view; elements.tableSurface.hidden = view !== "overview"; elements.surface.hidden = view !== "calendar"; for (const [key, tab] of Object.entries(elements.tabs)) { @@ -217,41 +249,57 @@ function createOpportunityCalendar({ environment, loadLibrary, getState, getItem if (!elements || selectedView !== "calendar") return; const { surface, message, calendarHost, undated } = elements; surface.setAttribute("aria-busy", String(state.status === "loading")); - if (["loading", "error", "empty", "idle"].includes(state.status)) { + if (["loading", "error", "idle"].includes(state.status)) { message.textContent = state.message || (state.status === "loading" ? "Loading opportunities..." : "No opportunities found."); message.hidden = false; calendarHost.hidden = true; undated.hidden = true; closeDetails(false); return; } message.textContent = items.length ? "" : "No opportunities found."; message.hidden = !!items.length; calendarHost.hidden = false; - const events = eventsFor(items); + const range = getRange(); + if (!range) { calendarHost.hidden = true; return; } + const start = range.startCloseDate.slice(0, 10); + const end = range.endCloseDate.slice(0, 10); + const visibleRange = { start, end }; // Fiscal ranges end at the next period's start (exclusive). + const events = eventsFor(items).filter(event => event.start >= start && event.start < end); dayCounts = new Map(); - for (const event of events) dayCounts.set(event.start, (dayCounts.get(event.start) || 0) + 1); - for (const { badge, key } of dayBadges.values()) updateDayBadge(badge, key); - const anchor = initialDate(state.items); + dayEvents = new Map(); + for (const event of events) { + dayCounts.set(event.start, (dayCounts.get(event.start) || 0) + 1); + if (!dayEvents.has(event.start)) dayEvents.set(event.start, []); + dayEvents.get(event.start).push(event); + } + for (const { badge, key, cards } of dayBadges.values()) { updateDayBadge(badge, key); renderDayCards(cards, key); } + const anchor = start; if (!calendar) { try { library ||= loadLibrary(); calendar = new library.Calendar(calendarHost, { - initialView: "dayGridMonth", initialDate: anchor, height: "100%", expandRows: true, fixedWeekCount: false, + initialView: "referenceMonths", initialDate: anchor, height: "100%", fixedWeekCount: false, + views: { referenceMonths: { type: "multiMonth", visibleRange, dayMaxEvents: false, dayMaxEventRows: false } }, + visibleRange, validRange: visibleRange, showNonCurrentDates: false, + multiMonthMaxColumns: 1, multiMonthMinWidth: 0, + multiMonthTitleFormat: { month: "long", year: "numeric" }, datesSet: scheduleLayout, locale: "en", firstDay: 0, editable: false, selectable: false, eventInteractive: true, - headerToolbar: { left: "prev,next today", center: "title", right: "dayGridMonth,dayGridWeek" }, - buttonText: { today: "Today", month: "Month", week: "Week" }, - buttonHints: { prev: "Previous", next: "Next", today: "Today", dayGridMonth: "Month", dayGridWeek: "Week" }, - dayMaxEvents: 2, moreLinkText: count => `... +${count}`, displayEventTime: false, - moreLinkHint: count => `View ${count} more ${count === 1 ? "opportunity" : "opportunities"}`, - moreLinkClick: showDayOpportunities, + headerToolbar: false, + dayMaxEvents: false, dayMaxEventRows: false, displayEventTime: false, weekNumbers: true, weekNumberContent: ({ date }) => ({ domNodes: [node("span", "opportunities-calendar-fiscal-week", fiscalWeekLabel(date))] }), dayCellDidMount: ({ el, date }) => { const badge = node("span", "opportunities-calendar-day-count"); const key = dateKey(date); updateDayBadge(badge, key); - el.querySelector(".fc-daygrid-day-frame").append(badge); - dayBadges.set(el, { badge, key }); + const cards = node("div", "opportunities-calendar-day-cards"); + cards.tabIndex = 0; + cards.setAttribute("role", "region"); + cards.setAttribute("aria-label", `Opportunities for ${formatDate(key)}`); + renderDayCards(cards, key); + el.querySelector(".fc-daygrid-day-frame").append(badge, cards); + dayBadges.set(el, { badge, key, cards }); }, - dayCellWillUnmount: ({ el }) => { dayBadges.get(el)?.badge.remove(); dayBadges.delete(el); }, - eventOrder: "title", eventDisplay: "block", events, + dayCellWillUnmount: ({ el }) => { dayBadges.get(el)?.badge.remove(); dayBadges.get(el)?.cards.remove(); dayBadges.delete(el); }, + // MultiMonth imposes its own event limit. Render all cards in our scrollable day region. + eventOrder: "title", eventDisplay: "none", events, eventContent: ({ event }) => { const item = event.extendedProps.item; const card = node("div", "opportunities-calendar-event-content"); @@ -274,7 +322,15 @@ function createOpportunityCalendar({ environment, loadLibrary, getState, getItem } const signature = JSON.stringify(events); calendar.batchRendering(() => { - if (anchoredVersion !== getVersion()) { calendar.gotoDate(anchor); anchoredVersion = getVersion(); closeDetails(false); } + if (anchoredVersion !== getVersion()) { + positionToday = true; + calendar.setOption("views", { referenceMonths: { type: "multiMonth", visibleRange, dayMaxEvents: false, dayMaxEventRows: false } }); + calendar.setOption("visibleRange", visibleRange); + calendar.setOption("validRange", visibleRange); + calendar.gotoDate(anchor); anchoredVersion = getVersion(); closeDetails(false); + const scroller = calendarHost.querySelector?.(".fc-multimonth"); + if (scroller) scroller.scrollTop = 0; + } if (signature !== lastEvents) { calendar.removeAllEvents(); calendar.addEventSource(events); lastEvents = signature; closeDetails(false); } }); const missing = items.filter(item => !closeDate(item.EffectiveDate)); @@ -288,5 +344,5 @@ function createOpportunityCalendar({ environment, loadLibrary, getState, getItem } scheduleLayout(); } - return { mount, render, selectView, closeDetails, closeDate, eventsFor, initialDate, fiscalWeekLabel, visibleEventLimit }; + return { mount, render, selectView, closeDetails, closeDate, eventsFor, initialDate, fiscalWeekLabel }; } diff --git a/src/features/opportunities/columns.js b/src/features/opportunities/columns.js index e64aa38..f6aa772 100644 --- a/src/features/opportunities/columns.js +++ b/src/features/opportunities/columns.js @@ -7,7 +7,7 @@ function createOpportunitiesColumns({ formatOracleResponseDate, formatRevenue, f { key: "revenue", label: "Amount", value: (item) => getNestedValue(item, ["PrimaryRevenue", "RevnAmount"]), display: formatRevenue }, { key: "closeDate", label: "Close Date", value: (item) => item.EffectiveDate, display: (item) => formatOracleResponseDate(item.EffectiveDate) }, { key: "status", label: "Status", value: (item) => item.StatusCode, display: (item) => item.StatusCode }, - { key: "winProbability", label: "Win Probability", value: (item) => getNestedValue(item, ["PrimaryRevenue", "WinProb"]), display: formatWinProbability }, + { key: "winProbability", label: "Prob.", value: (item) => getNestedValue(item, ["PrimaryRevenue", "WinProb"]), display: formatWinProbability }, { key: "stage", label: "Stage", value: (item) => item.ForecastGroup_c, display: (item) => item.ForecastGroup_c }, { key: "lastUpdateDate", label: "Last Update Date", value: (item) => item.LastUpdateDate, display: (item) => formatOracleResponseDate(item.LastUpdateDate, true) } ]; diff --git a/src/features/opportunities/controller.js b/src/features/opportunities/controller.js index fd345cf..f302607 100644 --- a/src/features/opportunities/controller.js +++ b/src/features/opportunities/controller.js @@ -23,6 +23,7 @@ function createOpportunitiesController({ }) { async function requestOpportunitiesForPeriod(period) { const dateRange = getFiscalPeriodRange(period, new Date()); + opportunitiesQueryState.dateRange = dateRange; const requestVersion = ++opportunitiesQueryState.periodRequestVersion; resetWorkloadActions(); resetWorkloads(); diff --git a/src/features/opportunities/filter-state.js b/src/features/opportunities/filter-state.js index fe05ae5..eccbe71 100644 --- a/src/features/opportunities/filter-state.js +++ b/src/features/opportunities/filter-state.js @@ -1,5 +1,6 @@ function createOpportunitiesFilterState({ STAGE_OPTIONS, STATUS_OPTIONS } = {}) { return { + selectedProductTypes: new Set(["Booking", "Workload"]), selectedStages: new Set(STAGE_OPTIONS), selectedStatuses: new Set(STATUS_OPTIONS), selectedCustomerKeys: new Set(), diff --git a/src/features/opportunities/filters.js b/src/features/opportunities/filters.js index 60c731d..9489545 100644 --- a/src/features/opportunities/filters.js +++ b/src/features/opportunities/filters.js @@ -25,6 +25,7 @@ function createOpportunitiesFilters({ saveFilterPreferences, stringifySearchValue, matchesActivities, + matchesProductType = () => true, environment }) { const { document } = environment; @@ -345,7 +346,8 @@ function createOpportunitiesFilters({ && (allCustomers || opportunitiesFilterState.selectedCustomerKeys.has(getCustomerKey(item))) && (allOwners || opportunitiesFilterState.selectedOwnerKeys.has(getOwnerKey(item))) && matchesTableSearch(item, normalizedSearch) - && matchesActivities(item); + && matchesActivities(item) + && matchesProductType(item); }); const column = OPPORTUNITIES_COLUMNS.find((candidate) => candidate.key === opportunitiesTableState.opportunitiesTableState.sortKey); diff --git a/src/features/opportunities/query-state.js b/src/features/opportunities/query-state.js index 4cd3260..60489d5 100644 --- a/src/features/opportunities/query-state.js +++ b/src/features/opportunities/query-state.js @@ -1,5 +1,6 @@ function createOpportunitiesQueryState() { return { - periodRequestVersion: 0 + periodRequestVersion: 0, + dateRange: null }; } diff --git a/src/features/opportunities/refresh-all.js b/src/features/opportunities/refresh-all.js index aca5c1b..0500cc2 100644 --- a/src/features/opportunities/refresh-all.js +++ b/src/features/opportunities/refresh-all.js @@ -1,6 +1,6 @@ function createRefreshAll({ messageTypes, sendRuntimeMessage, activityCache, resetRelatedData, opportunitiesQueryState, productsContentState, consumptionPlansState, consumptionTrendState, - aiSummaryState, reload, onFailure, notify, createRefreshIcon, environment }) { + reload, onFailure, notify, createRefreshIcon, environment }) { let pending = null; function refresh(period) { if (pending) return pending; @@ -13,7 +13,6 @@ function createRefreshAll({ messageTypes, sendRuntimeMessage, activityCache, res consumptionTrendState.consumptionTrendCache = new Map(); consumptionTrendState.consumptionTrendWindowOffsets = new Map(); consumptionTrendState.consumptionTrendSeriesFilters = new Map(); - aiSummaryState.aiSummariesByOptyNumber = new Map(); resetRelatedData(); pending = (async () => { await activityCache.invalidate(); diff --git a/src/features/opportunities/sr-session-preparation.js b/src/features/opportunities/sr-session-preparation.js index 38623d0..9fbd775 100644 --- a/src/features/opportunities/sr-session-preparation.js +++ b/src/features/opportunities/sr-session-preparation.js @@ -1,22 +1,30 @@ function createSrSessionPreparation({ ensureCurrentUser, allowsCrmActivities, sendRequest, reportProgress, appendLog, onReady = async () => {} }) { let pending = null; + let failed = false; function ensure() { if (pending) return pending; pending = (async () => { + failed = false; try { - await ensureCurrentUser(); - if (!allowsCrmActivities()) return; reportProgress("running"); - const result = await sendRequest(); + // Navigation establishes SR cookies independently of the SPA identity. + // Consume user-dependent data only once both preparations have finished. + const [, result] = await Promise.all([ensureCurrentUser(), sendRequest()]); appendLog(result?.debugRequests || []); if (!result?.ok) throw new Error(result?.error || "Session initialization failed."); + if (!allowsCrmActivities()) { reportProgress("idle"); return; } reportProgress("complete"); await onReady(); } catch { + failed = true; reportProgress("error"); } })(); return pending; } - return { ensure }; + function retry() { + if (failed) pending = null; + return ensure(); + } + return { ensure, retry }; } diff --git a/src/features/opportunities/styles.css b/src/features/opportunities/styles.css index aa078d5..2d6671b 100644 --- a/src/features/opportunities/styles.css +++ b/src/features/opportunities/styles.css @@ -625,3 +625,9 @@ } .opportunities-extension-option-description { display: block; font-size: 12px; line-height: 1.4; margin-top: 4px; white-space: normal; overflow-wrap: anywhere; opacity: .85; } .opportunities-extension-action-form-dialog.opportunities-extension-internal-sr-dialog { width: min(760px, 100%); } +.opportunities-extension-session-retry { + margin-left: 8px; padding: 2px 6px; border: 1px solid currentColor; + border-radius: 4px; background: transparent; color: inherit; font: inherit; cursor: pointer; +} +.opportunities-extension-session-retry:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; } +.opportunities-extension-session-retry:disabled { opacity: .6; cursor: wait; } diff --git a/src/features/opportunities/table.js b/src/features/opportunities/table.js index 2c16a0c..79efb11 100644 --- a/src/features/opportunities/table.js +++ b/src/features/opportunities/table.js @@ -171,16 +171,16 @@ function createOpportunitiesTable({ const productsResult = item.OptyNumber && productsContentState.opptyProductsByNumber.get(String(item.OptyNumber)); if (productsResult) { productActions.append(createProductsCountButton(item.OptyNumber, productsResult)); - const rampBadge = createProductsRampBadge(productsResult); + const rampBadge = createProductsRampBadge(productsResult, item); if (rampBadge) productActions.append(rampBadge); } + const projectionIndicator = createProjectionIndicator(productsResult, item, + productsContentState.expandedProductOptyNumbers.has(String(item.OptyNumber))); + if (projectionIndicator) productActions.append(projectionIndicator); const srBadge = createCrmServiceRequestBadge(item.OptyNumber); if (srBadge) productActions.append(srBadge); const actionsBadge = createWorkloadActionsBadge(item.OptyNumber); if (actionsBadge) productActions.append(actionsBadge); - const projectionIndicator = createProjectionIndicator(productsResult, item, - productsContentState.expandedProductOptyNumbers.has(String(item.OptyNumber))); - if (projectionIndicator) productActions.append(projectionIndicator); nameCellContent.append(opportunityLink, productActions); cell.append(nameCellContent); } else if (column.key === "optyNumber" && item.OptyNumber) { diff --git a/src/features/org-chart/view.js b/src/features/org-chart/view.js index 9d23cbb..7f588ae 100644 --- a/src/features/org-chart/view.js +++ b/src/features/org-chart/view.js @@ -129,7 +129,7 @@ function createOrgChartView({ environment, tableSorting, model, loadLayout, icon person = entry.nodes.find(node => node.id === person.id) || person; const overlay = el("div", "oe-org-confirm"), panel = el("section", "opportunities-extension-action-form-dialog oe-org-dialog oe-contact-opportunities"); panel.setAttribute("role", "dialog"); panel.setAttribute("aria-modal", "true"); panel.setAttribute("aria-labelledby", "oe-contact-opportunities-title"); - const header = el("header", "oe-org-editor-header"), title = el("h3", "", "Opportunities — " + person.name); title.id = "oe-contact-opportunities-title"; + const header = el("header", "oe-org-editor-header"), title = el("h3", "", "Opportunities | " + person.name); title.id = "oe-contact-opportunities-title"; let closed = false, offset = 0, partyNumber = person.PartyNumber; const current = () => !closed && active === entry; function finish() { closed = true; overlay.remove(); entry.confirmation = null; entry.contactCleanup = null; dialog.inert = false; trigger.focus(); } diff --git a/src/features/products/details.js b/src/features/products/details.js index 0e3e75b..e960f2a 100644 --- a/src/features/products/details.js +++ b/src/features/products/details.js @@ -1,27 +1,45 @@ function createProductsDetails({ OPPORTUNITIES_COLUMNS, setBadgeContent, - createAiSummaryAlert, createProjectionIndicator, + openProjection, formatOracleResponseDate, productsContentState, renderOpportunitiesTable, - requestGenerateAiSummary, environment }) { const { document } = environment; - function createProductsRampBadge(productsResult) { - const values = (Array.isArray(productsResult.items) ? productsResult.items : []) + function isBooking(products) { + return Boolean(products?.length) && products.every(item => !String(item?.WorkloadName_c ?? "").trim() || String(item.WorkloadName_c).trim() === "-"); + } + function createProductsRampBadge(productsResult, opportunity) { + const products = Array.isArray(productsResult.items) ? productsResult.items : []; + if (isBooking(products)) { + const badge = document.createElement("span"); + badge.className = "opportunities-extension-products-ramp"; + badge.setAttribute("data-booking", "true"); + badge.textContent = "Booking"; + badge.title = "Booking: no product has a Workload assigned."; + badge.setAttribute("aria-label", badge.title); + return badge; + } + const values = products .map(item => item && item.RampMonths_c) .map(value => value === null || value === undefined || String(value).trim() === "" ? "N/A" : String(value).trim()) .filter((value, index, items) => value !== "N/A" || items.indexOf(value) === index); if (!values.length) return null; - const badge = document.createElement("span"); + const badge = document.createElement("button"); + badge.type = "button"; badge.className = "opportunities-extension-products-ramp"; badge.setAttribute("data-missing", String(values.includes("N/A"))); setBadgeContent(badge, "ramp", values.join(" | ")); badge.title = `Ramp Months: ${values.join(", ")}`; badge.setAttribute("aria-label", badge.title); + badge.setAttribute("aria-haspopup", "dialog"); + badge.addEventListener("click", event => { + event.preventDefault(); event.stopPropagation(); + openProjection(productsResult.items, opportunity, badge); + }); return badge; } @@ -29,7 +47,6 @@ function createProductsDetails({ const number = String(optyNumber); if (productsContentState.expandedProductOptyNumbers.has(number)) return; productsContentState.expandedProductOptyNumbers.add(number); - requestGenerateAiSummary(number); renderOpportunitiesTable(); } @@ -86,7 +103,6 @@ function createProductsDetails({ summary.textContent = productsResult && productsResult.fromCache ? "Cached" : "Updated"; heading.append(title, summary); panel.append(heading); - panel.append(createAiSummaryAlert(optyNumber)); if (productsResult && productsResult.error) { const error = document.createElement("p"); @@ -181,5 +197,5 @@ function createProductsDetails({ return Number.isFinite(number) ? `${number}%` : "-"; } - return { expandProducts, createProductsRampBadge, createProductsCountButton, createProductsDetailRow, formatProductNumber, formatProductAmount, formatProductWinProbability }; + return { isBooking, expandProducts, createProductsRampBadge, createProductsCountButton, createProductsDetailRow, formatProductNumber, formatProductAmount, formatProductWinProbability }; } diff --git a/src/features/products/ramp-projection-view.js b/src/features/products/ramp-projection-view.js index 0465d86..32a77ce 100644 --- a/src/features/products/ramp-projection-view.js +++ b/src/features/products/ramp-projection-view.js @@ -19,6 +19,15 @@ function createRampProjectionView({ MODAL_ID, compare, createAlertIcon, createCl } function createIndicator(product, opportunity) { const result = compare(product); + if (!product?.workload) { + const disabled = node("button", "opportunities-extension-icon-button opportunities-extension-projection-alert"); + disabled.type = "button"; + disabled.disabled = true; + disabled.title = "No Workload is available for this product."; + disabled.setAttribute("aria-label", disabled.title); + disabled.append(createAlertIcon()); + return disabled; + } if (result.status !== "divergent") { const text = node("span", "opportunities-extension-projection-status", result.status === "matched" ? "OK" : "-"); text.title = result.status === "matched" ? "Monthly forecast matches the ramp calculation." : result.reason; @@ -55,10 +64,10 @@ function createRampProjectionView({ MODAL_ID, compare, createAlertIcon, createCl }); return indicator; } - function open(product, opportunity, trigger) { + function open(product, opportunity, trigger, products = []) { const host = document.getElementById(MODAL_ID); const result = compare(product); - if (!host || host.hidden || result.status !== "divergent") return; + if (!host || host.hidden || !product) return; close(false); const modal = node("section", "opportunities-extension-action-form-modal opportunities-extension-projection-modal"); modal.setAttribute("role", "dialog"); @@ -78,12 +87,25 @@ function createRampProjectionView({ MODAL_ID, compare, createAlertIcon, createCl dismiss.addEventListener("click", () => close()); header.append(heading, dismiss); const body = node("div", "opportunities-extension-projection-body"); + let productSelect = null; + if (products.length > 1) { + const label = node("label", "", "Product "); + productSelect = node("select", "opportunities-extension-projection-product"); + productSelect.setAttribute("aria-label", "Product"); + products.forEach((item, index) => { + const option = node("option", "", `${item.ProdGroupName || "Product"} | ${item.WorkloadName_c || item.RevnId || index + 1}`); + option.value = String(index); option.selected = item === product; + productSelect.append(option); + }); + productSelect.addEventListener("change", () => open(products[Number(productSelect.value)], opportunity, trigger, products)); + label.append(productSelect); body.append(label); + } const details = node("dl", "opportunities-extension-projection-context"); const currency = product.RevnAmountCurcyCode || "USD"; for (const [label, value] of [ ["Customer", opportunity.CustomerAccount?.PartyUniqueName || "-"], ["Product", product.ProdGroupName || "-"], - ["Annual value", formatAmount(result.annual, currency)], ["Ramp months", String(result.ramp)], - ["Consumption start", formatDate(result.start)], ["First month", `${result.firstMonthDays}/${result.firstMonthTotalDays} days`] + ["Annual value", result.annual == null ? "-" : formatAmount(result.annual, currency)], ["Ramp months", String(result.ramp ?? "-")], + ["Consumption start", result.start ? formatDate(result.start) : "-"], ["First month", result.firstMonthDays == null ? "-" : `${result.firstMonthDays}/${result.firstMonthTotalDays} days`] ]) details.append(node("dt", "", label), node("dd", "", value)); body.append(details); const summary = node("p", "opportunities-extension-projection-summary", `${result.divergentCount} month${result.divergentCount === 1 ? "" : "s"} with a difference`); @@ -128,6 +150,7 @@ function createRampProjectionView({ MODAL_ID, compare, createAlertIcon, createCl body.append(errorMessage); const footer = node("footer", "opportunities-extension-projection-footer"); const updateButton = node("button", "opportunities-extension-projection-update", "Update estimates"); + updateButton.disabled = result.status !== "divergent"; updateButton.type = "button"; footer.append(node("span", "", "Difference = forecast - calculated."), updateButton); dialog.append(header, body, footer); @@ -212,7 +235,7 @@ function createRampProjectionView({ MODAL_ID, compare, createAlertIcon, createCl modal.addEventListener("keydown", event => { if (event.key === "Escape") { event.preventDefault(); event.stopPropagation(); close(); } if (event.key === "Tab") { - const controls = [dismiss, viewport, ...table.querySelectorAll("button"), updateButton].filter(control => !control.disabled); + const controls = [dismiss, productSelect, viewport, ...table.querySelectorAll("button"), updateButton].filter(control => control && !control.disabled); const index = controls.indexOf(document.activeElement); if (index < 0 || (event.shiftKey ? index === 0 : index === controls.length - 1)) { event.preventDefault(); controls[event.shiftKey ? controls.length - 1 : 0].focus(); diff --git a/src/features/products/ramp-projection.css b/src/features/products/ramp-projection.css index 3c5ffb4..3b56970 100644 --- a/src/features/products/ramp-projection.css +++ b/src/features/products/ramp-projection.css @@ -4,6 +4,12 @@ .opportunities-extension-projection-alert svg { display: block; flex: none; width: 19px; height: 19px; } .opportunities-extension-cell-actions > .opportunities-extension-opportunity-projection-alert { width: 20px; height: 20px; flex-basis: 20px; } .opportunities-extension-projection-alert:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; } +.opportunities-extension-modal .opportunities-extension-projection-alert:disabled { color: #8f8a85; opacity: .55; cursor: not-allowed; background: transparent; } +.opportunities-extension-products-ramp { cursor: pointer; font-family: inherit; } +.opportunities-extension-products-ramp[data-booking="true"] { cursor: default; color: #714016; background: #fff0df; border-color: #c58b50; } +.opportunities-extension-modal[data-theme="dark"] .opportunities-extension-products-ramp[data-booking="true"] { color: #ffdbb5; background: #4b321e; border-color: #c99760; } +.opportunities-extension-products-ramp:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; } +.opportunities-extension-projection-product { max-width: 100%; margin: 0 0 16px; padding: 8px; font: inherit; color: inherit; background: inherit; } .opportunities-extension-action-form-dialog.opportunities-extension-projection-dialog { width: min(850px, 100%); display: flex; flex-direction: column; overflow: hidden; } .opportunities-extension-projection-dialog > header { flex: 0 0 auto; padding: 18px 20px; } .opportunities-extension-projection-dialog .opportunities-extension-action-form-heading { min-width: 0; overflow-wrap: anywhere; } diff --git a/src/services/fusion/opportunities.js b/src/services/fusion/opportunities.js index 5398879..942da6a 100644 --- a/src/services/fusion/opportunities.js +++ b/src/services/fusion/opportunities.js @@ -8,6 +8,7 @@ function createFusionOpportunities({ maskToken, getOpportunityTypeValues, readResponseBodyForDebug, + resetDebugRequests = () => {}, environment }) { const { fetch } = environment; @@ -35,6 +36,8 @@ function createFusionOpportunities({ if (!isCurrentPeriodRequest(requestVersion)) return null; const payload = createOpportunitiesQueryPayload(dateRange, offset, savedSearchNumber); const requestBody = JSON.stringify(payload); + // One history per query, preserving all pages of the same result set. + if (page === 1) resetDebugRequests(); const requestEntry = logRequestStart({ name: "requestOpportunities", method: "POST", diff --git a/src/services/fusion/sr-details.js b/src/services/fusion/sr-details.js index 54e83be..ea7cb8a 100644 --- a/src/services/fusion/sr-details.js +++ b/src/services/fusion/sr-details.js @@ -85,7 +85,7 @@ function createFusionSrDetails({ fetchJson, tabsCreate, tabsRemove, supportsFire let session = sessions.get(key); if (!session) { const details = { - url: "https://comcipapic-oalprod.integration.ocp.oraclecloud.com/ic/builder/rt/SeaaS_initiation/live/webApps/external/", + url: "https://comcipapic-oalprod.integration.ocp.oraclecloud.com/ic/builder/rt/oalset_semc/live/webApps/Dashboard/?page=shell&shell=main&main=manageresourcerequests", active: false }; if (Number.isInteger(sender?.tab?.windowId)) details.windowId = sender.tab.windowId; @@ -102,8 +102,8 @@ function createFusionSrDetails({ fetchJson, tabsCreate, tabsRemove, supportsFire let tab; try { tab = await session.tab; - const deadline = Date.now() + 60000; - for (let attempt = 0; attempt < 240 && Date.now() < deadline; attempt += 1) { + const deadline = Date.now() + 70000; + for (let attempt = 0; attempt < 280 && Date.now() < deadline; attempt += 1) { const pendingCookies = initialize && attempt === 0 ? sessionCookies(sender) : waitForSessionCookies(session, sender); const cookies = await (initialize ? Promise.race([session.cookieReady, pendingCookies]) : pendingCookies); @@ -122,7 +122,7 @@ function createFusionSrDetails({ fetchJson, tabsCreate, tabsRemove, supportsFire if (error.httpStatus !== 401) throw error; } } - throw new Error("Service Request session could not be established after 60 seconds. Sign in to Oracle and retry."); + throw new Error("Service Request session could not be established after 70 seconds. Sign in to Oracle and retry."); } catch (error) { error.debugRequests = logs; throw error; diff --git a/src/services/spa/current-user.js b/src/services/spa/current-user.js index 0719877..e694e0a 100644 --- a/src/services/spa/current-user.js +++ b/src/services/spa/current-user.js @@ -1,9 +1,26 @@ -function createSpaCurrentUser({ fetchJson, fetchInTab, openSessionTab, waitForSession, closeSessionTab, sessionUrl }) { +function createSpaCurrentUser({ fetchJson, fetchInTab, openSessionTab, waitForSession, closeSessionTab, sessionUrl, sessionStorage }) { const pending = new Map(); + const identities = new Map(); function requestCurrentUser(sender) { - const key = JSON.stringify([sender?.tab?.windowId ?? null, sender?.tab?.cookieStoreId ?? "", Boolean(sender?.tab?.incognito)]); + // Windows share cookies; Firefox containers and private sessions do not. + const key = JSON.stringify([sender?.tab?.cookieStoreId ?? "", Boolean(sender?.tab?.incognito)]); + if (identities.has(key)) return Promise.resolve({ ok: true, user: identities.get(key), debugRequests: [] }); if (!pending.has(key)) { - pending.set(key, loadCurrentUser(sender).finally(() => pending.delete(key))); + pending.set(key, (async () => { + const storageKey = `opportunities-extension-current-user:${key}`; + try { + const stored = (await sessionStorage?.get(storageKey))?.[storageKey]; + if (stored && typeof stored.id === "string" && stored.id.trim() && typeof stored.name === "string" && stored.name.trim() + && Array.isArray(stored.roles) && stored.roles.every(role => typeof role === "string" && role.trim())) { + identities.set(key, stored); + return { ok: true, user: stored, debugRequests: [] }; + } + } catch { /* Memory cache still works if session storage is unavailable. */ } + const result = await loadCurrentUser(sender); + identities.set(key, result.user); + try { await sessionStorage?.set({ [storageKey]: result.user }); } catch { /* Keep the successful in-memory identity. */ } + return result; + })().finally(() => pending.delete(key))); } return pending.get(key); } diff --git a/tests/aiSummary.test.cjs b/tests/aiSummary.test.cjs deleted file mode 100644 index a5be4fb..0000000 --- a/tests/aiSummary.test.cjs +++ /dev/null @@ -1,219 +0,0 @@ -const assert = require("node:assert/strict"); -const { loadApplication } = require("./support/application.cjs"); - -class Element { - constructor(tag) { - this.tag = tag; - this.children = []; - this.dataset = {}; - this.attributes = {}; - this.listeners = {}; - this.classes = new Set(); - this.classList = { toggle: (name, on) => on ? this.classes.add(name) : this.classes.delete(name) }; - } - append(...children) { this.children.push(...children); } - setAttribute(name, value) { this.attributes[name] = value; } - addEventListener(name, callback) { this.listeners[name] = callback; } - replaceWith(element) { this.replacement = element; } - click() { this.listeners.click({ preventDefault() {}, stopPropagation() {} }); } -} - -function setup(mockSalesToken = true) { - const calls = []; - let now = Date.now(); - class TestDate extends Date { - constructor(...args) { super(...(args.length ? args : [now])); } - static now() { return now; } - } - let visibleAlerts = []; - const context = { - document: { - createElement: (tag) => new Element(tag), - createElementNS: (_, tag) => new Element(tag), - querySelectorAll: () => visibleAlerts - }, - fetch: (url, options) => new Promise((resolve, reject) => calls.push({ url, options, resolve, reject })), - Intl, Date: TestDate, Map, Set - }; - const app = loadApplication("content", context); - app.authSessionState.accessToken = "test-bearer-secret"; - app.authXsrfContent.getXsrfToken = async () => ({ token: "test-xsrf-cookie", cookieName: "XSRF-TOKEN-DYNAMIC", source: "test" }); - app.platformContentMessages.refreshXsrfCookie = async () => ({ refreshed: false }); - if (mockSalesToken) app.authSalesCommon.requestTokenRelaySalesCommon = async () => "test-sales-common-secret"; - app.debugContentView.renderDebugPanel = () => {}; - app.opportunitiesTable.renderOpportunitiesTable = () => {}; - return { - ...app.aiSummaryContent, ...app.productsDetails, ...app.aiSummaryState, - ...app.productsContentState, ...app.debugContentLog, ...app.debugState, - requestTokenRelay: app.authTokenRelay.requestTokenRelay, - requestTokenRelaySalesCommon: app.authSalesCommon.requestTokenRelaySalesCommon, - getAccessToken: () => app.authSessionState.accessToken, - calls, advance: (ms) => { now += ms; }, show: (alerts) => { visibleAlerts = alerts; } - }; -} - -function json(data, status = 200) { - return new Response(JSON.stringify(data), { status, headers: { "Content-Type": "application/json" } }); -} - -const flush = () => new Promise((resolve) => setImmediate(resolve)); - -async function run() { - const h = setup(); - const products = { items: [{ ProdGroupName: "Cloud", RevnAmount: "10000", WinProb: 30 }] }; - h.opptyProductsByNumber.set("A1", products); - h.createProductsCountButton("A1", products).click(); - const first = h.aiSummariesByOptyNumber.get("A1").promise; - await flush(); - assert.equal(h.calls.length, 1); - assert.equal(h.requestGenerateAiSummary("A1"), first); - assert.equal(h.calls.length, 1, "in-flight requests are deduplicated"); - const { url, options } = h.calls[0]; - assert.equal(url, "https://eeho.fa.us2.oraclecloud.com/api/sales-common/gen-ai/v1/summarizations/generate"); - assert.equal(options.method, "POST"); - assert.equal(options.headers.Authorization, "Bearer test-sales-common-secret"); - assert.equal(options.headers["Content-Type"], "application/json"); - assert.deepEqual(JSON.parse(options.body), { - path: "/api/sales-common/gen-ai/v1/summarizations/generate", - promptCode: "cx.sales.generate_opportunity_summary", object: "opportunities", puid: "A1" - }); - const loadingRow = h.createProductsDetailRow({ OptyNumber: "A1" }); - const panel = loadingRow.children[0].children[0]; - assert.equal(panel.children[1].attributes["aria-busy"], "true"); - assert.equal(panel.children[2].tag, "table", "products remain below the summary"); - assert.equal(panel.children[2].children[1].children.length, 1); - - h.createProductsCountButton("A1", products).click(); - assert.equal(h.calls.length, 1, "collapsing does not request another summary"); - assert.equal(h.expandedProductOptyNumbers.has("A1"), false); - const second = h.requestGenerateAiSummary("A2"); - await flush(); - const visible = h.createAiSummaryAlert("A2"); - h.show([visible]); - h.calls[1].resolve(json({ summaryText: "Second opportunity" })); - await second; - assert.equal(visible.replacement.children[1].textContent, "Second opportunity"); - const unsafeText = "\nLong summary"; - h.calls[0].resolve(json({ summaryText: unsafeText, lastUpdateDate: "not displayed" })); - await first; - assert.equal(h.expandedProductOptyNumbers.has("A1"), false, "late responses do not reopen rows"); - assert.equal(visible.replacement.children[1].textContent, "Second opportunity"); - const ready = h.createAiSummaryAlert("A1"); - assert.equal(ready.children[0].textContent, "Summary generated by AI"); - assert.equal(ready.children[1].textContent, unsafeText); - assert.equal(ready.children[1].children.length, 0, "AI text is not parsed as HTML"); - assert.equal(ready.children.length, 2); - assert.equal(h.requestLog[0].name, "requestGenerateAiSummary"); - assert.equal(h.requestLog[0].httpStatus, 200); - assert.equal(h.requestLog[0].status, "success"); - assert.ok(h.requestLog[0].responseBody.includes("summaryText")); - assert.ok(!h.formatHeaderBlock(h.requestLog[0].requestHeaders).includes("test-sales-common-secret")); - - h.createProductsCountButton("A1", products).click(); - await flush(); - assert.equal(h.calls.length, 3, "expanding again generates a fresh summary"); - h.createProductsCountButton("A1", products).click(); - h.createProductsCountButton("A1", products).click(); - assert.equal(h.calls.length, 3, "rapid collapse/expand reuses the pending request"); - h.calls[2].resolve(json({ summaryText: "Fresh summary" })); - await h.aiSummariesByOptyNumber.get("A1").promise; - - for (const response of [json({}, 500), new Response("login"), json({}), json({ summaryText: " " }), json({ summaryText: 123 })]) { - const failure = h.requestGenerateAiSummary("error"); - await flush(); - h.calls.at(-1).resolve(response); - await failure; - assert.equal(h.aiSummariesByOptyNumber.get("error").status, "error"); - assert.equal(h.requestLog.at(-1).status, "failed"); - assert.ok(h.requestLog.at(-1).httpStatus); - assert.ok(h.createAiSummaryAlert("error").classes.has("opportunities-extension-ai-summary-error")); - } - const networkFailure = h.requestGenerateAiSummary("error"); - await flush(); - h.calls.at(-1).reject(new Error("Network unavailable")); - await networkFailure; - assert.equal(h.requestLog.at(-1).error, "Network unavailable"); - const retry = h.requestGenerateAiSummary("error"); - await flush(); - h.calls.at(-1).resolve(json({ summaryText: "Recovered" })); - await retry; - assert.equal(h.aiSummariesByOptyNumber.get("error").status, "ready"); - - const scoped = setup(false); - const generation = scoped.requestGenerateAiSummary("SC1"); - await flush(); - assert.equal(scoped.calls.length, 1, "summary waits for its scoped token"); - assert.equal(scoped.calls[0].url, "https://eeho.fa.us2.oraclecloud.com/fscmRestApi/tokenrelay?scopesfq=urn%3Aopc%3Aresource%3Afusion%3Aeeho%3Asales-common%2F"); - assert.equal(scoped.calls[0].options.method, "GET"); - assert.equal(scoped.calls[0].options.credentials, "include"); - assert.equal(scoped.calls[0].options.headers["x-xsrf-token"], "test-xsrf-cookie"); - scoped.calls[0].resolve(json({ access_token: "scoped-token", expires_in: 3600 })); - await flush(); - assert.equal(scoped.calls[1].options.headers.Authorization, "Bearer scoped-token"); - scoped.calls[1].resolve(json({ summaryText: "Scoped summary" })); - await generation; - assert.equal(scoped.requestLog[0].name, "requestTokenRelaySalesCommon"); - assert.equal(scoped.requestLog[0].httpStatus, 200); - assert.equal(scoped.getAccessToken(), "test-bearer-secret", "scoped token does not replace the general token"); - const normal = scoped.requestTokenRelay(); - await flush(); - assert.equal(scoped.calls[2].url, "https://eeho.fa.us2.oraclecloud.com/fscmRestApi/tokenrelay"); - assert.equal(scoped.calls[2].options.headers["x-xsrf-token"], scoped.calls[0].options.headers["x-xsrf-token"]); - scoped.calls[2].resolve(json({ access_token: "normal-token" })); - await normal; - assert.equal(scoped.requestLog[2].name, "requestTokenRelay"); - assert.equal(await scoped.requestTokenRelaySalesCommon(), "scoped-token"); - assert.equal(scoped.calls.length, 3, "valid token is reused"); - scoped.advance(3600 * 1000); - const failedScope = scoped.requestGenerateAiSummary("SC2"); - await flush(); - scoped.calls[3].resolve(json({ error: "Unavailable" }, 500)); - await failedScope; - assert.equal(scoped.calls.length, 4, "no summary POST after scoped authentication failure"); - assert.equal(scoped.aiSummariesByOptyNumber.get("SC2").status, "error"); - assert.equal(scoped.requestLog[3].status, "failed"); - - const pendingToken = scoped.requestTokenRelaySalesCommon(); - assert.equal(scoped.requestTokenRelaySalesCommon(), pendingToken, "concurrent refresh is deduplicated"); - await flush(); - scoped.calls[4].resolve(json({ access_token: "renewed-token", expires_in: 3600 })); - await pendingToken; - assert.equal(await scoped.requestTokenRelaySalesCommon(), "renewed-token"); - assert.equal(scoped.calls.length, 5, "failed refresh can be retried and then cached"); - - const rejected = scoped.requestGenerateAiSummary("REJECTED"); - const concurrent = scoped.requestGenerateAiSummary("CONCURRENT"); - await flush(); - assert.equal(scoped.calls[5].options.headers.Authorization, "Bearer renewed-token"); - scoped.calls[5].resolve(json({}, 401)); - await flush(); - assert.equal(scoped.calls[7].options.method, "GET"); - scoped.calls[7].resolve(json({ access_token: "replacement-token", expires_in: 3600 })); - await flush(); - assert.equal(scoped.calls[8].options.headers.Authorization, "Bearer replacement-token"); - scoped.calls[8].resolve(json({ summaryText: "Recovered after refresh" })); - await rejected; - scoped.calls[6].resolve(json({}, 401)); - await flush(); - assert.equal(scoped.calls[9].options.method, "POST", "late rejection must reuse the already refreshed token"); - assert.equal(scoped.calls[9].options.headers.Authorization, "Bearer replacement-token"); - scoped.calls[9].resolve(json({ summaryText: "Concurrent recovery" })); - await concurrent; - assert.equal(scoped.calls.length, 10); - - const forbidden = scoped.requestGenerateAiSummary("FORBIDDEN"); - await flush(); - scoped.calls[10].resolve(json({}, 403)); - await flush(); - scoped.calls[11].resolve(json({ access_token: "still-forbidden", expires_in: 3600 })); - await flush(); - scoped.calls[12].resolve(json({}, 403)); - await forbidden; - assert.equal(scoped.calls.length, 13, "only one renewal and one summary retry per generation"); - assert.equal(scoped.aiSummariesByOptyNumber.get("FORBIDDEN").status, "error"); - assert.equal(scoped.requestLog.at(-1).httpStatus, 403); - assert.equal(scoped.getAccessToken(), "test-bearer-secret"); - console.log("AI summary tests passed."); -} - -run().catch((error) => { console.error(error); process.exitCode = 1; }); diff --git a/tests/architecture.test.cjs b/tests/architecture.test.cjs index 44acdc7..cf2a1fd 100644 --- a/tests/architecture.test.cjs +++ b/tests/architecture.test.cjs @@ -41,9 +41,9 @@ test("every source belongs to an explicit runtime composition, with no duplicate assert.deepEqual(sources.content.filter(file => sources.background.includes(file)), ["src/features/org-chart/model.js", "src/shared/time-dates.js", "src/shared/messages.js", "src/shared/debug-body.js"]); }); -test("Redwood cascade is byte-identical to the characterized original", () => { +test("Redwood cascade is unchanged after removing obsolete AI summary styles", () => { const hash = createHash("sha256").update(read("src/content/styles/redwood.css")).digest("hex"); - assert.equal(hash, "eaeb7e53757d48a3095f9111c5029d2c923d0dcab92af23454ccd14bdcfc81c4"); + assert.equal(hash, "3a40f3f75cc1481444be20f8fa8705e6679fc18a8f748561ab820545fbac7853"); }); test("fiscal module can run alone without DOM, browser APIs or network", () => { @@ -58,13 +58,9 @@ test("per-frame state and credentials do not leak between application instances" const b = loadApplication("content"); for (const key of Object.keys(a).filter(key => key.endsWith("State"))) assert.notEqual(a[key], b[key], key); a.authSessionState.accessToken = "synthetic-general"; - a.authSalesCommonState.salesCommonToken = { access_token: "synthetic-scoped", expiresAt: 123 }; a.productsContentState.opptyProductsByNumber.set("TEST", { items: [] }); - a.aiSummaryState.aiSummariesByOptyNumber.set("TEST", { summaryText: "Synthetic" }); assert.equal(b.authSessionState.accessToken, ""); - assert.equal(b.authSalesCommonState.salesCommonToken, null); assert.equal(b.productsContentState.opptyProductsByNumber.size, 0); - assert.equal(b.aiSummaryState.aiSummariesByOptyNumber.size, 0); }); test("blocked localStorage access remains lazy and handled by preference fallbacks", () => { diff --git a/tests/badgeIcons.test.cjs b/tests/badgeIcons.test.cjs index 0e04230..8a8bbca 100644 --- a/tests/badgeIcons.test.cjs +++ b/tests/badgeIcons.test.cjs @@ -50,7 +50,7 @@ function checkIcon(badge, kind, value) { test("consistent inline vectors replace raster icons without parentheses or lost tooltips", async () => { const app = setup(); - const products = { items: [1, 2, 3].map(RampMonths_c => ({ RampMonths_c, RevnId: "123" })) }; + const products = { items: [1, 2, 3].map(RampMonths_c => ({ RampMonths_c, RevnId: "123", WorkloadName_c: "Synthetic workload" })) }; const count = app.productsDetails.createProductsCountButton("TEST", products); checkIcon(count, "products", "3"); assert.equal(count.title, "3 products"); @@ -58,7 +58,7 @@ test("consistent inline vectors replace raster icons without parentheses or lost const ramp = app.productsDetails.createProductsRampBadge(products); checkIcon(ramp, "ramp", "1 | 2 | 3"); assert.equal(ramp.title, "Ramp Months: 1, 2, 3"); - const missingRamp = app.productsDetails.createProductsRampBadge({ items: [{ RampMonths_c: null }] }); + const missingRamp = app.productsDetails.createProductsRampBadge({ items: [{ RampMonths_c: null, WorkloadName_c: "Synthetic workload" }] }); checkIcon(missingRamp, "ramp", "N/A"); assert.equal(missingRamp.attributes["data-missing"], "true"); diff --git a/tests/crmSrDetails.test.cjs b/tests/crmSrDetails.test.cjs index f4d84aa..bdadeab 100644 --- a/tests/crmSrDetails.test.cjs +++ b/tests/crmSrDetails.test.cjs @@ -74,7 +74,7 @@ test("preparation closes immediately on the second cookie event even while getAl assert.equal(listeners.size, 0); }); -test("explicit preparation opens SeaaS initiation and observes cookies without any API requests", async () => { +test("explicit preparation opens resource requests Dashboard and observes cookies without any API requests", async () => { let calls = 0; let reads = 0; const domain = "comcipapic-oalprod.integration.ocp.oraclecloud.com"; @@ -97,7 +97,7 @@ test("explicit preparation opens SeaaS initiation and observes cookies without a assert.deepEqual(result.debugRequests, []); assert.ok(!JSON.stringify(result).includes("secret")); assert.equal(h.tabs[0].active, false); - assert.equal(h.tabs[0].url, "https://comcipapic-oalprod.integration.ocp.oraclecloud.com/ic/builder/rt/SeaaS_initiation/live/webApps/external/"); + assert.equal(h.tabs[0].url, "https://comcipapic-oalprod.integration.ocp.oraclecloud.com/ic/builder/rt/oalset_semc/live/webApps/Dashboard/?page=shell&shell=main&main=manageresourcerequests"); assert.deepEqual(h.removedTabs, [91]); }); @@ -191,7 +191,7 @@ for (const family of ["chrome", "firefox"]) { assert.equal(h.tabs.length, 1); assert.equal(h.tabs[0].active, false); assert.equal(h.tabs[0].windowId, 3); - assert.equal(h.tabs[0].url, "https://comcipapic-oalprod.integration.ocp.oraclecloud.com/ic/builder/rt/SeaaS_initiation/live/webApps/external/"); + assert.equal(h.tabs[0].url, "https://comcipapic-oalprod.integration.ocp.oraclecloud.com/ic/builder/rt/oalset_semc/live/webApps/Dashboard/?page=shell&shell=main&main=manageresourcerequests"); assert.equal(h.tabs[0].cookieStoreId, family === "firefox" ? "test-store" : undefined); assert.deepEqual(h.removedTabs, [91]); }); diff --git a/tests/currentUser.test.cjs b/tests/currentUser.test.cjs index 9e2b332..47adc3f 100644 --- a/tests/currentUser.test.cjs +++ b/tests/currentUser.test.cjs @@ -96,7 +96,7 @@ for (const family of ["chrome", "firefox"]) { }); } -test("expired SPA session recovery handles 401, 403 and network errors, then releases its in-flight request", async () => { +test("expired SPA session recovery handles 401, 403 and network errors, then reuses its successful identity", async () => { let attempts = 0; const app = loadBackground({ fetch: async () => { attempts++; @@ -111,7 +111,8 @@ test("expired SPA session recovery handles 401, 403 and network errors, then rel assert.deepEqual(first.debugRequests.map(entry => entry.httpStatus), [401, 403, null, 200]); assert.deepEqual(app.removedTabs, [91]); assert.equal((await app.dispatch({ type })).ok, true); - assert.equal(attempts, 5, "background must not persist identity after the shared request settles"); + assert.equal(attempts, 4, "successful identity must not be fetched again"); + assert.equal((await app.dispatch({ type })).debugRequests.length, 0); assert.equal(app.tabs.length, 1); }); @@ -273,3 +274,25 @@ for (const family of ["chrome", "firefox"]) { assert.equal(attempts, payloads.length); }); } + +test("identity cache survives background recreation, shares windows and isolates containers", async () => { + const factory = new (require("node:vm").Script)(require("node:fs").readFileSync("src/services/spa/current-user.js", "utf8") + "\ncreateSpaCurrentUser").runInNewContext(); + const data = {}; + const sessionStorage = { async get(key) { return { [key]: data[key] }; }, async set(values) { Object.assign(data, values); } }; + let calls = 0; + const deps = { sessionStorage, fetchJson: async () => { calls++; return validIdentity; } }; + const service = factory(deps); + const sender = (windowId, cookieStoreId = "", incognito = false) => ({ tab: { windowId, cookieStoreId, incognito } }); + await Promise.all([service.requestCurrentUser(sender(1)), service.requestCurrentUser(sender(2))]); + assert.equal(calls, 1); + await service.requestCurrentUser(sender(3)); + assert.equal(calls, 1); + const restored = await factory(deps).requestCurrentUser(sender(4)); + assert.equal(restored.user.id, validIdentity.user.id); + assert.equal(restored.debugRequests.length, 0); + assert.equal(calls, 1); + await service.requestCurrentUser(sender(1, "container-2")); + await service.requestCurrentUser(sender(1, "", true)); + assert.equal(calls, 3); + assert.ok(Object.values(data).every(user => !user.token)); +}); diff --git a/tests/debugStorage.test.cjs b/tests/debugStorage.test.cjs new file mode 100644 index 0000000..6a5b271 --- /dev/null +++ b/tests/debugStorage.test.cjs @@ -0,0 +1,121 @@ +const { test } = require("node:test"); +const assert = require("node:assert/strict"); +const fs = require("node:fs"); +const vm = require("node:vm"); +const { loadApplication } = require("./support/application.cjs"); +const { createDebugDom } = require("./support/debug-dom.cjs"); +const factory = new vm.Script(fs.readFileSync("src/features/debug/state.js", "utf8") + "\ncreateDebugState").runInNewContext(); +function storage() { + const data = new Map(); + return { data, get length() { return data.size; }, key: i => [...data.keys()][i], + getItem: key => data.get(key) ?? null, setItem: (key, value) => data.set(key, value), removeItem: key => data.delete(key) }; +} + +test("opportunities clears debug only when sending the first page, preserving pagination", async () => { + const localStorage = storage(); + const app = loadApplication("content", { + localStorage, + fetch: async (_url, options) => { + if (options.method === "GET") return new Response(JSON.stringify({ items: [{ isDefault: true, savedSearchNumber: "test" }] })); + const offset = JSON.parse(options.body).offset; + return new Response(JSON.stringify({ items: [{ OptyNumber: String(offset) }], offset, count: 1, hasMore: offset === 0 })); + } + }); + app.debugContentView.renderDebugPanel = () => {}; + app.debugContentLog.logRequestStart({ name: "old", method: "GET" }); + const range = { startCloseDate: "2026-09-01", endCloseDate: "2026-12-01" }; + const query = () => app.fusionOpportunities.requestOpportunitiesPage("test", "Current Quarter", range, 0, [], 0, 1); + await query(); + assert.equal(app.debugState.generation, 1); + assert.deepEqual(Array.from(app.debugState.requestLog, entry => entry.name), ["requestOpportunities", "requestOpportunities"]); + await query(); + assert.equal(app.debugState.generation, 2); + assert.equal(app.debugState.requestLog.length, 2); + app.debugState.flush(); + assert.equal([...localStorage.data.values()].some(value => value.includes('"name":"old"')), false); +}); + +test("browser timer receiver does not prevent Token Relay from starting or completing", async () => { + let calls = 0; + const app = loadApplication("content", { + localStorage: storage(), AbortController, + setTimeout: function(callback, delay) { + "use strict"; + assert.equal(this, undefined); + return setTimeout(callback, delay); + }, + clearTimeout: function(id) { "use strict"; assert.equal(this, undefined); clearTimeout(id); }, + fetch: async () => { calls++; return new Response(JSON.stringify({ access_token: "synthetic" })); } + }); + app.debugContentView.renderDebugPanel = () => {}; + app.authXsrfContent.getXsrfToken = async () => ({ token: "synthetic-xsrf" }); + assert.equal(await app.authTokenRelay.requestTokenRelay(), "synthetic"); + app.debugState.flush(); + assert.equal(calls, 1); + assert.equal(app.debugState.requestLog[0].status, "success"); +}); + +test("Token Relay times out and records failure when fetch never completes", async () => { + let signal; + const app = loadApplication("content", { + AbortController, + setTimeout: (callback, delay) => setTimeout(callback, delay === 30000 ? 5 : delay), + clearTimeout, + fetch: (_url, options) => { signal = options.signal; return new Promise(() => {}); } + }); + app.debugContentView.renderDebugPanel = () => {}; + app.authXsrfContent.getXsrfToken = async () => ({ token: "synthetic-xsrf" }); + await assert.rejects(app.authTokenRelay.requestTokenRelay(), /timed out/); + app.debugState.flush(); + assert.equal(signal.aborted, true); + assert.equal(app.debugState.requestLog[0].status, "failed"); +}); +test("debug stores individual complete records, reloads Dates and preserves pending request handles", () => { + const localStorage = storage(); + const state = factory({ localStorage, crypto: { randomUUID: () => "tab-a" } }); + state.reset(); + const entry = { id: 1, startedAt: new Date(), completedAt: null, responseBody: "x".repeat(100000), requestHeaders: { Authorization: "synthetic" } }; + state.requestLog.push(entry); state.persist(entry); + assert.equal(JSON.parse(localStorage.getItem("opportunities-extension-debug:tab-a:1")).responseBody.length, 100000); + entry.responseBody = "changed in memory"; + state.reload(); + assert.equal(state.requestLog[0], entry); + assert.equal(entry.responseBody.length, 100000); + assert.equal(typeof entry.startedAt.getTime, "function"); +}); +test("reset clears only this tab's debug records and ignores old request completions", () => { + const localStorage = storage(); + localStorage.setItem("preferences", "preserved"); + localStorage.setItem("opportunities-extension-debug:other:1", "preserved"); + const state = factory({ localStorage, crypto: { randomUUID: () => "tab-a" } }); + const entry = { id: 1 }; state.requestLog.push(entry); state.persist(entry); + state.reset(); state.persist(entry); + assert.equal(state.requestLog.length, 0); + assert.equal(localStorage.getItem("opportunities-extension-debug:tab-a:1"), null); + assert.equal(localStorage.getItem("preferences"), "preserved"); + assert.equal(localStorage.getItem("opportunities-extension-debug:other:1"), "preserved"); +}); +test("quota failure retains complete data in memory without breaking requests", () => { + const state = factory({ localStorage: { setItem() { throw new Error("quota"); } } }); + const entry = { id: 1, responseBody: "complete" }; state.requestLog.push(entry); + assert.doesNotThrow(() => state.persist(entry)); + assert.match(state.storageError, /full/); + state.reload(); assert.equal(state.requestLog[0].responseBody, "complete"); +}); +test("hidden debug has no request DOM; opening hydrates summaries and expanding mounts details", () => { + const dom = createDebugDom(); dom.panel.hidden = true; + const app = loadApplication("content", { document: dom.document, localStorage: storage() }); + const entry = app.debugContentLog.logRequestStart({ name: "requestExample", method: "GET", url: "https://example.invalid" }); + assert.equal(dom.panel.children.length, 0); + app.debugContentView.toggleDebugPanel(); + const find = cls => dom.descendants(dom.panel).find(node => node.className === cls); + assert.equal(find("opportunities-extension-debug-details"), undefined); + const row = dom.descendants(dom.panel).find(node => node.tag === "details"); + row.open = true; row.listeners.toggle(); + assert.ok(find("opportunities-extension-debug-details")); + app.debugContentView.closeDebugPanel(); + assert.equal(dom.panel.children.length, 0); + app.debugState.reset(); + app.debugContentLog.logRequestFailure(entry, "Late failure"); + assert.equal(app.debugState.requestLog.length, 0); +}); diff --git a/tests/debugTabs.test.cjs b/tests/debugTabs.test.cjs index 5d4268a..005911f 100644 --- a/tests/debugTabs.test.cjs +++ b/tests/debugTabs.test.cjs @@ -42,6 +42,7 @@ test("catalog and identity secrets are revealed exactly by the eye button and hi name: "requestCurrentUser", method: "GET", startedAt: new Date().toISOString(), status: "success", responseBody: JSON.stringify({ user: { roles: ["SIMPLE_USER"] }, token: "identity-exact-secret" }) }]); + h.nodes().filter(node => node.tag === "details").forEach(node => { node.open = true; node.listeners.toggle(); }); const text = node => node.text + node.children.map(text).join(""); const toggle = () => h.nodes().find(node => node.getAttribute("data-debug-focus") === "visibility").listeners.click(); assert.doesNotMatch(text(h.panel), /exact-secret/); @@ -99,9 +100,9 @@ test("complete large responses stay formatted, masked and colored in both runtim test("request categories cover every current family and unknown requests stay visible", () => { const h = fixture(); for (const [name, category] of Object.entries({ - requestTokenRelay: "authentication", requestTokenRelaySalesCommon: "authentication", + requestTokenRelay: "authentication", requestConsumerTokenService: "authentication", requestCustomerTokenService: "authentication", - requestOpportunities: "opportunities", requestOpportunitiesSavedSearch: "opportunities", requestOpportunitiesByContact: "opportunities", requestOpptyProducts: "products", requestGenerateAiSummary: "ai", + requestOpportunities: "opportunities", requestOpportunitiesSavedSearch: "opportunities", requestOpportunitiesByContact: "opportunities", requestOpptyProducts: "products", requestQueryAccountContact: "contacts", requestPersistContact: "contacts", requestAccountSummary: "consumption", requestAccountPlans: "consumption", requestInstallBase: "installBase", requestCustomerServiceRequest: "serviceRequests", requestSRInfo: "serviceRequests", @@ -233,6 +234,7 @@ test("colored JSON preserves exact masked text, safe strings, eye toggle and HTT name: "requestTokenRelay", method: "POST", startedAt: new Date().toISOString(), httpStatus: 401, status: "failed", responseBody: response, requestHeaders: { Authorization: "synthetic-private" } }]); + h.nodes().filter(node => node.tag === "details").forEach(node => { node.open = true; node.listeners.toggle(); }); const text = node => node.text + node.children.map(text).join(""); const responseBlock = () => h.nodes().find(node => node.tag === "section" && node.children[0]?.textContent === "Response Body").children[1]; assert.equal(text(responseBlock()), h.app.debugContentLog.formatDebugBody(response)); @@ -308,7 +310,7 @@ test("full-page debug CSS defines responsive bounds and readable semantic colors test("scoped debug styles are packaged after the unchanged main stylesheet", () => { const root = path.join(__dirname, ".."); const css = ["src/content/styles/redwood.css", "src/features/debug/styles.css", "src/features/opportunities/styles.css", "src/features/install-base/styles.css", "src/features/service-requests/styles.css", "src/features/consumption/plan-detail.css", "src/features/ratecard/styles.css", "src/features/opportunities/customer-table-search.css", "src/features/opportunities/calendar.css"] - .concat("src/features/manage-time/styles.css", "src/features/products/ramp-projection.css", "src/features/org-chart/styles.css", "src/content/styles/tables.css") + .concat("src/features/manage-time/styles.css", "src/features/products/ramp-projection.css", "src/features/org-chart/styles.css", "src/content/styles/tables.css", "src/content/styles/dialogs.css") .map(file => fs.readFileSync(path.join(root, file), "utf8")).join("\n"); assert.ok(composeScript("content").includes(`const redwoodStyles = ${JSON.stringify(css)};`)); assert.ok(!composeScript("background").includes("opportunities-extension-debug-tabs")); diff --git a/tests/installBase.test.cjs b/tests/installBase.test.cjs index c4c07d8..9c1df22 100644 --- a/tests/installBase.test.cjs +++ b/tests/installBase.test.cjs @@ -120,7 +120,7 @@ test("installBase sorts typed values and restores the selected header across app const second = setup(storage); second.app.installBaseView.openInstallBaseModal(customer).render(items); const rows = walk(second.overlay).find(node => node.tag === "tbody").children; - assert.equal(rows[0].children[7].textContent, "2"); + assert.equal(rows[0].children[6].textContent, "2"); assert.equal(walk(second.overlay).find(node => node.attributes["data-sort-key"] === "quantity").parent.attributes["aria-sort"], "ascending"); assert.equal(items[0].quantity, 10); }); @@ -136,13 +136,13 @@ test("installed base searches every displayed column and formatted values, inclu currentSupport: 1234.56, orderNumber: "ORD-321", supportStatus: "ACTIVE", quantityType: "Processor", quantity: 7, supportStartDate: "2026-03-12", supportEndDate: "2027-04-13", licenseValue: 9876.54, shipDate: "2020-05-14", hiddenField: "secretword" }; - input.value = "sao beta"; + input.value = "group beta"; input.listeners.input(); assert.equal(modal.attributes["aria-busy"], "true"); view.render([row, { productName: "Other product" }]); - const rows = () => walk(modal).filter(node => node.tag === "td").length / 12; + const rows = () => walk(modal).filter(node => node.tag === "td").length / 11; assert.equal(rows(), 1); - for (const query of [...Object.values(row).slice(0, 12), "1,234.56", "9,876.54", "12/03/2026", "13/04/2027", "14/05/2020"]) { + for (const query of [...Object.values(row).slice(1, 12), "1,234.56", "9,876.54", "12/03/2026", "13/04/2027", "14/05/2020"]) { input.value = String(query); input.listeners.input(); assert.equal(rows(), 1, String(query)); assert.equal(walk(modal).find(node => node.tag === "input"), input, "input is not replaced while typing"); @@ -160,7 +160,7 @@ test("installed base searches every displayed column and formatted values, inclu assert.ok(walk(modal).some(node => node.textContent === "Synthetic failure")); app.installBaseView.closeInstallBaseModal(); app.installBaseView.openInstallBaseModal(customer).render([row]); - assert.equal(walk(overlay).filter(node => node.tag === "td").length, 12, "reopening starts without an invisible filter"); + assert.equal(walk(overlay).filter(node => node.tag === "td").length, 11, "reopening starts without an invisible filter"); }); test("modal shows skeleton, renders only requested fields safely and ignores closed/replaced responses", () => { @@ -168,7 +168,7 @@ test("modal shows skeleton, renders only requested fields safely and ignores clo const first = app.installBaseView.openInstallBaseModal(customer); const modal = overlay.children[0]; assert.equal(modal.attributes["aria-busy"], "true"); - assert.equal(walk(modal).filter(node => node.tag === "th").length, 12); + assert.equal(walk(modal).filter(node => node.tag === "th").length, 11); const second = app.installBaseView.openInstallBaseModal(customer); first.render([{ productName: "Stale product" }]); assert.equal(overlay.children[0].attributes["aria-busy"], "true"); @@ -176,14 +176,14 @@ test("modal shows skeleton, renders only requested fields safely and ignores clo currentSupport: 1234.56, licenseValue: 0, supportStartDate: "2026-03-12", secret: "not-visible" }]); const current = overlay.children[0]; const cells = walk(current).filter(node => node.tag === "td"); - assert.equal(cells.length, 12); - assert.equal(cells[2].textContent, ""); - assert.equal(cells[2].children.length, 0); - assert.equal(cells[3].textContent, "1,234.56"); - assert.equal(cells[5].children[0].dataset.status, "ACTIVE"); - assert.equal(cells[7].textContent, "0"); - assert.equal(cells[10].textContent, "0.00"); - assert.ok(cells[8].textContent.includes("2026")); + assert.equal(cells.length, 11); + assert.equal(cells[1].textContent, ""); + assert.equal(cells[1].children.length, 0); + assert.equal(cells[2].textContent, "1,234.56"); + assert.equal(cells[4].children[0].dataset.status, "ACTIVE"); + assert.equal(cells[6].textContent, "0"); + assert.equal(cells[9].textContent, "0.00"); + assert.ok(cells[7].textContent.includes("2026")); current.listeners.keydown({ key: "Tab", preventDefault() {} }); assert.equal(document.activeElement.type, "search"); current.listeners.keydown({ key: "Tab", preventDefault() {} }); diff --git a/tests/opportunityCalendar.test.cjs b/tests/opportunityCalendar.test.cjs index 68f942b..0577bdd 100644 --- a/tests/opportunityCalendar.test.cjs +++ b/tests/opportunityCalendar.test.cjs @@ -25,9 +25,10 @@ function setup(items = [opportunity("A", "2026-11-15")]) { const host = new Element("host"); document = { createElement: tag => new Element(tag), getElementById: () => host }; const state = { status: "ready", items }; - const h = { state, filtered: items, version: 1, instances: [], loads: 0, host, document }; + const h = { state, filtered: items, version: 1, range: { startCloseDate: "2026-09-01", endCloseDate: "2027-03-01" }, instances: [], loads: 0, host, document }; class Calendar { constructor(element, options) { this.element = element; this.options = options; this.events = options.events; this.dates = []; h.instances.push(this); } + setOption(key, value) { this.options[key] = value; } render() { this.rendered = true; } destroy() { this.destroyed = true; } updateSize() { this.resized = true; } @@ -37,7 +38,7 @@ function setup(items = [opportunity("A", "2026-11-15")]) { addEventSource(events) { this.events = events; } } h.api = factory({ environment: { document }, loadLibrary: () => { h.loads++; return { Calendar }; }, - getState: () => state, getItems: () => h.filtered, getVersion: () => h.version, + getState: () => state, getItems: () => h.filtered, getVersion: () => h.version, getRange: () => h.range, formatRevenue: () => "$100", formatDate: value => value.slice(0, 10), getOwnerName: () => "Owner", createDetailLink: (text, href) => { const a = new Element("a"); a.textContent = text; a.href = href; return a; }, createCopyButton: () => new Element("button"), createCloseIcon: () => new Element("svg"), @@ -57,10 +58,6 @@ test("calendar controls, accessibility labels and missing dates are English", () const h = setup([opportunity("A", "2026-11-15"), opportunity("B", null)]); const { options } = h.activate(); assert.equal(options.locale, "en"); - assert.deepEqual(plain(options.buttonText), { today: "Today", month: "Month", week: "Week" }); - assert.deepEqual(plain(options.buttonHints), { prev: "Previous", next: "Next", today: "Today", dayGridMonth: "Month", dayGridWeek: "Week" }); - assert.equal(options.moreLinkHint(1), "View 1 more opportunity"); - assert.equal(options.moreLinkHint(3), "View 3 more opportunities"); assert.ok(h.nodes().some(node => node.attributes["aria-label"] === "Opportunity views")); assert.ok(h.nodes().some(node => node.textContent === "No valid Close Date (1)")); }); @@ -126,7 +123,7 @@ test("initial calendar date selects the next close date, last past date or today assert.equal(api.initialDate([opportunity("A", null)], now), "2026-10-05"); }); -test("overview is the default; tabs lazily initialize and reuse a monthly/weekly calendar", () => { +test("overview is the default; tabs lazily initialize and reuse a scrollable monthly calendar", () => { const h = setup(); h.mount(); const surface = h.byClass("opportunities-extension-calendar"); assert.equal(h.table.hidden, false); assert.equal(surface.hidden, true); assert.equal(h.loads, 0); @@ -137,13 +134,13 @@ test("overview is the default; tabs lazily initialize and reuse a monthly/weekly tabs[1].click(); const instance = h.instances[0]; assert.equal(h.table.hidden, true); assert.equal(surface.hidden, false); - assert.equal(instance.options.initialView, "dayGridMonth"); + assert.equal(instance.options.initialView, "referenceMonths"); assert.equal(instance.options.height, "100%"); - assert.equal(instance.options.expandRows, true); - assert.equal(instance.options.headerToolbar.right, "dayGridMonth,dayGridWeek"); + assert.equal(instance.options.editable, false); - assert.equal(instance.options.dayMaxEvents, 2); - assert.equal(instance.options.moreLinkText(7), "... +7"); + assert.equal(instance.options.dayMaxEvents, false); + assert.equal(instance.options.headerToolbar, false); + assert.deepEqual(plain(instance.options.validRange), {start:"2026-09-01",end:"2027-03-01"}); assert.equal(instance.options.weekNumbers, true); tabs[0].click(); tabs[1].click(); assert.equal(h.loads, 1); assert.equal(h.instances.length, 1); assert.equal(instance.resized, true); @@ -151,24 +148,15 @@ test("overview is the default; tabs lazily initialize and reuse a monthly/weekly assert.equal(h.table.hidden, false); assert.equal(h.document.activeElement, tabs[0]); }); -test("responsive event limit reserves room for every week and the overflow control", () => { - const { api } = setup(); - assert.equal(api.visibleEventLimit(240, 6, 21), 0); - assert.equal(api.visibleEventLimit(500, 5, 21), 1); - assert.equal(api.visibleEventLimit(800, 5, 21), 2); - assert.equal(api.visibleEventLimit(500, 1, 21), 2); - assert.equal(api.visibleEventLimit(0, 6, 21), 0); -}); - test("calendar follows filtered data; only a new Reference request changes its date", () => { const h = setup([opportunity("A", "2026-11-15"), opportunity("B", "2026-12-12")]); const calendar = h.activate(); h.filtered = [h.state.items[1]]; h.api.render(h.filtered, h.state); assert.deepEqual(plain(calendar.events.map(event => event.id)), ["B"]); assert.equal(calendar.dates.length, 0); - h.version++; h.state.items = [opportunity("C", "2027-02-20")]; h.filtered = h.state.items; + h.range = { startCloseDate: "2026-12-01", endCloseDate: "2027-03-01" }; h.version++; h.state.items = [opportunity("C", "2027-02-20")]; h.filtered = h.state.items; h.api.render(h.filtered, h.state); - assert.deepEqual(calendar.dates, ["2027-02-20"]); + assert.deepEqual(calendar.dates, ["2026-12-01"]); assert.deepEqual(plain(calendar.events.map(event => event.id)), ["C"]); h.filtered = []; h.api.render(h.filtered, h.state); assert.equal(calendar.events.length, 0); @@ -194,7 +182,7 @@ test("event details close on changed data, loading/error hide stale calendar con assert.ok(h.nodes().some(node => node.attributes.role === "dialog")); h.api.render([], h.state); assert.ok(!h.nodes().some(node => node.attributes.role === "dialog")); - for (const status of ["loading", "error", "empty"]) { + for (const status of ["loading", "error"]) { h.api.render([], { status, items: [], message: "State message" }); assert.equal(h.byClass("opportunities-calendar-grid").hidden, true); assert.equal(h.byClass("opportunities-calendar-undated").hidden, true); @@ -202,29 +190,6 @@ test("event details close on changed data, loading/error hide stale calendar con } }); -test("overflow uses our dialog instead of the FullCalendar offsetParent-dependent popover", () => { - const h = setup([opportunity("A", "2026-11-15"), opportunity("B", "2026-11-15"), opportunity("C", "2026-11-15")]); - const calendar = h.activate(); - const trigger = h.document.createElement("a"); - const allSegs = calendar.events.map(event => ({ event })); - const open = () => calendar.options.moreLinkClick({ date: new Date("2026-11-15T00:00:00Z"), allSegs, - jsEvent: { currentTarget: trigger, preventDefault() {} } }); - assert.equal(open(), true, "truthy non-string result suppresses vendor popover"); - const list = h.byClass("opportunities-calendar-day-list"); - assert.equal(list.children.length, 3); - assert.ok(list.children.every(button => button.children.length === 2 && button.children[1].textContent.includes(" | FORECAST | $100"))); - list.children[2].click(); - assert.ok(h.nodes().some(node => node.tag === "h2" && node.textContent === "")); - h.api.closeDetails(); - assert.equal(h.document.activeElement, trigger); - open(); h.api.selectView("overview"); - assert.ok(!h.nodes().some(node => node.attributes.role === "dialog")); - h.api.selectView("calendar"); open(); - const dialog = h.nodes().find(node => node.attributes.role === "dialog"); - dialog.listeners.keydown({ key: "Escape", preventDefault() {}, stopPropagation() {} }); - assert.ok(!h.nodes().some(node => node.attributes.role === "dialog")); -}); - test("calendar events show their stage and handle missing stage values", () => { const h = setup(); const calendar = h.activate(); @@ -237,3 +202,13 @@ test("calendar events show their stage and handle missing stage values", () => { assert.equal(domNodes[0].children[1].title, `A | ${label} | $100`); } }); + +test("Reference boundaries exclude the next period and keep empty months visible", () => { + const h = setup([opportunity("before", "2026-08-31"), opportunity("first", "2026-09-01"), opportunity("last", "2026-11-30"), opportunity("next", "2026-12-01")]); + h.range = {startCloseDate:"2026-09-01",endCloseDate:"2026-12-01"}; + const calendar = h.activate(); + assert.deepEqual(plain(calendar.events.map(e=>e.id)), ["first","last"]); + h.api.render([], {status:"empty",items:[]}); + assert.equal(h.byClass("opportunities-calendar-grid").hidden,false); + assert.equal(calendar.events.length,0); +}); diff --git a/tests/opportunityTable.test.cjs b/tests/opportunityTable.test.cjs index a14dd2e..bbf8a50 100644 --- a/tests/opportunityTable.test.cjs +++ b/tests/opportunityTable.test.cjs @@ -37,13 +37,11 @@ function setup(items = [synthetic()], localStorage) { getElementById: id => id === app.contracts.OPPORTUNITIES_TABLE_ID ? table : null }; const app = loadApplication("content", { document, Intl, Date, localStorage }); app.currentUser.allowsCrmActivities = () => true; - const summaries = []; - app.aiSummaryContent.requestGenerateAiSummary = number => summaries.push(number); app.opportunitiesTable.setOpportunitiesTableState({ status: "ready", items }); const rows = () => table.children.find(child => child.tag === "tbody").children; const cell = (key, index = 0) => rows()[index].children.find(child => child.attributes["data-column"] === key); const headers = () => table.children.find(child => child.tag === "thead").children[0].children; - return { app, table, rows, cell, headers, summaries }; + return { app, table, rows, cell, headers }; } test("Overview restores independent column and direction preferences across reloads and new data", () => { @@ -104,7 +102,7 @@ test("ramp months preserve zero and flag missing values beside the product count [[0], "0"], [[0, "3", null, " 6 ", 3], "0 | 3 | N/A | 6 | 3"] ]) { h.app.productsContentState.opptyProductsByNumber.set("TEST-1", { - fromCache: true, items: values.map(RampMonths_c => ({ RampMonths_c })) + fromCache: true, items: values.map(RampMonths_c => ({ RampMonths_c, WorkloadName_c: "Synthetic workload" })) }); h.app.opportunitiesTable.renderOpportunitiesTable(); if (expected === null) assert.equal(badge(), undefined); @@ -121,12 +119,11 @@ test("ramp months preserve zero and flag missing values beside the product count } }); -test("products remain expandable with AI summary and a ten-column detail row after sorting", () => { +test("products remain expandable with a ten-column detail row after sorting", () => { const h = setup([synthetic("B", "Zulu"), synthetic("A", "Alpha")]); h.app.productsContentState.opptyProductsByNumber.set("B", { items: [{ ProdGroupName: "Cloud", RevnAmount: "10" }] }); h.app.opportunitiesTable.renderOpportunitiesTable(); findClass(h.cell("name"), "opportunities-extension-products-count").click(); - assert.deepEqual(h.summaries, ["B"]); assert.equal(h.rows()[1].className, "opportunities-extension-products-detail-row"); assert.equal(h.rows()[1].children[0].colSpan, 10); assert.ok(findClass(h.rows()[1], "opportunities-extension-products-table")); @@ -136,7 +133,6 @@ test("products remain expandable with AI summary and a ten-column detail row aft assert.equal(h.rows()[2].children[0].colSpan, 10); findClass(h.cell("name", 1), "opportunities-extension-products-count").click(); assert.equal(h.rows().length, 2); - assert.deepEqual(h.summaries, ["B"], "collapsing does not generate another summary"); }); test("product labels support multiple digits without changing their tooltip", () => { @@ -149,7 +145,7 @@ test("product labels support multiple digits without changing their tooltip", () assert.equal(count.attributes["aria-label"], "12 products for opportunity TEST-1"); }); -test("opportunity projection alert is last and aggregates only divergent products", () => { +test("opportunity projection alert follows the ramp and aggregates only divergent products", () => { const h = setup(); const alert = () => findClass(h.cell("name"), "opportunities-extension-opportunity-projection-alert"); const product = amount => ({ RampMonths_c: 0, workload: { adjustedACR: 1200, consumptionStartDate: "2026-10-01", @@ -159,17 +155,15 @@ test("opportunity projection alert is last and aggregates only divergent product h.app.opportunitiesTable.renderOpportunitiesTable(); assert.equal(alert().title, "Consumption forecast differs in 2 products. View products."); const actions = findClass(h.cell("name"), "opportunities-extension-cell-actions"); - assert.equal(actions.children.at(-1), alert()); + assert.equal(actions.children[2], alert()); assert.equal(alert().tag, "button"); assert.equal(alert().attributes["aria-expanded"], "false"); alert().click(); assert.equal(h.rows()[1].className, "opportunities-extension-products-detail-row"); assert.equal(alert().attributes["aria-expanded"], "true"); assert.equal(walk(h.rows()[1]).filter(node => node.attributes["aria-haspopup"] === "dialog").length, 2); - assert.deepEqual(h.summaries, ["TEST-1"]); alert().click(); assert.equal(h.rows()[1].className, "opportunities-extension-products-detail-row", "clicking again never collapses the list"); - assert.deepEqual(h.summaries, ["TEST-1"], "already expanded list is not reloaded"); h.app.productsContentState.opptyProductsByNumber.set("TEST-1", { items: [product(100), {}] }); h.app.opportunitiesTable.renderOpportunitiesTable(); assert.equal(alert(), undefined); @@ -200,7 +194,7 @@ test("CRM SR badge follows Ramp Months and remains visible while product data is await h.app.opportunityCrmServiceRequests.load("synthetic", h.app.opportunitiesQueryState.periodRequestVersion); h.app.opportunitiesTable.renderOpportunitiesTable(); assert.equal(findClass(h.cell("name"), "opportunities-extension-crm-sr-badge").textContent, "0h"); - h.app.productsContentState.opptyProductsByNumber.set("TEST-1", { items: [{ RampMonths_c: 3 }] }); + h.app.productsContentState.opptyProductsByNumber.set("TEST-1", { items: [{ RampMonths_c: 3, WorkloadName_c: "Synthetic workload" }] }); h.app.opportunitiesTable.renderOpportunitiesTable(); const actions = h.cell("name").children[0].children[1]; assert.deepEqual(actions.children.map(child => child.textContent), ["1", "3", "0h", "?"]); @@ -319,6 +313,35 @@ test("table styles reserve compact widths, prioritize Name/Customer and keep nes assert.ok(remaining > 0); assert.ok(remaining / 2 >= 12 + 114, "four customer controls fit after the left inset"); } - const allCss = ["src/content/styles/redwood.css", "src/features/debug/styles.css", "src/features/opportunities/styles.css", "src/features/install-base/styles.css", "src/features/service-requests/styles.css", "src/features/consumption/plan-detail.css", "src/features/ratecard/styles.css", "src/features/opportunities/customer-table-search.css", "src/features/opportunities/calendar.css", "src/features/manage-time/styles.css", "src/features/products/ramp-projection.css", "src/features/org-chart/styles.css", "src/content/styles/tables.css"].map(read).join("\n"); + const allCss = ["src/content/styles/redwood.css", "src/features/debug/styles.css", "src/features/opportunities/styles.css", "src/features/install-base/styles.css", "src/features/service-requests/styles.css", "src/features/consumption/plan-detail.css", "src/features/ratecard/styles.css", "src/features/opportunities/customer-table-search.css", "src/features/opportunities/calendar.css", "src/features/manage-time/styles.css", "src/features/products/ramp-projection.css", "src/features/org-chart/styles.css", "src/content/styles/tables.css", "src/content/styles/dialogs.css"].map(read).join("\n"); assert.ok(composeScript("content").includes(`const redwoodStyles = ${JSON.stringify(allCss)};`)); }); + +test("Booking replaces ramp only when every product has no Workload name", () => { + const h = setup(); + for (const value of [undefined, null, "", " ", "-"]) { + const badge = h.app.productsDetails.createProductsRampBadge({items:[{WorkloadName_c:value},{WorkloadName_c:" - "}]}, {}); + assert.equal(badge.textContent,"Booking"); + assert.equal(badge.tag,"span"); + assert.equal(badge.attributes["aria-haspopup"],undefined); + } + const mixed = h.app.productsDetails.createProductsRampBadge({items:[{WorkloadName_c:"-",RampMonths_c:2},{WorkloadName_c:"Migration",RampMonths_c:3}]},{}); + assert.equal(mixed.textContent,"2 | 3"); + assert.equal(mixed.tag,"button"); +}); +test("Booking and Workload filters use product names and compose with shared opportunity filtering", () => { + const h = setup(); + const selected = h.app.opportunitiesFilterState.selectedProductTypes; + const result = { items: [{ WorkloadName_c: "-" }, { WorkloadName_c: "" }] }; + h.app.productsContentState.opptyProductsByNumber.set("TEST-1", result); + selected.delete("Workload"); + assert.equal(h.app.opportunitiesFilters.getSortedOpportunities().length, 1); + selected.clear(); selected.add("Workload"); + assert.equal(h.app.opportunitiesFilters.getSortedOpportunities().length, 0); + result.items[1].WorkloadName_c = "Migration"; + assert.equal(h.app.opportunitiesFilters.getSortedOpportunities().length, 1); + selected.clear(); + assert.equal(h.app.opportunitiesFilters.getSortedOpportunities().length, 0); + selected.add("Booking"); selected.add("Workload"); + assert.equal(h.app.opportunitiesFilters.getSortedOpportunities().length, 1); +}); diff --git a/tests/ramp-projection.test.cjs b/tests/ramp-projection.test.cjs index d572251..b15cd01 100644 --- a/tests/ramp-projection.test.cjs +++ b/tests/ramp-projection.test.cjs @@ -227,5 +227,8 @@ test("product column opens accessible read-only comparison and restores focus/ba assert.equal(content.inert, false); assert.equal(document.activeElement, alert); assert.equal(app.rampProjectionView.createIndicator(product(), {}).textContent, "OK"); - assert.equal(app.rampProjectionView.createIndicator({}, {}).textContent, "-"); + assert.equal(app.rampProjectionView.createIndicator({}, {}).disabled, true); + app.rampProjectionView.open(product(), {}, alert); + assert.ok(walk(host).some(node => node.textContent === "0 months with a difference")); + app.rampProjectionView.close(); }); diff --git a/tests/srSessionPreparation.test.cjs b/tests/srSessionPreparation.test.cjs index 715302c..bee2c66 100644 --- a/tests/srSessionPreparation.test.cjs +++ b/tests/srSessionPreparation.test.cjs @@ -2,6 +2,42 @@ const assert = require("node:assert/strict"); const { test } = require("node:test"); const { loadApplication } = require("./support/application.cjs"); +test("failed preparation exposes Retry, deduplicates clicks and removes it on success", async () => { + const host = { append() {} }; + const nodes = []; + const app = loadApplication("content", { + document: { querySelector: () => host, getElementById: () => null, + createElement: tag => { + const node = { tag, children: [], setAttribute() {}, append(child) { this.children.push(child); }, + addEventListener(_event, fn) { this.click = fn; }, + set textContent(value) { this.text = value; this.children = []; } }; + nodes.push(node); return node; + } }, + setTimeout: () => 1, clearTimeout() {} + }); + let attempts = 0; + app.currentUser.ensure = async () => {}; + app.currentUser.allowsCrmActivities = () => true; + app.currentUser.getUserId = () => "test@example.invalid"; + app.debugContentLog.appendBackgroundRequestLog = () => {}; + app.platformContentMessages.sendRuntimeMessage = async message => { + if (message.type === "opportunitiesExtension.requestResourceUser") return { ok: true }; + return { ok: ++attempts > 1 }; + }; + await app.srSessionPreparation.ensure(); + const retry = nodes.find(node => node.tag === "button"); + assert.equal(retry.text, "Retry"); + retry.click(); + const pending = app.srSessionPreparation.retry(); + assert.equal(app.srSessionPreparation.retry(), pending); + await pending; + assert.equal(attempts, 2); + assert.equal(nodes[0].text, "SR session ready"); + assert.equal(nodes[0].children.length, 0); + await app.srSessionPreparation.retry(); + assert.equal(attempts, 2); +}); + test("preparation runs once, shares pending work and reports loading and completion", async () => { const app = loadApplication("content"); const progress = []; @@ -26,7 +62,8 @@ test("preparation runs once, shares pending work and reports loading and complet }; const first = app.srSessionPreparation.ensure(); assert.equal(app.srSessionPreparation.ensure(), first); - assert.equal(requests, 0, "identity must load first"); + assert.equal(requests, 1, "SR session starts while SPA identity is pending"); + assert.equal(resourceRequests, 0, "resource user still requires the identity"); resolveUser(); await new Promise(resolve => setImmediate(resolve)); assert.deepEqual(progress, [["session", "running"]]); @@ -38,7 +75,7 @@ test("preparation runs once, shares pending work and reports loading and complet assert.deepEqual(progress.at(-1), ["session", "complete"]); }); -test("SALES_REP skips preparation; failed preparation does not auto-repeat or reject modal loading", async () => { +test("failed parallel preparation does not auto-repeat or reject modal loading", async () => { for (const allowed of [false, true]) { const app = loadApplication("content"); let requests = 0; @@ -50,7 +87,7 @@ test("SALES_REP skips preparation; failed preparation does not auto-repeat or re app.platformContentMessages.sendRuntimeMessage = async () => { requests += 1; return { ok: false }; }; await app.srSessionPreparation.ensure(); await app.srSessionPreparation.ensure(); - assert.equal(requests, allowed ? 1 : 0); - assert.deepEqual(progress, allowed ? [["session", "running"], ["session", "error"]] : []); + assert.equal(requests, 1); + assert.deepEqual(progress, [["session", "running"], ["session", "error"]]); } }); diff --git a/tests/support/characterization.cjs b/tests/support/characterization.cjs index 5bb127c..2c0e8ee 100644 --- a/tests/support/characterization.cjs +++ b/tests/support/characterization.cjs @@ -36,7 +36,7 @@ function loadContent({ fetch = unexpectedFetch, storage = new Map(), xsrf = null app.platformContentMessages.refreshXsrfCookie = async () => { refreshes.push(true); return { refreshed: true }; }; return { ...app.opportunitiesFiscalPeriods, ...app.fusionOpportunities, ...app.authTokenRelay, - ...app.authSalesCommon, ...app.preferencesStorage, ...app.opportunitiesFilters, + ...app.preferencesStorage, ...app.opportunitiesFilters, ...app.opportunitiesFormatters, ...app.contentTheme, ...app.debugState, setVersion: value => { app.opportunitiesQueryState.periodRequestVersion = value; }, setTypes: values => { app.preferencesState.selectedOpportunityTypeValues = new Set(values); },