{/* Desktop Ledger Table (≥ 768px) */}
      <div class="card desktop-only" style="display: none;">
        <div class="table-container">
          <table id="invitesTable">
            <thead>
              <tr>
                <th>Invite Code</th>
                <th>Target App / Scope</th>
                <th>Role</th>
                <th>Capacity & Usage</th>
                <th>Status</th>
                <th>Expires</th>
                <th>Actions</th>
              </tr>
            </thead>
            <tbody>
              {invites.length === 0
                ? (
                  <tr>
                    <td
                      colSpan={7}
                      style="text-align: center; color: var(--text-muted); padding: 2rem;"
                    >
                      No active or historical invite tokens found.
                    </td>
                  </tr>
                )
                : (
                  invites.map((inv) => {
                    const usesCount = inv.uses_count || 0;
                    const maxUses = inv.max_uses;
                    const isUnlimited = maxUses === null;
                    const isExhausted = !isUnlimited && usesCount >= maxUses;
                    const isExpired = new Date(inv.expires_at) < new Date();
                    const isActive = !isExhausted && !isExpired;

                    return (
                      <tr
                        key={inv.id}
                        class="invite-row"
                        data-search={`${inv.code} ${
                          inv.app_name || ""
                        } ${inv.role}`.toLowerCase()}
                      >
                        <td>
                          <code style="background: var(--surface-muted); padding: 0.25rem 0.5rem; border-radius: var(--radius-sm); font-weight: 700; font-family: monospace; color: var(--primary);">
                            {inv.code}
                          </code>
                        </td>
                        <td>
                          {inv.app_name
                            ? (
                              <strong style="color: var(--text-primary);">
                                {inv.app_name}
                              </strong>
                            )
                            : inv.role === "admin"
                            ? <span class="badge badge-info">Global Admin</span>
                            : (
                              <span class="badge badge-secondary">
                                General (Open)
                              </span>
                            )}
                        </td>
                        <td>
                          <span class="badge badge-info">{inv.role}</span>
                        </td>
                        <td>
                          <div style="min-width: 110px;">
                            {isUnlimited
                              ? (
                                <span style="font-size: 0.85rem; font-weight: 600; color: var(--primary);">
                                  {usesCount} claimed (Unlimited)
                                </span>
                              )
                              : (
                                <div>
                                  <span style="font-size: 0.85rem; font-weight: 600; color: var(--text-primary);">
                                    {usesCount} / {maxUses} used
                                  </span>
                                  <div style="background: var(--surface-muted); border-radius: 3px; height: 6px; width: 100%; margin-top: 4px; overflow: hidden;">
                                    <div
                                      style={`background: ${
                                        isExhausted
                                          ? "var(--text-muted)"
                                          : "var(--success)"
                                      }; height: 100%; width: ${
                                        Math.min(
                                          100,
                                          (usesCount / maxUses) * 100,
                                        )
                                      }%;`}
                                    />
                                  </div>
                                </div>
                              )}
                          </div>
                        </td>
                        <td>
                          {isExhausted && (
                            <span class="badge badge-secondary">Exhausted</span>
                          )}
                          {isExpired && !isExhausted && (
                            <span class="badge badge-danger">Expired</span>
                          )}
                          {isActive && (
                            <span class="badge badge-success">Active</span>
                          )}
                        </td>
                        <td style="font-size: 0.85rem; color: var(--text-secondary);">
                          {new Date(inv.expires_at).toLocaleDateString()}
                        </td>
                        <td>
                          <div style="display: flex; gap: 0.35rem; flex-wrap: wrap;">
                            {isActive && (
                              <button
                                type="button"
                                class="btn-primary"
                                style="padding: 0.25rem 0.65rem; font-size: 0.8rem; min-height: 32px;"
                                onclick={`copyInviteLink('${inv.code}')`}
                              >
                                Copy Link
                              </button>
                            )}
                            {usesCount > 0 && (
                              <button
                                type="button"
                                class="btn-outline"
                                style="padding: 0.25rem 0.65rem; font-size: 0.8rem; min-height: 32px;"
                                onclick={`showRedemptionsModal('${inv.id}', '${inv.code}')`}
                              >
                                Claimed ({usesCount})
                              </button>
                            )}
                            {isActive && (
                              <button
                                type="button"
                                class="btn-danger"
                                style="padding: 0.25rem 0.65rem; font-size: 0.8rem; min-height: 32px;"
                                onclick={`revokeInvite('${inv.id}', '${inv.code}')`}
                              >
                                Revoke
                              </button>
                            )}
                          </div>
                        </td>
                      </tr>
                    );
                  })
                )}
            </tbody>
          </table>
        </div>
      </div>

      {/* Mobile Adaptive Cards View (< 768px) */}
      <div
        id="invitesMobileDeck"
        class="mobile-only"
        style="display: flex; flex-direction: column; gap: 0.75rem;"
      >
        {invites.map((inv) => {
          const usesCount = inv.uses_count || 0;
          const maxUses = inv.max_uses;
          const isUnlimited = maxUses === null;
          const isExhausted = !isUnlimited && usesCount >= maxUses;
          const isExpired = new Date(inv.expires_at) < new Date();
          const isActive = !isExhausted && !isExpired;

          return (
            <div
              class="card invite-card"
              key={inv.id}
              data-search={`${inv.code} ${inv.app_name || ""} ${inv.role}`
                .toLowerCase()}
              style="margin-bottom: 0; padding: 1rem;"
            >
              <div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 0.5rem;">
                <div>
                  <code style="background: var(--surface-muted); padding: 0.25rem 0.5rem; border-radius: var(--radius-sm); font-weight: 700; font-family: monospace; font-size: 1rem; color: var(--primary);">
                    {inv.code}
                  </code>
                  <div style="font-size: 0.8rem; color: var(--text-muted); margin-top: 0.25rem;">
                    {inv.app_name || "Global / Open"} • Role:{" "}
                    <strong>{inv.role}</strong>
                  </div>
                </div>

                {isExhausted && (
                  <span class="badge badge-secondary">Exhausted</span>
                )}
                {isExpired && !isExhausted && (
                  <span class="badge badge-danger">Expired</span>
                )}
                {isActive && <span class="badge badge-success">Active</span>}
              </div>

              <div style="margin-bottom: 0.75rem;">
                <div style="font-size: 0.8rem; color: var(--text-secondary); display: flex; justify-content: space-between; margin-bottom: 0.25rem;">
                  <span>
                    Capacity:{" "}
                    {isUnlimited ? "Unlimited" : `${usesCount} / ${maxUses}`}
                  </span>
                  <span>
                    Expires: {new Date(inv.expires_at).toLocaleDateString()}
                  </span>
                </div>
                {!isUnlimited && (
                  <div style="background: var(--surface-muted); border-radius: 3px; height: 6px; width: 100%; overflow: hidden;">
                    <div
                      style={`background: ${
                        isExhausted ? "var(--text-muted)" : "var(--success)"
                      }; height: 100%; width: ${
                        Math.min(100, (usesCount / maxUses) * 100)
                      }%;`}
                    />
                  </div>
                )}
              </div>

              <div style="display: flex; gap: 0.5rem;">
                {isActive && (
                  <button
                    type="button"
                    class="btn-primary"
                    style="flex: 1; justify-content: center; min-height: 38px; font-size: 0.85rem;"
                    onclick={`copyInviteLink('${inv.code}')`}
                  >
                    Copy Link
                  </button>
                )}
                {usesCount > 0 && (
                  <button
                    type="button"
                    class="btn-outline"
                    style="flex: 1; justify-content: center; min-height: 38px; font-size: 0.85rem;"
                    onclick={`showRedemptionsModal('${inv.id}', '${inv.code}')`}
                  >
                    Claimed ({usesCount})
                  </button>
                )}
                {isActive && (
                  <button
                    type="button"
                    class="btn-danger"
                    style="flex: 1; justify-content: center; min-height: 38px; font-size: 0.85rem;"
                    onclick={`revokeInvite('${inv.id}', '${inv.code}')`}
                  >
                    Revoke
                  </button>
                )}
              </div>
            </div>
          );
        })}
      </div>

      {/* Redemptions Modal */}
      <div
        id="redemptions-modal"
        style="display: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,0.6); z-index: 9999; justify-content: center; align-items: center;"
      >
        <div style="background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); width: 90%; max-width: 550px; padding: 1.5rem; box-shadow: var(--shadow-lg);">
          <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem;">
            <h3 style="margin: 0; font-size: 1.1rem; color: var(--text-primary);">
              Users Claimed:{" "}
              <code id="modal-invite-code" style="color: var(--primary);">
              </code>
            </h3>
            <button
              type="button"
              onclick="closeRedemptionsModal()"
              style="background: none; border: none; font-size: 1.2rem; cursor: pointer; color: var(--text-muted);"
            >
              &times;
            </button>
          </div>

          <div
            id="modal-redemptions-content"
            style="max-height: 350px; overflow-y: auto;"
          >
            <p style="color: var(--text-muted); font-size: 0.9rem;">
              Loading claimed users...
            </p>
          </div>

          <div style="text-align: right; margin-top: 1rem;">
            <button
              type="button"
              class="btn-outline"
              onclick="closeRedemptionsModal()"
            >
              Close
            </button>
          </div>
        </div>
      </div>

      <style>
        {`
          @media (min-width: 768px) {
            .desktop-only { display: block !important; }
            .mobile-only { display: none !important; }
          }
          @media (max-width: 767px) {
            .desktop-only { display: none !important; }
            .mobile-only { display: flex !important; }
          }
        `}
      </style>

      <script
        dangerouslySetInnerHTML={{
          __html: `
          const ROLES_CATALOG = ${JSON.stringify(allRoles)};

          function updateInviteRoleOptions() {
            const appSelect = document.getElementById('inviteAppId');
            const roleSelect = document.getElementById('inviteRole');
            if (!appSelect || !roleSelect) return;

            const appId = appSelect.value;
            roleSelect.innerHTML = '';

            const available = ROLES_CATALOG.filter(r => !r.app_id || r.app_id === appId);
            if (available.length === 0) {
              const opt = document.createElement('option');
              opt.value = 'user';
              opt.textContent = 'user';
              roleSelect.appendChild(opt);
              return;
            }

            available.forEach(r => {
              const opt = document.createElement('option');
              opt.value = r.name;
              opt.textContent = r.name + (r.app_id ? ' (App Custom)' : ' (Global)');
              roleSelect.appendChild(opt);
            });
          }

          if (document.getElementById('inviteAppId')) {
            updateInviteRoleOptions();
          }

          function showNotice(msg, isError) {
            const banner = document.getElementById('status-banner');
            banner.textContent = msg;
            banner.style.display = 'block';
            banner.style.background = isError ? 'var(--danger-bg)' : 'var(--success-bg)';