(() => {
  const TARGET_ORIGIN = "https://spa.oracle.com";
  const TARGET_PATHNAME =
    "/oalcrm/web/api/g2m-consumer-application/ui/index.html";
  const TARGET_PARAM = "ojr";
  const TARGET_PARAM_VALUE = "workload_workbench";
  const USER_BUTTON_LABEL = "[[displayUser().fullName]]";
  const ALLOWED_STAGE_TYPES = ["SQL", "Pipeline", "Upside", "Forecast"];

  const SELECTORS = {
    header: ".oj-oal-ux-global-header.oj-oal-ux-global-header-pillar-cx",
    functions: ".oj-flex.oj-oal-ux-global-header-functions",
  };

  const IDS = {
    mount: "arch-panel-extension-mount",
    button: "arch-panel-extension-button",
    style: "arch-panel-extension-style",
    overlay: "arch-panel-extension-overlay",
    dialog: "arch-panel-extension-dialog",
  };

  const CLASSES = {
    modalOpen: "arch-panel-extension-modal-open",
    overlayOpen: "is-open",
  };

  const STORAGE_KEYS = {
    theme: "arch-panel-extension-theme",
    sidebarCollapsed: "arch-panel-extension-sidebar-collapsed",
  };

  const CACHE = {
    dbName: "arch-panel-extension-db",
    dbVersion: 1,
    storeName: "datasets",
    datasetKey: "workload-dashboard",
  };

  const DETAIL_SORT_KEYS = {
    opportunityNumber: "opportunityNumber",
    customerName: "customerName",
    workload: "workload",
    rampMonths: "rampMonths",
    adjustedACR: "adjustedACR",
    opportunityForecastTypeGroup: "opportunityForecastTypeGroup",
    hasSR: "hasSR",
    hasAction: "hasAction",
  };

  const BRIDGE = {
    source: "arch-panel-extension",
    fetchType: "ARCH_PANEL_FETCH",
    resultType: "ARCH_PANEL_FETCH_RESULT",
    headersType: "ARCH_PANEL_HEADERS",
    headersResultType: "ARCH_PANEL_HEADERS_RESULT",
    readyType: "ARCH_PANEL_BRIDGE_READY",
    scriptId: "arch-panel-extension-page-bridge",
  };

  const API_ENDPOINTS = {
    currentUser:
      "/oalcrm/web/api/identity-management/users/current",
    customerSummary:
      "/oalcrm/web/api/provider-proxy/wwb-provider/service/elastic/customers/listSummary",
    customerWorkloads:
      "/oalcrm/web/api/provider-proxy/wwb-provider/service/workbench-proxy/wwb/mgmt/customers",
    workloadActions:
      "/oalcrm/web/api/provider-proxy/wwb-provider/service/workbench-proxy/wwb/mgmt/actions",
    workloadServiceRequests:
      "/oalcrm/web/api/provider-proxy/wwb-provider/service/workbench-proxy/wwb/mgmt/workloads",
  };

  const COMCIP_REQUEST = {
    url:
      "https://comcipapic-oalprod.integration.ocp.oraclecloud.com/ic/builder/rt/oalset_semc/live;profile=PROD/services/auth/1.1/proxy/oalsetCRMRestAPIElastic/uri/https/eeho.fa.us2.oraclecloud.com/crmRestApi/searchResources/latest/custom-actions/queries",
    timeEntriesSummaryUrl:
      "https://comcipapic-oalprod.integration.ocp.oraclecloud.com/ic/builder/rt/oalset_semc/live;profile=PROD/services/auth/1.1/proxy/oalsetSeaaSOKECustomRestAPI/uri/https/gxpap.oracle.com/oalcrm/service/set/seaas/mgmt/timeEntries/summary",
    resourceCurrentUserUrl:
      "https://comcipapic-oalprod.integration.ocp.oraclecloud.com/ic/builder/rt/oalset_timeentrymobile/live;profile=PROD/services/auth/1.1/proxy/oke_seaas/uri/https/gxpap.oracle.com/oalcrm/service/set/seaas/crm/resourceUsers",
    appVersion: "version_1754044416761",
  };

  const ACTION_TEAM_OPTIONS = [
    {
      value: "DM_AUTONOMOUS",
      label: "Data Platform - Autonomous Database",
    },
    {
      value: "CI_COMPUTE",
      label: "Cloud Infrastructure - Compute including HPC",
    },
    {
      value: "APP_DEV_AI_CLOUD_SERVICES",
      label: "App Dev - AI Cloud Services",
    },
    {
      value: "DEV_CLOUD_NATIVE_APP",
      label: "App Dev - Cloud Native",
    },
    {
      value: "CI_BIG_COMPUTE_HPC",
      label: "Cloud Infrastructure - AI Infra/GPU",
    },
    {
      value: "CI_MULTI_CLOUD",
      label: "Cloud Infrastructure - Multi-Cloud",
    },
    {
      value: "CI_STORAGE",
      label: "Cloud Infrastructure - Storage",
    },
    {
      value: "CI_VMWARE",
      label: "Cloud Infrastructure - VMware",
    },
    {
      value: "DALH_DESIGN",
      label: "Data Platform - Analytical Data Platform/Lakehouse",
    },
    {
      value: "DATA_INTEGRATION",
      label: "Data Platform - Data Integration",
    },
    {
      value: "DM_UPGRADE",
      label: "Data Platform - Modernise",
    },
  ];

  const ACTION_COMPLEXITY_OPTIONS = ["LOW", "MEDIUM", "HIGH", "VERY_HIGH"];

  const appState = {
    theme: getStoredTheme(),
    sidebarCollapsed: getStoredSidebarCollapsed(),
    calendarYear: new Date().getFullYear(),
    calendarMonth: new Date().getMonth(),
    status: "idle",
    loadingMessage: "",
    loadingProgress: 0,
    errorMessage: "",
    dataset: null,
    sessionAuthHeaders: {},
    detailModal: null,
    actionFormModal: null,
    rampComparisonModal: null,
    forecastUpdateConfirmModal: null,
    timeEntriesDrawer: null,
    pendingFocusSelector: "",
  };

  let syncFrame = 0;
  let restoreFocusTarget = null;
  let closeTimer = 0;
  let requestCounter = 0;
  let bridgeReadyPromise = null;
  let cacheHydrationPromise = null;
  const pendingBridgeRequests = new Map();

  function isTargetPage() {
    const currentUrl = new URL(window.location.href);

    return (
      currentUrl.origin === TARGET_ORIGIN &&
      currentUrl.pathname === TARGET_PATHNAME &&
      currentUrl.searchParams.get(TARGET_PARAM) === TARGET_PARAM_VALUE
    );
  }

  function scheduleSync() {
    if (syncFrame) {
      return;
    }

    syncFrame = window.requestAnimationFrame(() => {
      syncFrame = 0;
      syncButton();
    });
  }

  function syncButton() {
    const mount = document.getElementById(IDS.mount);

    if (!isTargetPage()) {
      mount?.remove();
      removeModal();
      unlockScroll();
      return;
    }

    const header = document.querySelector(SELECTORS.header);
    const functionsContainer = header?.querySelector(SELECTORS.functions);
    const anchor = functionsContainer ? findUserAnchor(functionsContainer) : null;

    if (!header || !functionsContainer) {
      return;
    }

    ensureStyles();

    const themedMount = mount ?? createMount();
    const overlay = ensureModal();

    applyTheme(header, functionsContainer, anchor, themedMount, overlay);

    const targetSibling = resolveInsertionTarget(
      functionsContainer,
      anchor,
      themedMount
    );

    if (
      themedMount.parentElement !== functionsContainer ||
      themedMount.nextElementSibling !== targetSibling
    ) {
      const verifiedTarget =
        targetSibling && targetSibling.parentElement === functionsContainer
          ? targetSibling
          : null;

      if (verifiedTarget) {
        functionsContainer.insertBefore(themedMount, verifiedTarget);
      } else {
        functionsContainer.appendChild(themedMount);
      }
    }
  }

  function createMount() {
    const mount = document.createElement("div");
    mount.id = IDS.mount;
    mount.className = "arch-panel-extension-entry";

    const button = document.createElement("button");
    button.id = IDS.button;
    button.type = "button";
    button.className = "arch-panel-extension-button";
    button.textContent = "Arch panel";
    button.setAttribute("aria-label", "Open Arch panel");
    button.addEventListener("click", openModal);

    mount.appendChild(button);

    return mount;
  }

  function ensurePageBridge() {
    if (bridgeReadyPromise) {
      return bridgeReadyPromise;
    }

    bridgeReadyPromise = new Promise((resolve) => {
      const existingScript = document.getElementById(BRIDGE.scriptId);

      if (existingScript) {
        resolve();
        return;
      }

      const script = document.createElement("script");
      script.id = BRIDGE.scriptId;
      script.src = chrome.runtime.getURL("page-bridge.js");
      script.async = false;
      script.onload = () => {
        script.remove();
        resolve();
      };
      script.onerror = () => {
        resolve();
      };

      (document.head || document.documentElement).appendChild(script);
    });

    return bridgeReadyPromise;
  }

  function ensureModal() {
    const existingOverlay = document.getElementById(IDS.overlay);

    if (existingOverlay) {
      return existingOverlay;
    }

    const overlay = document.createElement("div");
    overlay.id = IDS.overlay;
    overlay.className = "arch-panel-extension-overlay";
    overlay.hidden = true;
    overlay.setAttribute("aria-hidden", "true");
    overlay.addEventListener("click", handleOverlayClick);

    document.body.appendChild(overlay);
    renderModal();

    return overlay;
  }

  function handleOverlayClick(event) {
    const overlay = document.getElementById(IDS.overlay);

    if (!overlay) {
      return;
    }

    if (event.target === overlay) {
      if (appState.actionFormModal) {
        appState.actionFormModal = null;
        renderModal();
      } else if (appState.forecastUpdateConfirmModal) {
        appState.forecastUpdateConfirmModal = null;
        renderModal();
      } else if (appState.rampComparisonModal) {
        appState.rampComparisonModal = null;
        renderModal();
      } else if (appState.detailModal) {
        closeDetailModal();
        renderModal();
      } else {
        closeModal();
      }

      return;
    }

    const actionElement = event.target.closest("[data-action]");

    if (!actionElement) {
      return;
    }

    const action = actionElement.getAttribute("data-action");

    event.preventDefault();

    if (action === "close") {
      closeModal();
      return;
    }

    if (action === "toggle-theme") {
      toggleTheme();
      return;
    }

    if (action === "toggle-sidebar") {
      toggleSidebar();
      return;
    }

    if (action === "refresh") {
      void refreshData();
      return;
    }

    if (action === "calendar-prev") {
      shiftCalendarMonth(-1);
      return;
    }

    if (action === "calendar-next") {
      shiftCalendarMonth(1);
      return;
    }

    if (action === "calendar-today") {
      goToCurrentCalendarMonth();
      return;
    }

    if (action === "download-json") {
      if (appState.dataset) {
        downloadFile(
          "arch-panel-data.json",
          JSON.stringify(appState.dataset.exportPayload, null, 2),
          "application/json"
        );
      }

      return;
    }

    if (action === "download-html") {
      if (appState.dataset) {
        downloadFile(
          "arch-panel-dashboard.html",
          createExportHtml(appState.dataset),
          "text/html"
        );
      }

      return;
    }

    if (action === "open-detail") {
      const detailScope = actionElement.getAttribute("data-detail-scope");
      const detailValue = actionElement.getAttribute("data-detail-value");

      openDetailModal(detailScope, detailValue);
      return;
    }

    if (action === "open-action-form") {
      const workloadId = actionElement.getAttribute("data-workload-id");

      if (workloadId) {
        openActionFormModal(workloadId);
      }

      return;
    }

    if (action === "open-ramp-comparison") {
      const workloadId = actionElement.getAttribute("data-workload-id");

      if (workloadId) {
        openRampComparisonModal(workloadId);
      }

      return;
    }

    if (action === "close-ramp-comparison") {
      appState.forecastUpdateConfirmModal = null;
      appState.rampComparisonModal = null;
      renderModal();
      return;
    }

    if (action === "open-forecast-update-confirm") {
      openForecastUpdateConfirmModal();
      return;
    }

    if (action === "close-forecast-update-confirm") {
      appState.forecastUpdateConfirmModal = null;
      renderModal();
      return;
    }

    if (action === "submit-forecast-update") {
      void submitForecastUpdate();
      return;
    }

    if (action === "close-action-form") {
      appState.actionFormModal = null;
      renderModal();
      return;
    }

    if (action === "open-time-entries") {
      const srNumber = actionElement.getAttribute("data-sr-number");

      if (srNumber) {
        void openTimeEntriesDrawer(srNumber);
      }

      return;
    }

    if (action === "close-time-entries") {
      appState.timeEntriesDrawer = null;
      renderModal();
      return;
    }

    if (action === "retry-time-entries") {
      const srNumber = appState.timeEntriesDrawer?.srNumber;

      if (srNumber) {
        void openTimeEntriesDrawer(srNumber);
      }

      return;
    }

    if (action === "submit-action-form") {
      const form = actionElement.closest("form");

      if (form instanceof HTMLFormElement) {
        void submitActionForm(form);
      }

      return;
    }

    if (action === "close-detail") {
      closeDetailModal();
      renderModal();
      return;
    }

    if (action === "sort-detail") {
      const sortKey = actionElement.getAttribute("data-sort-key");

      if (sortKey) {
        toggleDetailSort(sortKey);
      }
    }
  }

  function renderModal() {
    const overlay = document.getElementById(IDS.overlay);

    if (!overlay) {
      return;
    }

    const previousScrollState = captureModalScrollState(overlay);
    const activeFocusSelector = getRestorableFocusSelector(document.activeElement);
    const requestedFocusSelector = appState.pendingFocusSelector || activeFocusSelector;

    overlay.innerHTML = createModalMarkup();
    applyDialogTheme(overlay);

    restoreModalScrollState(overlay, previousScrollState);

    window.requestAnimationFrame(() => {
      if (
        !appState.detailModal &&
        !appState.actionFormModal &&
        !appState.rampComparisonModal &&
        !appState.forecastUpdateConfirmModal &&
        requestedFocusSelector
      ) {
        const focusTarget = overlay.querySelector(requestedFocusSelector);

        if (focusTarget instanceof HTMLElement) {
          focusTarget.focus({ preventScroll: true });
        }
      }

      appState.pendingFocusSelector = "";
    });
  }

  function captureModalScrollState(overlay) {
    const mainShell = overlay.querySelector(".arch-panel-extension-main-shell");
    const shellBody = overlay.querySelector(".arch-panel-extension-shell-body");
    const dialog = overlay.querySelector(".arch-panel-extension-dialog");
    const detailTable = overlay.querySelector(
      ".arch-panel-extension-table-wrap.is-detail"
    );

    return {
      windowX: window.scrollX,
      windowY: window.scrollY,
      documentTop: document.documentElement.scrollTop,
      bodyTop: document.body.scrollTop,
      mainShellTop: mainShell ? mainShell.scrollTop : 0,
      shellBodyTop: shellBody ? shellBody.scrollTop : 0,
      dialogTop: dialog ? dialog.scrollTop : 0,
      detailTableTop: detailTable ? detailTable.scrollTop : 0,
      detailTableLeft: detailTable ? detailTable.scrollLeft : 0,
    };
  }

  function restoreModalScrollState(overlay, scrollState) {
    const restore = () => {
      const mainShell = overlay.querySelector(".arch-panel-extension-main-shell");
      const shellBody = overlay.querySelector(".arch-panel-extension-shell-body");
      const dialog = overlay.querySelector(".arch-panel-extension-dialog");
      const detailTable = overlay.querySelector(
        ".arch-panel-extension-table-wrap.is-detail"
      );

      if (mainShell) {
        mainShell.scrollTop = scrollState.mainShellTop;
      }

      if (shellBody) {
        shellBody.scrollTop = scrollState.shellBodyTop;
      }

      if (dialog) {
        dialog.scrollTop = scrollState.dialogTop;
      }

      if (detailTable) {
        detailTable.scrollTop = scrollState.detailTableTop;
        detailTable.scrollLeft = scrollState.detailTableLeft;
      }

      document.documentElement.scrollTop = scrollState.documentTop;
      document.body.scrollTop = scrollState.bodyTop;
      window.scrollTo(scrollState.windowX, scrollState.windowY);
    };

    window.requestAnimationFrame(() => {
      restore();
      window.requestAnimationFrame(restore);
    });
  }

  function getRestorableFocusSelector(element) {
    if (!(element instanceof HTMLElement)) {
      return "";
    }

    const action = element.getAttribute("data-action");

    if (
      action === "calendar-prev" ||
      action === "calendar-next" ||
      action === "calendar-today"
    ) {
      return `[data-action="${action}"]`;
    }

    const detailScope = element.getAttribute("data-detail-scope");
    const detailValue = element.getAttribute("data-detail-value");

    if (detailScope === "calendar-day" && detailValue) {
      return getCalendarDayFocusSelector(detailValue);
    }

    return "";
  }

  function getCalendarDayFocusSelector(dateKey) {
    return `[data-action="open-detail"][data-detail-scope="calendar-day"][data-detail-value="${dateKey}"]`;
  }

  function createModalMarkup() {
    return `
      <div
        id="${IDS.dialog}"
        class="arch-panel-extension-dialog"
        role="dialog"
        aria-modal="true"
        aria-labelledby="arch-panel-extension-title"
        tabindex="-1"
      >
        <header class="arch-panel-extension-shell-header">
          <div class="arch-panel-extension-brand">
            <span class="arch-panel-extension-brand-mark">Arch</span>
            <div>
              <p class="arch-panel-extension-brand-label">Enterprise workload intelligence</p>
              <h1 id="arch-panel-extension-title" class="arch-panel-extension-title">
                Arch panel
              </h1>
            </div>
          </div>

          <div class="arch-panel-extension-shell-actions">
            <span class="arch-panel-extension-shell-note">
              ${getHeaderSummary()}
            </span>
            <button
              type="button"
              class="arch-panel-extension-theme-toggle"
              data-action="toggle-sidebar"
              aria-label="Toggle sidebar"
            >
              ${appState.sidebarCollapsed ? "Show sidebar" : "Hide sidebar"}
            </button>
            <button
              type="button"
              class="arch-panel-extension-theme-toggle"
              data-action="toggle-theme"
              aria-label="Toggle dashboard theme"
            >
              ${appState.theme === "dark" ? "Light mode" : "Dark mode"}
            </button>
            <button
              type="button"
              class="arch-panel-extension-close"
              data-action="close"
              aria-label="Close Arch panel"
            >
              Close
            </button>
          </div>
        </header>

        <div class="arch-panel-extension-shell-body${appState.sidebarCollapsed ? " is-sidebar-collapsed" : ""}">
          ${renderMainContent()}
          ${renderDetailModal()}
          ${renderActionFormModal()}
          ${renderRampComparisonModal()}
          ${renderForecastUpdateConfirmModal()}
          ${renderTimeEntriesDrawer()}
        </div>
      </div>
    `;
  }

  function renderMainContent() {
    if (appState.status === "loading") {
      return `
        <main class="arch-panel-extension-main-shell">
          <section class="arch-panel-extension-state-card">
            <p class="arch-panel-extension-state-eyebrow">Loading data</p>
            <h2 class="arch-panel-extension-state-title">Building the workload dataset</h2>
            <p class="arch-panel-extension-state-copy">${escapeHtml(appState.loadingMessage)}</p>
            <div
              class="arch-panel-extension-loading-progress"
              role="progressbar"
              aria-valuemin="0"
              aria-valuemax="100"
              aria-valuenow="${Math.round(appState.loadingProgress || 0)}"
            >
              <div class="arch-panel-extension-loading-progress-meta">
                <span>Overall progress</span>
              </div>
              <div class="arch-panel-extension-loading-progress-track">
                <div
                  class="arch-panel-extension-loading-progress-fill"
                  style="width: 0%;"
                ></div>
                <span class="arch-panel-extension-loading-progress-value">
                  ${formatProgressPercent(appState.loadingProgress || 0)}
                </span>
              </div>
            </div>
          </section>
        </main>
      `;
    }

    if (appState.status === "error") {
      return `
        <main class="arch-panel-extension-main-shell">
          <section class="arch-panel-extension-state-card is-error">
            <p class="arch-panel-extension-state-eyebrow">Request failed</p>
            <h2 class="arch-panel-extension-state-title">Unable to assemble the dashboard</h2>
            <p class="arch-panel-extension-state-copy">${escapeHtml(appState.errorMessage)}</p>
            <div class="arch-panel-extension-state-actions">
              <button type="button" class="arch-panel-extension-utility-button" data-action="refresh">
                Retry
              </button>
            </div>
          </section>
        </main>
      `;
    }

    if (!appState.dataset) {
      return `
        <main class="arch-panel-extension-main-shell">
          <section class="arch-panel-extension-state-card">
            <p class="arch-panel-extension-state-eyebrow">Ready</p>
            <h2 class="arch-panel-extension-state-title">Start the live data extraction</h2>
            <p class="arch-panel-extension-state-copy">
              No cached snapshot is available yet. Use Refresh data to fetch the current user, customers, workloads, actions and service requests.
            </p>
            <div class="arch-panel-extension-state-actions">
              <button type="button" class="arch-panel-extension-utility-button" data-action="refresh">
                Refresh data
              </button>
            </div>
          </section>
        </main>
      `;
    }

    const { user, summary } = appState.dataset;

    return `
      <aside class="arch-panel-extension-sidebar${appState.sidebarCollapsed ? " is-collapsed" : ""}" aria-label="Dataset summary">
        <div class="arch-panel-extension-sidebar-group">
          <p class="arch-panel-extension-sidebar-label">Current user</p>
          <div class="arch-panel-extension-sidebar-data">
            <strong>${escapeHtml(user.name || user.userEmail)}</strong>
            <span>${escapeHtml(user.userEmail)}</span>
            <span>Administrator: ${String(Boolean(user.administrator))}</span>
          </div>
        </div>

        <div class="arch-panel-extension-sidebar-group">
          <p class="arch-panel-extension-sidebar-label">Exports</p>
          <button type="button" class="arch-panel-extension-sidebar-button" data-action="download-json">
            Download JSON
          </button>
          <button type="button" class="arch-panel-extension-sidebar-button" data-action="download-html">
            Download HTML
          </button>
          <button type="button" class="arch-panel-extension-sidebar-button" data-action="refresh">
            Refresh data
          </button>
        </div>

        <div class="arch-panel-extension-sidebar-group">
          <p class="arch-panel-extension-sidebar-label">Coverage</p>
          <div class="arch-panel-extension-sidebar-data">
            <span>Customers: ${formatWholeNumber(summary.totalCustomers)}</span>
            <span>Workloads: ${formatWholeNumber(summary.totalWorkloads)}</span>
            <span>Pending SRs: ${formatWholeNumber(summary.pendingServiceRequests.length)}</span>
          </div>
        </div>

        <div class="arch-panel-extension-sidebar-group">
          <p class="arch-panel-extension-sidebar-label">Last refresh</p>
          <div class="arch-panel-extension-sidebar-data">
            <strong>${escapeHtml(summary.generatedAtLabel || "-")}</strong>
            <span>Updated by Refresh data</span>
          </div>
        </div>

        <div class="arch-panel-extension-sidebar-group">
          <p class="arch-panel-extension-sidebar-label">Extension version</p>
          <div class="arch-panel-extension-sidebar-data">
            <span>v${escapeHtml(getExtensionVersion())}</span>
          </div>
        </div>
      </aside>

      <main class="arch-panel-extension-main-shell">
        <section class="arch-panel-extension-summary-row" aria-label="Overview metrics">
          ${renderMetricCard("Total clients", formatWholeNumber(summary.totalCustomers), "Loaded from listSummary")}
          ${renderMetricCard("Total workloads", formatWholeNumber(summary.totalWorkloads), "Excluding Won workloads")}
          ${renderMetricCard("Total (ACR)", formatCurrency(summary.totalEligibleAcr), "Across eligible workloads")}
          ${renderMetricCard("Pending SRs", formatWholeNumber(summary.pendingServiceRequests.length), "SVC_PENDING_DELIVERY")}
        </section>

        <section class="arch-panel-extension-indicator-grid" aria-label="Opportunity indicators">
          ${summary.stageIndicators.map((indicator) => renderStageIndicator(indicator)).join("")}
        </section>

        <section class="arch-panel-extension-status-grid" aria-label="SR and action status indicators">
          ${renderBooleanIndicator(
            "Status de SRs",
            "Workloads com SR",
            summary.srStatus.trueCount,
            "Workloads sem SR",
            summary.srStatus.falseCount,
            "sr"
          )}
          ${renderBooleanIndicator(
            "Status de Consumption Plan/action",
            "Workloads com action",
            summary.actionStatus.trueCount,
            "Workloads sem action",
            summary.actionStatus.falseCount,
            "action"
          )}
        </section>

        ${renderSrHoursAndCalendarSection(summary)}

      </main>
    `;
  }

  function getExtensionVersion() {
    try {
      return chrome.runtime.getManifest()?.version || "0.0.0";
    } catch {
      return "0.0.0";
    }
  }

  function renderMetricCard(label, value, detail) {
    return `
      <article class="arch-panel-extension-summary-card">
        <p class="arch-panel-extension-summary-label">${escapeHtml(label)}</p>
        <p class="arch-panel-extension-summary-value">${escapeHtml(value)}</p>
        <p class="arch-panel-extension-summary-detail">${escapeHtml(detail)}</p>
      </article>
    `;
  }

  function renderStageIndicator(indicator) {
    return `
      <button
        type="button"
        class="arch-panel-extension-summary-card arch-panel-extension-summary-card-button"
        data-action="open-detail"
        data-detail-scope="stage"
        data-detail-value="${escapeHtml(indicator.label)}"
      >
        <p class="arch-panel-extension-summary-label">${escapeHtml(indicator.label)}</p>
        <p class="arch-panel-extension-summary-value">${formatWholeNumber(indicator.count)}</p>
        <p class="arch-panel-extension-summary-detail">Total (ACR): ${formatCurrency(indicator.totalAcr)}</p>
      </button>
    `;
  }

  function renderBooleanIndicator(
    title,
    trueLabel,
    trueCount,
    falseLabel,
    falseCount,
    scope
  ) {
    const total = trueCount + falseCount;
    const truePercent = total > 0 ? (trueCount / total) * 100 : 0;
    const falsePercent = total > 0 ? (falseCount / total) * 100 : 0;

    return `
      <article class="arch-panel-extension-panel">
        <header class="arch-panel-extension-panel-head">
          <div>
            <p class="arch-panel-extension-panel-label">${escapeHtml(title)}</p>
          </div>
        </header>
        <div class="arch-panel-extension-progress">
          <div class="arch-panel-extension-progress-track">
            <span
              class="arch-panel-extension-progress-segment is-success"
              style="width: ${truePercent}%;"
            ></span>
            <span
              class="arch-panel-extension-progress-segment is-danger"
              style="width: ${falsePercent}%;"
            ></span>
          </div>
          <div class="arch-panel-extension-progress-labels">
            <span>${escapeHtml(trueLabel)}: ${formatPercent(truePercent)}</span>
            <span>${escapeHtml(falseLabel)}: ${formatPercent(falsePercent)}</span>
          </div>
        </div>
        <div class="arch-panel-extension-boolean-grid">
          <button
            type="button"
            class="arch-panel-extension-summary-card arch-panel-extension-summary-card-button"
            data-action="open-detail"
            data-detail-scope="${escapeHtml(scope)}"
            data-detail-value="true"
          >
            <p class="arch-panel-extension-summary-label">${escapeHtml(trueLabel)}</p>
            <p class="arch-panel-extension-summary-value">${formatWholeNumber(trueCount)}</p>
            <p class="arch-panel-extension-summary-detail">${formatPercent(truePercent)}</p>
          </button>
          <button
            type="button"
            class="arch-panel-extension-summary-card arch-panel-extension-summary-card-button"
            data-action="open-detail"
            data-detail-scope="${escapeHtml(scope)}"
            data-detail-value="false"
          >
            <p class="arch-panel-extension-summary-label">${escapeHtml(falseLabel)}</p>
            <p class="arch-panel-extension-summary-value">${formatWholeNumber(falseCount)}</p>
            <p class="arch-panel-extension-summary-detail">${formatPercent(falsePercent)}</p>
          </button>
        </div>
      </article>
    `;
  }

  function renderSrHoursAndCalendarSection(summary) {
    const calendar = buildWorkloadStartCalendar(
      summary.allWorkloads,
      appState.calendarYear,
      appState.calendarMonth
    );

    return `
      <section class="arch-panel-extension-operations-grid" aria-label="Pending SRs and workload calendar">
        <div class="arch-panel-extension-sr-hour-grid">
          ${renderSrHoursIndicator(
            "SRs 0-4h",
            "Horas apontadas entre 0 e 4",
            summary.srHours.betweenZeroAndFour.length,
            "0-4"
          )}
          ${renderSrHoursIndicator(
            "SRs >4h",
            "Horas apontadas acima de 4",
            summary.srHours.aboveFour.length,
            "above-4"
          )}
        </div>
        ${renderWorkloadStartCalendar(calendar)}
      </section>
    `;
  }

  function renderSrHoursIndicator(label, detail, count, value) {
    return `
      <button
        type="button"
        class="arch-panel-extension-summary-card arch-panel-extension-summary-card-button"
        data-action="open-detail"
        data-detail-scope="sr-hours"
        data-detail-value="${escapeHtml(value)}"
        aria-label="Open ${escapeHtml(label)} service requests"
      >
        <p class="arch-panel-extension-summary-label">${escapeHtml(label)}</p>
        <p class="arch-panel-extension-summary-value">${formatWholeNumber(count)}</p>
        <p class="arch-panel-extension-summary-detail">${escapeHtml(detail)}</p>
      </button>
    `;
  }

  function renderWorkloadStartCalendar(calendar) {
    return `
      <article class="arch-panel-extension-panel arch-panel-extension-calendar-card">
        <header class="arch-panel-extension-panel-head">
          <div>
            <p class="arch-panel-extension-panel-label">Workload start calendar</p>
            <h3 class="arch-panel-extension-panel-title">${escapeHtml(calendar.monthLabel)}</h3>
          </div>
          <div class="arch-panel-extension-calendar-actions">
            <button
              type="button"
              class="arch-panel-extension-calendar-nav"
              data-action="calendar-prev"
              aria-label="Previous month"
            >
              ‹
            </button>
            <span>${formatWholeNumber(calendar.totalVisibleWorkloads)} starts</span>
            <button
              type="button"
              class="arch-panel-extension-calendar-today"
              data-action="calendar-today"
              aria-label="Go to current month"
            >
              Today
            </button>
            <button
              type="button"
              class="arch-panel-extension-calendar-nav"
              data-action="calendar-next"
              aria-label="Next month"
            >
              ›
            </button>
          </div>
        </header>
        <div class="arch-panel-extension-calendar-weekdays">
          ${["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"]
            .map((day) => `<span>${day}</span>`)
            .join("")}
        </div>
        <div class="arch-panel-extension-calendar-grid">
          ${calendar.days.map((day) => renderCalendarDay(day)).join("")}
        </div>
      </article>
    `;
  }

  function renderCalendarDay(day) {
    const firstWorkload = day.workloads[0];
    const calendarWorkloadLabel =
      firstWorkload?.description || firstWorkload?.name || "Workload";
    const className = [
      "arch-panel-extension-calendar-day",
      day.isCurrentMonth ? "" : "is-muted",
      day.isToday ? "is-today" : "",
      day.workloads.length ? "has-workload" : "",
    ]
      .filter(Boolean)
      .join(" ");

    return `
      <button
        type="button"
        class="${className}"
        title="${escapeHtml(
          day.workloads
            .map((workload) => workload.description || workload.name)
            .filter(Boolean)
            .join(" | ")
        )}"
        data-action="open-detail"
        data-detail-scope="calendar-day"
        data-detail-value="${escapeHtml(day.dateKey)}"
        ${day.workloads.length ? "" : "disabled"}
      >
        <span class="arch-panel-extension-calendar-date">${day.dayNumber}</span>
        ${
          day.isWeekStart
            ? `<span class="arch-panel-extension-calendar-week-number">${escapeHtml(
                day.operationalWeekLabel
              )}</span>`
            : ""
        }
        ${
          day.workloads.length
            ? `<span class="arch-panel-extension-calendar-workload">${escapeHtml(
                calendarWorkloadLabel
              )}</span><span class="arch-panel-extension-calendar-count">${formatWholeNumber(
                day.workloads.length
              )}</span>`
            : ""
        }
      </button>
    `;
  }

  function renderWorkloadTable(workloads) {
    return `
      <div class="arch-panel-extension-table-wrap is-main">
        <table class="arch-panel-extension-table">
          <colgroup>
            <col class="arch-panel-extension-col-opportunity">
            <col class="arch-panel-extension-col-customer">
            <col class="arch-panel-extension-col-workload">
            <col class="arch-panel-extension-col-acr">
            <col class="arch-panel-extension-col-type">
            <col class="arch-panel-extension-col-flag">
            <col class="arch-panel-extension-col-flag">
          </colgroup>
          <thead>
            <tr>
              <th>Opportunity</th>
              <th>Customer</th>
              <th>Workload</th>
              <th class="is-numeric">ACR</th>
              <th>Type</th>
              <th>Tem SR?</th>
              <th>Tem Action?</th>
            </tr>
          </thead>
          <tbody>
            ${workloads.map((workload) => renderWorkloadTableRow(workload)).join("")}
          </tbody>
        </table>
      </div>
    `;
  }

  function renderWorkloadTableRow(
    workload,
    includeConsumptionStartDate = false,
    includeRampMonths = false
  ) {
    const hasRampMismatch =
      includeRampMonths && hasRampForecastMismatch(workload);

    return `
      <tr>
        <td>${renderOpportunityLink(workload)}</td>
        <td>${escapeHtml(workload.customerName || "")}</td>
        <td>${renderWorkloadLink(workload, hasRampMismatch)}</td>
        ${
          includeConsumptionStartDate
            ? `<td>${escapeHtml(formatDate(workload.consumptionStartDate) || "-")}</td>`
            : ""
        }
        ${
          includeRampMonths
            ? `<td class="is-numeric">${renderRampMonthsButton(workload)}</td>`
            : ""
        }
        <td class="is-numeric">${formatCurrency(workload.adjustedACR)}</td>
        <td>${escapeHtml(workload.opportunityForecastTypeGroup)}</td>
        <td>${renderBooleanBadge(workload.hasSR)}</td>
        <td>${renderHasActionCell(workload)}</td>
      </tr>
    `;
  }

  function renderRampMonthsButton(workload) {
    return `
      <button
        type="button"
        class="arch-panel-extension-row-link arch-panel-extension-inline-link-button"
        data-action="open-ramp-comparison"
        data-workload-id="${escapeHtml(workload.workloadId || "")}"
        aria-label="Abrir comparação de rampa para ${escapeHtml(
          workload.name || "workload"
        )}"
      >
        ${formatWholeNumber(workload.rampMonths || 0)}
      </button>
    `;
  }

  function renderBooleanBadge(value) {
    const isTrue = Boolean(value);
    const variantClass = isTrue ? "is-success" : "is-danger";
    const label = isTrue ? "Sim" : "Não";

    return `
      <span class="arch-panel-extension-badge ${variantClass}">
        ${label}
      </span>
    `;
  }

  function renderHasActionCell(workload) {
    if (workload.hasAction) {
      return renderBooleanBadge(true);
    }

    return `
      <div class="arch-panel-extension-action-cell">
        ${renderBooleanBadge(false)}
        <button
          type="button"
          class="arch-panel-extension-add-action-button"
          data-action="open-action-form"
          data-workload-id="${escapeHtml(workload.workloadId || "")}"
          aria-label="Criar action para ${escapeHtml(workload.name || "workload")}"
          title="Criar action"
        >
          ➕
        </button>
      </div>
    `;
  }

  function renderInsightRow(label, value, detail) {
    return `
      <div class="arch-panel-extension-insight">
        <div>
          <p class="arch-panel-extension-insight-label">${escapeHtml(label)}</p>
          <p class="arch-panel-extension-insight-detail">${escapeHtml(detail)}</p>
        </div>
        <p class="arch-panel-extension-insight-value">${escapeHtml(value)}</p>
      </div>
    `;
  }

  function renderDetailModal() {
    if (!appState.detailModal) {
      return "";
    }

    const isServiceRequestDetail = appState.detailModal.type === "serviceRequests";
    const detailItems = isServiceRequestDetail
      ? appState.detailModal.items || []
      : getSortedDetailItems();

    return `
      <div class="arch-panel-extension-detail-overlay">
        <div class="arch-panel-extension-detail-dialog" role="document">
          <header class="arch-panel-extension-detail-head">
            <div>
              <p class="arch-panel-extension-panel-label">${escapeHtml(appState.detailModal.label)}</p>
              <h3 class="arch-panel-extension-panel-title">${escapeHtml(appState.detailModal.title)}</h3>
            </div>
          </header>
          <div class="arch-panel-extension-detail-meta">
            ${
              isServiceRequestDetail
                ? `<span>${formatWholeNumber(detailItems.length)} SRs</span>`
                : `<span>${formatWholeNumber(detailItems.length)} workloads</span>
                   <span class="arch-panel-extension-panel-dot"></span>
                   <span>Total (ACR): ${formatCurrency(appState.detailModal.totalAcr)}</span>`
            }
          </div>
          ${
            isServiceRequestDetail
              ? renderServiceRequestDetailTable(detailItems)
              : renderDetailTable(
                  detailItems,
                  appState.detailModal.scope === "calendar-day"
                )
          }
          <div class="arch-panel-extension-detail-actions">
            <button
              type="button"
              class="arch-panel-extension-close"
              data-action="close-detail"
              aria-label="Fechar detalhamento"
            >
              Fechar
            </button>
          </div>
        </div>
      </div>
    `;
  }

  function renderActionFormModal() {
    if (!appState.actionFormModal || !appState.dataset) {
      return "";
    }

    const workload = findWorkloadById(appState.actionFormModal.workloadId);
    const userEmail = appState.dataset.user?.userEmail || "";

    if (!workload) {
      return "";
    }

    const modalError = cleanString(appState.actionFormModal.errorMessage);
    const isSubmitting = Boolean(appState.actionFormModal.isSubmitting);

    return `
      <div class="arch-panel-extension-detail-overlay">
        <div class="arch-panel-extension-action-dialog" role="document">
          <header class="arch-panel-extension-detail-head">
            <div>
              <p class="arch-panel-extension-panel-label">Create workload action</p>
              <h3 class="arch-panel-extension-panel-title">Criar action</h3>
            </div>
            <button
              type="button"
              class="arch-panel-extension-close"
              data-action="close-action-form"
              aria-label="Fechar formulário"
            >
              Fechar
            </button>
          </header>

          <div class="arch-panel-extension-detail-meta">
            <span>${renderOpportunityLink(workload)}</span>
            <span class="arch-panel-extension-panel-dot"></span>
            <span>${escapeHtml(workload.customerName || "")}</span>
            <span class="arch-panel-extension-panel-dot"></span>
            <span>${escapeHtml(workload.name || "Unnamed workload")}</span>
          </div>

          ${modalError ? `<p class="arch-panel-extension-form-error">${escapeHtml(modalError)}</p>` : ""}

          <form class="arch-panel-extension-action-form">
            <input type="hidden" name="parentType" value="WORKLOAD">
            <input type="hidden" name="parentId" value="${escapeHtml(workload.workloadId || "")}">
            <input type="hidden" name="ownerEmail" value="${escapeHtml(userEmail)}">
            <input type="hidden" name="role" value="CLOUD_ARCHITECT">
            <input type="hidden" name="name" value="SUCCESS_PLAN_CONSUM_RVW">
            <input type="hidden" name="status" value="COMPLETE">
            <input type="hidden" name="notes" value="[]">
            <input type="hidden" name="objective" value="">
            <input type="hidden" name="createdBy" value="${escapeHtml(userEmail)}">
            <input type="hidden" name="updatedBy" value="${escapeHtml(userEmail)}">

            <div class="arch-panel-extension-form-grid">
              <label class="arch-panel-extension-form-field">
                <span>Team</span>
                <select name="team" required ${isSubmitting ? "disabled" : ""}>
                  <option value="">Selecione</option>
                  ${ACTION_TEAM_OPTIONS.map(
                    (option) =>
                      `<option value="${escapeHtml(option.value)}">${escapeHtml(option.label)}</option>`
                  ).join("")}
                </select>
              </label>

              <label class="arch-panel-extension-form-field">
                <span>Data de início</span>
                <input type="date" name="startDate" required ${isSubmitting ? "disabled" : ""}>
              </label>

              <label class="arch-panel-extension-form-field">
                <span>Data fim</span>
                <input type="date" name="endDate" required ${isSubmitting ? "disabled" : ""}>
              </label>

              <label class="arch-panel-extension-form-field">
                <span>Complexity</span>
                <select name="complexity" required ${isSubmitting ? "disabled" : ""}>
                  <option value="">Selecione</option>
                  ${ACTION_COMPLEXITY_OPTIONS.map(
                    (option) =>
                      `<option value="${escapeHtml(option)}">${escapeHtml(option)}</option>`
                  ).join("")}
                </select>
              </label>
            </div>

            <div class="arch-panel-extension-detail-actions">
              <button
                type="button"
                class="arch-panel-extension-close"
                data-action="close-action-form"
                aria-label="Fechar formulário"
                ${isSubmitting ? "disabled" : ""}
              >
                Fechar
              </button>
              <button
                type="button"
                class="arch-panel-extension-utility-button"
                data-action="submit-action-form"
                ${isSubmitting ? "disabled" : ""}
              >
                ${isSubmitting ? "Criando..." : "Criar action"}
              </button>
            </div>
          </form>
        </div>
      </div>
    `;
  }

  function renderRampComparisonModal() {
    const modal = appState.rampComparisonModal;

    if (!modal) {
      return "";
    }

    const rows = modal.rows || [];
    const title = `${modal.workload.customerName || "Unknown customer"} | ${
      modal.workload.name || "Unnamed workload"
    }${
      modal.workload.description ? ` | ${modal.workload.description}` : ""
    }`;

    return `
      <div class="arch-panel-extension-detail-overlay">
        <div class="arch-panel-extension-ramp-dialog" role="document">
          <header class="arch-panel-extension-detail-head">
            <div>
              <p class="arch-panel-extension-panel-label">Ramp forecast comparison</p>
              <h3 class="arch-panel-extension-panel-title">${escapeHtml(title)}</h3>
            </div>
          </header>
          <div class="arch-panel-extension-detail-meta">
            <span>Ramp months: ${formatWholeNumber(modal.workload.rampMonths || 0)}</span>
            <span class="arch-panel-extension-panel-dot"></span>
            <span>Adjusted ACR: ${formatCurrency(modal.workload.adjustedACR)}</span>
            <span class="arch-panel-extension-panel-dot"></span>
            <span>Consumption start: ${escapeHtml(
              formatDate(modal.workload.consumptionStartDate) || "-"
            )}</span>
          </div>
          ${renderRampComparisonPivotTable(rows)}
          <div class="arch-panel-extension-detail-actions">
            <button
              type="button"
              class="arch-panel-extension-utility-button is-primary"
              data-action="open-forecast-update-confirm"
              ${rows.length ? "" : "disabled"}
            >
              Atualizar pelo Calculated ramp
            </button>
            <button
              type="button"
              class="arch-panel-extension-close"
              data-action="close-ramp-comparison"
              aria-label="Fechar comparação de rampa"
            >
              Fechar
            </button>
          </div>
        </div>
      </div>
    `;
  }

  function renderRampComparisonPivotTable(rows) {
    if (!rows.length) {
      return `<div class="arch-panel-extension-empty-state">Nenhum forecast encontrado para comparar.</div>`;
    }

    return `
      <div class="arch-panel-extension-table-wrap is-ramp-pivot">
        <table class="arch-panel-extension-table arch-panel-extension-ramp-pivot-table">
          <tbody>
            <tr>
              <th>Period</th>
              ${rows.map((row) => `<td>${escapeHtml(row.periodLabel)}</td>`).join("")}
            </tr>
            <tr>
              <th>Current adjusted</th>
              ${rows
                .map(
                  (row) =>
                    `<td class="is-numeric">${formatCurrency(row.currentValue)}</td>`
                )
                .join("")}
            </tr>
            <tr>
              <th>Calculated ramp</th>
              ${rows
                .map(
                  (row) =>
                    `<td class="is-numeric">${formatCurrency(row.calculatedValue)}</td>`
                )
                .join("")}
            </tr>
            <tr>
              <th>Delta</th>
              ${rows
                .map(
                  (row) =>
                    `<td class="is-numeric${
                      isNonZeroAmount(row.delta) ? " is-delta-different" : ""
                    }">${formatCurrency(row.delta)}</td>`
                )
                .join("")}
            </tr>
          </tbody>
        </table>
      </div>
    `;
  }

  function renderForecastUpdateConfirmModal() {
    const modal = appState.forecastUpdateConfirmModal;

    if (!modal) {
      return "";
    }

    return `
      <div class="arch-panel-extension-detail-overlay is-confirmation">
        <div class="arch-panel-extension-confirm-dialog" role="document">
          <header class="arch-panel-extension-detail-head">
            <div>
              <p class="arch-panel-extension-panel-label">Confirmar atualização</p>
              <h3 class="arch-panel-extension-panel-title">Atualizar forecast pelo Calculated ramp?</h3>
            </div>
          </header>
          <p class="arch-panel-extension-detail-subtitle">
            Esta ação enviará ${formatWholeNumber(
              modal.payload.length
            )} meses calculados para o workload atual. Os valores atuais do forecast serão substituídos pelos valores da linha Calculated ramp.
          </p>
          ${
            modal.errorMessage
              ? `<p class="arch-panel-extension-form-error">${escapeHtml(
                  modal.errorMessage
                )}</p>`
              : ""
          }
          <div class="arch-panel-extension-detail-actions">
            <button
              type="button"
              class="arch-panel-extension-close"
              data-action="close-forecast-update-confirm"
              ${modal.isSubmitting ? "disabled" : ""}
            >
              Cancelar
            </button>
            <button
              type="button"
              class="arch-panel-extension-utility-button is-primary"
              data-action="submit-forecast-update"
              ${modal.isSubmitting ? "disabled" : ""}
            >
              ${modal.isSubmitting ? "Atualizando..." : "Confirmar atualização"}
            </button>
          </div>
        </div>
      </div>
    `;
  }

  function renderTimeEntriesDrawer() {
    const drawer = appState.timeEntriesDrawer;

    if (!drawer) {
      return "";
    }

    const items = Array.isArray(drawer.items) ? drawer.items : [];

    return `
      <aside class="arch-panel-extension-time-drawer" aria-label="Time entries summary">
        <header class="arch-panel-extension-time-drawer-head">
          <div>
            <p class="arch-panel-extension-panel-label">Horas apontadas</p>
            <h3 class="arch-panel-extension-panel-title">SR ${escapeHtml(drawer.srNumber || "-")}</h3>
          </div>
        </header>
        ${renderTimeEntriesDrawerBody(drawer, items)}
        <footer class="arch-panel-extension-time-drawer-actions">
          <button
            type="button"
            class="arch-panel-extension-close arch-panel-extension-time-drawer-close"
            data-action="close-time-entries"
            aria-label="Fechar apontamentos de horas"
          >
            Fechar
          </button>
        </footer>
      </aside>
    `;
  }

  function renderTimeEntriesDrawerBody(drawer, items) {
    if (drawer.status === "loading") {
      return `
        <div class="arch-panel-extension-time-drawer-state">
          <p class="arch-panel-extension-summary-label">Carregando</p>
          <p class="arch-panel-extension-summary-value">Buscando dados</p>
          <p class="arch-panel-extension-summary-detail">Consultando o resumo de time entries na origem COMCIP.</p>
        </div>
      `;
    }

    if (drawer.status === "error") {
      return `
        <div class="arch-panel-extension-time-drawer-state is-error">
          <p class="arch-panel-extension-summary-label">Erro na requisição</p>
          <p class="arch-panel-extension-detail-subtitle">${escapeHtml(drawer.errorMessage || "Não foi possível carregar os apontamentos.")}</p>
          <button type="button" class="arch-panel-extension-utility-button" data-action="retry-time-entries">
            Tentar novamente
          </button>
        </div>
      `;
    }

    const groupedItems = groupTimeEntriesByResourceName(items);

    return `
      <div class="arch-panel-extension-time-drawer-meta">
        <span>${formatWholeNumber(items.length)} registros</span>
        <span>${formatWholeNumber(groupedItems.length)} resources</span>
      </div>
      ${
        items.length
          ? groupedItems.map((group) => renderTimeEntryGroup(group)).join("")
          : `<div class="arch-panel-extension-empty-state">Nenhum registro retornado para esta SR.</div>`
      }
    `;
  }

  function renderTimeEntryGroup(group) {
    const totalTimeSpent = group.items.reduce((sum, item) => {
      return sum + getTimeEntryTimeSpent(item);
    }, 0);

    return `
      <section class="arch-panel-extension-time-entry-group">
        <header class="arch-panel-extension-time-entry-group-head">
          <div>
            <p class="arch-panel-extension-summary-label">resourceName</p>
            <h4>${escapeHtml(group.resourceName)}</h4>
          </div>
          <span>${formatHours(totalTimeSpent)} total</span>
        </header>
        <div class="arch-panel-extension-time-entry-table-wrap">
          <table class="arch-panel-extension-time-entry-table">
            <thead>
              <tr>
                <th>Activity</th>
                <th>Task type</th>
                <th class="is-numeric">Time spent</th>
              </tr>
            </thead>
            <tbody>
              ${group.items.map((item) => renderTimeEntryRow(item)).join("")}
            </tbody>
            <tfoot>
              <tr>
                <th colspan="2">Total</th>
                <th class="is-numeric">${formatHours(totalTimeSpent)}</th>
              </tr>
            </tfoot>
          </table>
        </div>
      </section>
    `;
  }

  function renderTimeEntryRow(item) {
    return `
      <tr>
        <td>${escapeHtml(getTimeEntryActivity(item) || "-")}</td>
        <td>${escapeHtml(getTimeEntryTaskType(item) || "-")}</td>
        <td class="is-numeric">${formatHours(getTimeEntryTimeSpent(item))}</td>
      </tr>
    `;
  }

  function renderDetailTable(items, includeConsumptionStartDate = false) {
    return `
      <div class="arch-panel-extension-table-wrap is-detail">
        <table class="arch-panel-extension-table">
          <thead>
            <tr>
              <th>${renderSortButton("Opportunity", DETAIL_SORT_KEYS.opportunityNumber)}</th>
              <th>${renderSortButton("Customer", DETAIL_SORT_KEYS.customerName)}</th>
              <th>${renderSortButton("Workload", DETAIL_SORT_KEYS.workload)}</th>
              ${includeConsumptionStartDate ? "<th>consumptionStartDate</th>" : ""}
              <th class="is-numeric">${renderSortButton("Ramp months", DETAIL_SORT_KEYS.rampMonths, true)}</th>
              <th class="is-numeric">${renderSortButton("ACR", DETAIL_SORT_KEYS.adjustedACR, true)}</th>
              <th>${renderSortButton("Type", DETAIL_SORT_KEYS.opportunityForecastTypeGroup)}</th>
              <th>${renderSortButton("Tem SR?", DETAIL_SORT_KEYS.hasSR)}</th>
              <th>${renderSortButton("Tem Action?", DETAIL_SORT_KEYS.hasAction)}</th>
            </tr>
          </thead>
          <tbody>
            ${items
              .map((workload) =>
                renderWorkloadTableRow(workload, includeConsumptionStartDate, true)
              )
              .join("")}
          </tbody>
        </table>
      </div>
    `;
  }

  function buildRampForecastComparisonRows(workloads) {
    return (workloads || [])
      .flatMap((workload) => {
        const startDate = parseDatePreservingDateOnly(workload.consumptionStartDate);

        if (Number.isNaN(startDate.getTime())) {
          return [];
        }

        const startMonth = startDate.getMonth() + 1;
        const startYear = startDate.getFullYear();
        const workloadLabel = `${workload.name || "Unnamed workload"}${
          workload.description ? ` | ${workload.description}` : ""
        }`;

        return (workload.forecast || [])
          .map((forecastItem) => {
            const forecastMonth = parseForecastMonthNumber(forecastItem.month);
            const forecastYear = toNumber(forecastItem.year);

            if (!forecastMonth || !forecastYear) {
              return null;
            }

            const monthIndex =
              (forecastYear - startYear) * 12 + (forecastMonth - startMonth) + 1;

            const currentValue = toNumber(forecastItem.adjustedConsumptionAmount);
            const calculatedValue =
              monthIndex >= 1 && monthIndex <= 12
                ? calculateRampForecastAmount({
                    adjustedACR: workload.adjustedACR,
                    rampMonths: workload.rampMonths,
                    monthIndex,
                    consumptionStartDate: startDate,
                  })
                : 0;

            return {
              workloadLabel,
              periodLabel: formatForecastPeriodLabel(forecastYear, forecastMonth),
              currentValue,
              calculatedValue,
              delta: currentValue - calculatedValue,
              monthIndex,
              year: forecastYear,
              month: forecastMonth,
              sortKey: `${workloadLabel}|${String(forecastYear).padStart(
                4,
                "0"
              )}-${String(forecastMonth).padStart(2, "0")}`,
            };
          })
          .filter(Boolean);
      })
      .sort((left, right) => left.sortKey.localeCompare(right.sortKey));
  }

  function hasRampForecastMismatch(workload) {
    return buildRampForecastComparisonRows([workload]).some((row) =>
      isNonZeroAmount(row.delta)
    );
  }

  function calculateRampForecastAmount({
    adjustedACR,
    rampMonths,
    monthIndex,
    consumptionStartDate,
  }) {
    const annualValue = toNumber(adjustedACR);
    const ramp = Math.max(0, toNumber(rampMonths));
    const month = Math.max(1, toNumber(monthIndex));

    if (!annualValue) {
      return 0;
    }

    if (ramp <= 0) {
      return Math.round(
        (annualValue / 12) *
          getStartMonthProrationFactor(month, consumptionStartDate)
      );
    }

    const steadyStateMonthlyAmount = (2 * annualValue) / (24 - ramp);
    const rampStepCount = ramp + 1;
    const calculatedAmount =
      month <= rampStepCount
        ? steadyStateMonthlyAmount * (month / rampStepCount)
        : steadyStateMonthlyAmount;

    return Math.round(
      calculatedAmount * getStartMonthProrationFactor(month, consumptionStartDate)
    );
  }

  function getStartMonthProrationFactor(monthIndex, consumptionStartDate) {
    if (toNumber(monthIndex) !== 1) {
      return 1;
    }

    const startDate = parseDatePreservingDateOnly(consumptionStartDate);

    if (Number.isNaN(startDate.getTime())) {
      return 1;
    }

    const daysInMonth = new Date(
      startDate.getFullYear(),
      startDate.getMonth() + 1,
      0
    ).getDate();
    const remainingDays = daysInMonth - startDate.getDate() + 1;

    return Math.max(0, Math.min(1, remainingDays / daysInMonth));
  }

  function isNonZeroAmount(value) {
    return Math.abs(toNumber(value)) > 0.000001;
  }

  function parseForecastMonthNumber(value) {
    if (typeof value === "number") {
      return value >= 1 && value <= 12 ? value : 0;
    }

    const normalized = normalizeString(value);
    const numericMonth = Number.parseInt(normalized, 10);

    if (numericMonth >= 1 && numericMonth <= 12) {
      return numericMonth;
    }

    const monthMap = {
      JAN: 1,
      JANUARY: 1,
      FEB: 2,
      FEBRUARY: 2,
      MAR: 3,
      MARCH: 3,
      APR: 4,
      APRIL: 4,
      MAY: 5,
      JUN: 6,
      JUNE: 6,
      JUL: 7,
      JULY: 7,
      AUG: 8,
      AUGUST: 8,
      SEP: 9,
      SEPT: 9,
      SEPTEMBER: 9,
      OCT: 10,
      OCTOBER: 10,
      NOV: 11,
      NOVEMBER: 11,
      DEC: 12,
      DECEMBER: 12,
    };

    return monthMap[normalized] || 0;
  }

  function formatForecastPeriodLabel(year, month) {
    const fiscalYear = month >= 6 ? year + 1 : year;
    const fiscalYearLabel = formatWeekNumber(fiscalYear % 100);
    const monthLabel = new Intl.DateTimeFormat("en-US", {
      month: "short",
    }).format(new Date(year, month - 1, 1));

    return `FY${fiscalYearLabel} ${monthLabel}`;
  }

  function renderServiceRequestDetailTable(items) {
    return `
      <div class="arch-panel-extension-table-wrap is-detail">
        <table class="arch-panel-extension-table arch-panel-extension-sr-detail-table">
          <thead>
            <tr>
              <th>Customer</th>
              <th>SR Number</th>
              <th>Queue</th>
              <th>Service</th>
              <th>Pillar</th>
              <th class="is-numeric">Oppty value</th>
              <th class="is-numeric">Horas apontadas</th>
              <th>Customer deadline</th>
              <th>Oppty Status</th>
            </tr>
          </thead>
          <tbody>
            ${items
              .map(
                (serviceRequest) => `
                  <tr>
                    <td>${escapeHtml(serviceRequest.customerName || "-")}</td>
                    <td>${renderServiceRequestLink(serviceRequest)}</td>
                    <td>${escapeHtml(serviceRequest.queueName || "-")}</td>
                    <td>${escapeHtml(serviceRequest.serviceName || "-")}</td>
                    <td>${escapeHtml(serviceRequest.pillarLabel || "-")}</td>
                    <td class="is-numeric">${formatCurrency(serviceRequest.opportunityValue)}</td>
                    <td class="is-numeric">${renderReportedHoursLink(serviceRequest)}</td>
                    <td>${escapeHtml(formatDate(serviceRequest.customerDeadline) || "-")}</td>
                    <td>${escapeHtml(serviceRequest.opportunityStatusLabel || "-")}</td>
                  </tr>
                `
              )
              .join("")}
          </tbody>
        </table>
      </div>
    `;
  }

  function renderSortButton(label, sortKey, isNumeric = false) {
    const currentKey = appState.detailModal?.sortKey || "";
    const currentDirection = appState.detailModal?.sortDirection || "asc";
    const indicator =
      currentKey === sortKey ? (currentDirection === "asc" ? " ↑" : " ↓") : "";

    return `
      <button
        type="button"
        class="arch-panel-extension-sort-button${isNumeric ? " is-numeric" : ""}"
        data-action="sort-detail"
        data-sort-key="${escapeHtml(sortKey)}"
        aria-label="Sort by ${escapeHtml(label)}"
      >
        <span>${escapeHtml(label)}${indicator}</span>
      </button>
    `;
  }

  function renderOpportunityLink(workload) {
    const label = workload.opportunityNumber || "Opportunity";

    if (!workload.opportunityId || !workload.opportunityNumber) {
      return escapeHtml(label);
    }

    const href = `https://eeho.fa.us2.oraclecloud.com/fscmUI/redwood/cx-sales/application/container/opportunities/opportunities-detail?id=${encodeURIComponent(
      workload.opportunityId
    )}&puid=${encodeURIComponent(workload.opportunityNumber)}`;

    return `<a class="arch-panel-extension-row-link" href="${href}" target="_blank" rel="noreferrer">${escapeHtml(label)}</a>`;
  }

  function renderServiceRequestLink(serviceRequest) {
    const srNumber = cleanString(serviceRequest?.srNumber);

    if (!srNumber) {
      return "-";
    }

    const href = `https://eeho.fa.us2.oraclecloud.com/fscmUI/redwood/service/ec/container/sr/edit?srNumber=${encodeURIComponent(
      srNumber
    )}`;

    return `<a class="arch-panel-extension-row-link" href="${href}" target="_blank" rel="noreferrer">${escapeHtml(srNumber)}</a>`;
  }

  function renderReportedHoursLink(serviceRequest) {
    const srNumber = cleanString(serviceRequest?.srNumber);
    const label = formatHours(serviceRequest?.totalHoursWorked);

    if (!srNumber) {
      return escapeHtml(label);
    }

    return `
      <button
        type="button"
        class="arch-panel-extension-row-link arch-panel-extension-inline-link-button"
        data-action="open-time-entries"
        data-sr-number="${escapeHtml(srNumber)}"
        aria-label="Abrir apontamentos de horas da SR ${escapeHtml(srNumber)}"
      >
        ${escapeHtml(label)}
      </button>
    `;
  }

  function renderWorkloadLink(workload, showRampAlert = false) {
    const description = workload.description ? ` | ${workload.description}` : "";
    const label = `${workload.name || "Unnamed workload"}${description}`;

    if (!workload.workloadId) {
      return `${escapeHtml(label)}${renderRampAlertButton(workload, showRampAlert)}`;
    }

    const href = `https://spa.oracle.com/oalcrm/web/api/g2m-consumer-application/ui/index.html?ojr=workload_workbench/workload_details;workloadId=${encodeURIComponent(
      workload.workloadId
    )}`;

    return `
      <span class="arch-panel-extension-workload-link-cell">
        <a class="arch-panel-extension-row-link" href="${href}" target="_blank" rel="noreferrer">${escapeHtml(label)}</a>
        ${renderRampAlertButton(workload, showRampAlert)}
      </span>
    `;
  }

  function renderRampAlertButton(workload, showRampAlert) {
    if (!showRampAlert || !workload.workloadId) {
      return "";
    }

    return `
      <button
        type="button"
        class="arch-panel-extension-ramp-alert-button"
        data-action="open-ramp-comparison"
        data-workload-id="${escapeHtml(workload.workloadId || "")}"
        title="Requer atenção: existe Delta diferente de zero"
        aria-label="Abrir comparação de rampa com inconsistência para ${escapeHtml(
          workload.name || "workload"
        )}"
      >
        !
      </button>
    `;
  }

  function getHeaderNote() {
    if (appState.status === "loading") {
      return appState.loadingMessage || "Loading";
    }

    if (appState.status === "error") {
      return "Extraction failed";
    }

    if (appState.dataset) {
      return `${appState.dataset.user.userEmail} · ${formatWholeNumber(
        appState.dataset.summary.eligibleWorkloads.length
      )} eligible workloads`;
    }

    return "Ready";
  }

  function getHeaderSummary() {
    if (appState.status === "loading") {
      return appState.loadingMessage || "Loading";
    }

    if (appState.status === "error") {
      return "Extraction failed";
    }

    if (appState.dataset) {
      return `${appState.dataset.user.userEmail} | ${formatWholeNumber(
        appState.dataset.summary.eligibleWorkloads.length
      )} eligible workloads`;
    }

    return "Ready";
  }

  function openModal() {
    const overlay = ensureModal();

    if (!overlay) {
      return;
    }

    window.clearTimeout(closeTimer);
    restoreFocusTarget =
      document.activeElement instanceof HTMLElement ? document.activeElement : null;

    overlay.hidden = false;
    overlay.setAttribute("aria-hidden", "false");
    lockScroll();

    window.requestAnimationFrame(() => {
      overlay.classList.add(CLASSES.overlayOpen);
      const primaryAction = overlay.querySelector("[data-action='close']");
      primaryAction?.focus();
    });

    if (!appState.dataset && appState.status !== "loading") {
      void hydrateDatasetFromCache();
    }
  }

  function closeModal() {
    const overlay = document.getElementById(IDS.overlay);

    if (!overlay || overlay.hidden) {
      return;
    }

    overlay.classList.remove(CLASSES.overlayOpen);
    overlay.setAttribute("aria-hidden", "true");
    unlockScroll();
    appState.detailModal = null;
    appState.actionFormModal = null;
    appState.rampComparisonModal = null;
    appState.forecastUpdateConfirmModal = null;
    appState.timeEntriesDrawer = null;

    if (restoreFocusTarget && restoreFocusTarget.isConnected) {
      restoreFocusTarget.focus();
    }

    restoreFocusTarget = null;

    window.clearTimeout(closeTimer);
    closeTimer = window.setTimeout(() => {
      overlay.hidden = true;
    }, 160);
  }

  async function refreshData() {
    if (appState.status === "loading") {
      return;
    }

    try {
      appState.status = "loading";
      appState.errorMessage = "";
      updateLoadingProgress("Requesting current user", 4);

      const user = await fetchCurrentUser();

      updateLoadingProgress("Loading current resource user", 8);

      const resourceCurrentUser = await fetchResourceCurrentUser(user.userEmail).catch(
        () => null
      );

      updateLoadingProgress("Loading customer summary pages", 12);

      const customers = await fetchAllCustomers(user.userEmail);

      updateLoadingProgress(
        `Loading workloads for ${formatWholeNumber(customers.length)} customers`,
        24
      );

      let completedCustomers = 0;
      const customersWithWorkloads = await mapWithConcurrency(
        customers,
        4,
        async (customer, index) => {
          updateLoadingProgress(
            `Loading workloads ${index + 1}/${customers.length}: ${customer.name}`,
            getSegmentProgress(24, 52, completedCustomers, customers.length)
          );

          const workloads = await fetchCustomerWorkloads(customer);
          completedCustomers += 1;
          updateLoadingProgress(
            `Loaded workloads ${completedCustomers}/${customers.length}: ${customer.name}`,
            getSegmentProgress(24, 52, completedCustomers, customers.length)
          );

          return {
            customerId: customer.customerId,
            name: customer.name,
            workloads,
          };
        }
      );

      const allWorkloads = customersWithWorkloads.flatMap((customer) => {
        return customer.workloads.map((workload) => ({
          ...workload,
          customerId: customer.customerId,
          customerName: customer.name,
        }));
      });

      updateLoadingProgress(
        `Loading actions and service requests for ${formatWholeNumber(
          allWorkloads.length
        )} workloads`,
        56
      );

      let completedWorkloads = 0;
      const enrichedWorkloads = await mapWithConcurrency(
        allWorkloads,
        6,
        async (workload, index) => {
          updateLoadingProgress(
            `Loading actions and SRs ${index + 1}/${allWorkloads.length}: ${workload.name}`,
            getSegmentProgress(56, 86, completedWorkloads, allWorkloads.length)
          );

          const [actions, serviceRequests] = await Promise.all([
            fetchWorkloadActions(workload.workloadId),
            fetchWorkloadServiceRequests(workload.workloadId),
          ]);
          completedWorkloads += 1;
          updateLoadingProgress(
            `Loaded actions and SRs ${completedWorkloads}/${allWorkloads.length}: ${workload.name}`,
            getSegmentProgress(56, 86, completedWorkloads, allWorkloads.length)
          );

          const hasSR = serviceRequests.some((serviceRequest) => {
            return (
              normalizeString(serviceRequest.status) === "SVC_PENDING_DELIVERY" &&
              teamContainsUser(serviceRequest.team, user.userEmail)
            );
          });

          const hasAction = actions.some((action) => {
            return normalizeString(action.owner) === normalizeString(user.userEmail);
          });

          return {
            ...workload,
            actions,
            serviceRequests,
            hasSR,
            hasAction,
          };
        }
      );

      const customersMap = new Map(
        customersWithWorkloads.map((customer) => [
          customer.customerId,
          {
            customerId: customer.customerId,
            name: customer.name,
            workloads: [],
          },
        ])
      );

      for (const workload of enrichedWorkloads) {
        const customer = customersMap.get(workload.customerId);

        if (customer) {
          customer.workloads.push(stripTransientFields(workload));
        }
      }

      updateLoadingProgress("Loading pending delivery service requests", 90);

      const pendingServiceRequests = await fetchPendingServiceRequests().catch(
        () => []
      );
      updateLoadingProgress("Preparing dashboard cache", 96);
      const finalCustomers = Array.from(customersMap.values());
      const exportPayload = createExportPayload(
        user,
        finalCustomers,
        pendingServiceRequests,
        resourceCurrentUser
      );
      const dataset = createDatasetSnapshot(exportPayload);

      await writeCachedDataset(exportPayload);
      updateLoadingProgress("Dashboard ready", 100);

      appState.dataset = dataset;
      appState.status = "ready";
      appState.loadingMessage = "";
      appState.loadingProgress = 0;
      appState.detailModal = null;
      renderModal();
    } catch (error) {
      appState.status = "error";
      appState.errorMessage = getErrorMessage(error);
      appState.loadingMessage = "";
      appState.loadingProgress = 0;
      renderModal();
    }
  }

  function updateLoadingProgress(message, progress) {
    appState.loadingMessage = message;
    appState.loadingProgress = Math.max(0, Math.min(Number(progress) || 0, 100));

    if (!updateLoadingProgressDom()) {
      renderModal();
      window.requestAnimationFrame(() => {
        updateLoadingProgressDom();
      });
    }
  }

  function updateLoadingProgressDom() {
    const overlay = document.getElementById(IDS.overlay);
    const progress = Math.max(0, Math.min(appState.loadingProgress || 0, 100));
    const stateCopy = overlay?.querySelector(".arch-panel-extension-state-copy");
    const progressRoot = overlay?.querySelector(
      ".arch-panel-extension-loading-progress"
    );
    const progressBar = overlay?.querySelector(
      ".arch-panel-extension-loading-progress-fill"
    );
    const progressTrackValue = overlay?.querySelector(
      ".arch-panel-extension-loading-progress-value"
    );
    const shellNote = overlay?.querySelector(".arch-panel-extension-shell-note");

    if (!stateCopy || !progressRoot || !progressBar) {
      return false;
    }

    stateCopy.textContent = appState.loadingMessage;
    progressRoot.setAttribute("aria-valuenow", String(Math.round(progress)));
    progressBar.style.width = `${progress}%`;

    if (progressTrackValue) {
      progressTrackValue.textContent = formatProgressPercent(progress);
    }

    if (shellNote) {
      shellNote.textContent = appState.loadingMessage || "Loading";
    }

    return true;
  }

  function getSegmentProgress(start, end, current, total) {
    const denominator = Math.max(Number(total) || 0, 1);
    const ratio = Math.max(0, Math.min((Number(current) || 0) / denominator, 1));

    return start + (end - start) * ratio;
  }

  async function fetchPendingServiceRequests() {
    const response = await sendComcipPostMessage();

    if (!response?.ok) {
      const payloadMessage =
        typeof response?.payload === "string"
          ? cleanString(response.payload)
          : firstNonEmptyString([
              response?.payload?.message,
              response?.payload?.error,
              response?.payload?.title,
              response?.payload?.detail,
            ]);

      throw new Error(
        payloadMessage ||
          response?.error ||
          `COMCIP request failed (${response?.status || 0}).`
      );
    }

    return normalizePendingServiceRequests(response.payload);
  }

  function sendComcipPostMessage() {
    return sendComcipRequestMessage({
      method: "POST",
      url: COMCIP_REQUEST.url,
      payload: createComcipServiceRequestPayload(),
      timeoutMessage: "Timed out while requesting COMCIP data.",
    });
  }

  function sendComcipGetMessage(url) {
    return sendComcipRequestMessage({
      method: "GET",
      url,
      payload: null,
      timeoutMessage: "Timed out while requesting COMCIP data.",
    });
  }

  function sendComcipRequestMessage({ method, url, payload, timeoutMessage }) {
    return new Promise((resolve, reject) => {
      const timeout = window.setTimeout(() => {
        reject(new Error(timeoutMessage || "Timed out while requesting COMCIP data."));
      }, 130000);

      chrome.runtime.sendMessage(
        {
          type: "ARCH_PANEL_COMCIP_REQUEST",
          method,
          url,
          payload,
          headers: {
            "accept-language": navigator.language || "pt-BR",
            "x-vb-application-version": COMCIP_REQUEST.appVersion,
          },
        },
        (response) => {
          window.clearTimeout(timeout);
          const runtimeError = chrome.runtime.lastError;

          if (runtimeError) {
            reject(new Error(runtimeError.message));
            return;
          }

          resolve(response || null);
        }
      );
    });
  }

  function createComcipServiceRequestPayload() {
    return {
      entity: "CRMServiceRequest",
      offset: 0,
      limit: 100,
      onlyData: true,
      language: "US",
      fields: [
        "SrNumber",
        "Title",
        "LastUpdateDate",
        "CreationDate",
        "PrimaryPillarNew_c",
        "PrimaryPillarNew_c_localizedValue",
        "CountryText_c",
        "OpportunityName_Id_c.OptyId",
        "OpportunityName_Id_c.Name",
        "OpportunityName_Id_c.OptyNumber",
        "OpportunityName_Id_c.OpportunityType_c",
        "OpportunityName_Id_c.StatusCode",
        "OpportunityName_Id_c.EffectiveDate",
        "OpportunityName_Id_c.StatusCode_localizedValue",
        "OpportunityName_Id_c.PrimaryRevenue.WinProb",
        "OpportunityName_Id_c.PrimaryRevenue.RevnAmount",
        "OpportunityName_Id_c.PrimaryRevenue.CrmConversionRate",
        "OpportunityName_Id_c.WorkloadAmountUSDWorkspace_c",
        "CustomerAccount.PartyId",
        "CustomerAccount.PartyUniqueName",
        "CustomerAccount.PartyNumber",
        "CustomerAccount.NamedFlag",
        "StatusCd",
        "StatusCd_localizedValue",
        "ServiceNew_Id_c",
        "CustomerDeadline_c",
        "Owner.PartyId",
        "Owner.PartyName",
        "Owner.PrimaryEmail.EmailAddress",
        "Owner.ResourceEmailAddress",
        "ReportedByPartyId.PrimaryEmail.EmailAddress",
        "Queue.QueueId",
        "Queue.QueueName",
        "ServiceRequest_Id_SRToInternalSR",
        "ReportedHours_c",
        "ProblemDescription",
        "AccountRegistryId_c",
      ],
      sort: [
        {
          attribute: "LastUpdateDate",
          direction: "descending",
        },
      ],
      q: {
        op: "$and",
        criteria: [
          {
            op: "$eq",
            attribute: "RecordSet",
            value: "ORA_SVC_MY_SUBORD_SR_TEAM_SRS",
          },
          {
            op: "$in",
            attribute: "StatusCd",
            values: ["SVC_PENDING_DELIVERY"],
          },
        ],
      },
      aggregations: {
        StatusCd: {
          ignore: true,
          terms: {
            attribute: "StatusCd",
            includeTerms: [
              "SVC_PENDING_ACCEPTANCE",
              "SVC_PENDING_DELIVERY",
              "SVC_PENDING_RESOURCING",
              "SVC_SE_MGR_CLOSED",
              "SVC_REJECT",
            ],
            excludeTerms: ["SVC_PENDING_DISPATCHER", "ORA_SVC_NEW", "SVC_REJECT"],
            minBucketCount: 1,
            maxNumberOfBuckets: 5,
            other: false,
            missing: false,
            localize: true,
          },
        },
        Queue: createTermsAggregation("Queue", 10),
        CustomerAccount: createTermsAggregation("CustomerAccount", 5),
        OpportunityStatus: createTermsAggregation(
          "OpportunityName_Id_c.StatusCode",
          6
        ),
        Service: createTermsAggregation("ServiceNew_Id_c", 5),
        Country: createTermsAggregation("CountryText_c", 5),
        Pillar: createTermsAggregation("PrimaryPillarNew_c", 5),
        WinProb: {
          ignore: true,
          range: {
            attribute: "OpportunityName_Id_c.PrimaryRevenue.WinProb",
            ranges: [
              { key: "0-10 % SQL", from: 0, to: 11 },
              { key: "20-30 % Pipeline", from: 20, to: 31 },
              { key: "40-50 % Upside", from: 40, to: 51 },
              { key: "60-90 % Forecast", from: 60, to: 91 },
              { key: "100 % Won", from: 100, to: 101 },
            ],
          },
        },
        Amount: {
          ignore: true,
          range: {
            attribute: "OpportunityName_Id_c.PrimaryRevenue.RevnAmount",
            ranges: [
              { key: "0-10,000", from: 0, to: 10000 },
              { key: "10,000-50,000", from: 10000, to: 50000 },
              { key: "50,000-100,000", from: 50000, to: 100000 },
              { key: ">=100,000", from: 100000 },
            ],
          },
        },
        OpportunityName_Id_c: createTermsAggregation("OpportunityName_Id_c", 5),
      },
    };
  }

  function createTermsAggregation(attribute, maxNumberOfBuckets) {
    return {
      ignore: true,
      terms: {
        attribute,
        includeTerms: [],
        minBucketCount: 1,
        maxNumberOfBuckets,
        other: false,
        missing: false,
        localize: true,
      },
    };
  }

  function normalizePendingServiceRequests(payload) {
    const items = Array.isArray(payload)
      ? payload
      : extractArray(payload, ["items", "data", "results", "content"]);

    return items
      .map((item) => normalizePendingServiceRequest(item))
      .filter((item) => item.srNumber || item.customerName || item.lastUpdateDate)
      .sort((left, right) => {
        return (
          new Date(right.lastUpdateDate || 0).getTime() -
          new Date(left.lastUpdateDate || 0).getTime()
        );
      });
  }

  function normalizePendingServiceRequest(item) {
    return {
      customerName: cleanString(
        getFieldValue(item, [
          "CustomerAccount.PartyUniqueName",
          "CustomerAccount.PartyName",
          "CustomerAccount.Name",
          "customerName",
        ])
      ),
      lastUpdateDate: cleanString(getFieldValue(item, ["LastUpdateDate", "lastUpdateDate"])),
      srNumber: cleanString(getFieldValue(item, ["SrNumber", "srNumber"])),
      queueName: cleanString(
        getFieldValue(item, ["Queue.QueueName", "QueueName", "queueName"])
      ),
      requestedBy: cleanString(
        getFieldValue(item, [
          "ReportedByPartyId.PrimaryEmail.EmailAddress",
          "ReportedByPartyId.EmailAddress",
          "requestedBy",
        ])
      ),
      creationDate: cleanString(getFieldValue(item, ["CreationDate", "creationDate"])),
      opportunityNumber: cleanString(
        getFieldValue(item, [
          "OpportunityName_Id_c.OptyNumber",
          "OptyNumber",
          "opportunityNumber",
        ])
      ),
      srStatusLabel: cleanString(
        getFieldValue(item, ["StatusCd_localizedValue", "StatusCd", "srStatusLabel"])
      ),
      opportunityStatusLabel: cleanString(
        getFieldValue(item, [
          "OpportunityName_Id_c.StatusCode_localizedValue",
          "OpportunityName_Id_c.StatusCode",
          "opportunityStatusLabel",
        ])
      ),
      serviceName: cleanString(
        getFieldValue(item, [
          "ServiceNew_Id_c.RecordName",
          "ServiceNew_Id_c",
          "serviceName",
        ])
      ),
      country: cleanString(getFieldValue(item, ["CountryText_c", "country"])),
      totalHoursWorked: toNumber(
        getFieldValue(item, ["ReportedHours_c", "totalHoursWorked"])
      ),
      customerDeadline: cleanString(
        getFieldValue(item, ["CustomerDeadline_c", "customerDeadline"])
      ),
      opportunityValue: toNumber(
        getFieldValue(item, [
          "WorkloadAmountUSDWorkspace_c",
          "OpportunityName_Id_c.WorkloadAmountUSDWorkspace_c",
          "OpportunityName_Id_c.PrimaryRevenue.RevnAmount",
          "opportunityValue",
        ])
      ),
      pillarLabel: cleanString(
        getFieldValue(item, [
          "PrimaryPillarNew_c_localizedValue",
          "PrimaryPillarNew_c",
          "pillarLabel",
        ])
      ),
    };
  }

  function getFieldValue(source, paths) {
    if (!source || typeof source !== "object") {
      return "";
    }

    for (const path of paths) {
      if (Object.prototype.hasOwnProperty.call(source, path)) {
        return source[path];
      }

      const parts = String(path).split(".");
      let current = source;

      for (const part of parts) {
        if (!current || typeof current !== "object") {
          current = "";
          break;
        }

        current = current[part];
      }

      if (current !== undefined && current !== null && current !== "") {
        return current;
      }
    }

    return "";
  }

  async function hydrateDatasetFromCache() {
    if (appState.dataset || cacheHydrationPromise) {
      return cacheHydrationPromise;
    }

    appState.status = "loading";
    appState.errorMessage = "";
    appState.loadingMessage = "Loading cached snapshot";
    appState.loadingProgress = 18;
    renderModal();

    cacheHydrationPromise = (async () => {
      try {
        const exportPayload = await readCachedDataset();
        appState.loadingProgress = exportPayload ? 100 : 0;

        if (exportPayload) {
          appState.dataset = createDatasetSnapshot(exportPayload);
          appState.status = "ready";
        } else {
          appState.status = "idle";
        }
      } catch (error) {
        appState.status = "error";
        appState.errorMessage = getErrorMessage(error);
      } finally {
        appState.loadingMessage = "";
        appState.loadingProgress = 0;
        cacheHydrationPromise = null;
        renderModal();
      }
    })();

    return cacheHydrationPromise;
  }

  async function fetchCurrentUser() {
    const payload = await fetchJson(API_ENDPOINTS.currentUser);
    const userPayload = payload?.user ?? payload;
    const userEmail = cleanString(userPayload?.id);

    appState.sessionAuthHeaders = extractAuthHeaders(payload?.token);

    if (!userEmail) {
      throw new Error(
        `Unable to resolve userEmail from users/current.user.id. Available top-level keys: ${Object.keys(
          payload || {}
        ).join(", ")}`
      );
    }

    return {
      userEmail,
      name:
        firstNonEmptyString([
          userPayload?.name,
          userPayload?.displayName,
          userPayload?.fullName,
          userPayload?.profile?.name,
        ]) || userEmail,
      administrator: Boolean(userPayload?.administrator),
    };
  }

  async function fetchResourceCurrentUser(userEmail) {
    const normalizedUserEmail = cleanString(userEmail);

    if (!normalizedUserEmail) {
      throw new Error("Unable to request resource current user without userEmail.");
    }

    const url = `${COMCIP_REQUEST.resourceCurrentUserUrl}?emailAddress=${encodeURIComponent(
      normalizedUserEmail
    )}`;
    const response = await sendComcipGetMessage(url);

    if (!response?.ok) {
      const payloadMessage =
        typeof response?.payload === "string"
          ? cleanString(response.payload)
          : firstNonEmptyString([
              response?.payload?.message,
              response?.payload?.error,
              response?.payload?.title,
              response?.payload?.detail,
            ]);

      throw new Error(
        payloadMessage ||
          response?.error ||
          `COMCIP resource user request failed (${response?.status || 0}).`
      );
    }

    return response.payload;
  }


  async function fetchAllCustomers(userEmail) {
    const limit = 49;
    let offset = 0;
    const customers = [];
    const seen = new Set();

    while (true) {
      const url = new URL(API_ENDPOINTS.customerSummary, TARGET_ORIGIN);
      url.search = new URLSearchParams({
        emailAddress: userEmail,
        projectionPeriod: "ALL",
        recordSet: "IAM_ON_SR_TEAM",
        growth: "All",
        projectedGrowth: "All",
        attainmentBand: "All",
        projectedConsumption: "All",
        customerStatus: "All",
        workloadStatus: "All",
        lastProjectionUpdate: "All",
        revenueForecastType: "All",
        customerProgramCode: "All",
        planType: "All",
        workLoadLivePeriod: "All",
        activeConsumptionOnly: "false",
        favorite: "false",
        workloadDeleted: "false",
        awsFlag: "N",
        googleFlag: "N",
        azureFlag: "N",
        excludePayAsYouGoOnly: "false",
        projectionReview: "N",
        pillarFilter: "dpOci",
        sortBy: "CUSTOMER_NAME",
        sortOrder: "ASC",
        limit: String(limit),
        offset: String(offset),
      }).toString();

      const payload = await fetchJson(url.toString());
      const items = extractArray(payload, [
        "items",
        "customers",
        "content",
        "results",
        "records",
        "data",
      ]);

      const mapped = items
        .map((item) => ({
          customerId: cleanString(item?.id),
          name: item?.name || "",
        }))
        .filter((item) => item.customerId);

      for (const item of mapped) {
        if (!seen.has(item.customerId)) {
          seen.add(item.customerId);
          customers.push(item);
        }
      }

      if (mapped.length < limit) {
        break;
      }

      offset += limit;
    }

    return customers;
  }

  async function fetchCustomerWorkloads(customer) {
    const url = new URL(
      `${API_ENDPOINTS.customerWorkloads}/${encodeURIComponent(
        customer.customerId
      )}/workloads`,
      TARGET_ORIGIN
    );
    url.search = new URLSearchParams({
      workloadStatus: "Pipeline,Implementation,Live",
      opportunityForecastType: "All",
      includeForEstimates: "ALL",
      financialYear: "ROLLING_4_QTRS",
    }).toString();

    const payload = await fetchJson(url.toString());
    const items = extractArray(payload, [
      "items",
      "workloads",
      "content",
      "results",
      "data",
    ]);

    return items
      .map((item) => normalizeWorkload(item))
      .filter(Boolean)
      .filter((workload) => !isWonWorkload(workload));
  }

  async function fetchWorkloadActions(workloadId) {
    const url = new URL(API_ENDPOINTS.workloadActions, TARGET_ORIGIN);
    url.search = new URLSearchParams({
      parentType: "WORKLOAD",
      parentId: workloadId,
    }).toString();

    const payload = await fetchJson(url.toString());
    const items = extractArray(payload, ["items", "actions", "content", "results", "data"]);

    return items.map((item) => ({
      owner: item?.owner || "",
      role: item?.role || "",
      name: item?.name || "",
      team: normalizeTeamValue(item?.team),
      startDate: item?.startDate || "",
      endDate: item?.endDate || "",
      complexity: item?.complexity || "",
    }));
  }

  async function fetchWorkloadServiceRequests(workloadId) {
    const url = new URL(
      `${API_ENDPOINTS.workloadServiceRequests}/${encodeURIComponent(
        workloadId
      )}/serviceRequests`,
      TARGET_ORIGIN
    );

    const payload = await fetchJson(url.toString());
    const items = extractArray(payload, [
      "items",
      "serviceRequests",
      "content",
      "results",
      "data",
    ]);

    return items.map((item) => ({
      srNumber: item?.srNumber || "",
      status: item?.status || "",
      team: normalizeTeamValue(item?.team),
    }));
  }

  async function fetchJson(url, options = {}) {
    if (options.forceExtension) {
      return fetchJsonViaExtension(url, options);
    }

    if (shouldUseExtensionFetch(url) && !options.forcePageBridge) {
      return fetchJsonViaExtension(url, options);
    }

    await ensurePageBridge();

    const requestId = `${Date.now()}-${++requestCounter}`;
    const requestUrl = toBridgeRequestUrl(url);

    const response = await new Promise((resolve, reject) => {
      const timeout = window.setTimeout(() => {
        pendingBridgeRequests.delete(requestId);
        reject(new Error(`Timed out while requesting ${requestUrl}`));
      }, 60000);

      pendingBridgeRequests.set(requestId, {
        resolve,
        reject,
        timeout,
      });

      window.postMessage(
        {
          source: BRIDGE.source,
          type: BRIDGE.fetchType,
          requestId,
          url: requestUrl,
          options: {
            method: options.method || "GET",
            transport: options.transport || "fetch",
            referrer: options.referrer,
            headers: {
              accept: "application/json, text/plain, */*",
              ...(options.headers || {}),
            },
            body: options.body,
          },
        },
        window.location.origin
      );
    });

    if (!response.ok) {
      const payloadMessage =
        typeof response.payload === "string"
          ? cleanString(response.payload)
          : firstNonEmptyString([
              response.payload?.message,
              response.payload?.error,
              response.payload?.title,
              response.payload?.detail,
            ]);
      const debugHeaderKeys = Array.isArray(response.debug?.headerKeys)
        ? response.debug.headerKeys.join(", ")
        : "";
      const debugScopeKeys = Array.isArray(response.debug?.scopeKeys)
        ? response.debug.scopeKeys.join(", ")
        : "";
      const debugParts = [
        debugHeaderKeys ? `captured headers: ${debugHeaderKeys}` : "",
        debugScopeKeys ? `scopes: ${debugScopeKeys}` : "",
      ].filter(Boolean);
      const debugSuffix = debugParts.length > 0
        ? ` | ${debugParts.join(" | ")}`
        : "";

      throw new Error(
        `${payloadMessage || response.error || `Request failed (${response.status}) for ${requestUrl}`}${debugSuffix}`
      );
    }

    return response.payload;
  }

  function shouldUseExtensionFetch(url) {
    const normalized = cleanString(url);

    if (!normalized) {
      return false;
    }

    try {
      const parsedUrl = new URL(normalized, window.location.origin);
      return parsedUrl.origin !== window.location.origin;
    } catch {
      return false;
    }
  }

  async function fetchJsonViaExtension(url, options = {}) {
    const requestUrl = new URL(url, window.location.origin).toString();
    const bridgeHeaders = await requestBridgeHeaders({
      url: requestUrl,
      headers: options.headers,
      body: options.body,
      includeAllAuth: true,
    });
    const response = await new Promise((resolve, reject) => {
      chrome.runtime.sendMessage(
        {
          type: "ARCH_PANEL_EXTENSION_FETCH",
          url: requestUrl,
          options: {
            method: options.method || "GET",
            referrer: options.referrer,
            headers: buildExtensionFetchHeaders(
              requestUrl,
              options,
              bridgeHeaders || {}
            ),
            body: options.body,
          },
        },
        (result) => {
          const runtimeError = chrome.runtime.lastError;

          if (runtimeError) {
            reject(new Error(runtimeError.message));
            return;
          }

          resolve(result || null);
        }
      );
    });

    if (!response || typeof response !== "object") {
      throw new Error(`No response received for ${requestUrl}`);
    }

    if (!response.ok) {
      const payloadMessage =
        typeof response.payload === "string"
          ? cleanString(response.payload)
          : firstNonEmptyString([
              response.payload?.message,
              response.payload?.error,
              response.payload?.title,
              response.payload?.detail,
            ]);
      const debugHeaderKeys = Array.isArray(response.debug?.headerKeys)
        ? response.debug.headerKeys.join(", ")
        : "";
      const debugUrl = cleanString(response.debug?.url);
      const debugParts = [
        debugUrl ? `url: ${debugUrl}` : "",
        debugHeaderKeys ? `captured headers: ${debugHeaderKeys}` : "",
      ].filter(Boolean);
      const debugSuffix = debugParts.length > 0
        ? ` | ${debugParts.join(" | ")}`
        : "";

      throw new Error(
        `${
          payloadMessage ||
          response.error ||
          `Request failed (${response.status}) for ${requestUrl}`
        }${debugSuffix}`
      );
    }

    return response.payload;
  }

  function buildExtensionFetchHeaders(requestUrl, options = {}, bridgeHeaders = {}) {
    const combinedHeaders = {
      ...(bridgeHeaders || {}),
      ...(appState.sessionAuthHeaders || {}),
      accept: "application/json, text/plain, */*",
      ...(options.headers || {}),
    };

    return combinedHeaders;
  }

  async function requestBridgeHeaders(options = {}) {
    await ensurePageBridge();

    const requestId = `${Date.now()}-${++requestCounter}`;

    return new Promise((resolve, reject) => {
      const timeout = window.setTimeout(() => {
        pendingBridgeRequests.delete(requestId);
        reject(new Error("Timed out while requesting bridge headers"));
      }, 30000);

      pendingBridgeRequests.set(requestId, {
        resolve,
        reject,
        timeout,
      });

      window.postMessage(
        {
          source: BRIDGE.source,
          type: BRIDGE.headersType,
          requestId,
          options,
        },
        window.location.origin
      );
    });
  }

  function normalizeWorkload(item) {
    const workloadId = cleanString(item?.workloadId || item?.id);

    if (!workloadId) {
      return null;
    }

    const opportunityForecastType = item?.opportunityForecastType || "";
    const opportunityForecastTypeGroup = normalizeForecastType(
      opportunityForecastType
    );

    return {
      workloadId,
      name: item?.name || "",
      description: item?.description || "",
      consumptionStartDate: item?.consumptionStartDate || "",
      workloadStatus: item?.workloadStatus || "",
      opportunityForecastType,
      opportunityForecastTypeGroup,
      opportunityId: cleanString(item?.opportunityId),
      opportunityNumber: item?.opportunityNumber || "",
      adjustedACR: toNumber(item?.adjustedACR),
      rampMonths: toNumber(item?.rampMonths),
      forecast: extractArray(item?.forecast, ["items", "content", "results", "data"]).map(
        (forecastItem) => ({
          month: forecastItem?.month || "",
          year: toNumber(forecastItem?.year),
          projectedConsumptionAmount: toNumber(
            forecastItem?.projectedConsumptionAmount
          ),
          adjustedConsumptionAmount: toNumber(
            forecastItem?.adjustedConsumptionAmount
          ),
          createdBy: forecastItem?.createdBy || "",
          createdDate: forecastItem?.createdDate || "",
          updatedBy: forecastItem?.updatedBy || "",
          updatedDate: forecastItem?.updatedDate || "",
        })
      ),
    };
  }

  function isWonWorkload(workload) {
    const forecastType = normalizeString(workload.opportunityForecastTypeGroup);
    const workloadStatus = normalizeString(workload.workloadStatus);

    return forecastType === "WON" || workloadStatus === "WON";
  }

  function normalizeForecastType(value) {
    const text = String(value || "").trim();

    if (!text) {
      return "Unknown";
    }

    const [head] = text.split(" -");
    return head.trim() || "Unknown";
  }

  function normalizeTeamValue(value) {
    if (Array.isArray(value)) {
      return value.map((item) => normalizeTeamValue(item)).join(" | ");
    }

    if (value && typeof value === "object") {
      return Object.values(value).map((item) => normalizeTeamValue(item)).join(" | ");
    }

    return String(value || "");
  }

  function teamContainsUser(team, userEmail) {
    return normalizeString(team).includes(normalizeString(userEmail));
  }

  function stripTransientFields(workload) {
    return {
      workloadId: workload.workloadId,
      name: workload.name,
      description: workload.description,
      consumptionStartDate: workload.consumptionStartDate,
      workloadStatus: workload.workloadStatus,
      opportunityForecastType: workload.opportunityForecastType,
      opportunityForecastTypeGroup: workload.opportunityForecastTypeGroup,
      opportunityId: workload.opportunityId,
      opportunityNumber: workload.opportunityNumber,
      adjustedACR: workload.adjustedACR,
      rampMonths: workload.rampMonths,
      forecast: workload.forecast,
      customerId: workload.customerId,
      customerName: workload.customerName,
      actions: workload.actions,
      serviceRequests: workload.serviceRequests,
      hasSR: workload.hasSR,
      hasAction: workload.hasAction,
    };
  }

  function createExportPayload(
    user,
    customers,
    pendingServiceRequests = [],
    resourceCurrentUser = null
  ) {
    return {
      generatedAt: new Date().toISOString(),
      user,
      resourceCurrentUser,
      customers,
      pendingServiceRequests,
    };
  }

  function createDatasetSnapshot(exportPayload) {
    const normalizedPayload = normalizeCachedExportPayload(exportPayload);

    return {
      user: normalizedPayload.user,
      resourceCurrentUser: normalizedPayload.resourceCurrentUser,
      customers: normalizedPayload.customers,
      exportPayload: normalizedPayload,
      summary: buildSummary(normalizedPayload),
    };
  }

  function findWorkloadById(workloadId) {
    if (!appState.dataset || !workloadId) {
      return null;
    }

    for (const customer of appState.dataset.customers || []) {
      for (const workload of customer.workloads || []) {
        if (workload.workloadId === workloadId) {
          return {
            ...workload,
            customerId: workload.customerId || customer.customerId,
            customerName: workload.customerName || customer.name,
          };
        }
      }
    }

    return null;
  }

  function applyForecastUpdateToDataset(workloadId, payload) {
    if (!appState.dataset || !workloadId) {
      return;
    }

    const previousDetailModal = appState.detailModal
      ? {
          scope: appState.detailModal.scope,
          value: appState.detailModal.value,
          sortKey: appState.detailModal.sortKey,
          sortDirection: appState.detailModal.sortDirection,
          type: appState.detailModal.type,
        }
      : null;
    const updatesByPeriod = new Map(
      (payload || []).map((item) => [
        `${toNumber(item.year)}-${toNumber(item.month)}`,
        toNumber(item.amount),
      ])
    );

    function updateForecast(workload) {
      if (!workload || workload.workloadId !== workloadId) {
        return workload;
      }

      workload.forecast = (workload.forecast || []).map((forecastItem) => {
        const month = parseForecastMonthNumber(forecastItem.month);
        const year = toNumber(forecastItem.year);
        const key = `${year}-${month}`;

        if (!updatesByPeriod.has(key)) {
          return forecastItem;
        }

        return {
          ...forecastItem,
          adjustedConsumptionAmount: updatesByPeriod.get(key),
          updatedBy: appState.dataset.user?.userEmail || forecastItem.updatedBy,
          updatedDate: new Date().toISOString(),
        };
      });

      return workload;
    }

    for (const customer of appState.dataset.customers || []) {
      customer.workloads = (customer.workloads || []).map((workload) =>
        updateForecast(workload)
      );
    }

    for (const customer of appState.dataset.exportPayload?.customers || []) {
      customer.workloads = (customer.workloads || []).map((workload) =>
        updateForecast(workload)
      );
    }

    appState.dataset = createDatasetSnapshot(appState.dataset.exportPayload);

    if (previousDetailModal?.scope && previousDetailModal.type !== "serviceRequests") {
      restoreDetailModal(previousDetailModal);
    }

    void writeCachedDataset(appState.dataset.exportPayload);
  }

  function normalizeCachedExportPayload(exportPayload) {
    const normalizedUser = {
      userEmail: cleanString(exportPayload?.user?.userEmail),
      name:
        firstNonEmptyString([
          exportPayload?.user?.name,
          exportPayload?.user?.displayName,
          exportPayload?.user?.fullName,
          exportPayload?.user?.profile?.name,
          exportPayload?.user?.userEmail,
        ]) || "",
      administrator: Boolean(exportPayload?.user?.administrator),
    };
    const resourceCurrentUser = exportPayload?.resourceCurrentUser ?? null;
    const normalizedCustomers = extractArray(exportPayload?.customers, ["customers"])
      .map((customer) => ({
        customerId: cleanString(customer?.customerId || customer?.id),
        name: cleanString(customer?.name),
        workloads: extractArray(customer?.workloads, ["workloads"])
          .map((workload) => stripTransientFields(normalizeWorkloadForCache(workload)))
          .filter((workload) => workload.workloadId),
      }))
      .filter((customer) => customer.customerId);
    const pendingServiceRequests = normalizePendingServiceRequests(
      extractArray(exportPayload?.pendingServiceRequests, [
        "pendingServiceRequests",
        "items",
        "data",
        "results",
      ])
    );

    return {
      generatedAt:
        firstNonEmptyString([exportPayload?.generatedAt]) || new Date().toISOString(),
      user: normalizedUser,
      resourceCurrentUser,
      customers: normalizedCustomers,
      pendingServiceRequests,
    };
  }

  function normalizeWorkloadForCache(workload) {
    const normalized = {
      workloadId: cleanString(workload?.workloadId),
      name: cleanString(workload?.name),
      description: cleanString(workload?.description),
      consumptionStartDate: workload?.consumptionStartDate || "",
      workloadStatus: cleanString(workload?.workloadStatus),
      opportunityForecastType: cleanString(workload?.opportunityForecastType),
      opportunityForecastTypeGroup:
        cleanString(workload?.opportunityForecastTypeGroup) ||
        normalizeOpportunityForecastType(workload?.opportunityForecastType),
      opportunityId: cleanString(workload?.opportunityId),
      opportunityNumber: cleanString(workload?.opportunityNumber),
      adjustedACR: toNumber(workload?.adjustedACR),
      rampMonths: toNumber(workload?.rampMonths),
      forecast: extractArray(workload?.forecast, ["forecast"]).map((entry) => ({
        month: entry?.month || "",
        year: entry?.year || "",
        projectedConsumptionAmount: toNumber(entry?.projectedConsumptionAmount),
        adjustedConsumptionAmount: toNumber(entry?.adjustedConsumptionAmount),
        createdBy: entry?.createdBy || "",
        createdDate: entry?.createdDate || "",
        updatedBy: entry?.updatedBy || "",
        updatedDate: entry?.updatedDate || "",
      })),
      customerId: cleanString(workload?.customerId),
      customerName: cleanString(workload?.customerName),
      actions: extractArray(workload?.actions, ["actions"]).map((action) => ({
        owner: cleanString(action?.owner),
        role: cleanString(action?.role),
        name: cleanString(action?.name),
        team: normalizeTeamValue(action?.team),
        startDate: action?.startDate || "",
        endDate: action?.endDate || "",
        complexity: cleanString(action?.complexity),
      })),
      serviceRequests: extractArray(workload?.serviceRequests, [
        "serviceRequests",
      ]).map((serviceRequest) => ({
        srNumber: cleanString(serviceRequest?.srNumber),
        status: cleanString(serviceRequest?.status),
        team: normalizeTeamValue(serviceRequest?.team),
      })),
      hasSR: Boolean(workload?.hasSR),
      hasAction: Boolean(workload?.hasAction),
    };

    return normalized;
  }

  function openCacheDatabase() {
    return new Promise((resolve, reject) => {
      if (!window.indexedDB) {
        reject(new Error("IndexedDB is not available in this browser context."));
        return;
      }

      const request = window.indexedDB.open(CACHE.dbName, CACHE.dbVersion);

      request.onupgradeneeded = () => {
        const database = request.result;

        if (!database.objectStoreNames.contains(CACHE.storeName)) {
          database.createObjectStore(CACHE.storeName, { keyPath: "key" });
        }
      };

      request.onsuccess = () => {
        resolve(request.result);
      };

      request.onerror = () => {
        reject(request.error || new Error("Unable to open IndexedDB cache."));
      };
    });
  }

  async function withCacheStore(mode, callback) {
    const database = await openCacheDatabase();

    return new Promise((resolve, reject) => {
      const transaction = database.transaction(CACHE.storeName, mode);
      const store = transaction.objectStore(CACHE.storeName);

      transaction.oncomplete = () => {
        database.close();
      };

      transaction.onerror = () => {
        const error =
          transaction.error || new Error("IndexedDB transaction failed.");
        database.close();
        reject(error);
      };

      transaction.onabort = () => {
        const error =
          transaction.error || new Error("IndexedDB transaction was aborted.");
        database.close();
        reject(error);
      };

      callback(store, resolve, reject);
    });
  }

  async function readCachedDataset() {
    const record = await withCacheStore("readonly", (store, resolve, reject) => {
      const request = store.get(CACHE.datasetKey);

      request.onsuccess = () => {
        const payload =
          request.result?.exportPayload ||
          request.result?.payload ||
          request.result?.dataset?.exportPayload ||
          request.result?.dataset ||
          null;

        resolve(payload);
      };

      request.onerror = () => {
        reject(request.error || new Error("Unable to read the cached dataset."));
      };
    });

    return record ? normalizeCachedExportPayload(record) : null;
  }

  async function writeCachedDataset(exportPayload) {
    const normalizedPayload = normalizeCachedExportPayload(exportPayload);

    await withCacheStore("readwrite", (store, resolve, reject) => {
      const request = store.put({
        key: CACHE.datasetKey,
        updatedAt: new Date().toISOString(),
        exportPayload: normalizedPayload,
      });

      request.onsuccess = () => {
        resolve();
      };

      request.onerror = () => {
        reject(request.error || new Error("Unable to write the cached dataset."));
      };
    });
  }

  function buildSummary(exportPayload) {
    const customers = exportPayload.customers || [];
    const allWorkloads = customers.flatMap((customer) => customer.workloads || []);
    const eligibleWorkloads = allWorkloads
      .filter((workload) =>
        ALLOWED_STAGE_TYPES.includes(workload.opportunityForecastTypeGroup)
      )
      .sort((left, right) => right.adjustedACR - left.adjustedACR);
    const totalEligibleAcr = eligibleWorkloads.reduce((sum, workload) => {
      return sum + workload.adjustedACR;
    }, 0);
    const stageIndicators = ALLOWED_STAGE_TYPES.map((label) => {
      const items = eligibleWorkloads.filter(
        (workload) => workload.opportunityForecastTypeGroup === label
      );

      return {
        label,
        count: items.length,
        totalAcr: items.reduce((sum, workload) => sum + workload.adjustedACR, 0),
      };
    });
    const srStatus = {
      trueCount: eligibleWorkloads.filter((workload) => workload.hasSR).length,
      falseCount: eligibleWorkloads.filter((workload) => !workload.hasSR).length,
    };
    const actionStatus = {
      trueCount: eligibleWorkloads.filter((workload) => workload.hasAction).length,
      falseCount: eligibleWorkloads.filter((workload) => !workload.hasAction).length,
    };
    const pendingServiceRequests = exportPayload.pendingServiceRequests || [];
    const srHours = {
      betweenZeroAndFour: pendingServiceRequests.filter((serviceRequest) => {
        const hours = toNumber(serviceRequest.totalHoursWorked);
        return hours >= 0 && hours <= 4;
      }),
      aboveFour: pendingServiceRequests.filter((serviceRequest) => {
        return toNumber(serviceRequest.totalHoursWorked) > 4;
      }),
    };

    return {
      generatedAtLabel: formatDateTime(exportPayload.generatedAt),
      totalCustomers: customers.length,
      totalWorkloads: allWorkloads.length,
      allWorkloads,
      eligibleWorkloads,
      totalEligibleAcr,
      stageIndicators,
      srStatus,
      actionStatus,
      pendingServiceRequests,
      srHours,
    };
  }

  function buildWorkloadStartCalendar(workloads, year, month) {
    const today = new Date();
    const monthStart = new Date(year, month, 1);
    const calendarStart = new Date(monthStart);
    calendarStart.setDate(monthStart.getDate() - monthStart.getDay());
    const workloadMap = new Map();

    for (const workload of workloads || []) {
      const dateKey = getLocalDateKey(workload.consumptionStartDate);

      if (!dateKey) {
        continue;
      }

      const bucket = workloadMap.get(dateKey) || [];
      bucket.push(workload);
      workloadMap.set(dateKey, bucket);
    }

    const days = Array.from({ length: 42 }, (_, index) => {
      const date = new Date(calendarStart);
      date.setDate(calendarStart.getDate() + index);
      const dateKey = getLocalDateKey(date);
      const workloadsForDay = workloadMap.get(dateKey) || [];

      return {
        dateKey,
        dayNumber: date.getDate(),
        isWeekStart: index % 7 === 0,
        operationalWeekLabel: formatOperationalWeekLabel(
          getOperationalWeekInfo(getCalendarRowWeekDate(date))
        ),
        isCurrentMonth: date.getMonth() === month,
        isToday: dateKey === getLocalDateKey(today),
        workloads: workloadsForDay,
      };
    });

    return {
      monthLabel: new Intl.DateTimeFormat("en-US", {
        month: "long",
        year: "numeric",
      }).format(monthStart),
      days,
      totalVisibleWorkloads: days.reduce(
        (sum, day) => sum + day.workloads.length,
        0
      ),
    };
  }

  function openDetailModal(scope, value) {
    if (!appState.dataset) {
      return;
    }

    const eligibleWorkloads = appState.dataset.summary.eligibleWorkloads;
    let items = [];
    let label = "";
    let title = "";

    if (scope === "stage") {
      items = eligibleWorkloads.filter(
        (workload) => workload.opportunityForecastTypeGroup === value
      );
      label = `Opportunity type: ${value}`;
      title = `${value} workloads`;
    } else if (scope === "sr") {
      const flag = value === "true";
      items = eligibleWorkloads.filter((workload) => workload.hasSR === flag);
      label = "Status de SRs";
      title = flag ? "Workloads com SR" : "Workloads sem SR";
    } else if (scope === "action") {
      const flag = value === "true";
      items = eligibleWorkloads.filter((workload) => workload.hasAction === flag);
      label = "Status de Consumption Plan/action";
      title = flag ? "Workloads com action" : "Workloads sem action";
    } else if (scope === "sr-hours") {
      const pendingServiceRequests = appState.dataset.summary.pendingServiceRequests || [];
      const isAboveFour = value === "above-4";
      items = pendingServiceRequests.filter((serviceRequest) => {
        const hours = toNumber(serviceRequest.totalHoursWorked);
        return isAboveFour ? hours > 4 : hours >= 0 && hours <= 4;
      });
      items.sort((left, right) => {
        return toNumber(left.totalHoursWorked) - toNumber(right.totalHoursWorked);
      });
      label = "SRs por horas reportadas";
      title = isAboveFour ? "SRs acima de 4h" : "SRs entre 0 e 4h";
    } else if (scope === "calendar-day") {
      const allWorkloads = appState.dataset.summary.allWorkloads || [];
      items = allWorkloads.filter((workload) => {
        return getLocalDateKey(workload.consumptionStartDate) === value;
      });
      label = "Workload start calendar";
      title = `Workloads starting ${formatDate(value) || value}`;
    }

    appState.detailModal = {
      label,
      title,
      items,
      totalAcr:
        scope === "sr-hours"
          ? 0
          : items.reduce((sum, workload) => sum + workload.adjustedACR, 0),
      sortKey: DETAIL_SORT_KEYS.adjustedACR,
      sortDirection: "desc",
      scope,
      value,
      type: scope === "sr-hours" ? "serviceRequests" : "workloads",
    };

    renderModal();
  }

  function openActionFormModal(workloadId) {
    appState.actionFormModal = {
      workloadId,
      errorMessage: "",
      isSubmitting: false,
    };
    renderModal();
  }

  function openRampComparisonModal(workloadId) {
    const workload = findWorkloadById(workloadId);

    if (!workload) {
      return;
    }

    appState.rampComparisonModal = {
      workload,
      rows: buildRampForecastComparisonRows([workload]),
    };
    renderModal();
  }

  function openForecastUpdateConfirmModal() {
    if (!appState.rampComparisonModal || !appState.dataset) {
      return;
    }

    const payload = createForecastUpdatePayload(
      appState.rampComparisonModal.rows || []
    );

    appState.forecastUpdateConfirmModal = {
      workloadId: appState.rampComparisonModal.workload.workloadId,
      payload,
      isSubmitting: false,
      errorMessage: "",
    };
    renderModal();
  }

  async function submitForecastUpdate() {
    const modal = appState.forecastUpdateConfirmModal;

    if (!modal || modal.isSubmitting) {
      return;
    }

    appState.forecastUpdateConfirmModal = {
      ...modal,
      isSubmitting: true,
      errorMessage: "",
    };
    renderModal();

    try {
      const workloadId = cleanString(modal.workloadId);
      const url = `${API_ENDPOINTS.workloadServiceRequests}/${encodeURIComponent(
        workloadId
      )}/forecast`;
      const wwbAuthorization =
        appState.sessionAuthHeaders?.["wwb-provider-authorization"] ||
        appState.sessionAuthHeaders?.["wwb-provider-Authorization"] ||
        "";
      const headers = {
        accept: "*/*",
        "content-type": "application/json",
      };

      if (wwbAuthorization) {
        headers["wwb-provider-Authorization"] = wwbAuthorization;
      }

      await fetchJson(url, {
        method: "PATCH",
        forcePageBridge: true,
        transport: "xhr",
        headers,
        body: JSON.stringify(modal.payload),
      });

      applyForecastUpdateToDataset(workloadId, modal.payload);
      const updatedWorkload = findWorkloadById(workloadId);

      appState.forecastUpdateConfirmModal = null;

      if (updatedWorkload) {
        appState.rampComparisonModal = {
          workload: updatedWorkload,
          rows: buildRampForecastComparisonRows([updatedWorkload]),
        };
      }

      renderModal();
    } catch (error) {
      appState.forecastUpdateConfirmModal = {
        ...modal,
        isSubmitting: false,
        errorMessage: getErrorMessage(error),
      };
      renderModal();
    }
  }

  function createForecastUpdatePayload(rows) {
    const userEmail = appState.dataset?.user?.userEmail || "";

    return (rows || [])
      .filter((row) => row.year && row.month)
      .map((row) => ({
        year: toNumber(row.year),
        month: toNumber(row.month),
        amount: toNumber(row.calculatedValue),
        updatedBy: userEmail,
      }));
  }

  async function openTimeEntriesDrawer(srNumber) {
    const normalizedSrNumber = cleanString(srNumber);

    if (!normalizedSrNumber) {
      return;
    }

    appState.timeEntriesDrawer = {
      srNumber: normalizedSrNumber,
      status: "loading",
      errorMessage: "",
      payload: null,
      items: [],
    };
    renderModal();

    try {
      const response = await fetchTimeEntriesSummary(normalizedSrNumber);

      appState.timeEntriesDrawer = {
        srNumber: normalizedSrNumber,
        status: "ready",
        errorMessage: "",
        payload: response.payload,
        items: normalizeTimeEntriesSummary(response.payload),
      };
    } catch (error) {
      appState.timeEntriesDrawer = {
        srNumber: normalizedSrNumber,
        status: "error",
        errorMessage: getErrorMessage(error),
        payload: null,
        items: [],
      };
    }

    renderModal();
  }

  async function fetchTimeEntriesSummary(srNumber) {
    const url = `${COMCIP_REQUEST.timeEntriesSummaryUrl}?srNumber=${encodeURIComponent(
      srNumber
    )}`;
    const response = await sendComcipGetMessage(url);

    if (!response?.ok) {
      const payloadMessage =
        typeof response?.payload === "string"
          ? cleanString(response.payload)
          : firstNonEmptyString([
              response?.payload?.message,
              response?.payload?.error,
              response?.payload?.title,
              response?.payload?.detail,
            ]);

      throw new Error(
        payloadMessage ||
          response?.error ||
          `COMCIP request failed (${response?.status || 0}).`
      );
    }

    return response;
  }

  function closeDetailModal() {
    if (appState.detailModal?.scope === "calendar-day" && appState.detailModal.value) {
      appState.pendingFocusSelector = getCalendarDayFocusSelector(
        appState.detailModal.value
      );
    }

    appState.detailModal = null;
    appState.timeEntriesDrawer = null;
    appState.rampComparisonModal = null;
    appState.forecastUpdateConfirmModal = null;
  }

  function shiftCalendarMonth(delta) {
    const nextDate = new Date(appState.calendarYear, appState.calendarMonth + delta, 1);
    appState.calendarYear = nextDate.getFullYear();
    appState.calendarMonth = nextDate.getMonth();
    renderModal();
  }

  function goToCurrentCalendarMonth() {
    const today = new Date();
    appState.calendarYear = today.getFullYear();
    appState.calendarMonth = today.getMonth();
    renderModal();
  }

  async function submitActionForm(form) {
    if (!appState.dataset || !appState.actionFormModal) {
      return;
    }

    if (!form.reportValidity()) {
      return;
    }

    const formData = new FormData(form);
    const parentId = cleanString(formData.get("parentId"));
    const ownerEmail = cleanString(formData.get("ownerEmail"));
    const startDate = toIsoDateString(formData.get("startDate"));
    const endDate = toIsoDateString(formData.get("endDate"));
    const payload = {
      parentType: "WORKLOAD",
      parentId,
      action: {
        ownerEmail,
        role: "CLOUD_ARCHITECT",
        name: "SUCCESS_PLAN_CONSUM_RVW",
        team: cleanString(formData.get("team")),
        tags: "",
        startDate,
        endDate,
        status: "COMPLETE",
        complexity: cleanString(formData.get("complexity")),
        notes: [],
        objective: "",
        createdBy: cleanString(formData.get("createdBy")),
        updatedBy: cleanString(formData.get("updatedBy")),
      },
    };

    try {
      appState.actionFormModal = {
        ...appState.actionFormModal,
        isSubmitting: true,
        errorMessage: "",
      };
      renderModal();

      await fetchJson(API_ENDPOINTS.workloadActions, {
        method: "POST",
        headers: {
          "content-type": "application/json; charset=UTF-8",
        },
        body: JSON.stringify(payload),
      });

      await applyCreatedActionToDataset(payload);
      appState.actionFormModal = null;
      renderModal();
    } catch (error) {
      appState.actionFormModal = {
        ...appState.actionFormModal,
        isSubmitting: false,
        errorMessage: getErrorMessage(error),
      };
      renderModal();
    }
  }

  async function applyCreatedActionToDataset(payload) {
    if (!appState.dataset) {
      return;
    }

    const updatedCustomers = (appState.dataset.customers || []).map((customer) => ({
      ...customer,
      workloads: (customer.workloads || []).map((workload) => {
        if (workload.workloadId !== payload.parentId) {
          return workload;
        }

        return {
          ...workload,
          hasAction: true,
          actions: [
            ...(workload.actions || []),
            {
              owner: payload.action.ownerEmail,
              role: payload.action.role,
              name: payload.action.name,
              team: payload.action.team,
              startDate: payload.action.startDate,
              endDate: payload.action.endDate,
              complexity: payload.action.complexity,
            },
          ],
        };
      }),
    }));
    const exportPayload = createExportPayload(
      appState.dataset.user,
      updatedCustomers,
      appState.dataset.exportPayload?.pendingServiceRequests || [],
      appState.dataset.exportPayload?.resourceCurrentUser || null
    );
    const nextDataset = createDatasetSnapshot(exportPayload);
    const previousDetailModal = appState.detailModal
      ? {
          scope: appState.detailModal.scope,
          value: appState.detailModal.value,
          sortKey: appState.detailModal.sortKey,
          sortDirection: appState.detailModal.sortDirection,
        }
      : null;

    appState.dataset = nextDataset;
    await writeCachedDataset(exportPayload);

    if (previousDetailModal?.scope) {
      restoreDetailModal(previousDetailModal);
    }
  }

  function restoreDetailModal(detailState) {
    const eligibleWorkloads = appState.dataset?.summary?.eligibleWorkloads || [];
    let items = [];
    let label = "";
    let title = "";

    if (detailState.scope === "stage") {
      items = eligibleWorkloads.filter(
        (workload) => workload.opportunityForecastTypeGroup === detailState.value
      );
      label = `Opportunity type: ${detailState.value}`;
      title = `${detailState.value} workloads`;
    } else if (detailState.scope === "sr") {
      const flag = detailState.value === "true";
      items = eligibleWorkloads.filter((workload) => workload.hasSR === flag);
      label = "Status de SRs";
      title = flag ? "Workloads com SR" : "Workloads sem SR";
    } else if (detailState.scope === "action") {
      const flag = detailState.value === "true";
      items = eligibleWorkloads.filter((workload) => workload.hasAction === flag);
      label = "Status de Consumption Plan/action";
      title = flag ? "Workloads com action" : "Workloads sem action";
    } else if (detailState.scope === "calendar-day") {
      const allWorkloads = appState.dataset?.summary?.allWorkloads || [];
      items = allWorkloads.filter((workload) => {
        return getLocalDateKey(workload.consumptionStartDate) === detailState.value;
      });
      label = "Workload start calendar";
      title = `Workloads starting ${formatDate(detailState.value) || detailState.value}`;
    }

    appState.detailModal = {
      label,
      title,
      items,
      totalAcr: items.reduce((sum, workload) => sum + workload.adjustedACR, 0),
      sortKey: detailState.sortKey || DETAIL_SORT_KEYS.adjustedACR,
      sortDirection: detailState.sortDirection || "desc",
      scope: detailState.scope,
      value: detailState.value,
      type: "workloads",
    };
  }

  function toggleDetailSort(sortKey) {
    if (!appState.detailModal) {
      return;
    }

    const nextDirection =
      appState.detailModal.sortKey === sortKey &&
      appState.detailModal.sortDirection === "asc"
        ? "desc"
        : "asc";

    appState.detailModal = {
      ...appState.detailModal,
      sortKey,
      sortDirection: nextDirection,
    };

    renderModal();
  }

  function getSortedDetailItems() {
    if (!appState.detailModal) {
      return [];
    }

    return sortWorkloads(
      appState.detailModal.items,
      appState.detailModal.sortKey,
      appState.detailModal.sortDirection
    );
  }

  function sortWorkloads(items, sortKey, sortDirection = "asc") {
    const factor = sortDirection === "desc" ? -1 : 1;

    return [...items].sort((left, right) => {
      const comparison = compareWorkloadValues(
        getSortableWorkloadValue(left, sortKey),
        getSortableWorkloadValue(right, sortKey)
      );

      if (comparison !== 0) {
        return comparison * factor;
      }

      return compareWorkloadValues(
        getSortableWorkloadValue(left, DETAIL_SORT_KEYS.workload),
        getSortableWorkloadValue(right, DETAIL_SORT_KEYS.workload)
      );
    });
  }

  function getSortableWorkloadValue(workload, sortKey) {
    switch (sortKey) {
      case DETAIL_SORT_KEYS.opportunityNumber:
        return cleanString(workload.opportunityNumber);
      case DETAIL_SORT_KEYS.customerName:
        return cleanString(workload.customerName);
      case DETAIL_SORT_KEYS.workload:
        return `${cleanString(workload.name)}|${cleanString(workload.description)}`;
      case DETAIL_SORT_KEYS.rampMonths:
        return toNumber(workload.rampMonths);
      case DETAIL_SORT_KEYS.adjustedACR:
        return toNumber(workload.adjustedACR);
      case DETAIL_SORT_KEYS.opportunityForecastTypeGroup:
        return cleanString(workload.opportunityForecastTypeGroup);
      case DETAIL_SORT_KEYS.hasSR:
        return Boolean(workload.hasSR);
      case DETAIL_SORT_KEYS.hasAction:
        return Boolean(workload.hasAction);
      default:
        return cleanString(workload.name);
    }
  }

  function compareWorkloadValues(left, right) {
    if (typeof left === "number" || typeof right === "number") {
      return toNumber(left) - toNumber(right);
    }

    if (typeof left === "boolean" || typeof right === "boolean") {
      return Number(Boolean(left)) - Number(Boolean(right));
    }

    return String(left || "").localeCompare(String(right || ""), undefined, {
      numeric: true,
      sensitivity: "base",
    });
  }

  function downloadFile(filename, content, contentType) {
    const blob = new Blob([content], { type: contentType });
    const url = URL.createObjectURL(blob);
    const anchor = document.createElement("a");
    anchor.href = url;
    anchor.download = filename;
    anchor.click();
    window.setTimeout(() => {
      URL.revokeObjectURL(url);
    }, 1000);
  }

  function createExportHtml(dataset) {
    const json = JSON.stringify(dataset.exportPayload);

    return `<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Arch Panel Dashboard</title>
  <style>
    :root {
      --bg: #0f141b;
      --panel: #171e27;
      --panel-strong: #202a36;
      --border: #33404f;
      --text: #f4f7fb;
      --text-muted: #a8b4c2;
      --accent: #7dc6e7;
      --accent-soft: rgba(125, 198, 231, 0.14);
      --success: #61bf81;
      --warning: #ef8d67;
    }

    * { box-sizing: border-box; }
    body {
      margin: 0;
      background: linear-gradient(180deg, #0d1218, #121923 45%, #10161e 100%);
      color: var(--text);
      font: 14px/1.45 "Segoe UI", Arial, sans-serif;
    }
    .shell {
      max-width: 1480px;
      margin: 0 auto;
      padding: 28px;
    }
    .hero, .panel {
      border: 1px solid var(--border);
      background: var(--panel);
      border-radius: 18px;
    }
    .hero {
      display: flex;
      justify-content: space-between;
      gap: 24px;
      padding: 24px;
      margin-bottom: 18px;
    }
    .eyebrow {
      margin: 0 0 8px;
      color: var(--text-muted);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .08em;
      text-transform: uppercase;
    }
    h1, h2, h3, p { margin: 0; }
    h1 { font-size: 34px; line-height: 1.1; }
    .subtitle { margin-top: 12px; color: var(--text-muted); max-width: 720px; }
    .pill {
      display: inline-flex;
      align-items: center;
      min-height: 32px;
      padding: 0 12px;
      border-radius: 999px;
      background: var(--accent-soft);
      color: var(--text);
      border: 1px solid rgba(255,255,255,.08);
      font-weight: 600;
    }
    .grid {
      display: grid;
      gap: 16px;
    }
    .metrics { grid-template-columns: repeat(4, minmax(0,1fr)); margin-bottom: 18px; }
    .metric, .boolean-card {
      border: 1px solid var(--border);
      background: var(--panel);
      border-radius: 16px;
      padding: 18px;
    }
    .metric-label { color: var(--text-muted); font-size: 12px; }
    .metric-value { margin-top: 8px; font-size: 28px; font-weight: 700; }
    .metric-detail { margin-top: 6px; color: var(--text-muted); font-size: 12px; }
    .indicator-grid { grid-template-columns: repeat(4, minmax(0,1fr)); margin-bottom: 18px; }
    .status-grid { grid-template-columns: repeat(2, minmax(0,1fr)); margin-bottom: 18px; }
    .boolean-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; margin-top: 14px; }
    .progress { display: grid; gap: 8px; margin-bottom: 12px; }
    .progress-track {
      display: flex;
      width: 100%;
      height: 10px;
      overflow: hidden;
      border-radius: 999px;
      background: rgba(255,255,255,.06);
      border: 1px solid var(--border);
    }
    .progress-segment { height: 100%; }
    .progress-segment.is-success { background: linear-gradient(90deg, #7fd29a, #3fa35c); }
    .progress-segment.is-danger { background: linear-gradient(90deg, #f2a28d, #d94f2b); }
    .progress-labels {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      color: var(--text-muted);
      font-size: 11px;
      font-weight: 600;
    }
    .boolean-card {
      appearance: none;
      color: var(--text);
      text-align: left;
      cursor: pointer;
    }
    .boolean-card strong { display: block; margin-top: 8px; font-size: 28px; }
    .layout { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
    .panel { padding: 18px; }
    .panel-head { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
    .panel-title { margin-top: 6px; font-size: 18px; }
    table { width: 100%; border-collapse: collapse; }
    .main-table { table-layout: fixed; }
    .main-table col.col-opportunity { width: 14%; }
    .main-table col.col-customer { width: 16%; }
    .main-table col.col-workload { width: auto; }
    .main-table col.col-acr { width: 11%; }
    .main-table col.col-type { width: 11%; }
    .main-table col.col-flag { width: 9%; }
    th, td { padding: 12px 14px; border-bottom: 1px solid var(--border); font-size: 12px; white-space: nowrap; }
    th { color: var(--text-muted); text-align: left; background: var(--panel-strong); }
    td { color: var(--text); }
    td.is-numeric, th.is-numeric { text-align: right; }
    .main-table th:nth-child(3),
    .main-table td:nth-child(3) {
      white-space: normal;
      overflow-wrap: anywhere;
      word-break: break-word;
    }
    .main-table td:nth-child(3) a {
      display: block;
    }
    .main-table th:nth-child(2),
    .main-table td:nth-child(2) {
      white-space: normal;
      overflow-wrap: anywhere;
    }
    tr:hover td { background: rgba(255,255,255,.02); }
    a { color: var(--accent); text-decoration: none; }
    .status {
      display: inline-flex;
      align-items: center;
      min-height: 22px;
      padding: 0 8px;
      border-radius: 999px;
      font-size: 11px;
      font-weight: 700;
    }
    .status.true { color: #d9f9e4; background: rgba(97,191,129,.2); }
    .status.false { color: #ffd8cc; background: rgba(239,141,103,.18); }
    .row-stack { display: grid; gap: 12px; }
    .row {
      display: grid;
      gap: 8px;
      padding: 12px 0;
      border-top: 1px solid var(--border);
    }
    .row:first-child { border-top: 0; padding-top: 0; }
    .row-top {
      display: flex;
      justify-content: space-between;
      gap: 12px;
    }
    .row-label { font-weight: 700; }
    .row-sub { color: var(--text-muted); font-size: 12px; }
    .bar { position: relative; height: 8px; border-radius: 999px; overflow: hidden; background: rgba(255,255,255,.08); }
    .bar > span { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: linear-gradient(90deg, var(--accent), #4b8ce2); }
    .sr-table td { white-space: normal; vertical-align: top; }
    .sr-main { width: 78%; }
    .sr-side { width: 22%; text-align: right; }
    .sr-line { display: flex; flex-wrap: wrap; gap: 10px 14px; margin-top: 6px; }
    .sr-line.head { margin-top: 0; }
    .sr-customer { color: var(--text); font-size: 13px; font-weight: 700; }
    .sr-moment { color: var(--text); font-size: 18px; font-weight: 700; }
    .sr-exact, .sr-hours { margin-top: 6px; color: var(--text-muted); font-size: 12px; }
    .empty {
      padding: 18px;
      border: 1px dashed var(--border);
      border-radius: 8px;
      color: var(--text-muted);
      font-size: 13px;
    }
    .overlay {
      position: fixed;
      inset: 0;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 24px;
      background: rgba(8, 12, 18, .78);
      backdrop-filter: blur(10px);
    }
    .overlay.open { display: flex; }
    .detail {
      width: min(1480px, calc(100vw - 32px));
      max-height: calc(100vh - 32px);
      overflow: auto;
      border: 1px solid var(--border);
      background: var(--panel);
      border-radius: 18px;
      padding: 18px;
    }
    .detail-head {
      display: flex;
      justify-content: space-between;
      gap: 16px;
      align-items: center;
      margin-bottom: 12px;
    }
    .close {
      appearance: none;
      min-height: 34px;
      padding: 0 14px;
      border: 1px solid var(--border);
      border-radius: 8px;
      background: var(--panel-strong);
      color: var(--text);
      cursor: pointer;
    }
    .detail-actions {
      display: flex;
      justify-content: flex-end;
      position: sticky;
      bottom: 0;
      margin-top: 16px;
      padding-top: 12px;
      background: linear-gradient(180deg, rgba(23, 30, 39, 0), var(--panel) 35%);
    }
    .detail table { table-layout: fixed; }
    .detail th, .detail td {
      white-space: normal;
      vertical-align: top;
      overflow-wrap: anywhere;
    }
    .detail-actions {
      display: flex;
      justify-content: flex-end;
      margin-top: 16px;
    }
    .sort-button {
      appearance: none;
      padding: 0;
      border: 0;
      background: transparent;
      color: inherit;
      font: inherit;
      font-weight: 600;
      cursor: pointer;
    }
    .sort-button.is-numeric {
      width: 100%;
      text-align: right;
    }
    .clickable {
      appearance: none;
      width: 100%;
      color: inherit;
      text-align: left;
      cursor: pointer;
    }
    @media (max-width: 1100px) {
      .metrics, .indicator-grid, .status-grid, .layout { grid-template-columns: 1fr; }
    }
  </style>
</head>
<body>
  <div id="app"></div>
  <div id="detailOverlay" class="overlay"></div>
  <script>
    const payload = ${json};
    const allowedTypes = ["SQL", "Pipeline", "Upside", "Forecast"];
    const detailSortKeys = {
      opportunityNumber: "opportunityNumber",
      customerName: "customerName",
      workload: "workload",
      adjustedACR: "adjustedACR",
      opportunityForecastTypeGroup: "opportunityForecastTypeGroup",
      hasSR: "hasSR",
      hasAction: "hasAction"
    };
    let detailState = null;

    function normalizeForecastType(value) {
      const text = String(value || "").trim();
      return text ? text.split(" -")[0].trim() || "Unknown" : "Unknown";
    }

    function formatWholeNumber(value) {
      return new Intl.NumberFormat("en-US", { maximumFractionDigits: 0 }).format(value);
    }

    function formatCurrency(value) {
      return new Intl.NumberFormat("en-US", {
        style: "currency",
        currency: "USD",
        maximumFractionDigits: 0
      }).format(value || 0);
    }

    function formatPercent(value) {
      return new Intl.NumberFormat("en-US", {
        maximumFractionDigits: 1
      }).format(value || 0) + "%";
    }

    function formatRelativeMoment(value) {
      if (!value) {
        return "-";
      }

      const target = new Date(value);

      if (Number.isNaN(target.getTime())) {
        return String(value);
      }

      let remaining = Math.max(Date.now() - target.getTime(), 0);
      const day = 24 * 60 * 60 * 1000;
      const hour = 60 * 60 * 1000;
      const minute = 60 * 1000;
      const second = 1000;
      const days = Math.floor(remaining / day);
      remaining -= days * day;
      const hours = Math.floor(remaining / hour);
      remaining -= hours * hour;
      const minutes = Math.floor(remaining / minute);
      remaining -= minutes * minute;
      const seconds = Math.floor(remaining / second);

      return days + "d " + hours + "h " + minutes + "m " + seconds + "s";
    }

    function flattenWorkloads() {
      return (payload.customers || []).flatMap((customer) =>
        (customer.workloads || []).map((workload) => ({
          ...workload,
          customerName: customer.name
        }))
      );
    }

    function buildSummary(workloads) {
      const eligible = workloads
        .map((workload) => ({
          ...workload,
          opportunityForecastTypeGroup: normalizeForecastType(workload.opportunityForecastTypeGroup || workload.opportunityForecastType)
        }))
        .filter((workload) => allowedTypes.includes(workload.opportunityForecastTypeGroup))
        .sort((a, b) => (b.adjustedACR || 0) - (a.adjustedACR || 0));

      return {
        eligible,
        stageIndicators: allowedTypes.map((label) => {
          const items = eligible.filter((workload) => workload.opportunityForecastTypeGroup === label);
          return {
            label,
            count: items.length,
            totalAcr: items.reduce((sum, item) => sum + (item.adjustedACR || 0), 0)
          };
        }),
        sr: {
          trueCount: eligible.filter((item) => item.hasSR).length,
          falseCount: eligible.filter((item) => !item.hasSR).length
        },
        action: {
          trueCount: eligible.filter((item) => item.hasAction).length,
          falseCount: eligible.filter((item) => !item.hasAction).length
        }
      };
    }

    function opportunityLink(workload) {
      if (!workload.opportunityId || !workload.opportunityNumber) {
        return workload.opportunityNumber || "Opportunity";
      }

      const href = "https://eeho.fa.us2.oraclecloud.com/fscmUI/redwood/cx-sales/application/container/opportunities/opportunities-detail?id=" +
        encodeURIComponent(workload.opportunityId) +
        "&puid=" +
        encodeURIComponent(workload.opportunityNumber);

      return '<a href="' + href + '" target="_blank" rel="noreferrer">' + workload.opportunityNumber + '</a>';
    }

    function workloadLink(workload) {
      const label = (workload.name || "Unnamed workload") + (workload.description ? " | " + workload.description : "");

      if (!workload.workloadId) {
        return label;
      }

      const href = "https://spa.oracle.com/oalcrm/web/api/g2m-consumer-application/ui/index.html?ojr=workload_workbench/workload_details;workloadId=" +
        encodeURIComponent(workload.workloadId);

      return '<a href="' + href + '" target="_blank" rel="noreferrer">' + label + '</a>';
    }

    function statusToken(value) {
      const label = value === "true" ? "Sim" : "Não";
      return '<span class="status ' + value + '">' + label + '</span>';
    }

    function renderTable(items) {
      return '<table class="main-table"><colgroup><col class="col-opportunity"><col class="col-customer"><col class="col-workload"><col class="col-acr"><col class="col-type"><col class="col-flag"><col class="col-flag"></colgroup><thead><tr><th>Opportunity</th><th>Customer</th><th>Workload</th><th class="is-numeric">ACR</th><th>Type</th><th>Tem SR?</th><th>Tem Action?</th></tr></thead><tbody>' +
        items.map((workload) => '<tr><td>' + opportunityLink(workload) + '</td><td>' + (workload.customerName || '') + '</td><td>' + workloadLink(workload) + '</td><td class="is-numeric">' + formatCurrency(workload.adjustedACR) + '</td><td>' + workload.opportunityForecastTypeGroup + '</td><td>' + statusToken(String(Boolean(workload.hasSR))) + '</td><td>' + statusToken(String(Boolean(workload.hasAction))) + '</td></tr>').join('') +
        '</tbody></table>';
    }

    function getSortableValue(workload, sortKey) {
      if (sortKey === detailSortKeys.opportunityNumber) {
        return String(workload.opportunityNumber || "");
      }

      if (sortKey === detailSortKeys.customerName) {
        return String(workload.customerName || "");
      }

      if (sortKey === detailSortKeys.workload) {
        return String((workload.name || "") + "|" + (workload.description || ""));
      }

      if (sortKey === detailSortKeys.adjustedACR) {
        return Number(workload.adjustedACR || 0);
      }

      if (sortKey === detailSortKeys.opportunityForecastTypeGroup) {
        return String(workload.opportunityForecastTypeGroup || "");
      }

      if (sortKey === detailSortKeys.hasSR) {
        return Boolean(workload.hasSR);
      }

      if (sortKey === detailSortKeys.hasAction) {
        return Boolean(workload.hasAction);
      }

      return String(workload.name || "");
    }

    function compareSortableValues(left, right) {
      if (typeof left === "number" || typeof right === "number") {
        return Number(left || 0) - Number(right || 0);
      }

      if (typeof left === "boolean" || typeof right === "boolean") {
        return Number(Boolean(left)) - Number(Boolean(right));
      }

      return String(left || "").localeCompare(String(right || ""), undefined, {
        numeric: true,
        sensitivity: "base"
      });
    }

    function sortItems(items, sortKey, sortDirection) {
      const factor = sortDirection === "desc" ? -1 : 1;

      return items.slice().sort((left, right) => {
        const comparison = compareSortableValues(
          getSortableValue(left, sortKey),
          getSortableValue(right, sortKey)
        );

        if (comparison !== 0) {
          return comparison * factor;
        }

        return compareSortableValues(
          getSortableValue(left, detailSortKeys.workload),
          getSortableValue(right, detailSortKeys.workload)
        );
      });
    }

    function renderSortButton(label, sortKey, isNumeric) {
      const direction = detailState && detailState.sortKey === sortKey
        ? (detailState.sortDirection === "asc" ? " ↑" : " ↓")
        : "";

      return '<button class="sort-button' + (isNumeric ? ' is-numeric' : '') + '" data-sort-key="' + sortKey + '">' + label + direction + '</button>';
    }

    function renderDetailTable(items) {
      return '<table><thead><tr><th>' + renderSortButton('Opportunity', detailSortKeys.opportunityNumber, false) + '</th><th>' + renderSortButton('Customer', detailSortKeys.customerName, false) + '</th><th>' + renderSortButton('Workload', detailSortKeys.workload, false) + '</th><th class="is-numeric">' + renderSortButton('ACR', detailSortKeys.adjustedACR, true) + '</th><th>' + renderSortButton('Type', detailSortKeys.opportunityForecastTypeGroup, false) + '</th><th>' + renderSortButton('HasSR', detailSortKeys.hasSR, false) + '</th><th>' + renderSortButton('HasAction', detailSortKeys.hasAction, false) + '</th></tr></thead><tbody>' +
        items.map((workload) => '<tr><td>' + opportunityLink(workload) + '</td><td>' + (workload.customerName || '') + '</td><td>' + workloadLink(workload) + '</td><td class="is-numeric">' + formatCurrency(workload.adjustedACR) + '</td><td>' + workload.opportunityForecastTypeGroup + '</td><td>' + statusToken(String(Boolean(workload.hasSR))) + '</td><td>' + statusToken(String(Boolean(workload.hasAction))) + '</td></tr>').join('') +
        '</tbody></table>';
    }

    function openDetail(title, label, items) {
      const totalAcr = items.reduce((sum, item) => sum + (item.adjustedACR || 0), 0);
      const overlay = document.getElementById("detailOverlay");

      overlay.innerHTML = '<div class="detail"><div class="detail-head"><div><p class="eyebrow">' + label + '</p><h2>' + title + '</h2></div><button class="close" id="closeDetail">Close</button></div><p class="subtitle">' + formatWholeNumber(items.length) + ' workloads · Total (ACR): ' + formatCurrency(totalAcr) + '</p><div style="margin-top:16px">' + renderTable(items) + '</div></div>';
      overlay.classList.add("open");
      document.getElementById("closeDetail").addEventListener("click", () => overlay.classList.remove("open"));
      overlay.onclick = (event) => {
        if (event.target === overlay) {
          overlay.classList.remove("open");
        }
      };
    }

    function renderSortButtonStateful(label, sortKey, isNumeric) {
      const direction = detailState && detailState.sortKey === sortKey
        ? (detailState.sortDirection === "asc" ? " ^" : " v")
        : "";

      return '<button class="sort-button' + (isNumeric ? ' is-numeric' : '') + '" data-sort-key="' + sortKey + '">' + label + direction + '</button>';
    }

    function renderDetailTableStateful(items) {
      return '<table><thead><tr><th>' + renderSortButtonStateful('Opportunity', detailSortKeys.opportunityNumber, false) + '</th><th>' + renderSortButtonStateful('Customer', detailSortKeys.customerName, false) + '</th><th>' + renderSortButtonStateful('Workload', detailSortKeys.workload, false) + '</th><th class="is-numeric">' + renderSortButtonStateful('ACR', detailSortKeys.adjustedACR, true) + '</th><th>' + renderSortButtonStateful('Type', detailSortKeys.opportunityForecastTypeGroup, false) + '</th><th>' + renderSortButtonStateful('Tem SR?', detailSortKeys.hasSR, false) + '</th><th>' + renderSortButtonStateful('Tem Action?', detailSortKeys.hasAction, false) + '</th></tr></thead><tbody>' +
        items.map((workload) => '<tr><td>' + opportunityLink(workload) + '</td><td>' + (workload.customerName || '') + '</td><td>' + workloadLink(workload) + '</td><td class="is-numeric">' + formatCurrency(workload.adjustedACR) + '</td><td>' + workload.opportunityForecastTypeGroup + '</td><td>' + statusToken(String(Boolean(workload.hasSR))) + '</td><td>' + statusToken(String(Boolean(workload.hasAction))) + '</td></tr>').join('') +
        '</tbody></table>';
    }

    function openDetailStateful(title, label, items) {
      detailState = {
        title: title,
        label: label,
        items: items.slice(),
        sortKey: detailSortKeys.adjustedACR,
        sortDirection: "desc"
      };
      renderDetailStateful();
    }

    function renderDetailStateful() {
      if (!detailState) {
        return;
      }

      const totalAcr = detailState.items.reduce((sum, item) => sum + (item.adjustedACR || 0), 0);
      const sortedItems = sortItems(detailState.items, detailState.sortKey, detailState.sortDirection);
      const overlay = document.getElementById("detailOverlay");

      overlay.innerHTML = '<div class="detail"><div class="detail-head"><div><p class="eyebrow">' + detailState.label + '</p><h2>' + detailState.title + '</h2></div><button class="close" id="closeDetail">Fechar</button></div><p class="subtitle">' + formatWholeNumber(sortedItems.length) + ' workloads · Total (ACR): ' + formatCurrency(totalAcr) + '</p><div style="margin-top:16px">' + renderDetailTableStateful(sortedItems) + '</div><div class="detail-actions"><button class="close" id="closeDetailFooter">Fechar</button></div></div>';
      overlay.classList.add("open");

      const close = () => {
        overlay.classList.remove("open");
        detailState = null;
      };

      document.getElementById("closeDetail").addEventListener("click", close);
      document.getElementById("closeDetailFooter").addEventListener("click", close);
      overlay.querySelectorAll("[data-sort-key]").forEach((button) => {
        button.addEventListener("click", () => {
          const sortKey = button.getAttribute("data-sort-key");
          const nextDirection = detailState.sortKey === sortKey && detailState.sortDirection === "asc"
            ? "desc"
            : "asc";
          detailState.sortKey = sortKey;
          detailState.sortDirection = nextDirection;
          renderDetailStateful();
        });
      });
      overlay.onclick = (event) => {
        if (event.target === overlay) {
          close();
        }
      };
    }

    function render() {
      const workloads = flattenWorkloads();
      const summary = buildSummary(workloads);
      const app = document.getElementById("app");

      app.innerHTML = '<div class="shell">' +
        '<section class="hero"><div><p class="eyebrow">Live Oracle dataset</p><h1>Arch panel export</h1><p class="subtitle">Generated from user, customer, workload, action and service request APIs.</p></div><div><span class="pill">' + formatCurrency(summary.eligible.reduce((sum, item) => sum + (item.adjustedACR || 0), 0)) + ' total eligible ACR</span></div></section>' +
        '<section class="grid metrics">' +
          '<article class="metric"><p class="metric-label">Total clients</p><p class="metric-value">' + formatWholeNumber(payload.customers.length) + '</p><p class="metric-detail">Loaded from listSummary</p></article>' +
          '<article class="metric"><p class="metric-label">Total workloads</p><p class="metric-value">' + formatWholeNumber(workloads.length) + '</p><p class="metric-detail">Won workloads excluded upstream</p></article>' +
          '<article class="metric"><p class="metric-label">Current user</p><p class="metric-value" style="font-size:18px">' + (payload.user.name || payload.user.userEmail) + '</p><p class="metric-detail">' + payload.user.userEmail + '</p></article>' +
        '</section>' +
        '<section class="grid indicator-grid">' +
          summary.stageIndicators.map((indicator) => '<button class="metric clickable" data-kind="stage" data-value="' + indicator.label + '"><p class="metric-label">' + indicator.label + '</p><p class="metric-value">' + formatWholeNumber(indicator.count) + '</p><p class="metric-detail">Total (ACR): ' + formatCurrency(indicator.totalAcr) + '</p></button>').join('') +
        '</section>' +
        '<section class="grid status-grid">' +
          '<article class="panel"><p class="eyebrow">Status de SRs</p><div class="progress"><div class="progress-track"><span class="progress-segment is-success" style="width:' + ((summary.sr.trueCount + summary.sr.falseCount) > 0 ? (summary.sr.trueCount / (summary.sr.trueCount + summary.sr.falseCount)) * 100 : 0) + '%"></span><span class="progress-segment is-danger" style="width:' + ((summary.sr.trueCount + summary.sr.falseCount) > 0 ? (summary.sr.falseCount / (summary.sr.trueCount + summary.sr.falseCount)) * 100 : 0) + '%"></span></div><div class="progress-labels"><span>Workloads com SR: ' + formatPercent((summary.sr.trueCount + summary.sr.falseCount) > 0 ? (summary.sr.trueCount / (summary.sr.trueCount + summary.sr.falseCount)) * 100 : 0) + '</span><span>Workloads sem SR: ' + formatPercent((summary.sr.trueCount + summary.sr.falseCount) > 0 ? (summary.sr.falseCount / (summary.sr.trueCount + summary.sr.falseCount)) * 100 : 0) + '</span></div></div><div class="boolean-grid"><button class="boolean-card" data-kind="sr" data-value="true"><span>Workloads com SR</span><strong>' + formatWholeNumber(summary.sr.trueCount) + '</strong></button><button class="boolean-card" data-kind="sr" data-value="false"><span>Workloads sem SR</span><strong>' + formatWholeNumber(summary.sr.falseCount) + '</strong></button></div></article>' +
          '<article class="panel"><p class="eyebrow">Status de Consumption Plan/action</p><div class="progress"><div class="progress-track"><span class="progress-segment is-success" style="width:' + ((summary.action.trueCount + summary.action.falseCount) > 0 ? (summary.action.trueCount / (summary.action.trueCount + summary.action.falseCount)) * 100 : 0) + '%"></span><span class="progress-segment is-danger" style="width:' + ((summary.action.trueCount + summary.action.falseCount) > 0 ? (summary.action.falseCount / (summary.action.trueCount + summary.action.falseCount)) * 100 : 0) + '%"></span></div><div class="progress-labels"><span>Workloads com action: ' + formatPercent((summary.action.trueCount + summary.action.falseCount) > 0 ? (summary.action.trueCount / (summary.action.trueCount + summary.action.falseCount)) * 100 : 0) + '</span><span>Workloads sem action: ' + formatPercent((summary.action.trueCount + summary.action.falseCount) > 0 ? (summary.action.falseCount / (summary.action.trueCount + summary.action.falseCount)) * 100 : 0) + '</span></div></div><div class="boolean-grid"><button class="boolean-card" data-kind="action" data-value="true"><span>Workloads com action</span><strong>' + formatWholeNumber(summary.action.trueCount) + '</strong></button><button class="boolean-card" data-kind="action" data-value="false"><span>Workloads sem action</span><strong>' + formatWholeNumber(summary.action.falseCount) + '</strong></button></div></article>' +
        '</section>' +
      '</div>';

      app.querySelectorAll("[data-kind]").forEach((element) => {
        element.addEventListener("click", () => {
          const kind = element.getAttribute("data-kind");
          const value = element.getAttribute("data-value");
          let items = [];
          let title = "";
          let label = "";

          if (kind === "stage") {
            items = summary.eligible.filter((item) => item.opportunityForecastTypeGroup === value);
            label = "Opportunity type: " + value;
            title = value + " workloads";
          } else if (kind === "sr") {
            const flag = value === "true";
            items = summary.eligible.filter((item) => Boolean(item.hasSR) === flag);
            label = "Status de SRs";
            title = flag ? "Workloads com SR" : "Workloads sem SR";
          } else if (kind === "action") {
            const flag = value === "true";
            items = summary.eligible.filter((item) => Boolean(item.hasAction) === flag);
            label = "Status de Consumption Plan/action";
            title = flag ? "Workloads com action" : "Workloads sem action";
          }

          openDetailStateful(title, label, items);
        });
      });
    }

    render();
  </script>
</body>
</html>`;
  }

  function toggleTheme() {
    appState.theme = appState.theme === "dark" ? "light" : "dark";
    setStoredTheme(appState.theme);
    renderModal();
  }

  function toggleSidebar() {
    appState.sidebarCollapsed = !appState.sidebarCollapsed;
    setStoredSidebarCollapsed(appState.sidebarCollapsed);
    renderModal();
  }

  function applyDialogTheme(overlay) {
    const dialog = overlay?.querySelector(`#${IDS.dialog}`);

    if (!dialog) {
      return;
    }

    dialog.setAttribute("data-theme", appState.theme);
  }

  function ensureStyles() {
    if (document.getElementById(IDS.style)) {
      return;
    }

    const style = document.createElement("style");
    style.id = IDS.style;
    style.textContent = `
      html.${CLASSES.modalOpen},
      body.${CLASSES.modalOpen} {
        overflow: hidden !important;
      }

      .arch-panel-extension-entry {
        --arch-panel-bg: rgba(255, 255, 255, 0.12);
        --arch-panel-bg-hover: rgba(255, 255, 255, 0.2);
        --arch-panel-border: rgba(255, 255, 255, 0.26);
        --arch-panel-fg: #ffffff;
        --arch-panel-focus: rgba(255, 255, 255, 0.72);
        --arch-panel-font: inherit;
        --arch-workbench-header: #4b335d;
        --arch-workbench-accent: #6c4d80;
        display: inline-flex;
        align-items: center;
        margin-inline-end: 12px;
        flex: 0 0 auto;
      }

      .arch-panel-extension-button {
        appearance: none;
        border: 1px solid var(--arch-panel-border);
        background: var(--arch-panel-bg);
        color: var(--arch-panel-fg);
        border-radius: 999px;
        min-height: 36px;
        padding: 0 14px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-family: var(--arch-panel-font);
        font-size: 13px;
        font-weight: 600;
        line-height: 1;
        letter-spacing: 0.01em;
        cursor: pointer;
        transition:
          background-color 160ms ease,
          border-color 160ms ease,
          transform 160ms ease;
      }

      .arch-panel-extension-button:hover {
        background: var(--arch-panel-bg-hover);
      }

      .arch-panel-extension-button:active {
        transform: translateY(1px);
      }

      .arch-panel-extension-button:focus-visible,
      .arch-panel-extension-close:focus-visible,
      .arch-panel-extension-theme-toggle:focus-visible,
      .arch-panel-extension-sidebar-button:focus-visible,
      .arch-panel-extension-utility-button:focus-visible,
      .arch-panel-extension-summary-card-button:focus-visible,
      .arch-panel-extension-sort-button:focus-visible,
      .arch-panel-extension-indicator-card:focus-visible,
      .arch-panel-extension-row-link:focus-visible {
        outline: 2px solid var(--arch-panel-focus);
        outline-offset: 2px;
      }

      .arch-panel-extension-overlay {
        position: fixed;
        inset: 0;
        z-index: 2147483647;
        display: flex;
        opacity: 0;
        pointer-events: none;
        background: rgba(13, 17, 24, 0.56);
        backdrop-filter: blur(8px);
        transition: opacity 160ms ease;
      }

      .arch-panel-extension-overlay.${CLASSES.overlayOpen} {
        opacity: 1;
        pointer-events: auto;
      }

      .arch-panel-extension-dialog {
        width: 100vw;
        height: 100vh;
        display: grid;
        grid-template-rows: auto 1fr;
        --wb-app-bg: #f5f4f3;
        --wb-panel: #ffffff;
        --wb-panel-soft: #fafafa;
        --wb-sidebar: #f3f2f1;
        --wb-border: #d9d9d9;
        --wb-border-strong: #c8c8c8;
        --wb-row-divider: #e6e6e6;
        --wb-divider: #ececec;
        --wb-row-hover: #f9fbfc;
        --wb-text: #1f1f1f;
        --wb-text-secondary: #5f6670;
        --wb-text-muted: #7b8189;
        --wb-link: #006b9a;
        --wb-info: #dceef7;
        --wb-success: #3fa35c;
        --wb-warning: #d94f2b;
        --wb-shadow: 0 1px 2px rgba(31, 31, 31, 0.04);
        background: var(--wb-app-bg);
        color: var(--wb-text);
        font-family: "Oracle Sans", "Segoe UI", Arial, sans-serif;
      }

      .arch-panel-extension-dialog[data-theme="dark"] {
        --wb-app-bg: #141b24;
        --wb-panel: #1f2833;
        --wb-panel-soft: #273240;
        --wb-sidebar: #19222c;
        --wb-border: #364150;
        --wb-border-strong: #566171;
        --wb-row-divider: #333d4b;
        --wb-divider: #303a46;
        --wb-row-hover: #273240;
        --wb-text: #f4f7fb;
        --wb-text-secondary: #c6d0da;
        --wb-text-muted: #9ca8b5;
        --wb-link: #84c7e3;
        --wb-info: #233847;
        --wb-success: #5ec280;
        --wb-warning: #f0946c;
        --wb-shadow: none;
      }

      .arch-panel-extension-dialog * {
        box-sizing: border-box;
      }

      .arch-panel-extension-shell-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 24px;
        min-height: 64px;
        padding: 12px 24px;
        background: var(--arch-workbench-header);
        color: #ffffff;
      }

      .arch-panel-extension-brand {
        display: flex;
        align-items: center;
        gap: 14px;
      }

      .arch-panel-extension-brand-mark {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 40px;
        height: 40px;
        border-radius: 6px;
        background: rgba(255, 255, 255, 0.14);
        color: #ffffff;
        font-size: 14px;
        font-weight: 700;
      }

      .arch-panel-extension-brand-label {
        margin: 0 0 2px;
        color: rgba(255, 255, 255, 0.72);
        font-size: 11px;
        letter-spacing: 0.08em;
        text-transform: uppercase;
      }

      .arch-panel-extension-title {
        margin: 0;
        color: #ffffff;
        font-size: 24px;
        line-height: 1.2;
        font-weight: 600;
      }

      .arch-panel-extension-shell-actions {
        display: flex;
        align-items: center;
        gap: 12px;
      }

      .arch-panel-extension-shell-note {
        color: rgba(255, 255, 255, 0.76);
        font-size: 12px;
      }

      .arch-panel-extension-theme-toggle {
        appearance: none;
        min-height: 34px;
        padding: 0 14px;
        border: 1px solid rgba(255, 255, 255, 0.24);
        border-radius: 4px;
        background: rgba(255, 255, 255, 0.08);
        color: #ffffff;
        font: inherit;
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
      }

      .arch-panel-extension-close {
        appearance: none;
        min-height: 34px;
        padding: 0 14px;
        border: 1px solid var(--wb-border);
        border-radius: 4px;
        background: var(--wb-panel-soft);
        color: var(--wb-text);
        font: inherit;
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
        box-shadow: none;
      }

      .arch-panel-extension-close:hover {
        border-color: var(--wb-border-strong);
        background: var(--wb-row-hover);
      }

      .arch-panel-extension-shell-header .arch-panel-extension-close {
        border-color: rgba(255, 255, 255, 0.24);
        background: rgba(255, 255, 255, 0.08);
        color: #ffffff;
      }

      .arch-panel-extension-shell-header .arch-panel-extension-close:hover {
        border-color: rgba(255, 255, 255, 0.42);
        background: rgba(255, 255, 255, 0.16);
      }

      .arch-panel-extension-detail-dialog .arch-panel-extension-close {
        border-color: var(--wb-border);
        background: var(--wb-panel-soft);
        color: var(--wb-text);
        box-shadow: none;
      }

      .arch-panel-extension-sidebar-button,
      .arch-panel-extension-utility-button {
        appearance: none;
        min-height: 34px;
        padding: 0 14px;
        border: 1px solid var(--wb-border);
        border-radius: 4px;
        background: var(--wb-panel);
        color: var(--wb-text);
        font: inherit;
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
      }

      .arch-panel-extension-utility-button.is-primary {
        border-color: #0b5cab;
        background: #0b5cab;
        color: #ffffff;
        text-shadow: 0 1px 0 rgba(0, 0, 0, 0.16);
        box-shadow: 0 8px 18px rgba(11, 92, 171, 0.24);
      }

      .arch-panel-extension-utility-button.is-primary:hover {
        border-color: #084a8a;
        background: #084a8a;
      }

      .arch-panel-extension-utility-button.is-primary:disabled {
        border-color: var(--wb-border);
        background: var(--wb-panel-soft);
        color: var(--wb-text-muted);
        box-shadow: none;
        cursor: not-allowed;
      }

      .arch-panel-extension-shell-body {
        display: grid;
        grid-template-columns: 260px minmax(0, 1fr);
        min-height: 0;
        position: relative;
      }

      .arch-panel-extension-shell-body.is-sidebar-collapsed {
        grid-template-columns: minmax(0, 1fr);
      }

      .arch-panel-extension-sidebar {
        background: var(--wb-sidebar);
        border-right: 1px solid var(--wb-border);
        padding: 20px 14px;
      }

      .arch-panel-extension-sidebar.is-collapsed {
        display: none;
      }

      .arch-panel-extension-sidebar-group + .arch-panel-extension-sidebar-group {
        margin-top: 18px;
        padding-top: 18px;
        border-top: 1px solid var(--wb-border);
      }

      .arch-panel-extension-sidebar-label,
      .arch-panel-extension-page-eyebrow,
      .arch-panel-extension-panel-label,
      .arch-panel-extension-state-eyebrow {
        margin: 0 0 8px;
        color: var(--wb-text-muted);
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
      }

      .arch-panel-extension-sidebar-data {
        display: grid;
        gap: 6px;
        color: var(--wb-text-secondary);
        font-size: 12px;
      }

      .arch-panel-extension-sidebar-data strong {
        color: var(--wb-text);
        font-size: 13px;
      }

      .arch-panel-extension-sidebar-button {
        width: 100%;
        justify-content: center;
        display: inline-flex;
        align-items: center;
        border-color: var(--wb-border);
        background: var(--wb-panel);
        color: var(--wb-text);
      }

      .arch-panel-extension-sidebar-button + .arch-panel-extension-sidebar-button {
        margin-top: 8px;
      }

      .arch-panel-extension-main-shell {
        display: flex;
        flex-direction: column;
        min-width: 0;
        overflow: auto;
        overflow-anchor: none;
        background: var(--wb-app-bg);
        padding: 20px 24px 24px;
      }

      .arch-panel-extension-main-shell:has(.arch-panel-extension-state-card) {
        grid-column: 1 / -1;
        align-items: stretch;
        justify-content: center;
        min-height: min(720px, calc(100vh - 120px));
      }

      .arch-panel-extension-page-hero {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 24px;
        margin-bottom: 18px;
      }

      .arch-panel-extension-page-title,
      .arch-panel-extension-state-title {
        margin: 0;
        color: var(--wb-text);
        font-size: 34px;
        line-height: 1.15;
        font-weight: 700;
      }

      .arch-panel-extension-page-subtitle,
      .arch-panel-extension-state-copy {
        margin: 10px 0 0;
        max-width: 760px;
        color: var(--wb-text-secondary);
        font-size: 13px;
        line-height: 1.55;
      }

      .arch-panel-extension-hero-aside {
        display: grid;
        gap: 8px;
        justify-items: end;
      }

      .arch-panel-extension-hero-pill {
        display: inline-flex;
        align-items: center;
        min-height: 28px;
        padding: 0 10px;
        border: 1px solid var(--wb-border);
        border-radius: 14px;
        background: var(--wb-info);
        color: var(--wb-text);
        font-size: 12px;
        font-weight: 600;
      }

      .arch-panel-extension-hero-note {
        color: var(--wb-text-secondary);
        font-size: 12px;
      }

      .arch-panel-extension-summary-row,
      .arch-panel-extension-indicator-grid,
      .arch-panel-extension-status-grid,
      .arch-panel-extension-content-grid,
      .arch-panel-extension-boolean-grid {
        display: grid;
        gap: 14px;
      }

      .arch-panel-extension-summary-row {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        margin-bottom: 16px;
      }

      .arch-panel-extension-indicator-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        margin-bottom: 16px;
      }

      .arch-panel-extension-status-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin-bottom: 16px;
      }

      .arch-panel-extension-content-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .arch-panel-extension-summary-card,
      .arch-panel-extension-panel,
      .arch-panel-extension-indicator-card,
      .arch-panel-extension-state-card {
        border: 1px solid var(--wb-border);
        border-radius: 8px;
        background: var(--wb-panel);
        box-shadow: var(--wb-shadow);
      }

      .arch-panel-extension-summary-card,
      .arch-panel-extension-state-card,
      .arch-panel-extension-indicator-card {
        padding: 16px;
      }

      .arch-panel-extension-state-card {
        width: 100%;
        min-height: 320px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 34px 40px;
      }

      .arch-panel-extension-loading-progress {
        display: grid;
        gap: 10px;
        width: 100%;
        margin-top: 30px;
      }

      .arch-panel-extension-loading-progress-meta {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 16px;
        color: var(--wb-text-secondary);
        font-size: 12px;
        font-weight: 700;
      }

      .arch-panel-extension-loading-progress-track {
        position: relative;
        height: 30px;
        overflow: hidden;
        border: 1px solid color-mix(in srgb, var(--wb-accent) 50%, var(--wb-border-strong));
        border-radius: 8px;
        background: color-mix(in srgb, var(--wb-panel-soft) 68%, #000000);
      }

      .arch-panel-extension-loading-progress-fill {
        position: absolute;
        inset: 0 auto 0 0;
        width: 0;
        min-width: 0;
        border-radius: inherit;
        background: linear-gradient(90deg, #1f7a4d, #2fbf71);
        transition: width 520ms ease;
      }

      .arch-panel-extension-loading-progress-value {
        position: absolute;
        inset: 0 auto 0 50%;
        transform: translateX(-50%);
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 54px;
        margin: 4px 0;
        padding: 0 8px;
        border: 1px solid rgba(255, 255, 255, 0.26);
        border-radius: 999px;
        background: rgba(7, 12, 18, 0.72);
        color: #ffffff;
        font-size: 12px;
        font-weight: 800;
        line-height: 1;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28);
        text-shadow: none;
        pointer-events: none;
      }

      .arch-panel-extension-summary-card-button {
        appearance: none;
        width: 100%;
        text-align: left;
        color: inherit;
        font: inherit;
        line-height: inherit;
        cursor: pointer;
      }

      .arch-panel-extension-panel {
        padding: 16px;
      }

      .arch-panel-extension-summary-label,
      .arch-panel-extension-summary-detail,
      .arch-panel-extension-indicator-label,
      .arch-panel-extension-indicator-subtitle,
      .arch-panel-extension-indicator-total,
      .arch-panel-extension-insight-detail,
      .arch-panel-extension-stage-detail {
        margin: 0;
      }

      .arch-panel-extension-summary-label,
      .arch-panel-extension-indicator-label {
        color: var(--wb-text-secondary);
        font-size: 12px;
      }

      .arch-panel-extension-summary-value,
      .arch-panel-extension-indicator-value {
        margin: 8px 0 4px;
        color: var(--wb-text);
        font-size: 26px;
        line-height: 1.2;
        font-weight: 700;
      }

      .arch-panel-extension-summary-detail,
      .arch-panel-extension-indicator-subtitle,
      .arch-panel-extension-indicator-total {
        color: var(--wb-text-muted);
        font-size: 11px;
      }

      .arch-panel-extension-indicator-card {
        appearance: none;
        text-align: left;
        color: inherit;
        cursor: pointer;
      }

      .arch-panel-extension-boolean-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin-top: 12px;
      }

      .arch-panel-extension-progress {
        display: grid;
        gap: 8px;
        margin-bottom: 12px;
      }

      .arch-panel-extension-progress-track {
        display: flex;
        width: 100%;
        height: 10px;
        overflow: hidden;
        border-radius: 999px;
        background: var(--wb-panel-soft);
        border: 1px solid var(--wb-border);
      }

      .arch-panel-extension-progress-segment {
        height: 100%;
      }

      .arch-panel-extension-progress-segment.is-success {
        background: linear-gradient(90deg, #7fd29a, #3fa35c);
      }

      .arch-panel-extension-progress-segment.is-danger {
        background: linear-gradient(90deg, #f2a28d, #d94f2b);
      }

      .arch-panel-extension-progress-labels {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        color: var(--wb-text-secondary);
        font-size: 11px;
        font-weight: 600;
      }

      .arch-panel-extension-panel-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        margin-bottom: 14px;
      }

      .arch-panel-extension-panel-title {
        margin: 0;
        color: var(--wb-text);
        font-size: 16px;
        font-weight: 600;
      }

      .arch-panel-extension-panel-meta {
        display: flex;
        align-items: center;
        gap: 8px;
        color: var(--wb-text-muted);
        font-size: 12px;
      }

      .arch-panel-extension-operations-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
      }

      .arch-panel-extension-sr-hour-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
        align-content: start;
      }

      .arch-panel-extension-calendar-card {
        min-width: 0;
      }

      .arch-panel-extension-calendar-actions {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        color: var(--wb-text-muted);
        font-size: 12px;
      }

      .arch-panel-extension-calendar-nav {
        appearance: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
        border: 1px solid var(--wb-border);
        border-radius: 4px;
        background: var(--wb-panel-soft);
        color: var(--wb-text);
        font-size: 18px;
        line-height: 1;
        cursor: pointer;
      }

      .arch-panel-extension-calendar-nav:hover {
        border-color: var(--wb-accent);
        color: var(--wb-accent);
      }

      .arch-panel-extension-calendar-today {
        appearance: none;
        min-height: 28px;
        padding: 0 10px;
        border: 1px solid var(--wb-border);
        border-radius: 4px;
        background: var(--wb-panel-soft);
        color: var(--wb-text);
        font: inherit;
        font-size: 12px;
        font-weight: 700;
        cursor: pointer;
      }

      .arch-panel-extension-calendar-today:hover {
        border-color: var(--wb-accent);
        color: var(--wb-accent);
      }

      .arch-panel-extension-calendar-weekdays,
      .arch-panel-extension-calendar-grid {
        display: grid;
        grid-template-columns: repeat(7, minmax(0, 1fr));
      }

      .arch-panel-extension-calendar-weekdays {
        gap: 6px;
        margin-bottom: 6px;
        color: var(--wb-text-muted);
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
      }

      .arch-panel-extension-calendar-weekdays span {
        padding: 0 6px;
      }

      .arch-panel-extension-calendar-grid {
        gap: 6px;
      }

      .arch-panel-extension-calendar-day {
        appearance: none;
        position: relative;
        display: block;
        width: 100%;
        text-align: left;
        min-height: 74px;
        overflow: hidden;
        border: 1px solid var(--wb-border);
        border-radius: 6px;
        background: var(--wb-panel-soft);
        padding: 7px;
        font: inherit;
        cursor: pointer;
      }

      .arch-panel-extension-calendar-day:disabled {
        cursor: default;
      }

      .arch-panel-extension-calendar-day.has-workload:hover {
        border-color: #f26c4f;
        background: rgba(217, 79, 43, 0.22);
      }

      .arch-panel-extension-calendar-day.is-muted {
        opacity: 0.42;
      }

      .arch-panel-extension-calendar-day.is-today {
        border-color: var(--wb-accent);
        box-shadow: inset 0 0 0 1px var(--wb-accent);
      }

      .arch-panel-extension-calendar-day.has-workload {
        border-color: rgba(217, 79, 43, 0.82);
        background: rgba(217, 79, 43, 0.14);
      }

      .arch-panel-extension-calendar-date {
        color: var(--wb-text);
        font-size: 12px;
        font-weight: 800;
      }

      .arch-panel-extension-calendar-week-number {
        position: absolute;
        right: 7px;
        bottom: 6px;
        color: var(--wb-text-muted);
        font-size: 9px;
        font-weight: 800;
        letter-spacing: 0.04em;
        opacity: 0.72;
        pointer-events: none;
      }

      .arch-panel-extension-calendar-workload {
        display: block;
        margin-top: 8px;
        color: var(--wb-text);
        font-size: 11px;
        line-height: 1.25;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }

      .arch-panel-extension-calendar-count {
        position: absolute;
        top: 6px;
        right: 6px;
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 20px;
        height: 20px;
        padding: 0 6px;
        border-radius: 999px;
        background: #d94f2b;
        color: #ffffff;
        font-size: 11px;
        font-weight: 800;
      }

      .arch-panel-extension-empty-state {
        border: 1px dashed var(--wb-border);
        border-radius: 8px;
        padding: 16px;
        color: var(--wb-text-muted);
        font-size: 13px;
      }

      .arch-panel-extension-panel-dot {
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background: var(--wb-border-strong);
      }

      .arch-panel-extension-table-wrap {
        overflow: auto;
        border: 1px solid var(--wb-border);
        border-radius: 6px;
      }

      .arch-panel-extension-table-wrap.is-detail {
        max-height: calc(100vh - 220px);
      }

      .arch-panel-extension-table-wrap.is-sr-list {
        overflow: auto;
      }

      .arch-panel-extension-table-wrap.is-ramp-pivot {
        max-height: min(460px, calc(100vh - 260px));
      }

      .arch-panel-extension-table {
        width: 100%;
        border-collapse: collapse;
        background: var(--wb-panel);
      }

      .arch-panel-extension-table th,
      .arch-panel-extension-table td {
        padding: 12px 14px;
        border-bottom: 1px solid var(--wb-row-divider);
        font-size: 12px;
        text-align: left;
        white-space: nowrap;
      }

      .arch-panel-extension-table th {
        background: var(--wb-panel-soft);
        color: var(--wb-text-secondary);
        font-weight: 600;
      }

      .arch-panel-extension-table td {
        color: var(--wb-text);
      }

      .arch-panel-extension-ramp-pivot-table th:first-child {
        min-width: 150px;
        position: sticky;
        left: 0;
        z-index: 1;
      }

      .arch-panel-extension-ramp-pivot-table tbody th {
        background: var(--wb-panel-soft);
        color: var(--wb-text-secondary);
        font-weight: 700;
      }

      .arch-panel-extension-ramp-pivot-table .is-delta-different {
        color: #d94f2b;
        font-weight: 800;
      }

      .arch-panel-extension-sr-table td {
        white-space: normal;
        vertical-align: top;
      }

      .arch-panel-extension-sr-main {
        width: 78%;
      }

      .arch-panel-extension-sr-side {
        width: 22%;
        text-align: right;
      }

      .arch-panel-extension-sr-line {
        display: flex;
        flex-wrap: wrap;
        gap: 10px 14px;
        margin-top: 6px;
      }

      .arch-panel-extension-sr-line.is-head {
        margin-top: 0;
      }

      .arch-panel-extension-sr-customer {
        color: var(--wb-text);
        font-size: 13px;
      }

      .arch-panel-extension-sr-moment {
        color: var(--wb-text);
        font-size: 18px;
        font-weight: 700;
      }

      .arch-panel-extension-sr-exact,
      .arch-panel-extension-sr-hours {
        margin-top: 6px;
        color: var(--wb-text-secondary);
        font-size: 12px;
      }

      .arch-panel-extension-table-empty {
        padding: 18px;
        border: 1px dashed var(--wb-border);
        border-radius: 8px;
        color: var(--wb-text-secondary);
        font-size: 13px;
      }

      .arch-panel-extension-table-wrap.is-main .arch-panel-extension-table {
        table-layout: fixed;
      }

      .arch-panel-extension-table-wrap.is-main
        .arch-panel-extension-col-opportunity {
        width: 14%;
      }

      .arch-panel-extension-table-wrap.is-main
        .arch-panel-extension-col-customer {
        width: 16%;
      }

      .arch-panel-extension-table-wrap.is-main
        .arch-panel-extension-col-workload {
        width: auto;
      }

      .arch-panel-extension-table-wrap.is-main
        .arch-panel-extension-col-acr {
        width: 11%;
      }

      .arch-panel-extension-table-wrap.is-main
        .arch-panel-extension-col-type {
        width: 11%;
      }

      .arch-panel-extension-table-wrap.is-main
        .arch-panel-extension-col-flag {
        width: 9%;
      }

      .arch-panel-extension-table-wrap.is-main
        .arch-panel-extension-table
        th:nth-child(3),
      .arch-panel-extension-table-wrap.is-main
        .arch-panel-extension-table
        td:nth-child(3) {
        white-space: normal;
        overflow-wrap: anywhere;
        word-break: break-word;
      }

      .arch-panel-extension-table-wrap.is-main
        .arch-panel-extension-table
        td:nth-child(3)
        .arch-panel-extension-row-link {
        display: block;
      }

      .arch-panel-extension-table-wrap.is-main
        .arch-panel-extension-table
        th:nth-child(2),
      .arch-panel-extension-table-wrap.is-main
        .arch-panel-extension-table
        td:nth-child(2) {
        white-space: normal;
        overflow-wrap: anywhere;
      }

      .arch-panel-extension-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 54px;
        min-height: 24px;
        padding: 0 10px;
        border-radius: 999px;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.02em;
      }

      .arch-panel-extension-badge.is-success {
        background: #dcfce7;
        border: 1px solid #86efac;
        color: #166534;
      }

      .arch-panel-extension-badge.is-danger {
        background: #fee2e2;
        border: 1px solid #fca5a5;
        color: #991b1b;
      }

      .arch-panel-extension-action-cell {
        display: inline-flex;
        align-items: center;
        gap: 8px;
      }

      .arch-panel-extension-add-action-button {
        appearance: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 26px;
        height: 26px;
        padding: 0;
        border: 1px solid var(--wb-border);
        border-radius: 999px;
        background: var(--wb-panel-soft);
        color: var(--wb-text);
        font: inherit;
        font-size: 18px;
        line-height: 1;
        cursor: pointer;
      }

      .arch-panel-extension-table tbody tr:hover {
        background: var(--wb-row-hover);
      }

      .arch-panel-extension-table th.is-numeric,
      .arch-panel-extension-table td.is-numeric {
        text-align: right;
      }

      .arch-panel-extension-row-link {
        appearance: none;
        padding: 0;
        border: 0;
        background: transparent;
        color: var(--wb-link);
        font: inherit;
        font-size: 12px;
        font-weight: 600;
        cursor: pointer;
        text-decoration: none;
      }

      .arch-panel-extension-workload-link-cell {
        display: inline-flex;
        align-items: center;
        gap: 7px;
      }

      .arch-panel-extension-ramp-alert-button {
        appearance: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 18px;
        height: 18px;
        padding: 0;
        border: 1px solid #d94f2b;
        border-radius: 999px;
        background: #fee2e2;
        color: #991b1b;
        font: inherit;
        font-size: 12px;
        font-weight: 900;
        line-height: 1;
        cursor: pointer;
      }

      .arch-panel-extension-ramp-alert-button:hover {
        background: #fecaca;
      }

      .arch-panel-extension-insight-list,
      .arch-panel-extension-stage-list,
      .arch-panel-extension-side-column {
        display: grid;
        gap: 14px;
      }

      .arch-panel-extension-insight {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 16px;
        padding-top: 12px;
        border-top: 1px solid var(--wb-divider);
      }

      .arch-panel-extension-insight:first-child {
        padding-top: 0;
        border-top: 0;
      }

      .arch-panel-extension-insight-label,
      .arch-panel-extension-stage-label {
        margin: 0 0 4px;
        color: var(--wb-text);
        font-size: 12px;
        font-weight: 600;
      }

      .arch-panel-extension-insight-detail,
      .arch-panel-extension-stage-detail {
        color: var(--wb-text-muted);
        font-size: 11px;
        line-height: 1.45;
      }

      .arch-panel-extension-insight-value {
        margin: 0;
        color: var(--wb-text);
        font-size: 16px;
        font-weight: 700;
        text-align: right;
      }

      .arch-panel-extension-stage-row {
        display: grid;
        gap: 8px;
      }

      .arch-panel-extension-stage-copy {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 12px;
      }

      .arch-panel-extension-stage-values {
        display: grid;
        justify-items: end;
        gap: 2px;
        color: var(--wb-text-secondary);
        font-size: 12px;
      }

      .arch-panel-extension-stage-detail-row {
        color: var(--wb-text-secondary);
        font-size: 12px;
      }

      .arch-panel-extension-stage-bar {
        position: relative;
        height: 8px;
        border-radius: 999px;
        overflow: hidden;
        background: color-mix(in srgb, var(--wb-text-secondary) 14%, transparent);
      }

      .arch-panel-extension-stage-bar span {
        position: absolute;
        inset: 0 auto 0 0;
        border-radius: inherit;
        background: linear-gradient(90deg, var(--wb-accent), color-mix(in srgb, var(--wb-accent) 52%, #ffffff));
      }

      .arch-panel-extension-detail-overlay {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 16px;
        background: rgba(10, 14, 20, 0.68);
        backdrop-filter: blur(6px);
      }

      .arch-panel-extension-time-drawer {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 2;
        width: min(560px, calc(100vw - 32px));
        display: flex;
        flex-direction: column;
        gap: 14px;
        padding: 18px;
        border-left: 1px solid var(--wb-border);
        background: var(--wb-panel);
        box-shadow: -18px 0 42px rgba(0, 0, 0, 0.28);
        overflow: auto;
        animation: arch-panel-extension-slide-in 180ms ease-out;
      }

      .arch-panel-extension-time-drawer-head {
        position: sticky;
        top: -18px;
        z-index: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        padding: 0 0 12px;
        border-bottom: 1px solid var(--wb-border);
        background: var(--wb-panel);
      }

      .arch-panel-extension-time-drawer-close {
        border-color: var(--wb-border);
        background: var(--wb-panel-soft);
        color: var(--wb-text);
        box-shadow: none;
      }

      .arch-panel-extension-time-drawer-close:hover {
        border-color: var(--wb-border-strong);
        background: var(--wb-row-hover);
      }

      .arch-panel-extension-time-drawer-actions {
        position: sticky;
        bottom: -18px;
        display: flex;
        justify-content: flex-end;
        margin: auto -18px -18px;
        padding: 12px 18px 18px;
        border-top: 1px solid var(--wb-border);
        background: linear-gradient(180deg, rgba(23, 30, 39, 0), var(--wb-panel) 30%);
      }

      .arch-panel-extension-time-drawer-meta {
        display: flex;
        gap: 8px;
        color: var(--wb-text-muted);
        font-size: 12px;
      }

      .arch-panel-extension-time-drawer-state,
      .arch-panel-extension-time-drawer-json {
        border: 1px solid var(--wb-border);
        border-radius: 8px;
        background: var(--wb-panel-soft);
        padding: 14px;
      }

      .arch-panel-extension-time-drawer-state.is-error {
        border-color: rgba(217, 79, 43, 0.42);
      }

      .arch-panel-extension-time-entry-group {
        display: grid;
        gap: 10px;
      }

      .arch-panel-extension-time-entry-group + .arch-panel-extension-time-entry-group {
        padding-top: 12px;
        border-top: 1px solid var(--wb-border);
      }

      .arch-panel-extension-time-entry-group-head {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: 12px;
      }

      .arch-panel-extension-time-entry-group-head h4 {
        margin: 3px 0 0;
        color: var(--wb-text);
        font-size: 16px;
        line-height: 1.25;
      }

      .arch-panel-extension-time-entry-group-head span {
        color: var(--wb-text-muted);
        font-size: 12px;
        white-space: nowrap;
      }

      .arch-panel-extension-time-entry-table-wrap {
        overflow: auto;
        border: 1px solid var(--wb-border);
        border-radius: 8px;
      }

      .arch-panel-extension-time-entry-table {
        width: 100%;
        border-collapse: collapse;
        background: var(--wb-panel);
      }

      .arch-panel-extension-time-entry-table th,
      .arch-panel-extension-time-entry-table td {
        padding: 10px 12px;
        border-bottom: 1px solid var(--wb-row-divider);
        color: var(--wb-text);
        font-size: 12px;
        text-align: left;
        vertical-align: top;
      }

      .arch-panel-extension-time-entry-table th {
        background: var(--wb-panel-soft);
        color: var(--wb-text-secondary);
        font-weight: 700;
      }

      .arch-panel-extension-time-entry-table tfoot th {
        border-bottom: 0;
        color: var(--wb-text);
      }

      .arch-panel-extension-time-entry-table .is-numeric {
        text-align: right;
        white-space: nowrap;
      }

      .arch-panel-extension-time-drawer-json summary {
        color: var(--wb-link);
        font-size: 12px;
        font-weight: 700;
        cursor: pointer;
      }

      .arch-panel-extension-time-drawer-json pre {
        max-height: 320px;
        margin: 12px 0 0;
        overflow: auto;
        color: var(--wb-text);
        font-size: 11px;
        line-height: 1.5;
        white-space: pre-wrap;
      }

      @keyframes arch-panel-extension-slide-in {
        from {
          transform: translateX(100%);
        }
        to {
          transform: translateX(0);
        }
      }

      .arch-panel-extension-detail-dialog {
        width: min(1520px, calc(100vw - 32px));
        max-height: calc(100vh - 88px);
        display: flex;
        flex-direction: column;
        overflow: hidden;
        border: 1px solid var(--wb-border);
        border-radius: 10px;
        background: var(--wb-panel);
        box-shadow: var(--wb-shadow);
        padding: 18px;
      }

      .arch-panel-extension-ramp-dialog {
        width: min(1320px, calc(100vw - 48px));
        max-height: calc(100vh - 120px);
        display: flex;
        flex-direction: column;
        overflow: hidden;
        border: 1px solid var(--wb-border);
        border-radius: 10px;
        background: var(--wb-panel);
        box-shadow: var(--wb-shadow);
        padding: 18px;
      }

      .arch-panel-extension-action-dialog {
        width: min(980px, calc(100vw - 32px));
        max-height: calc(100vh - 88px);
        overflow: auto;
        border: 1px solid var(--wb-border);
        border-radius: 10px;
        background: var(--wb-panel);
        box-shadow: var(--wb-shadow);
        padding: 18px;
      }

      .arch-panel-extension-confirm-dialog {
        width: min(560px, calc(100vw - 32px));
        max-height: calc(100vh - 120px);
        overflow: auto;
        border: 1px solid var(--wb-border);
        border-radius: 10px;
        background: var(--wb-panel);
        box-shadow: var(--wb-shadow);
        padding: 18px;
      }

      .arch-panel-extension-detail-title {
        margin: 0;
        color: var(--wb-text);
        font-size: 18px;
        font-weight: 700;
      }

      .arch-panel-extension-detail-subtitle {
        margin: 0 0 14px;
        color: var(--wb-text-muted);
        font-size: 12px;
        line-height: 1.5;
        overflow-wrap: anywhere;
      }

      .arch-panel-extension-detail-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        margin-bottom: 8px;
      }

      .arch-panel-extension-detail-meta {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 8px;
        margin-bottom: 14px;
        color: var(--wb-text-muted);
        font-size: 12px;
      }

      .arch-panel-extension-detail-actions {
        display: flex;
        justify-content: flex-end;
        gap: 10px;
        position: sticky;
        bottom: 0;
        margin-top: 16px;
        padding-top: 12px;
        background: linear-gradient(180deg, rgba(23, 30, 39, 0), var(--wb-panel) 35%);
      }

      .arch-panel-extension-form-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
        margin-top: 18px;
      }

      .arch-panel-extension-form-field {
        display: grid;
        gap: 6px;
      }

      .arch-panel-extension-form-field span {
        color: var(--wb-text-secondary);
        font-size: 12px;
        font-weight: 600;
      }

      .arch-panel-extension-form-field input,
      .arch-panel-extension-form-field select {
        width: 100%;
        min-height: 38px;
        padding: 0 12px;
        border: 1px solid var(--wb-border);
        border-radius: 6px;
        background: var(--wb-panel-soft);
        color: var(--wb-text);
        font: inherit;
      }

      .arch-panel-extension-form-error {
        margin: 12px 0 0;
        color: #d94f2b;
        font-size: 12px;
        font-weight: 600;
      }

      .arch-panel-extension-sort-button {
        appearance: none;
        display: inline-flex;
        align-items: center;
        gap: 4px;
        padding: 0;
        border: 0;
        background: transparent;
        color: inherit;
        font: inherit;
        font-weight: 600;
        cursor: pointer;
      }

      .arch-panel-extension-sort-button.is-numeric {
        justify-content: flex-end;
        width: 100%;
      }

      .arch-panel-extension-table-wrap.is-detail {
        flex: 1 1 auto;
        min-height: 0;
        max-height: calc(100vh - 270px);
        overflow: auto;
      }

      .arch-panel-extension-table-wrap.is-detail .arch-panel-extension-table th {
        position: sticky;
        top: 0;
        z-index: 3;
      }

      .arch-panel-extension-table-wrap.is-detail .arch-panel-extension-table thead {
        position: relative;
        z-index: 3;
      }

      .arch-panel-extension-table-wrap.is-detail .arch-panel-extension-table {
        border-collapse: separate;
        border-spacing: 0;
      }

      .arch-panel-extension-table-wrap.is-detail .arch-panel-extension-table {
        table-layout: fixed;
      }

      .arch-panel-extension-table-wrap.is-detail .arch-panel-extension-table th,
      .arch-panel-extension-table-wrap.is-detail .arch-panel-extension-table td {
        white-space: normal;
        vertical-align: top;
        overflow-wrap: anywhere;
      }

      .arch-panel-extension-state-actions {
        display: flex;
        gap: 12px;
        margin-top: 18px;
      }

      .arch-panel-extension-state-card.is-error {
        border-color: rgba(217, 79, 43, 0.42);
      }

      @media (max-width: 1280px) {
        .arch-panel-extension-summary-row,
        .arch-panel-extension-indicator-grid {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }
      }

      @media (max-width: 1100px) {
        .arch-panel-extension-shell-body,
        .arch-panel-extension-content-grid,
        .arch-panel-extension-status-grid,
        .arch-panel-extension-operations-grid {
          grid-template-columns: 1fr;
        }

        .arch-panel-extension-sidebar {
          display: none;
        }
      }

      @media (max-width: 780px) {
        .arch-panel-extension-shell-header,
        .arch-panel-extension-page-hero {
          flex-direction: column;
          align-items: flex-start;
        }

        .arch-panel-extension-summary-row,
        .arch-panel-extension-indicator-grid,
        .arch-panel-extension-boolean-grid,
        .arch-panel-extension-sr-hour-grid {
          grid-template-columns: 1fr;
        }

        .arch-panel-extension-state-card {
          min-height: 260px;
          padding: 26px 24px;
        }
      }

      @media (max-width: 980px) {
        .arch-panel-extension-action-dialog {
          width: min(720px, calc(100vw - 24px));
        }

        .arch-panel-extension-form-grid {
          grid-template-columns: 1fr;
        }
      }
    `;

    document.head.appendChild(style);
  }

  function applyTheme(header, functionsContainer, anchor, mount, overlay) {
    const headerStyle = window.getComputedStyle(header);
    const functionsStyle = window.getComputedStyle(functionsContainer);
    const sourceBackground = resolveBackgroundColor(header, headerStyle);
    const sourceForeground = resolveForegroundColor(
      header,
      functionsContainer,
      anchor,
      headerStyle,
      functionsStyle
    );
    const workbenchHeader = mix(sourceBackground, { r: 75, g: 51, b: 93, a: 1 }, 0.52);
    const workbenchAccent = mix(workbenchHeader, { r: 108, g: 77, b: 128, a: 1 }, 0.38);
    const focusColor = mix(sourceForeground, workbenchHeader, 0.28);
    const themeTargets = [mount, overlay].filter(Boolean);

    for (const target of themeTargets) {
      target.style.setProperty(
        "--arch-panel-bg",
        toColor(mix(sourceBackground, sourceForeground, 0.12))
      );
      target.style.setProperty(
        "--arch-panel-bg-hover",
        toColor(mix(sourceBackground, sourceForeground, 0.22))
      );
      target.style.setProperty(
        "--arch-panel-border",
        toColor(mix(sourceBackground, sourceForeground, 0.32))
      );
      target.style.setProperty("--arch-panel-fg", toColor(sourceForeground, 1));
      target.style.setProperty("--arch-panel-focus", toColor(focusColor, 0.94));
      target.style.setProperty(
        "--arch-panel-font",
        functionsStyle.fontFamily || headerStyle.fontFamily || "inherit"
      );
      target.style.setProperty("--arch-workbench-header", toColor(workbenchHeader, 1));
      target.style.setProperty("--arch-workbench-accent", toColor(workbenchAccent, 1));
    }
  }

  function resolveForegroundColor(
    header,
    functionsContainer,
    anchor,
    headerStyle,
    functionsStyle
  ) {
    const salesPlanningElement = findTextElement(header, "Sales Planning");
    const salesPlanningColor = salesPlanningElement
      ? parseColor(window.getComputedStyle(salesPlanningElement).color)
      : null;
    const functionsItemColor = findVisibleChildColor(functionsContainer);
    const userColor = anchor
      ? parseColor(window.getComputedStyle(anchor).color)
      : null;

    return (
      userColor ||
      functionsItemColor ||
      parseColor(functionsStyle.color) ||
      salesPlanningColor ||
      parseColor(headerStyle.color) || {
        r: 255,
        g: 255,
        b: 255,
        a: 1,
      }
    );
  }

  function resolveBackgroundColor(element, style) {
    const directBackground = parseColor(style.backgroundColor);

    if (directBackground && directBackground.a > 0) {
      return directBackground;
    }

    let current = element.parentElement;

    while (current) {
      const currentBackground = parseColor(
        window.getComputedStyle(current).backgroundColor
      );

      if (currentBackground && currentBackground.a > 0) {
        return currentBackground;
      }

      current = current.parentElement;
    }

    return { r: 75, g: 51, b: 93, a: 1 };
  }

  function parseColor(value) {
    if (!value || value === "transparent") {
      return null;
    }

    const rgbMatch = value.match(
      /rgba?\(\s*(\d{1,3})[\s,]+(\d{1,3})[\s,]+(\d{1,3})(?:[\s,/]+([.\d]+))?\s*\)/i
    );

    if (rgbMatch) {
      return {
        r: Number.parseInt(rgbMatch[1], 10),
        g: Number.parseInt(rgbMatch[2], 10),
        b: Number.parseInt(rgbMatch[3], 10),
        a: rgbMatch[4] === undefined ? 1 : Number.parseFloat(rgbMatch[4]),
      };
    }

    const hexMatch = value.match(/^#([\da-f]{3,8})$/i);

    if (!hexMatch) {
      return null;
    }

    const hexValue = hexMatch[1];

    if (hexValue.length === 3 || hexValue.length === 4) {
      const [r, g, b, a = "f"] = hexValue.split("");

      return {
        r: Number.parseInt(r + r, 16),
        g: Number.parseInt(g + g, 16),
        b: Number.parseInt(b + b, 16),
        a: Number.parseInt(a + a, 16) / 255,
      };
    }

    if (hexValue.length === 6 || hexValue.length === 8) {
      return {
        r: Number.parseInt(hexValue.slice(0, 2), 16),
        g: Number.parseInt(hexValue.slice(2, 4), 16),
        b: Number.parseInt(hexValue.slice(4, 6), 16),
        a:
          hexValue.length === 8
            ? Number.parseInt(hexValue.slice(6, 8), 16) / 255
            : 1,
      };
    }

    return null;
  }

  function mix(base, tint, amount) {
    const ratio = clamp(amount, 0, 1);

    return {
      r: Math.round(base.r + (tint.r - base.r) * ratio),
      g: Math.round(base.g + (tint.g - base.g) * ratio),
      b: Math.round(base.b + (tint.b - base.b) * ratio),
      a: base.a + (tint.a - base.a) * ratio,
    };
  }

  function toColor(color, alphaOverride) {
    const alpha = alphaOverride ?? color.a ?? 1;

    return `rgba(${color.r}, ${color.g}, ${color.b}, ${clamp(alpha, 0, 1)})`;
  }

  function clamp(value, min, max) {
    return Math.min(Math.max(value, min), max);
  }

  function findUserAnchor(container) {
    const selector = [
      `button[label="${USER_BUTTON_LABEL}"]`,
      `[role="button"][label="${USER_BUTTON_LABEL}"]`,
      `oj-button[label="${USER_BUTTON_LABEL}"]`,
      `button[aria-label="${USER_BUTTON_LABEL}"]`,
      `[role="button"][aria-label="${USER_BUTTON_LABEL}"]`,
      `[label="${USER_BUTTON_LABEL}"]`,
      `[aria-label="${USER_BUTTON_LABEL}"]`,
    ].join(", ");

    const directMatch = container.querySelector(selector);

    if (directMatch && isVisible(directMatch)) {
      return directMatch;
    }

    const fallbackMatch = Array.from(container.querySelectorAll("*")).find(
      (element) => {
        if (!isVisible(element) || element.closest(`#${IDS.mount}`)) {
          return false;
        }

        return (
          element.getAttribute("label") === USER_BUTTON_LABEL ||
          element.getAttribute("aria-label") === USER_BUTTON_LABEL
        );
      }
    );

    return fallbackMatch || null;
  }

  function findTextElement(container, expectedText) {
    const normalizedExpected = normalizeText(expectedText);
    const elements = Array.from(container.querySelectorAll("*"));

    return (
      elements.find((element) => {
        const text = normalizeText(element.textContent || "");

        return text && text.includes(normalizedExpected);
      }) || null
    );
  }

  function resolveInsertionTarget(container, anchor, mount) {
    const directAnchor = anchor ? getDirectChild(anchor, container) : null;
    const fallbackTarget = findFirstInsertionTarget(container, mount);
    const candidate = directAnchor || fallbackTarget;

    if (!candidate) {
      return null;
    }

    if (candidate === mount) {
      return findNextValidSibling(container, mount);
    }

    return candidate.parentElement === container ? candidate : null;
  }

  function getDirectChild(element, container) {
    let current = element;

    while (current && current.parentElement !== container) {
      current = current.parentElement;
    }

    return current && current.parentElement === container ? current : null;
  }

  function findFirstInsertionTarget(container, mount) {
    return Array.from(container.children).find((child) => child !== mount) || null;
  }

  function findNextValidSibling(container, mount) {
    let sibling = mount.nextElementSibling;

    while (sibling) {
      if (sibling.parentElement === container) {
        return sibling;
      }

      sibling = sibling.nextElementSibling;
    }

    return null;
  }

  function findVisibleChildColor(container) {
    const visibleChild = Array.from(container.querySelectorAll("*")).find(
      (element) => isVisible(element) && !element.closest(`#${IDS.mount}`)
    );

    return visibleChild
      ? parseColor(window.getComputedStyle(visibleChild).color)
      : null;
  }

  function extractArray(value, candidateKeys = []) {
    if (Array.isArray(value)) {
      return value;
    }

    if (!value || typeof value !== "object") {
      return [];
    }

    for (const key of candidateKeys) {
      if (Array.isArray(value[key])) {
        return value[key];
      }
    }

    for (const nestedValue of Object.values(value)) {
      if (Array.isArray(nestedValue)) {
        return nestedValue;
      }

      if (nestedValue && typeof nestedValue === "object") {
        const nestedArray = extractArray(nestedValue, candidateKeys);

        if (nestedArray.length > 0) {
          return nestedArray;
        }
      }
    }

    return [];
  }

  async function mapWithConcurrency(items, concurrency, mapper) {
    const results = new Array(items.length);
    let nextIndex = 0;

    async function worker() {
      while (nextIndex < items.length) {
        const currentIndex = nextIndex;
        nextIndex += 1;
        results[currentIndex] = await mapper(items[currentIndex], currentIndex);
      }
    }

    const workerCount = Math.min(concurrency, items.length || 1);
    await Promise.all(Array.from({ length: workerCount }, () => worker()));

    return results;
  }

  function getStoredTheme() {
    try {
      const storedTheme = window.localStorage.getItem(STORAGE_KEYS.theme);

      return storedTheme === "dark" ? "dark" : "light";
    } catch {
      return "light";
    }
  }

  function setStoredTheme(theme) {
    try {
      window.localStorage.setItem(STORAGE_KEYS.theme, theme);
    } catch {
      // Ignore storage issues and keep the in-memory theme.
    }
  }

  function getStoredSidebarCollapsed() {
    try {
      return window.localStorage.getItem(STORAGE_KEYS.sidebarCollapsed) === "true";
    } catch {
      return false;
    }
  }

  function setStoredSidebarCollapsed(value) {
    try {
      window.localStorage.setItem(STORAGE_KEYS.sidebarCollapsed, String(Boolean(value)));
    } catch {
      // Ignore storage issues and keep the in-memory state.
    }
  }

  function normalizeText(value) {
    return String(value || "").replace(/\s+/g, " ").trim();
  }

  function cleanString(value) {
    return normalizeText(value);
  }

  function firstNonEmptyString(values) {
    for (const value of values) {
      const normalized = cleanString(value);

      if (normalized) {
        return normalized;
      }
    }

    return "";
  }

  function extractAuthHeaders(tokenPayload) {
    if (!tokenPayload) {
      return {};
    }

    if (typeof tokenPayload === "string") {
      return {
        authorization: `Bearer ${tokenPayload}`,
      };
    }

    const tokenSources = [
      tokenPayload,
      tokenPayload?.token,
      tokenPayload?.tokens,
      tokenPayload?.oauth,
      tokenPayload?.oauthToken,
      tokenPayload?.authentication,
      tokenPayload?.auth,
    ].filter(Boolean);
    const headers = {};
    const explicitHeaderSources = [
      tokenPayload?.headers,
      tokenPayload?.requestHeaders,
      tokenPayload?.authHeaders,
    ].filter((value) => value && typeof value === "object");

    for (const explicitHeaderSource of explicitHeaderSources) {
      for (const [key, value] of Object.entries(explicitHeaderSource)) {
        const normalizedKey = cleanString(key).toLowerCase();
        const normalizedValue = cleanString(value);

        if (!normalizedKey || !normalizedValue) {
          continue;
        }

        headers[normalizedKey] = normalizedValue;
      }
    }

    for (const tokenSource of tokenSources) {
      const tokenType =
        firstNonEmptyString([
          tokenSource?.tokenType,
          tokenSource?.type,
          tokenSource?.token_type,
        ]) || "Bearer";
      const accessToken = firstNonEmptyString([
        tokenSource?.accessToken,
        tokenSource?.access_token,
        tokenSource?.token,
        tokenSource?.jwt,
      ]);
      const idToken = firstNonEmptyString([
        tokenSource?.idToken,
        tokenSource?.id_token,
      ]);

      if (accessToken && !headers.authorization) {
        headers.authorization = `${tokenType} ${accessToken}`;
      }

      if (idToken && !headers["x-id-token"]) {
        headers["x-id-token"] = idToken;
      }
    }

    return headers;
  }

  function normalizeString(value) {
    return normalizeText(value).toUpperCase();
  }

  function toBridgeRequestUrl(url) {
    const normalized = cleanString(url);

    if (!normalized) {
      return normalized;
    }

    try {
      const parsedUrl = new URL(normalized, window.location.origin);

      if (parsedUrl.origin === window.location.origin) {
        return `${parsedUrl.pathname}${parsedUrl.search}${parsedUrl.hash}`;
      }

      return parsedUrl.toString();
    } catch {
      return normalized;
    }
  }

  function toNumber(value) {
    if (typeof value === "number" && Number.isFinite(value)) {
      return value;
    }

    const numeric = Number.parseFloat(String(value ?? "").replace(/,/g, ""));
    return Number.isFinite(numeric) ? numeric : 0;
  }

  function toIsoDateString(value) {
    const normalized = cleanString(value);

    if (!normalized) {
      return "";
    }

    const date = new Date(`${normalized}T12:00:00.000Z`);

    return Number.isNaN(date.getTime()) ? normalized : date.toISOString();
  }

  function isVisible(element) {
    const style = window.getComputedStyle(element);
    const rect = element.getBoundingClientRect();

    return (
      style.display !== "none" &&
      style.visibility !== "hidden" &&
      Number.parseFloat(style.opacity || "1") > 0 &&
      rect.width > 0 &&
      rect.height > 0
    );
  }

  function formatWholeNumber(value) {
    return new Intl.NumberFormat("en-US", {
      maximumFractionDigits: 0,
    }).format(value);
  }

  function formatCurrency(value) {
    return new Intl.NumberFormat("en-US", {
      style: "currency",
      currency: "USD",
      maximumFractionDigits: 0,
    }).format(value || 0);
  }

  function formatHours(value) {
    return new Intl.NumberFormat("pt-BR", {
      maximumFractionDigits: 2,
    }).format(toNumber(value));
  }

  function formatWeekNumber(value) {
    return String(toNumber(value)).padStart(2, "0");
  }

  function formatOperationalWeekLabel(weekInfo) {
    if (!weekInfo) {
      return "";
    }

    return `FY${formatWeekNumber(weekInfo.fiscalYear % 100)}-Q${
      weekInfo.quarter
    }-W${formatWeekNumber(weekInfo.weekNumber)}`;
  }

  function formatPercent(value) {
    return new Intl.NumberFormat("en-US", {
      maximumFractionDigits: 1,
    }).format(value || 0) + "%";
  }

  function formatProgressPercent(value) {
    return new Intl.NumberFormat("en-US", {
      maximumFractionDigits: 0,
    }).format(value || 0) + "%";
  }

  function formatRelativeMoment(value) {
    if (!value) {
      return "-";
    }

    const target = new Date(value);

    if (Number.isNaN(target.getTime())) {
      return String(value);
    }

    let remaining = Math.max(Date.now() - target.getTime(), 0);
    const day = 24 * 60 * 60 * 1000;
    const hour = 60 * 60 * 1000;
    const minute = 60 * 1000;
    const second = 1000;
    const days = Math.floor(remaining / day);
    remaining -= days * day;
    const hours = Math.floor(remaining / hour);
    remaining -= hours * hour;
    const minutes = Math.floor(remaining / minute);
    remaining -= minutes * minute;
    const seconds = Math.floor(remaining / second);

    return `${days}d ${hours}h ${minutes}m ${seconds}s`;
  }

  function formatDate(value) {
    if (!value) {
      return "";
    }

    const date = parseDatePreservingDateOnly(value);

    if (Number.isNaN(date.getTime())) {
      return String(value);
    }

    return new Intl.DateTimeFormat("en-US", {
      dateStyle: "medium",
    }).format(date);
  }

  function formatDateTime(value) {
    if (!value) {
      return "";
    }

    const date = new Date(value);

    if (Number.isNaN(date.getTime())) {
      return String(value);
    }

    return new Intl.DateTimeFormat("en-US", {
      dateStyle: "medium",
      timeStyle: "short",
    }).format(date);
  }

  function getLocalDateKey(value) {
    if (!value) {
      return "";
    }

    const date = parseDatePreservingDateOnly(value);

    if (Number.isNaN(date.getTime())) {
      return "";
    }

    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, "0");
    const day = String(date.getDate()).padStart(2, "0");

    return `${year}-${month}-${day}`;
  }

  function getOperationalWeekInfo(value) {
    const date = parseDatePreservingDateOnly(value);

    if (Number.isNaN(date.getTime())) {
      return null;
    }

    const operationalYearStart = new Date(date.getFullYear(), 5, 1);

    if (date < operationalYearStart) {
      operationalYearStart.setFullYear(operationalYearStart.getFullYear() - 1);
    }

    const normalizedDate = new Date(
      date.getFullYear(),
      date.getMonth(),
      date.getDate()
    );
    const normalizedStart = new Date(
      operationalYearStart.getFullYear(),
      operationalYearStart.getMonth(),
      operationalYearStart.getDate()
    );
    const daysSinceStart = Math.floor(
      (normalizedDate.getTime() - normalizedStart.getTime()) / 86400000
    );
    const monthsSinceStart =
      (normalizedDate.getFullYear() - normalizedStart.getFullYear()) * 12 +
      normalizedDate.getMonth() -
      normalizedStart.getMonth();

    return {
      fiscalYear: operationalYearStart.getFullYear() + 1,
      quarter: Math.floor(monthsSinceStart / 3) + 1,
      weekNumber: Math.floor(daysSinceStart / 7) + 1,
    };
  }

  function getCalendarRowWeekDate(rowStartDate) {
    const weekDate = new Date(rowStartDate);

    // The calendar renders rows from Sunday, but ISO week numbering starts on Monday.
    if (weekDate.getDay() === 0) {
      weekDate.setDate(weekDate.getDate() + 1);
    }

    return weekDate;
  }

  function normalizeTimeEntriesSummary(payload) {
    if (Array.isArray(payload)) {
      return payload;
    }

    const items = extractArray(payload, [
      "items",
      "data",
      "results",
      "content",
      "entries",
      "timeEntries",
      "summary",
      "summaries",
    ]);

    if (items.length) {
      return items;
    }

    if (payload && typeof payload === "object") {
      return [payload];
    }

    return [];
  }

  function groupTimeEntriesByResourceName(items) {
    const groups = new Map();

    for (const item of items) {
      const resourceName =
        getTimeEntryResourceName(item) || "Sem resourceName";
      const group = groups.get(resourceName) || {
        resourceName,
        items: [],
      };

      group.items.push(item);
      groups.set(resourceName, group);
    }

    return Array.from(groups.values()).sort((left, right) => {
      return left.resourceName.localeCompare(right.resourceName);
    });
  }

  function getTimeEntryResourceName(item) {
    const directValue = getFieldValue(item, [
      "resourceName",
      "ResourceName",
      "resource_name",
      "resource.name",
      "Resource.Name",
      "resource.displayName",
      "Resource.DisplayName",
      "resource.display_name",
      "employeeName",
      "EmployeeName",
      "personName",
      "PersonName",
    ]);

    if (directValue) {
      return cleanString(directValue);
    }

    const flattenedMatch = flattenDisplayRecord(item).find(([key, value]) => {
      return key.toLowerCase().endsWith("resourcename") && cleanString(value);
    });

    return flattenedMatch ? cleanString(flattenedMatch[1]) : "";
  }

  function getTimeEntryActivity(item) {
    return cleanString(
      getTimeEntryField(item, [
        "activityCode",
        "ActivityCode",
        "activity.code",
        "Activity.Code",
      ])
    );
  }

  function getTimeEntryTaskType(item) {
    return cleanString(
      getTimeEntryField(item, [
        "TaskType",
        "taskType",
        "task_type",
        "task.type",
        "Task.Type",
      ])
    );
  }

  function getTimeEntryTimeSpent(item) {
    return toNumber(
      getTimeEntryField(item, [
        "timeSpent",
        "TimeSpent",
        "time_spent",
        "time.spent",
        "Time.Spent",
      ])
    );
  }

  function getTimeEntryField(item, keys) {
    const directValue = getFieldValue(item, keys);

    if (directValue !== undefined && directValue !== null && directValue !== "") {
      return directValue;
    }

    const normalizedKeys = keys.map((key) => key.toLowerCase().replace(/[^a-z0-9]/g, ""));
    const flattenedMatch = flattenDisplayRecord(item).find(([key, value]) => {
      const normalizedKey = key.toLowerCase().replace(/[^a-z0-9]/g, "");

      return normalizedKeys.includes(normalizedKey) && cleanString(value);
    });

    return flattenedMatch ? flattenedMatch[1] : "";
  }

  function flattenDisplayRecord(value, prefix = "", output = []) {
    if (!value || typeof value !== "object" || Array.isArray(value)) {
      if (prefix) {
        output.push([prefix, value]);
      }

      return output;
    }

    for (const [key, nestedValue] of Object.entries(value)) {
      const nextKey = prefix ? `${prefix}.${key}` : key;

      if (
        nestedValue &&
        typeof nestedValue === "object" &&
        !Array.isArray(nestedValue)
      ) {
        flattenDisplayRecord(nestedValue, nextKey, output);
      } else {
        output.push([nextKey, nestedValue]);
      }
    }

    return output;
  }

  function formatDisplayValue(value) {
    if (value === null || value === undefined || value === "") {
      return "-";
    }

    if (Array.isArray(value) || typeof value === "object") {
      return JSON.stringify(value);
    }

    return String(value);
  }

  function parseDatePreservingDateOnly(value) {
    if (value instanceof Date) {
      return value;
    }

    if (typeof value === "string") {
      const dateOnlyMatch = value.trim().match(/^(\d{4})-(\d{2})-(\d{2})$/);

      if (dateOnlyMatch) {
        return new Date(
          Number(dateOnlyMatch[1]),
          Number(dateOnlyMatch[2]) - 1,
          Number(dateOnlyMatch[3])
        );
      }
    }

    return new Date(value);
  }

  function getErrorMessage(error) {
    if (error instanceof Error) {
      return error.message;
    }

    return "Unexpected error while fetching live data.";
  }

  function escapeHtml(value) {
    return String(value ?? "")
      .replace(/&/g, "&amp;")
      .replace(/</g, "&lt;")
      .replace(/>/g, "&gt;")
      .replace(/"/g, "&quot;")
      .replace(/'/g, "&#39;");
  }

  function lockScroll() {
    document.documentElement.classList.add(CLASSES.modalOpen);
    document.body.classList.add(CLASSES.modalOpen);
  }

  function unlockScroll() {
    document.documentElement.classList.remove(CLASSES.modalOpen);
    document.body.classList.remove(CLASSES.modalOpen);
  }

  function removeModal() {
    const overlay = document.getElementById(IDS.overlay);

    window.clearTimeout(closeTimer);
    restoreFocusTarget = null;

    if (overlay) {
      overlay.remove();
    }
  }

  function handleGlobalKeydown(event) {
    if (event.key !== "Escape") {
      return;
    }

    if (appState.actionFormModal) {
      appState.actionFormModal = null;
      renderModal();
      return;
    }

    if (appState.forecastUpdateConfirmModal) {
      appState.forecastUpdateConfirmModal = null;
      renderModal();
      return;
    }

    if (appState.rampComparisonModal) {
      appState.rampComparisonModal = null;
      renderModal();
      return;
    }

    if (appState.timeEntriesDrawer) {
      appState.timeEntriesDrawer = null;
      renderModal();
      return;
    }

    if (appState.detailModal) {
      closeDetailModal();
      renderModal();
      return;
    }

    closeModal();
  }

  function handleBridgeMessage(event) {
    if (event.source !== window) {
      return;
    }

    const message = event.data;

    if (!message || message.source !== BRIDGE.source) {
      return;
    }

    if (message.type === BRIDGE.readyType) {
      return;
    }

    if (
      message.type !== BRIDGE.resultType &&
      message.type !== BRIDGE.headersResultType
    ) {
      return;
    }

    const pending = pendingBridgeRequests.get(message.requestId);

    if (!pending) {
      return;
    }

    pendingBridgeRequests.delete(message.requestId);
    window.clearTimeout(pending.timeout);
    pending.resolve(
      message.type === BRIDGE.headersResultType ? message.headers || {} : message
    );
  }

  function observePage() {
    const observer = new MutationObserver(() => {
      scheduleSync();
    });

    observer.observe(document.documentElement, {
      childList: true,
      subtree: true,
    });
  }

  function observeHistory() {
    const { pushState, replaceState } = window.history;

    window.history.pushState = function pushStatePatched(...args) {
      const result = pushState.apply(this, args);
      scheduleSync();
      return result;
    };

    window.history.replaceState = function replaceStatePatched(...args) {
      const result = replaceState.apply(this, args);
      scheduleSync();
      return result;
    };

    window.addEventListener("popstate", scheduleSync);
    window.addEventListener("hashchange", scheduleSync);
  }

  window.addEventListener("message", handleBridgeMessage);
  document.addEventListener("keydown", handleGlobalKeydown);
  void ensurePageBridge();
  observePage();
  observeHistory();
  scheduleSync();
})();